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 ブラウザ内エージェントツール呼び出し標準を Web クライアントに直接提供すると同時に、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）:

    • 動的トップ 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

Web および 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（ゼロ設定 Web サービス）

  • ランタイム: 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