微信扫码

添加专属顾问

收藏

发布日期：2026-11-02 19:55:52 浏览次数： 1650

推荐语

这份WebMCP开发指南干货详实，帮你快速掌握适配AI智能体的网页工具构建方法。 核心内容： 1. WebMCP的定义、核心作用及相关基础术语说明 2. WebMCP为网页与AI智能体交互搭建桥梁的核心优势 3. WebMCP的核心支持能力与相关落地参考资源汇总

杨芳贤

53AI创始人/腾讯云(TVP)最具价值专家

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

  • WebMCPhttps://github.com/webmachinelearning/webmcp?tab=readme-ov-file
  • 智能体https://web.dev/articles/ai-agents?hl=zh-cn

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

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

WebMCP 提供了一套交互规则，为 Web 应用与智能体之间架起一座桥梁，从而提高了效率、可靠性和任务完成度。 网站会声明元素 (例如按钮或字段) 的用途，这样一来，智能体就能按预期使用元素，而无需通过审查来理解其用途。

这种方式比执行操作更为可靠，因为后者往往涉及多个步骤，并且每个步骤都可能被智能体以不同的方式解读。

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

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

WebMCP 支持：

  • 发现：一种标准方式，用于让网页向智能体注册工具，例如 checkout 或 filter_results。
  • JSON Schemas：明确定义输入和预期输出，以减少幻觉或误解。
  • 状态：对当前网页上下文的共同理解，以便智能体了解可用于操作的资源。

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

  • 预约演示https://googlechromelabs.github.io/webmcp-tools/demos/explainer/#compare
  • JSON Schemashttps://json-schema.org/understanding-json-schema/reference
  • GitHubhttps://github.com/webmachinelearning/webmcp

使用场景

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

  • 帮助客户获得支持。如果您向客户提供软件，则可能需要复杂的支持流程来解决各种不同的问题。您可以使用 WebMCP 帮助客服人员更快地找到正确的表单，并使用用户提供的信息填写字段。
  • 优化旅行预订。帮助智能体以更少的步骤预订复杂的多城市和多乘客行程。

某些操作可能属于敏感操作，例如进行购买。您可以添加一条命令，通过确认对话框来请求用户交互。

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

  • 填写结构化表单：构建 submit_application 工具，帮助智能体将从与用户的对话中收集的数据正确映射到表单字段。例如，您可以区分某个字段是需要全名，还是需要单独的名字和姓氏。
  • 以人为本的界面中的支持智能体交互：某些字段是为人类用户设计的，但智能体可能无法理解。您可以构建一个 date_pick 工具，以便在预约或活动预订中实现复杂的日期和时间选择。
  • 更快的应用调试：您可以在开发者设置页面上构建 run_diagnostics 工具，以便智能体能够直接调起并执行隐藏于深层嵌套菜单中的修复逻辑。

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

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

  • WebMCP Origin Trialhttps://link.gevents.cn/yC8xRH
  • 开始使用 Origin Trialhttps://developer.chrome.com/docs/web-platform/origin-trials?hl=zh-cn

本地 WebMCP

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

  • 打开 Chrome，然后前往 chrome://flags/#enable-webmcp-testing
  • 将该 Flag 设置为 Enabled
  • 重新启动 Chrome 以应用更改

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

  • Imperative API：使用标准 JavaScript 定义不同类型的工具，例如表单输入、导航工具、状态管理或其他函数。
  • Declarative API：向标准 HTML 表单添加注释以创建 WebMCP 工具。

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

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

  • Imperative APIhttps://developer.chrome.com/docs/ai/webmcp/imperative-api?hl=zh-cn
  • Declarative APIhttps://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 zaMakerhttps://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
  • GitHubhttps://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 Extensionhttps://chromewebstore.google.com/detail/model-context-tool-inspec/gbpdfapgefenggkahomfgkhfehlcenpd?hl=zh-cn

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

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

53AI，企业落地大模型首选服务商

产品：场景落地咨询+大模型应用平台+行业解决方案

承诺：免费POC验证，效果达标后再合作。零风险落地应用大模型，已交付160+中大型企业

加载中...

扫码咨询

扫码登录

登录即表示您同意《53AI网站服务协议》

服务协议

欢迎您使用【53AI 官方网站】（以下简称“本网站”或“我们”）。本《会员服务协议》（以下简称“本协议”）是您（以下简称“会员”或“用户”）与【深圳市博思协创网络科技有限公司】之间关于注册、登录及使用本网站会员服务所订立的法律协议。

