WebMCP 让 React 应用可以直接向 AI agent 暴露结构化的工具 API，用可靠且独立于 UI 的调用取代了脆弱的 UI 抓取（UI-scraping）。该功能目前在 Chrome 149 及更高版本的 origin trial 中可用，你可以通过 chrome://flags/#enable-webmcp-testing 开启它。
教导 Agent 点击所面临的问题
目前大多数让 AI agent 与网页交互的尝试都依赖于视觉线索。Agent 解析 DOM，猜测哪个元素是按钮，模拟点击、滚动并填写表单字段。一旦按钮移动、标签更改或布局微调，脚本就会失效。这种方法很慢，因为它需要等待浏览器渲染每一步，而且一次常规的重新设计就可能破坏整个自动化流水线。
WebMCP 颠覆了这一模式
WebMCP 是由 Google Chrome 推出的一种全新的 Web 标准。它不再为 Agent 提供一个供其探索的视觉表面，而是让页面宣告一组“工具（tools）”——即页面可以执行的具名、类型化的操作。AI agent 首先会询问“有哪些可用工具？”，页面会返回一个列表，例如 “searchProducts” 或 “checkout”。随后，Agent 通过发送与工具声明的输入 schema 相匹配的 JSON 负载来调用工具，例如 searchProducts(query: "jacket")。浏览器将请求直接路由到页面的 JavaScript，由其运行底层逻辑，无需任何 UI 参与。
其结果是交互变得即时，且无论 CSS 如何变化都能正常工作，只要工具定义保持稳定，功能就一直有效。
对开发者而言至关重要的优势
- 速度 – 通信保留在浏览器的消息系统中，消除了渲染点击并等待页面更新的往返开销。
- 可靠性 – 工具调用的函数与网站自身 UI 使用的函数相同，因此重新设计不会破坏 API。
- 控制力 – 开发者可以决定暴露哪些操作、它们接受哪些参数，以及 Agent 在响应中可以看到什么。
- UI 独立性 – 样式、布局或组件重构不再影响 Agent 调用功能的能力。
WebMCP 并不取代服务器端使用的现有 MCP (Message-Channel-Protocol)。MCP 继续处理繁重的数据获取和后端编排，而 WebMCP 则处理标签页内的实时交互。
React 开发者如何开始
React 代码可以使用命令式的 JavaScript API 或声明式的基于 HTML 表单的 API 来注册工具。一种常见的模式是将注册过程封装在自定义 Hook 中：
- 调用注册函数，传入工具名称和简短描述。
- 提供一个输入 schema（例如描述必填字段的 JSON schema）。
- 提供一个
execute回调函数来运行现有的业务逻辑——这通常与按钮点击触发的函数相同。
当 Hook 运行时，浏览器会将该工具添加到页面的 WebMCP manifest 中。发现该 manifest 的 AI agent 随后即可调用该工具，而无需触碰 DOM。
由于注册发生在组件挂载（mount）时，工具可以限定在特定的路由或功能标志（feature flags）范围内，从而让团队能够精细控制 AI 在生产环境与测试环境中的行为。
注意事项与观察点
WebMCP 目前仍处于 origin trial 阶段。它仅在 Chrome 149+ 版本中有效，且必须通过 flag 手动开启。
后续步骤
Google 已向想要尝试 AI 原生 Web 体验的开发者开放了此次试用。感兴趣的人可以采取以下步骤：
- 在 Chrome 中开启 flag 并重新加载目标网站。
- 在 React 组件中添加一个简单的工具注册，并在浏览器的 devtools 中观察 manifest 是否出现。
- 测试一个 AI 客户端（例如遵循 WebMCP 协议的本地脚本）来调用工具并验证响应。
- 关注试用状态页面，以获取正式发布的相关更新。
核心要点： WebMCP 为 React 开发者提供了一种让其应用能被 AI agent 直接调用的方式，将 UI 元素转变为稳定、类型化的服务。这种转变消除了屏幕抓取（screen-scraping）带来的维护噩梦，并为通往真正的 AI 原生 Web 应用开辟了道路——前提是团队能够接受在实验性的 Chrome 环境中进行开发。