Web MCP Hub

WebMCP中心

社区驱动的注册表 WebMCP 配置-- 代理人帮助代理人 浏览网页。

webmcp-hub.com

这个想法

WebMCP 这是向前迈出的一大步，但它要求网站采用该标准。在此之前，大多数网络都不会支持WebMCP。这就是WebMCP Hub的用武之地。

它也适用于人类。安装Chrome扩展后，这些工具将通过WebMCP API直接在浏览器中注册。任何基于AI的浏览器功能都可以无缝使用它们。

特工教书。特工们学习。每个人都受益。

先决条件

Chrome扩展程序

WebMCP是早期的浏览器API。要使用您需要的扩展：

1. Chrome Canary/Dev --版本 146.0.7672.0 或更高
2. 启用WebMCP标志 首选 chrome://flags，搜索 “用于测试的WebMCP” 并启用它

为了发展

• Node.js 20+
• Postgres数据库 一 Supabase 项目或任何Postgres实例

建筑

web-mcp-hub/
├── apps/
│   ├── web/              # Next.js 15 — Hub UI + REST API (port 3000)
│   └── extension/        # WXT Chrome Extension — injects tools via WebMCP
├── packages/
│   ├── db/               # Shared types, Zod validation, Drizzle schema + client
│   └── mcp-server/       # MCP server (stdio + HTTP) for any MCP client
└── supabase/
    └── migrations/       # SQL migrations generated by Drizzle

它是如何组合在一起的

1. apps/web 为UI和端口3000上的REST API提供服务。它通过Drizzle ORM连接到Supabase（Postgres）。
2. apps/extension 在Chrome中运行。在每个页面导航中，它都会调用hub API来检查该域是否存在配置。如果工具有 execution 元数据，它通过以下方式注册它们 navigator.modelContext.registerTool().
3. packages/mcp-server 展示5个MCP工具(lookup_config, list_configs, upload_config, update_config, vote_on_config)通过HTTP调用集线器API。它作为MCP客户端的stdio进程或HTTP服务器运行。
4. packages/db 是共享包。它导出TypeScript类型、Zod模式、Drizzle表定义和一个懒惰的Postgres客户端。扩展和MCP服务器只导入类型（不需要DB连接）。

设置

# Install dependencies
npm install

# Copy environment variables
cp .env.local.example .env.local
# Edit .env.local with your DATABASE_URL from Supabase

# Apply database migrations
npm run db:migrate

# Build all packages
npm run build

贡献配置

主要的贡献方式是为网站添加WebMCP配置。提交配置有两种方式： REST API 或 MCP服务器。两者都需要API密钥才能进行写操作。

快速入门：获取API密钥

1. 登录GitHub webmcp-hub.com （或您的本地实例）
2. 首选 设置 → 创建新的API密钥
3. 保存密钥——它以 whub_

选项1：REST API

提交一个配置 POST 请求：

curl -X POST https://webmcp-hub.com/api/configs \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer whub_your_api_key" \
  -d '{
    "domain": "example.com",
    "urlPattern": "example.com/tasks",
    "title": "Example Task Manager",
    "description": "Create, list, and delete tasks",
    "contributor": "your-github-username",
    "tags": ["productivity", "tasks"],
    "tools": [
      {
        "name": "add-task",
        "description": "Add a new task to the list",
        "inputSchema": {
          "type": "object",
          "properties": {
            "title": { "type": "string", "description": "Task title" }
          },
          "required": ["title"]
        }
      }
    ]
  }'

按ID更新现有配置：

curl -X PATCH https://webmcp-hub.com/api/configs/CONFIG_ID \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer whub_your_api_key" \
  -d '{
    "title": "Updated title",
    "tools": [ ... ]
  }'

选项2:MCP服务器

如果您使用任何MCP客户端，集线器的MCP服务器会为您提供五个工具： lookup_config, list_configs, upload_config, update_config，以及 vote_on_config.

设置 --添加到MCP客户端配置中：

{
  "mcpServers": {
    "web-mcp-hub": {
      "command": "node",
      "args": ["path/to/packages/mcp-server/dist/index.js", "--stdio"],
      "env": {
        "HUB_API_KEY": "whub_your_api_key"
      }
    }
  }
}

然后让你的AI代理贡献一个配置——它将使用 upload_config 工具自动。

配置结构

每个工具都需要 name （烤肉串格动词，例如。 search-repos), description，以及有效的JSON模式 inputSchema。可选择添加 execution 元数据，以便Chrome扩展程序可以通过CSS选择器自动运行该工具。

看 贡献.md 以获取包括执行元数据在内的完整示例。

身份验证（可选）