在您注册或登录前，请务必审慎阅读、充分理解各条款内容，特别是免除或限制责任的条款、知识产权条款、争议解决条款等。此类条款将以加粗形式提示您注意。 当您通过微信公众号授权、手机验证码验证或其他方式成功登录本网站时，即视为您已完全理解并同意接受本协议的全部内容。

一、 定义

本网站：指由【深圳市博思协创网络科技有限公司】运营的，域名为【53ai.com】的网站及相关移动端页面。

会员服务：指本网站向注册会员提供的知识库文章查阅、内容检索及其他相关增值服务。

知识库内容：指本网站发布的包括但不限于文字、图表、数据、研究报告、行业分析等数字化内容资源。

二、 账号注册与登录

登录方式：本网站支持以下登录方式，您可根据实际情况选择：

微信公众号授权登录：您同意将您的微信OpenID信息授权给本网站，用于创建或关联会员账号。

手机验证码登录：您需提供真实有效的手机号码，并通过短信验证码完成身份验证与登录/注册。

账号安全：您的账号仅限您本人使用，禁止赠与、借用、租用、转让或售卖。因您保管不善导致的账号被盗、密码泄露等损失，由您自行承担。

实名认证：根据相关法律法规要求，我们可能要求您在特定功能下完成实名认证。如您拒绝提供，可能无法使用部分或全部服务。

未成年人保护：若您未满18周岁，请在法定监护人的陪同下阅读本协议，并在征得监护人同意后使用本服务。

三、 服务内容与规范

知识库查阅权限：会员登录后，有权按照其会员等级对应的权限范围，在线浏览、检索本网站知识库中的相关文章及内容。

服务变更：我们有权根据业务发展需要，调整、变更或终止部分服务内容，并将以网站公告、公众号消息等方式提前通知。

禁止行为：您在使用服务时不得实施以下行为：

利用技术手段批量爬取、下载、转存知识库内容；

将知识库内容用于商业目的或未经授权地向第三方传播；

干扰本网站正常运行或侵犯其他用户合法权益；

发布违法违规信息或从事违反公序良俗的活动。

四、 知识产权声明

权利归属：本网站知识库中的排版设计、软件代码等内容的知识产权均归【公司全称】或原权利人所有，受《中华人民共和国著作权法》等法律保护。

有限许可：本网站授予会员一项非独占、不可转让、不可转授权的普通许可，仅限于个人学习、研究之目的在线查阅知识库内容。

侵权追责：未经书面许可，任何单位或个人不得以任何形式复制、转载、摘编、镜像、汇编或以其他方式使用上述内容。一经发现，我们保留追究其法律责任的权利。

五、 个人信息保护

我们重视对您个人信息的保护。关于我们如何收集、使用、存储和保护您的个人信息，请单独阅读 《隐私政策》。

您通过微信公众号授权或手机号验证所提供的信息，我们将严格按照《个人信息保护法》的规定处理，仅用于身份识别、服务提供及安全验证等必要用途。

您可以随时通过网站设置或联系客服行使查阅、更正、删除个人信息及撤回授权同意的权利。

六、 免责声明

内容准确性：知识库内容仅供参考，不构成专业建议。我们不对其完整性、准确性、时效性作任何明示或暗示的保证，您应自行判断并承担使用风险。

不可抗力：因自然灾害、政策法规变化、网络故障、第三方平台接口异常（如微信接口维护、运营商短信通道故障）等不可抗力导致的服务中断或延迟，我们不承担违约责任。

第三方链接：本网站可能包含指向第三方网站的链接，该等网站的内容和服务不受我们控制，请您自行甄别风险。

七、 违约责任

如您违反本协议约定，我们有权视情节采取警告、限制功能、暂停服务、注销账号等措施，并保留要求赔偿损失的权利。

如因您的违约行为导致我们遭受行政处罚、第三方索赔或商誉损失，您应承担全部赔偿责任（包括但不限于罚款、赔偿金、律师费、公证费等）。

八、 法律适用与争议解决

本协议的订立、执行和解释均适用中华人民共和国大陆地区法律。

因本协议产生的或与本协议有关的任何争议，双方应友好协商解决；协商不成的，任何一方均可向【公司所在地】有管辖权的人民法院提起诉讼。

九、 其他

本协议构成双方就本服务达成的完整协议，取代此前任何口头或书面约定。

本协议任一条款被认定为无效或不可执行的，不影响其他条款的效力。

我们对本协议享有最终解释权，并在法律允许的范围内保留随时修改的权利。修改后的协议一经公布即生效，继续使用服务即视为同意修订内容。