谷歌刚刚发布了一项新技术。 它将彻底改变AI代理与互联网上每个网站的交互方式。 这就是WebMCP为你带来的变革。
传统方法的困境
AI代理过去与网站互动的方式，就像一个蒙着眼睛的人在使用自动售货机。 它们依赖屏幕截图、DOM抓取和逐像素猜测。 在顺利的情况下，准确率也只有70%。
但现在，谷歌和微软刚刚发布了一个W3C标准。 它能将每个网站都转变为一个结构化的AI工具。 准确率高达98%，令牌消耗减少89%。
目前，当Claude或Chat GPT需要与网站互动时，它会怎么做？ 要么截取屏幕截图，通过视觉模型处理，消耗数千个令牌。 要么抓取DOM，试图猜测哪个按钮对应哪个功能。
没有标准协议。 没有结构化数据。 每个代理框架都在从零开始重复发明浏览器自动化的轮子。
至于身份验证？ 更是难上加难。 仅仅为了点击一个按钮，就需要独立的API密钥和OAuth流程。
WebMCP：新一代解决方案
WebMCP，全称“Web模型上下文协议”（Web Model Context Protocol）。 这是一个由谷歌和微软共同撰写的W3C社区小组标准。
它增加了一个新的浏览器原生JavaScript API：navigator.modelContext。
这个API允许任何网站直接向AI代理暴露结构化的、可调用的工具。
可以把它想象成前端的MCP。 Anthropic为后端服务器构建了MCP。 而谷歌则为浏览器构建了它。
三层架构
该架构包含三个核心组件。
- 网页：负责注册工具。
- 例如，一个旅游网站可以暴露一个航班搜索功能。
- 或者一个代码审查工具可以暴露测试运行状态。
- 浏览器：充当中间调解者。
- Chrome浏览器位于中间，负责执行权限、管理用户同意，并调解每一次工具调用。
- AI代理：如Claude、ChatGPT、Gemini。
- 它会发现可用的工具，并使用结构化的JSON输入来调用它们。
浏览器是这个架构中的信任层。
graph TD;
A[AI代理 (Claude, Gemini)] -- 1. 发现并调用工具 --> B{浏览器 (Chrome)};
B -- 2. 调解并执行 --> C[网页 (暴露的工具)];
C -- 3. 返回结果 --> B;
B -- 4. 将结果传回 --> A;
两种实现方式
WebMCP提供了两种暴露工具的方式。
1. 声明式方法
声明式方法非常简单。
只需在你现有的HTML表单上添加几个属性：
tool-name、tool-description、tool-autosubmit。
大功告成。
浏览器会自动解析你的输入字段，并生成一个JSON schema。 完全不需要JavaScript。
<form action="/search" method="get"
tool-name="flightSearch"
tool-description="Search for available flights."
tool-autosubmit>
<input name="destination" placeholder="Destination">
<input name="departureDate" type="date">
<button type="submit">Search</button>
</form>
你现有的表单，只需五行HTML属性，就能变成AI代理可调用的工具。
2. 命令式API
如果需要更精细的控制，可以使用命令式API通过JavaScript注册工具。
调用 navigator.modelContext.provideContext，并传入一个tools数组。
每个工具都需要一个名称、描述、输入schema和一个execute回调函数。
navigator.modelContext.provideContext({
tools: [{
name: 'run_tests',
description: 'Run integration tests for the current pull request.',
inputSchema: {
type: 'object',
properties: {
testSuite: { type: 'string', description: 'Name of the test suite to run.' }
}
},
execute: async (params) => {
// 这个回调函数在页面的JS上下文中运行
console.log(`Running test suite: ${params.testSuite}`);
const results = await window.myApp.runTests(params.testSuite);
return { status: 'completed', results };
}
}]
});
这个回调函数在你的页面JavaScript上下文中运行。 这意味着它可以共享用户的cookies和会话身份验证。 不再需要独立的API密钥。 代理只需调用你的函数即可。
惊人的性能提升
性能数据不言自明。 与传统的基于屏幕截图的代理相比：
- 令牌效率提升89%。
- 计算开销减少67%。
- 任务准确率从大约70%跃升至98%。
这不是渐进式的改进。 这是代理与网络交互方式的范式转变。
[!TIP] WebMCP vs. Anthropic MCP：有何不同？
重要的是要区分这两者。它们是互补的，而非竞争关系。
- MCP (Anthropic)：是后端协议，通过标准I/O上的JSON-RPC连接AI平台与服务器端工具。
- WebMCP (Google/Microsoft)：是前端协议，一个浏览器原生API，连接AI代理与客户端网页。
两者结合，构成了AI工具集成的全栈解决方案：后端与前端，服务器与浏览器。
无限的应用场景
应用场景无处不在。
- 电子商务代理：通过结构化工具进行搜索、筛选和结账。
- 代码审查看板：检查测试结果并提出修改建议。
- 设计工具：通过自然语言与AI协作。
- 任务管理器：让代理在不接触DOM的情况下添加、完成和组织任务。
现状与未来
目前，该功能已在Chrome 146 Canary版本中通过一个标志位提供。 该规范仍是W3C社区小组的草案，尚未成为正式标准。
[!WARNING] 安全问题不容忽视
规范中的安全部分仍是占位符。
- 通过工具描述进行的提示注入。
- 通过工具链实现的数据泄露。
这些都是需要切实解决方案的真实担忧。
不过，带有requestUserInteraction的“人在回路”（human-in-the-loop）API是一个坚实的开端。
WebMCP是连接AI代理与网络的缺失桥梁。 它尚未准备好用于生产环境。 但如果你正在构建由代理驱动的体验，现在就应该开始学习它。