Skip to main content
Glama
deenesjakoruzh
AbinashBalaraman

SkillsWebMcp

by AbinashBalaraman
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Remote

SkillsWebMcp 🌐⚡

개발자 스킬을 위한 고성능 WebMCP (W3C 초안) 및 Model Context Protocol 브리지

SkillsWebMcp는 최고의 오픈소스 엔지니어링 생태계(Anthropic, VoltAgent, Microsoft, Vercel, Google Labs, Composio 및 전문 개발자 제품군)의 1,000개 이상의 개발자 에이전트 스킬과 도구를 인덱싱, 관리 및 실행하는 프로덕션급 WebMCP 및 Model Context Protocol (MCP) 브리지 서버입니다.

차세대 WebMCP 브라우저 내 에이전트 도구 호출 표준을 웹 클라이언트에 직접 제공하는 동시에 IDE(Claude Desktop, Cursor IDE, Windsurf, Zed)를 위한 네이티브 MCP JSON-RPC 브리지를 제공합니다.

✨ 기능

  • ⚡ 이중 MCP 및 WebMCP 아키텍처:

    • Model Context Protocol (MCP): 전체 JSON-RPC 2.0 Server-Sent Events(/api/mcp/sse) 및 HTTP 메시지 엔드포인트(/api/mcp/message).

    • WebMCP (W3C 초안 표준): 브라우저 내 AI 도구 실행 및 DOM 자동화를 위해 document.modelContext 및 navigator.modelContext를 노출합니다.

  • 🧠 지능형 점진적 공개(Progressive Disclosure):

    • 동적 Top-20 (권장): 모델이 필요에 따라 도구를 동적으로 검색하고 메모리에 마운트할 수 있는 경량 메타 도구(search_and_load_agent_skills)를 로드합니다. 컨텍스트 토큰의 98.4%를 절약합니다.

    • 선택적 카테고리: 특정 엔지니어링 도메인(예: TypeScript 및 아키텍처, 보안 및 테스팅, AI 및 LLM)의 도구만 마운트합니다.

    • 전체 카탈로그: 대규모 컨텍스트 모델을 위해 등록된 모든 도구를 노출합니다.

  • 🔌 원클릭 클라이언트 통합:

    • Claude Desktop, Cursor IDE, Windsurf, Zed Editor, Continue.dev 및 LibreChat용 사전 생성된 구성 스니펫.

  • 🔍 실시간 MCP 인스펙터 및 테스터:

    • 실시간 응답 로그와 함께 도구 호출을 테스트하고 매개변수 스키마를 검증할 수 있는 브라우저 내 대화형 JSON Schema 인스펙터.

  • 🔄 자동 24시간 백그라운드 동기화:

    • 업스트림 저장소를 확인하고 도구 정의를 업데이트하며 스키마 계약을 검증하는 백그라운드 데몬.

  • 🎨 현대적인 개발자 UI:

    • React 19, Tailwind CSS, Lucide Icons 및 Motion 전환으로 구축된 빠르고 반응형 대시보드.

🏗️ 아키텍처

┌────────────────────────────────────────────────────────────────────────┐
│                          AI Clients & Agents                           │
│  ┌────────────────┐  ┌──────────────┐  ┌───────────┐  ┌──────────────┐ │
│  │ Claude Desktop │  │  Cursor IDE  │  │ Windsurf  │  │ In-Browser   │ │
│  │ (Desktop MCP)  │  │ (Agent IDE)  │  │ (Agent)   │  │ (WebMCP W3C) │ │
│  └───────┬────────┘  └──────┬───────┘  └─────┬─────┘  └──────┬───────┘ │
└──────────┼──────────────────┼────────────────┼───────────────┼─────────┘
           │                  │                │               │
           ▼                  ▼                ▼               ▼
┌────────────────────────────────────────────────────────────────────────┐
│                        SkillsMCP Bridge Server                         │
│                                                                        │
│  ┌─────────────────────────┐            ┌────────────────────────────┐ │
│  │   MCP Server Engine     │            │       WebMCP Engine        │ │
│  │ (JSON-RPC 2.0 / SSE)    │            │ (W3C Draft JS Polyfill)    │ │
│  └───────────┬─────────────┘            └─────────────┬──────────────┘ │
│              │                                        │                │
│              ▼                                        ▼                │
│  ┌──────────────────────────────────────────────────────────────────┐  │
│  │              Progressive Disclosure & Token Manager              │  │
│  │     [Dynamic Meta Tool]  •  [Category Slice]  •  [Full Grid]     │  │
│  └──────────────────────────────────┬───────────────────────────────┘  │
│                                     │                                  │
│                                     ▼                                  │
│  ┌──────────────────────────────────────────────────────────────────┐  │
│  │                    Skills & Tools Registry                       │  │
│  │  1,000+ Developer Skills: Architecture, TypeScript, Git, AI/LLMs │  │
│  └──────────────────────────────────┬───────────────────────────────┘  │
│                                     │                                  │
│                                     ▼                                  │
│  ┌──────────────────────────────────────────────────────────────────┐  │
│  │             Automated 24h Background Synchronizer                │  │
│  └──────────────────────────────────────────────────────────────────┘  │
└────────────────────────────────────────────────────────────────────────┘

