WebMCP 把工具注册表搬进浏览器标签页，AI 智能体可直接调用网页功能

核心洞察

WebMCPWeb Model Context Protocol（Web模型上下文协议），由谷歌和微软工程师联合开发、通过W3C Web机器学习社区组孵化的网页标准提案，允许网站通过浏览器API向AI代理暴露结构化、可调用的工具。 最让我意外的地方在于它把"工具注册表"塞进了浏览器标签页里，而不是后端服务器。这意味着网页本身就能直接跟 AI 智能体对话，不需要中间层。不过我有点怀疑：现在还在早期预览阶段，要开 flag 才能用，真正落地还得等一阵子。

---

WebMCP 是一种浏览器原生 JavaScript API。网页可以用它把客户端功能以结构化的"工具"形式公开给 AI 智能体、浏览器助理和辅助技术。

重要提示：WebMCP 目前在基于 Chromium 的浏览器（比如 Chrome 和 Edge）上处于早期预览版阶段。需要 Chromium 146.0.7672.0 或更高版本，并且要开启 #enable-webmcp-testing 标志。

关键区别：WebMCP 完全在浏览器标签页的客户端运行。它不是后端服务器，不使用 HTTP、服务器发送事件 (SSE) 或 stdio 传输。网页本身就是工具注册表。

目前 WebMCP 仅支持工具。后端 Model Context Protocol 里的"资源"和"提示"基元，它还不支持。

核心结论

1. WebMCP 是浏览器原生 JavaScript API，工具注册表运行在浏览器标签页的客户端，而非后端服务器，不使用 HTTP、SSE 或 stdio 传输。
2. WebMCP 目前处于早期预览阶段，仅在基于 Chromium 的浏览器（Chrome、Edge）上可用，需要 Chromium 146.0.7672.0 或更高版本，并开启 #enable-webmcp-testing 标志。
3. WebMCP 当前仅支持"工具"这一基元，不支持后端 Model Context Protocol 中的"资源"和"提示"。
4. WebMCP 提供两种 API 形式：命令式 document.modelContext.registerTool() 和声明式 HTML <form> 注解（toolname、tooldescription）；React、Angular、Vue 均需通过对应框架封装使用，不应在组件中直接调用 registerTool()。
5. 使用 WebMCP 时应遵循原子化、可组合的工具设计，在页面转换时用 AbortSignal 取消注册工具，并避免用于无防护的高风险操作或超动态状态场景。

简要概览

• 命令式 API：用 document.modelContext.registerTool() 处理复杂逻辑和动态互动。
• 声明式 API：给标准 HTML <form> 元素加上 toolname 和 tooldescription 注解，就能把它变成工具。
• 框架（必需）：React 用 use-webmcp-tool 里的 useWebMCP。Angular 用 @angular/core 里的 provideExperimentalWebMcpTools/declareExperimentalWebMcpTool。Vue 用 @vueuse/core 里的 useWebMCP。不要从组件里直接调 registerTool()。

最佳做法

• 命名和语义：用具体动词描述确切行为（比如 create-event 和 start-event-creation-process）。优先正面描述，别列一堆限制。
• 说明：讲清楚工具做什么、什么时候用。别重复参数名、类型、枚举值、默认值或限制，智能体已经在输入架构（你的 inputSchema，或者浏览器根据表单控件构建的架构）里拿到这些了。把这些细节放进架构，在该参数自己的说明里解释不明显的值。
• 架构设计：接受原始用户输入，别让智能体做数学运算或计算。所有参数都要有具体类型，并说明选项的用途。
• 可靠性：在代码里验证约束条件，返回描述性错误方便重试。妥善处理速率限制。确保函数在界面状态更新之后返回，保持一致性。
• 工具策略：工具应该原子化、可组合、彼此独立。别硬塞流程控制指令（"不要在 A 之后调用 B"），让智能体自己判断。根据当前页面上下文动态注册或取消注册工具。不修改状态的工具，在 execute 之后加上 annotations: { readOnlyHint: true }，告诉智能体可以安全执行。
• 清理：页面转换或资源释放时，务必用 AbortSignal 取消注册工具，避免泄漏和冲突。别用 unregisterTool。
• Web 开发最佳实践：WebMCP 工具在浏览器标签页里作为客户端 JavaScript 运行。它们必须遵循常规 Web 开发最佳实践，比如别在客户端代码里放敏感信息、通过安全 API 层访问后端数据库、用 Web Worker、WASM 或 WebGPU 处理繁重计算。

不建议使用 WebMCP 的情况

• 无防护措施的高风险操作：避免用自动提交工具执行破坏性或不可逆的操作（比如删除数据），除非界面要求在智能体控制范围之外进行手动用户确认。
• 超动态状态：数据变化速度快过智能体反应速度时，智能体可能用到过时的上下文。

反模式和警告（请勿这样做）

• 请勿使用后端传输。WebMCP 适用于浏览器标签页，不适用于 Node.js 后台进程。
• 请勿包含资源或提示。当前的 WebMCP 规范不支持这些功能。
• 请勿忽略 inputSchema 结构。务必为每个参数提供清晰说明，最大限度减少智能体幻觉。
• 请勿在安全上下文 (HTTPS) 之外使用。

实现状态

WebMCP 目前在基于 Chromium 的浏览器（比如 Chrome、Edge）中处于早期预览版阶段：

• 当前状态：早期预览版。
• 所需版本：Chromium 146.0.7672.0 或更高版本。
• 启用：需要开启标志 chrome://flags/#enable-webmcp-testing 或 edge://flags/#enable-webmcp-testing。
• 规范：不断演进的社区群组规范草案，尚未成为标准跟踪建议。

常见问题（FAQ）

WebMCP 和 MCP 有什么区别？

WebMCP 是浏览器原生 JavaScript API，完全在标签页客户端运行，网页本身就是工具注册表，不使用 HTTP、SSE 或 stdio 传输。后端 MCP 支持资源、提示和工具三种基元，而 WebMCP 目前仅支持工具基元。

WebMCP 现在能直接用在生产环境吗？

还不能。WebMCP 目前是 Chromium 浏览器（Chrome、Edge）的早期预览版，需要 Chromium 146.0.7672.0 以上版本，并手动开启 #enable-webmcp-testing 标志，规范也仍是社区群组草案，尚未成为标准。

WebMCP 工具注册有哪些必须遵守的规则？

用具体动词命名工具，说明讲清用途而非重复参数细节；参数要有具体类型和说明；在代码里验证约束并返回描述性错误；页面转换时用 AbortSignalWeb API 接口，用于取消异步操作，在 WebMCP 中用于取消注册工具以避免资源泄漏。 取消注册；不要在客户端代码放敏感信息，且必须在 HTTPS 安全上下文中使用。