身份验证是可选的——所有读取端点都保持公共状态。配置后，写入端点（POST/PATCH）需要GitHub会话或API密钥。经过身份验证的读取请求也会返回您自己的未经验证的配置以及已验证的配置，因此您可以在验证前进行测试。

GitHub OAuth

1. 首选 然后单击 新建OAuth应用程序
2. 设置 授权回调URL 到 http://localhost:3000/api/auth/callback/github
3. 复制 客户端ID 和 客户端密钥 进入 .env.local:

   GITHUB_CLIENT_ID=your_client_id
   GITHUB_CLIENT_SECRET=your_client_secret
   AUTH_SECRET=$(openssl rand -base64 32)

1. 重新启动开发服务器——标题中出现“使用GitHub登录”按钮

API密钥（用于MCP服务器和Chrome扩展）

1. 通过GitHub登录 http://localhost:3000
2. 首选 设置 (/settings)并创建一个新的API密钥
3. 复制密钥并将其设置 .env.local:

   HUB_API_KEY=whub_...

1. MCP服务器将在写入请求时自动发送密钥

工具验证

所有新提交的工具均以 未验证的 并且对于默认的API和MCP响应是隐藏的。这可以保护消费者免于运行不受信任的工具定义。

运作原理

• 管理员通过向Supabase仪表板添加条目来验证各个工具 verifiedTools 配置行上的JSONB列。每个键都是一个工具名称，值是验证时工具的快照。
• 当配置更新时，已验证的工具快照会持续存在——只有快照中的工具会提供给消费者，因此更新不能默默地改变已验证工具的行为。
• 集线器UI显示验证状态：配置卡显示 “X已验证” 徽章，详细信息页面显示 已验证/未验证 表头中的芯片，每个工具卡显示一个绿色 已验证 徽章（如适用）。

查看未经验证的工具

默认情况下，列表和查找端点仅返回至少有一个经过验证的工具的配置，并且只包括经过验证的刀具快照。

经过身份验证的请求 自动将您自己的未经验证的配置与已验证的配置一起包含在内——不需要额外的参数。这使您可以在验证配置之前对其进行测试。通过 Authorization 头球

# See verified configs + your own unverified configs
curl "https://webmcp-hub.com/api/configs/lookup?domain=example.com" \
  -H "Authorization: Bearer whub_your_api_key"

Chrome扩展也支持这一点-在扩展弹出设置中粘贴您的API键，以在浏览器中查看您自己的未经验证的配置。

看 全部 来自每个人（而不仅仅是你自己）的未经证实的配置，通过 yolo=true:

# API
curl "https://webmcp-hub.com/api/configs?yolo=true"
curl "https://webmcp-hub.com/api/configs/lookup?domain=example.com&yolo=true"

这 yolo MCP服务器上也有此参数 lookup_config 和 list_configs 工具。

发展

npm run dev

这将通过Turborepo并行启动所有包：

• 中心 在 http://localhost:3000
• 扩展 在开发模式下
• MCP 服务器 处于监视模式

在Chrome中加载扩展程序

1. 请确保您使用的是Chrome 146+ chrome://flags/#enable-webmcp-testing 标志已启用
2. 导航至 chrome://extensions
3. 启用 开发者模式 （右上）
4. 点击 装载时未包装 并选择 apps/extension/.output/chrome-mv3
5. 访问任何页面——扩展弹出窗口显示是否找到匹配的配置

为了进行测试，请安装 模型上下文工具检查器 扩展以查看已注册的工具并在浏览器中对其进行测试。

API

所有端点都由端口3000上的Next.js应用程序提供服务。

MCP 服务器

MCP服务器公开了五个工具(lookup_config, list_configs, upload_config, update_config, vote_on_config)并以两种模式运行：

• 工作室 --关于MCP客户端集成（请参见 贡献配置 以上）
• 超文本传输协议 --从基于HTTP的MCP客户端的端口5001启动

看 贡献配置 设置说明和使用示例部分。

Chrome 扩展

扩展程序会根据中心检查您访问的每个页面。当匹配的配置具有以下工具时 execution 元数据，它通过以下方式将它们注册为WebMCP工具 navigator.modelContext 浏览器中的人工智能代理可以调用的API。

两种执行模式：

• 简单模式 --通过CSS选择器填充字段，可选提交，提取结果
• 多步模式 一 steps[] 一系列操作： navigate, click, fill, select, wait, extract, scroll, condition

该扩展也可作为 独立回购 如果你只需要延期。

脚本

贡献

看 贡献.md 了解有关设置项目、编码标准和PR流程的指导方针。

数据库更改

修改数据库架构时：

1. 编辑 packages/db/src/schema.ts
2. 跑 npm run db:generate 创建新的迁移文件
3. 在中查看生成的SQL supabase/migrations/
4. 提交架构更改和迁移文件