@googledevs: 构建针对浏览器和用户AI代理优化的Web体验 WebMCP在您的UI中提供显式路径,允许…

X AI KOLs Following 工具

摘要

WebMCP是Chrome提出的一个Web标准,通过结构化工具定义使AI代理能够更可靠地与网页交互,提高任务完成准确率。

构建针对浏览器和用户AI代理优化的Web体验 🛠️ WebMCP在您的UI中提供显式路径,使代理能够以更高的可靠性执行特定站点任务。 立即开始 → https://t.co/XVVlLs89Sf https://t.co/ds0StKyNQS
查看原文
查看缓存全文

缓存时间: 2026/07/22 22:28

为浏览器和用户AI代理构建优化的Web体验 🛠️

WebMCP 在您的 UI 中提供显式路径,使代理能够以更高的可靠性执行特定于站点的任务。

开始使用 → https://t.co/XVVlLs89Sf https://t.co/ds0StKyNQS


WebMCP

来源:https://developer.chrome.com/docs/ai/webmcp?hl=ja Alexandra Klepper

发布日期:2026年5月18日,最后更新:2026年6月9日

WebMCP (https://github.com/webmachinelearning/webmcp?tab=readme-ov-file) 是一项 Web 标准提案,用于构建和发布适用于 AI 代理 (https://web.dev/articles/ai-agents?hl=ja) 的结构化工具。WebMCP 提供 JavaScript,用于给 HTML 表单元素添加注释,使代理能够与页面功能精确交互,以支持用户体验。这可以显著提升代理操作的性能和可靠性。

AI 代理是一项新技术,旨在帮助人类用户更好地完成复杂的技术任务。WebMCP 可提高代理完成任务时的准确性,并可作为渐进增强功能添加。

商品解说Web扩展Chrome状态IntentGitHub (https://github.com/webmachinelearning/webmcp)Origin TrialOrigin Trial (https://developer.chrome.com/origintrials/?hl=ja#/register_trial/4163014905550602241)查看 (https://chromestatus.com/feature/5117755740913664)测试目的 (https://groups.google.com/a/chromium.org/g/blink-dev/c/gmYffo5WOE8/m/OJxuQRP3AAAJ?hl=ja)## 为什么要使用 WebMCP

WebMCP 通过提供交互规则,弥合了 Web 应用程序与代理之间的差距,可提高效率、可靠性和任务完成度。代理无需自行查看按钮、字段等元素并理解其用途,而是由网站直接声明元素的用途,从而确保正确使用。

这比那些步骤繁多、每个步骤都可能需要代理自行解释的操作更可靠。

网站通过定义 tool,可以分享搜索、购买等明确目标。工具在网页上以可见方式执行,因此用户可以信任任务会按预期完成,同时也能保留品牌和人本设计的选择。

WebMCP 支持以下功能:

  • 检测:页面将 checkoutfilter_results 等工具注册到代理的标准方法。
  • JSON 模式 (https://json-schema.org/understanding-json-schema/reference):明确定义输入和预期输出,减少幻觉和误解。
  • 状态:当前页面上下文的共同认知。代理可以了解可实时操作的资源。

谷歌的目标是构建一个具有代理功能的浏览器可以实现并从中受益的 API,使用户能够更轻松地完成任务。您可以在 GitHub (https://github.com/webmachinelearning/webmcp) 上查看此过程。

用例

WebMCP 在 Web 上有很多用途,例如:

  • 辅助客户支持。如果您为客户提供软件,可能需要复杂的支持流程来应对各种问题。使用 WebMCP,代理可以快速导航到合适的表单,并将用户提供的信息填入字段。
  • 改进旅行预订。让代理能够以更少的步骤预订复杂的多城市、多人旅行。

购买等某些操作可能包含敏感信息。您可以包含请求用户交互的命令,例如确认对话框。

实际上,工具可以执行以下任务:

  • 填写结构化表单:创建 submit_application 工具,使代理能够将从与用户的对话中收集的数据正确映射到表单字段。例如,可以区分某个字段是需要全名,还是需要分别输入姓和名。
  • 支持代理在人本界面中的操作:某些字段是为人类用户设计的,但代理可能无法理解。可以创建 date_pick 工具,使预订或活动预约中的复杂日期时间选择成为可能。
  • 加速应用程序调试:在开发者设置页面上创建 run_diagnostics 工具,代理可以触发隐藏在嵌套菜单深处的修复程序。

没有找到用例?有关于 WebMCP 的想法想要分享?请加入早期预览计划并提供反馈。 (http://goo.gle/chrome-ai-dev-preview-join)

开始使用

从 Chrome 149 开始,参与 WebMCP Origin Trial (https://developer.chrome.com/origintrials/?hl=ja#/register_trial/4163014905550602241)。有关详细信息,请参阅如何开始使用 Origin Trial。 (https://developer.chrome.com/docs/web-platform/origin-trials?hl=ja)

本地 WebMCP

WebMCP 可用作本地开发的 Chrome 标志。

  1. 打开 Chrome,转到 chrome://flags/#enable-webmcp-testing
  2. 将标志设置为【启用】。
  3. 重新启动 Chrome 以应用更改。

使用 WebMCP API

要设置网站工具,您可以使用以下两个 API:

  • 命令式 API (https://developer.chrome.com/docs/ai/webmcp/imperative-api?hl=ja):使用标准 JavaScript 定义表单输入、导航工具、状态管理和其他函数等各种类型的工具。
  • 声明式 API (https://developer.chrome.com/docs/ai/webmcp/declarative-api?hl=ja):向标准 HTML 表单添加注释以创建 WebMCP 工具。

限制

WebMCP 旨在简化代理和人类的复杂任务,但存在一些限制。

  • 需要浏览上下文:工具调用由 JavaScript 处理,因此必须打开浏览器标签页或 WebView 以提供可见的界面和浏览器上下文。这意味着代理或辅助工具无法以无头状态调用工具。
  • 复杂界面的开销增加:如果站点非常复杂,可能需要重构或添加 JavaScript 来处理应用程序和界面状态。
  • 工具可发现性:客户端和浏览器需要直接访问站点才能检查是否存在可调用的工具。

安全性与权限

WebMCP API 受源隔离要求和权限策略两者限制。

源隔离

WebMCP 仅可在源隔离 (https://web.dev/articles/origin-agent-cluster?hl=ja#limitations) 的文档中使用。这确保文档的源在整个工具生命周期中保持稳定。

如果文档中启用了 document.domain(例如使用 Origin-Agent-Cluster: ?0 HTTP 头),则 WebMCP API 将失效。

权限策略

两个 API 都受 tools 权限策略 (https://developer.chrome.com/docs/privacy-security/permissions-policy?hl=ja) 限制。该策略默认值为 self,允许在顶层和同源上下文中注册工具,并在跨源 iframe 中禁用。

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

演示

以下是涵盖命令式和声明式两种实现的示例演示:

  • WebMCP 披萨制作器 (https://github.com/GoogleChromeLabs/webmcp-tools/tree/main/demos/pizza-maker) 使用 WebMCP 命令式 API。
  • 旅行演示 (React) (https://github.com/GoogleChromeLabs/webmcp-tools/tree/main/demos/react-flightsearch) 使用 WebMCP 命令式 API。
  • Le Petit Bistro 演示 (https://github.com/GoogleChromeLabs/webmcp-tools/tree/main/demos/french-bistro) 使用 WebMCP 声明式 API。

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

使用检查器扩展模拟代理聊天

安装 Model Context Tool Inspector Extension (https://chromewebstore.google.com/detail/model-context-tool-inspec/gbpdfapgefenggkahomfgkhfehlcenpd?hl=ja) 来试用代理,并查看 WebMCP 工具在实时演示或您自己的应用程序中的工作方式。使用自然语言提示,判断代理是否按预期与 WebMCP 工具交互。

使用此扩展,您可以:

  • 监控 WebMCP API,查看页面上注册的工具。
  • 手动调用工具以执行函数。
  • 确认 JSON 模式定义正确,浏览器能够按工具预期解析数据。
  • 查看工具返回的结构化输出或错误消息,确保其描述清晰、格式正确,以便代理理解。

使用自然语言与代理对话,并检查它能否正确识别并调用适当的 WebMCP 工具。提示默认发送至 gemini-3-flash-preview 模型。

WebMCP 目前正在讨论中,未来可能会发生变化。请尝试这些 API 并提供反馈。

  • 阅读 WebMCP 解释 (https://github.com/webmachinelearning/webmcp?tab=readme-ov-file),提出问题并参与讨论。
  • 参与 WebMCP Origin Trial (https://developer.chrome.com/origintrials/?hl=ja#/register_trial/4163014905550602241)
  • 阅读 WebMCP 最佳实践 (https://developer.chrome.com/docs/ai/webmcp/best-practices?hl=ja)。
  • 在 Chrome 状态中查看 Chrome 的实现。 (https://chromestatus.com/feature/5117755740913664)
  • 阅读 WebMCP 工具安全指南 (https://developer.chrome.com/docs/ai/webmcp/secure-tools?hl=ja) 和最佳实践 (https://developer.chrome.com/docs/ai/webmcp/best-practices?hl=ja)。
  • 加入早期预览计划 (http://goo.gle/chrome-ai-dev-preview-join),抢先体验新 API 并访问邮件列表。
  • 如果对 Chrome 的实现有反馈,请提交 Chromium 错误 (https://crbug.com/new?component=2021259)。

相似文章

ChromeDevTools/chrome-devtools-mcp

GitHub Trending (daily)

Chrome DevTools MCP 是一个开源的模型上下文协议服务器,允许 AI 编程助手(Gemini、Claude、Cursor、Copilot)控制并检查实时 Chrome 浏览器,用于自动化、调试和性能分析。它将 Chrome DevTools 与 Puppeteer 集成,为 AI 助手提供完整的浏览器检查和自动化能力。

介绍 MDN MCP 服务器

Lobsters Hottest

Mozilla 宣布了 MDN MCP 服务器,该服务器使用模型上下文协议,为 AI 编码工具提供最新的 MDN 文档和浏览器兼容性数据,从而在开发工作流中提供更准确的 Web 平台信息。