Skip to main content
Glama
deenesjakoruzh
AbinashBalaraman

SkillsWebMcp

by AbinashBalaraman
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Remote

SkillsWebMcp 🌐⚡

高性能 WebMCP（W3C 草案）与 Model Context Protocol 开发者技能桥接器

SkillsWebMcp 是一个生产级的 WebMCP 和 Model Context Protocol (MCP) 桥接服务器，用于索引、管理和执行来自顶级开源工程生态系统（Anthropic、VoltAgent、Microsoft、Vercel、Google Labs、Composio 以及专业开发者套件）的 1,000+ 开发者代理技能和工具。

它将下一代 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 草案标准）：暴露 document.modelContext 和 navigator.modelContext，用于浏览器内 AI 工具执行和 DOM 自动化。

  • 🧠 智能渐进式披露：

    • 动态 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

Web 和 MCP 服务器端口

3000

NODE_ENV

环境模式（development / production）

development

APP_URL

可选的 SSE 链接公共域名覆盖

自动检测

GEMINI_API_KEY

可选 API 密钥，用于扩展 AI 执行

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 Protocol)

平台会自动在 /api/webmcp/script 注入 WebMCP polyfill。浏览器内 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