WebMCP 开发指南｜助力开发者构建 AI 智能体

作者 / Alexandra Klepper, François Beaufort, Kasper Kulikowski

WebMCP 是一项 Web 标准提案，旨在帮助开发者为 AI 智能体构建并开放结构化工具。WebMCP 提供 JavaScript API 并能对 HTML 表单元素进行语义标注，使智能体能够确切理解如何与页面功能互动。这不仅优化了用户体验，更显著提高了智能体执行操作的性能和可靠性。

• WebMCP

  https://github.com/webmachinelearning/webmcp?tab=readme-ov-file

• 智能体

  https://web.dev/articles/ai-agents?hl=zh-cn

关键术语：智能体执行操作 (Agent actuation) 是指智能体模拟鼠标点击和文本输入等手动操作，如同真实用户一样与网站交互。这些操作既可以是点击链接或填写表单等单一任务，也可以是完成购买等复杂流程。

AI 智能体作为一项新兴技术，能协助用户完成高度复杂且技术性强的任务。WebMCP 能大幅提升智能体在执行自动化任务时的准确度，并作为一种 "渐进式增强" 无缝融入现有网页体系。

为何选择 WebMCP？

WebMCP 提供了一套交互规则，在 Web 应用与智能体之间架起桥梁，从而提高了效率、可靠性和任务完成度。网站通过声明元素（如按钮或字段）的用途，让智能体按预期使用元素，无需通过复杂的审查来推断其功能。

这种方式比单纯依赖视觉识别执行操作更为可靠，因为后者往往涉及多个步骤，且每个步骤都可能被智能体以不同方式解读，导致错误。

△ 在左侧，智能体会抓取 DOM。在右侧，智能体调用了工具。您可以在我们的预约演示中自行体验。

网站可以通过定义 tool 来分享明确的用途，例如搜索或购买。工具会在网页上以可见方式执行，让用户确信任务按预期完成，同时有助于保留品牌特色与以人为中心的交互设计。

WebMCP 支持：

• 发现：一种标准方式，用于让网页向智能体注册工具，例如 checkout 或 filter_results。

• JSON Schemas：明确定义输入和预期输出，以减少幻觉或误解。

• 状态：对当前网页上下文的共同理解，以便智能体了解可用于操作的资源。

我们的目标是构建任何具备智能体能力的浏览器都可以实现并从中受益的 API，以便您的用户更轻松地完成任务。您可以在 GitHub 上关注其进展。

• 预约演示

  https://googlechromelabs.github.io/webmcp-tools/demos/explainer/#compare

• JSON Schemas

  https://json-schema.org/understanding-json-schema/reference

• GitHub

  https://github.com/webmachinelearning/webmcp

使用场景

WebMCP 在 Web 领域的应用场景极为丰富。例如：

• 帮助客户获得支持。如果您向客户提供软件，可能需要复杂的支持流程来解决各种不同的问题。您可以使用 WebMCP 帮助客服人员更快地找到正确的表单，并使用用户提供的信息填写字段。

• 优化旅行预订。帮助智能体以更少的步骤预订复杂的多城市和多乘客行程。

对于购买等敏感操作，您可以添加一条命令，通过确认对话框来请求用户交互，确保安全。

从实际运用上讲，您的工具可以完成以下任务：

• 填写结构化表单：构建 submit_application 工具，帮助智能体将从与用户的对话中收集的数据正确映射到表单字段。例如，区分某个字段是需要全名，还是需要单独的名字和姓氏。

• 以人为本的界面中的支持智能体交互：某些字段是为人类用户设计的，但智能体可能无法理解。您可以构建一个 date_pick 工具，以便在预约或活动预订中实现复杂的日期和时间选择。

• 更快的应用调试：您可以在开发者设置页面上构建 run_diagnostics 工具，以便智能体能够直接调起并执行隐藏于深层嵌套菜单中的修复逻辑。

如果以上场景并未覆盖您的特定业务，或者您有关于 WebMCP 的创意想要分享，欢迎在 GitHub 上提出问题并参与讨论：

https://github.com/webmachinelearning/webmcp?tab=readme-ov-file

开始使用

从 Chrome 149 开始，加入 WebMCP Origin Trial。详细了解如何开始使用 Origin Trial。

• WebMCP Origin Trial

  https://link.gevents.cn/yC8xRH

• 开始使用 Origin Trial

  https://developer.chrome.com/docs/web-platform/origin-trials?hl=zh-cn

本地 WebMCP

可以通过启用 Chrome Flag 在本地进行 WebMCP 开发：

1. 打开 Chrome，然后前往 chrome://flags/#enable-webmcp-testing

2. 将该 Flag 设置为 Enabled

3. 重新启动 Chrome 以应用更改

使用 WebMCP API

您可以使用以下两种 API 来设置网站工具：

• Imperative API：使用标准 JavaScript 定义不同类型的工具，例如表单输入、导航工具、状态管理或其他函数。

• Declarative API：向标准 HTML 表单添加注释以创建 WebMCP 工具。

注意：Angular 对 WebMCP 提供实验性支持。

您可以使用 Chrome DevTools 调试 WebMCP 工具，并验证浏览器解析 JSON Schema 的方式。

• Imperative API

  https://developer.chrome.com/docs/ai/webmcp/imperative-api?hl=zh-cn

