SkillsWebMcp 🌐⚡

Высокопроизводительный мост WebMCP (черновик W3C) и Model Context Protocol для навыков разработчика

SkillsWebMcp — это производственный WebMCP и Model Context Protocol (MCP) мостовой сервер, который индексирует, управляет и выполняет более 1000 навыков и инструментов агентов-разработчиков из ведущих экосистем открытого исходного кода (Anthropic, VoltAgent, Microsoft, Vercel, Google Labs, Composio и специализированных наборов для разработчиков).

Он приносит стандарт вызова инструментов агента нового поколения WebMCP непосредственно веб-клиентам, одновременно предоставляя нативный мост MCP JSON-RPC для IDE (Claude Desktop, Cursor IDE, Windsurf, Zed).

✨ Возможности

• ⚡ Двойная архитектура MCP и WebMCP:

  • Model Context Protocol (MCP): Полный JSON-RPC 2.0 Server-Sent Events (/api/mcp/sse) и конечная точка HTTP-сообщений (/api/mcp/message).

  • WebMCP (стандарт W3C Draft): Предоставляет document.modelContext и navigator.modelContext для выполнения ИИ-инструментов в браузере и автоматизации DOM.

• 🧠 Интеллектуальное прогрессивное раскрытие:

  • Динамический Top-20 (рекомендуется): Загружает легковесный мета-инструмент (search_and_load_agent_skills), который позволяет модели динамически искать и монтировать инструменты в память по требованию. Экономит 98.4% контекстных токенов.

  • Выборочная категория: Монтирует только инструменты из конкретной инженерной области (например, TypeScript и архитектура, Безопасность и тестирование, ИИ и LLM).

  • Полный каталог: Предоставляет все зарегистрированные инструменты для моделей с большим контекстом.

• 🔌 Интеграция с клиентом в один клик:

  • Предварительно сгенерированные фрагменты конфигурации для Claude Desktop, Cursor IDE, Windsurf, Zed Editor, Continue.dev и LibreChat.

• 🔍 Живой инспектор и тестер MCP:

  • Интерактивный инспектор JSON Schema в браузере для тестирования вызовов инструментов и проверки схем параметров с журналами ответов в реальном времени.

• 🔄 Автоматический фоновый синхронизатор (24 часа):

  • Фоновый демон, который проверяет вышестоящие репозитории, обновляет определения инструментов и проверяет контракты схем.

• 🎨 Современный интерфейс разработчика:

  • Быстрая, адаптивная панель управления, созданная с помощью 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

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)

Платформа автоматически внедряет полифилл WebMCP по адресу /api/webmcp/script. Расширения и агенты ИИ в браузере могут обнаруживать и выполнять инструменты с помощью стандартного 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 эндпоинты

📄 Лицензия

Этот проект выпущен под лицензией MIT.