🚀 빠른 시작

사전 요구 사항

  • Node.js >= 18.0.0

  • npm >= 9.0.0

1. 설치

# Clone repository
git clone https://github.com/your-username/skills-mcp-hub.git
cd skills-mcp-hub

# Install dependencies
npm install

2. 환경 설정

.env.example을 .env로 복사합니다:

cp .env.example .env

변수

설명

기본값

PORT

웹 및 MCP 서버 포트

3000

NODE_ENV

환경 모드 (development / production)

development

APP_URL

SSE 링크용 선택적 공개 도메인 재정의

자동 감지

GEMINI_API_KEY

확장 AI 실행을 위한 선택적 API 키

none

3. 로컬 실행

# Start development server (Express + Vite with hot reload)
npm run dev

브라우저에서 http://localhost:3000을 엽니다.

🛠️ MCP 클라이언트 구성

1. Claude Desktop

claude_desktop_config.json에 다음을 추가합니다 (macOS: ~/Library/Application Support/Claude/claude_desktop_config.json, Windows: %APPDATA%\Claude\claude_desktop_config.json):

{
  "mcpServers": {
    "skills-mcp-hub": {
      "command": "npx",
      "args": ["-y", "mcp-remote-client", "http://localhost:3000/api/mcp/sse"]
    }
  }
}

2. Cursor IDE / Windsurf

설정 → 기능 → MCP 서버 → 새 MCP 서버 추가에서:

  • 이름: skills-mcp-hub

  • 유형: sse

  • URL: http://localhost:3000/api/mcp/sse

🌐 WebMCP (W3C Web ML CG 프로토콜)

플랫폼은 /api/webmcp/script에서 WebMCP 폴리필을 자동으로 주입합니다. 브라우저 내 AI 확장 프로그램과 에이전트는 표준 JavaScript를 사용하여 도구를 검색하고 실행할 수 있습니다:

// Check registered tools
const tools = await window.navigator.modelContext.getTools();
console.log(`Discovered ${tools.length} WebMCP tools`);

// Execute an active tool
const result = await window.navigator.modelContext.invoke("webmcp_search_skills_dom", {
  keyword: "TypeScript"
});
console.log(result);

📦 프로덕션 빌드 및 배포

빌드 명령

npm run build

이 명령은 Vite 프론트엔드를 dist/로 컴파일하고 독립형 백엔드 서버를 dist/server.cjs로 번들링합니다.

프로덕션 시작

npm start

무료 배포 옵션

1. Render (제로 구성 웹 서비스)

  • 런타임: Node.js

  • 빌드 명령: npm run build

  • 시작 명령: npm start

2. Google Cloud Run / Docker

표준 Dockerfile을 사용할 수 있습니다:

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

📡 REST 및 MCP 엔드포인트

메서드

엔드포인트

설명

GET

/api/mcp/sse

MCP Server-Sent Events 스트림 연결

POST

/api/mcp/message

MCP JSON-RPC 2.0 메시지 핸들러

GET

/api/skills

인덱싱된 모든 에이전트 스킬 목록 (페이지네이션)

GET

/api/skills/categories

카테고리 분류 및 메트릭 조회

POST

/api/skills/toggle

개별 스킬 활성화 또는 비활성화

GET

/api/mcp/configs

IDE용 클라이언트 구성 JSON 생성

GET

/api/webmcp/tools

WebMCP 브라우저 내 도구 검색 목록

POST

/api/webmcp/invoke

WebMCP 도구 실행 핸들러

GET

/api/sync-engine/status

백그라운드 동기화 상태 및 일정 메트릭

📄 라이선스

이 프로젝트는 MIT 라이선스로 배포됩니다.

This server cannot be installed

-
license - not tested
Not graded
quality - not tested
C
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
–Release cycle
–Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

  • SkillDB

    A registry of 5,900+ peer-authored skills any MCP agent can search and load on demand.

  • ToolAPI

    Free public MCP for AI agents — 193 tools, 44 workflows. No API key.

  • mcp-knowledge

    100+ MCP tools for AI agents: content metadata, trade intelligence, business-expertise analysis.

View all MCP Connectors

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/AbinashBalaraman/skills-webmcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server