• Declarative API

  https://developer.chrome.com/docs/ai/webmcp/declarative-api?hl=zh-cn

• WebMCP 提供实验性支持

  https://angular.dev/ai/webmcp

• 调试 WebMCP 工具

  https://developer.chrome.com/docs/devtools/application/webmcp?hl=zh-cn

限制

虽然 WebMCP 旨在让智能体和人类用户更轻松地完成复杂任务，但仍存在一些限制：

• 无头浏览：虽然可以在无头 (Headless) 环境中运行 WebMCP 工具，但此 API 主要面向有人工介入的本地浏览器工作流。

• 复杂界面的改造开销：如果您的网站非常复杂，您可能需要重构或添加 JavaScript 来处理应用和界面状态。

• 工具可发现性：客户端和浏览器必须直接访问网站，才能知道该网站是否具有可调用的工具。

"权限" 策略

这两个 API 都受 tools 权限策略控制。此策略的默认值为 self，表示允许在顶层和同源上下文中注册工具，但在跨源 iframe 中则禁用此功能。

如需允许在跨源 iframe 中使用 WebMCP 工具，请向 iframe 添加 allow="tools" 属性。

• 权限策略

  https://developer.chrome.com/docs/privacy-security/permissions-policy?hl=zh-cn

演示

以下是一些涵盖 imperative 和 declarative 实现的演示示例：

• WebMCP zaMaker 使用 WebMCP Imperative API。

• Travel 演示 (React) 使用 WebMCP Imperative API。

• Le Petit Bistro 演示使用 WebMCP Declarative API。

您还可以在 GitHub 上查看和浏览演示源代码。

• WebMCP zaMaker

  https://github.com/GoogleChromeLabs/webmcp-tools/tree/main/demos/pizza-maker

• Travel 演示 (React)

  https://github.com/GoogleChromeLabs/webmcp-tools/tree/main/demos/react-flightsearch

• Le Petit Bistro 演示

  https://github.com/GoogleChromeLabs/webmcp-tools/tree/main/demos/french-bistro

• GitHub

  https://github.com/GoogleChromeLabs/webmcp-tools/tree/main/demos

模拟智能体以测试您的工具

注意：Chrome 扩展程序可以通过内容脚本查询和执行 WebMCP 工具。您可详细了解构建安全工具和智能体安全注意事项。

• 内容脚本

  https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=zh-cn

• 构建安全工具

  https://developer.chrome.com/docs/ai/webmcp/secure-tools?hl=zh-cn

• 智能体安全注意事项

  https://developer.chrome.com/docs/agents/security?hl=zh-cn

我们构建了两个 Chrome 扩展程序，可帮助您了解 WebMCP 工具在演示用例及实际应用中的运作方式。

安装示例 Agentic Chrome 扩展程序，以便使用自然语言提示检查、监控和执行 WebMCP 工具。值得注意的是，此扩展程序始终信任 WebMCP 注释、可以向智能体发出敏感操作预警。因此也解释了工具在引入注释前后可能会有不同的表现。

• 安装示例 Agentic Chrome 扩展程序

  https://github.com/GoogleChromeLabs/webmcp-extension/

默认情况下，此扩展程序使用包含 AI SDK 的轻量级 Node 服务。需要 API 密钥，且密钥存储于本地服务器上。默认情况下，您的提示会发送给 gemini-3.6-flash 模型，但您可以在扩展程序的 .env 文件中修改模型选择和 API 提供方。其中包含适用于 OpenAI、Google 和 Anthropic 的字段，或者，您也可以自定义扩展程序以使用其他提供商的模型。

此外，您也可以结合 Prompt API 调用端侧模型。此功能无需 API 密钥，并且数据会保留在您的设备上。为此，请启用 chrome://flags/#prompt-api-tool-use。

安装 Model Context Tool Inspector Extension，以便在实时演示或您自己的应用中试用智能体并了解 WebMCP 工具的运作方式。使用自然语言提示来确定智能体是否按预期与 WebMCP 工具交互。

• 安装 Model Context Tool Inspector Extension

  https://chromewebstore.google.com/detail/model-context-tool-inspec/gbpdfapgefenggkahomfgkhfehlcenpd?hl=zh-cn

如需使用 Gemini 调用您的工具，您必须拥有 API 密钥，并在扩展程序中提供该密钥。您的提示默认会发送给 gemini-3.6-flash 模型。您可以选择其他 Gemini 模型进行实验，也可以自定义扩展程序代码以使用其他提供商的模型。

注意：这些扩展程序与 Chrome 中的 Gemini 是分开的。

• Chrome 中的 Gemini

  https://blog.google/products-and-platforms/products/chrome/gemini-3-auto-browse/?hl=zh-cn

1

抢先体验 Origin Trial

扫描左方二维码或点击阅读原文，加入 WebMCP Origin Trial。申请完成后，将提交成功页面截图私信发给公众号后台，即可有机会赢取 Google 开发者好礼！

2

留言区开麦，聊聊实测反馈

欢迎在评论区分享您的 WebMCP 实战 Demo 或探索心得，我们同样会挑选深度优质反馈，送出精美周边！

*定制磁吸卡包 Magsafe 支架

*每种互动抽取 5 位获奖者

*两种活动参与方式的获奖名额不可叠加，同一微信账号限领一份礼品