MCP-B

MCP-B 是一组围绕 W3C WebMCP 草案规范（navigator.modelContext）构建的 NPM 包，由 WebMCP-org 组织维护，以 pnpm monorepo 形式管理。其核心目标是消除网页工具与 AI Agent 之间的鸿沟——任何网站只需引入 @mcp-b/global，即可通过标准 API 注册 AI 可调用工具，无需搭建后端服务。

项目采用分层架构：底层 @mcp-b/webmcp-polyfill 实现标准接口的浏览器端 polyfill（原生支持时自动降级为 no-op），中层 @mcp-b/webmcp-ts-sdk 提供 TypeScript SDK 适配，上层 @mcp-b/global 聚合 polyfill 与 MCP bridge，将浏览器端工具桥接为完整 MCP Server（支持 prompts、resources、sampling、elicitation）。传输层支持 postMessage（跨 iframe/标签页）、WebSocket（通过 Local Relay 转发至桌面客户端）和 Chrome Extension 三种通道，使同一套注册工具可被浏览器内外的不同 AI Agent 发现与调用。

React 开发者可选择 @mcp-b/react-webmcp（完整 runtime hooks）或 usewebmcp（严格 core 轻量 hooks）。浏览器工具链方面，项目还提供 Chrome Extension API 工具包、Chrome DevTools MCP Server（CDP 控制）、Smart DOM Reader（token 高效 DOM 提取）等实用组件。TypeScript 支持涵盖完整类型定义、as const schema 自动推断以及可选 Zod 集成。部署方式灵活，支持 npm 安装和零构建 <script> 标签 IIFE 引入。

核心 API#

// 注册工具
navigator.modelContext.registerTool({
  name: 'add_todo',
  description: 'Add a new todo item',
  inputSchema: {
    type: 'object',
    properties: { title: { type: 'string' }, done: { type: 'boolean' } },
    required: ['title'],
  } as const,
  execute: async (args) => ({ id: Date.now(), title: args.title }),
});

快速开始#

# 完整 runtime
pnpm add @mcp-b/global

# 仅 polyfill
pnpm add @mcp-b/webmcp-polyfill

# React hooks
pnpm add @mcp-b/react-webmcp zod

零构建引入：

<script src="https://unpkg.com/@mcp-b/global/dist/index.iife.js"></script>
<script>
  navigator.modelContext.registerTool({ /* ... */ });
</script>

桌面客户端配置#

{
  "mcpServers": {
    "webmcp-local-relay": {
      "command": "npx",
      "args": ["-y", "@mcp-b/webmcp-local-relay@latest"]
    }
  }
}

包清单#