SkillsWebMcp 🌐⚡

Hochleistungs-WebMCP (W3C-Entwurf) & Model Context Protocol Bridge für Entwickler-Fähigkeiten

SkillsWebMcp ist ein produktionsreifer WebMCP- und Model Context Protocol (MCP)-Bridge-Server, der über 1.000+ Entwickler-Agenten-Fähigkeiten und -Tools aus führenden Open-Source-Engineering-Ökosystemen (Anthropic, VoltAgent, Microsoft, Vercel, Google Labs, Composio und spezialisierten Entwickler-Suiten) indiziert, verwaltet und ausführt.

Er bringt den nächsten Generation WebMCP-Standard für In-Browser-Agent-Tool-Aufrufe direkt zu Web-Clients und bietet gleichzeitig eine native MCP-JSON-RPC-Bridge für IDEs (Claude Desktop, Cursor IDE, Windsurf, Zed).

✨ Funktionen

• ⚡ Duale MCP- und WebMCP-Architektur:

  • Model Context Protocol (MCP): Vollständige JSON-RPC-2.0-Server-Sent-Events (/api/mcp/sse) und HTTP-Nachrichtenendpunkt (/api/mcp/message).

  • WebMCP (W3C-Entwurfsstandard): Stellt document.modelContext und navigator.modelContext für die In-Browser-KI-Toolausführung und DOM-Automatisierung bereit.

• 🧠 Intelligente progressive Offenlegung:

  • Dynamische Top-20 (empfohlen): Lädt ein leichtgewichtiges Meta-Tool (search_and_load_agent_skills), das es dem Modell ermöglicht, Tools dynamisch zu durchsuchen und bei Bedarf in den Speicher zu laden. Spart 98,4 % der Kontext-Token.

  • Selektive Kategorie: Lädt nur Tools aus einem bestimmten Engineering-Bereich (z. B. TypeScript & Architektur, Sicherheit & Tests, KI & LLMs).

  • Vollständiger Katalog: Stellt alle registrierten Tools für große Kontextmodelle bereit.

• 🔌 1-Klick-Client-Integration:

  • Vorgenerierte Konfigurationssnippets für Claude Desktop, Cursor IDE, Windsurf, Zed Editor, Continue.dev und LibreChat.

• 🔍 Live-MCP-Inspektor und -Tester:

  • Interaktiver JSON-Schema-Inspektor im Browser zum Testen von Tool-Aufrufen und Validieren von Parameterschemata mit Echtzeit-Antwortprotokollen.

• 🔄 Automatischer 24-Stunden-Hintergrund-Synchronisierer:

  • Hintergrund-Daemon, der Upstream-Repositories überprüft, Tool-Definitionen aktualisiert und Schemaverträge verifiziert.

• 🎨 Moderne Entwickler-UI:

  • Schnelles, responsives Dashboard, erstellt mit React 19, Tailwind CSS, Lucide Icons und Motion-Übergängen.

🏗️ Architektur

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

🚀 Schnellstart

Voraussetzungen

• Node.js >= 18.0.0

• npm >= 9.0.0

1. Installation

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

# Install dependencies
npm install

2. Umgebungseinrichtung

Kopieren Sie .env.example in .env:

cp .env.example .env

3. Lokales Ausführen

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

Öffnen Sie http://localhost:3000 in Ihrem Browser.

🛠️ MCP-Client-Konfiguration

1. Claude Desktop

Fügen Sie dies zu Ihrer claude_desktop_config.json hinzu (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

Unter Einstellungen → Funktionen → MCP-Server → Neuen MCP-Server hinzufügen:

• Name: skills-mcp-hub

• Typ: sse

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

🌐 WebMCP (W3C Web ML CG Protocol)

Die Plattform injiziert automatisch den WebMCP-Polyfill unter /api/webmcp/script. In-Browser-KI-Erweiterungen und -Agenten können Tools mithilfe von standardmäßigem JavaScript entdecken und ausführen:

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

📦 Produktions-Build & Bereitstellung

Build-Befehl

npm run build

Dies kompiliert das Vite-Frontend in dist/ und bündelt den eigenständigen Backend-Server in dist/server.cjs.

Produktionsstart

npm start

Kostenlose Bereitstellungsoptionen

1. Render (Null-Konfigurations-Webdienst)

• Laufzeit: Node.js

• Build-Befehl: npm run build

• Start-Befehl: npm start

2. Google Cloud Run / Docker

Ein standardmäßiges Dockerfile kann verwendet werden:

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

📡 REST- und MCP-Endpunkte

📄 Lizenz

Dieses Projekt wird unter der MIT-Lizenz veröffentlicht.