SkillsWebMcp 🌐⚡

Puente de alto rendimiento WebMCP (borrador W3C) y Model Context Protocol para habilidades de desarrollador

SkillsWebMcp es un servidor puente de WebMCP y Model Context Protocol (MCP) de nivel de producción que indexa, gestiona y ejecuta más de 1,000 habilidades y herramientas de agentes de desarrollo de los principales ecosistemas de ingeniería de código abierto (Anthropic, VoltAgent, Microsoft, Vercel, Google Labs, Composio y suites especializadas para desarrolladores).

Lleva el estándar de llamada a herramientas de agentes en navegador de próxima generación WebMCP directamente a los clientes web, mientras que simultáneamente proporciona un puente nativo MCP JSON-RPC para IDE (Claude Desktop, Cursor IDE, Windsurf, Zed).

✨ Características

• ⚡ Arquitectura dual MCP y WebMCP:

  • Model Context Protocol (MCP): Eventos enviados por el servidor JSON-RPC 2.0 completos (/api/mcp/sse) y punto de conexión de mensajes HTTP (/api/mcp/message).

  • WebMCP (estándar de borrador W3C): Expone document.modelContext y navigator.modelContext para la ejecución de herramientas de IA en el navegador y la automatización del DOM.

• 🧠 Divulgación progresiva inteligente:

  • Top-20 dinámico (recomendado): Carga una meta-herramienta ligera (search_and_load_agent_skills) que permite al modelo buscar y montar herramientas en memoria bajo demanda. Ahorra 98.4% de tokens de contexto.

  • Categoría selectiva: Monta solo herramientas en un dominio de ingeniería específico (por ejemplo, TypeScript y Arquitectura, Seguridad y Pruebas, IA y LLMs).

  • Catálogo completo: Expone todas las herramientas registradas para modelos de contexto masivo.

• 🔌 Integración de cliente con 1 clic:

  • Fragmentos de configuración pregenerados para Claude Desktop, Cursor IDE, Windsurf, Zed Editor, Continue.dev y LibreChat.

• 🔍 Inspector y probador MCP en vivo:

  • Inspector interactivo de esquemas JSON en el navegador para probar invocaciones de herramientas y validar esquemas de parámetros con registros de respuesta en tiempo real.

• 🔄 Sincronizador automático de fondo de 24 horas:

  • Demonio en segundo plano que verifica repositorios ascendentes, actualiza definiciones de herramientas y verifica contratos de esquemas.

• 🎨 Interfaz de desarrollador moderna:

  • Panel de control rápido y receptivo construido con React 19, Tailwind CSS, Lucide Icons y transiciones Motion.

🏗️ Arquitectura

┌────────────────────────────────────────────────────────────────────────┐
│                          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                │  │
│  └──────────────────────────────────────────────────────────────────┘  │
└────────────────────────────────────────────────────────────────────────┘

🚀 Inicio rápido

Requisitos previos

• Node.js >= 18.0.0

• npm >= 9.0.0

1. Instalación

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

# Install dependencies
npm install

2. Configuración del entorno

Copie .env.example a .env:

cp .env.example .env

3. Ejecución local

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

Abra http://localhost:3000 en su navegador.

🛠️ Configuración del cliente MCP

1. Claude Desktop

Agregue esto a su 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

En Configuración → Funciones → Servidores MCP → Agregar nuevo servidor MCP:

• Nombre: skills-mcp-hub

• Tipo: sse

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

🌐 WebMCP (Protocolo W3C Web ML CG)

La plataforma inyecta automáticamente el polyfill de WebMCP en /api/webmcp/script. Las extensiones y agentes de IA en el navegador pueden descubrir y ejecutar herramientas usando JavaScript estándar:

// 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);

📦 Compilación de producción e implementación

Comando de compilación

npm run build

Esto compila el frontend de Vite en dist/ y agrupa el servidor backend independiente en dist/server.cjs.

Inicio de producción

npm start

Opciones de implementación gratuita

1. Render (servicio web de configuración cero)

• Entorno de ejecución: Node.js

• Comando de compilación: npm run build

• Comando de inicio: npm start

2. Google Cloud Run / Docker

Se puede usar un Dockerfile estándar:

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

📡 Puntos de conexión REST y MCP

📄 Licencia

Este proyecto se publica bajo la Licencia MIT.