WebMCP：AI Agent 不用再「装人类」浏览网页了
⚠️ 免责声明：本文所有信息均来源于互联网公开资料，仅供参考学习之用。技术信息可能随时更新，请以官方文档为准。
💣 WebMCP：谷歌在 Chrome 146 中埋下的一颗炸弹
AI Agent 不用再「装人类」浏览网页了
微软 × 谷歌联手 · W3C 标准提案 · Token 节省 89%
📌 TL;DR 一分钟速览
✦ WebMCP 是微软和谷歌联合推动的 W3C 新标准提案
✦ 让网站可以通过 navigator.modelContext API 暴露结构化工具给 AI Agent
✦ 相比截屏式交互，Token 消耗最多可节省 89%
✦ 核心哲学：Agent 是辅助，不是替代（Human in the loop）
✦ Chrome 146 已上线早期预览版，需通过 flag 开启
2025 年的 AI Agent 赛道，正在经历一场「静悄悄的革命」。Google 在 Chrome 146 中悄悄上线了 WebMCP 的早期预览版，而微软几乎同时在 Edge 上推进类似方案。两大浏览器巨头史无前例地「联手」，目标只有一个——让 AI Agent 像调用 API 一样优雅地与网页交互。
✦ ✦ ✦
一 痛点：AI Agent 的「视力问题」
你有没有想过，现在的 AI Agent 是怎么「看」网页的？
答案可能会让你大跌眼镜：它们基本上是「瞎子摸象」。
"Coding agents face a fundamental problem: they are not able to see what the code they generate actually does when it runs in the browser. They're effectively programming with a blindfold on."
「AI 编程 Agent 面临一个根本性问题：它们无法看到自己生成的代码在浏览器中实际运行的效果。它们基本上是蒙着眼睛在写代码。」
—— Google Chrome DevTools 团队
目前主流的 AI Agent 与网页交互，通常有三种「笨办法」：
❌ 传统方案一：截屏 + 视觉理解
给 AI 一张网页截图，让它「看图说话」。
问题：一张 1512×982 的截图要消耗 ~2000 个 Token，而且经常「看不准」。
❌ 传统方案二：DOM 解析
把整个 HTML 扔给 AI，让它自己找元素。
问题：现代网页动辄几十 KB 的 HTML，Token 消耗爆炸，而且结构复杂难以理解。
❌ 传统方案三：浏览器自动化（Puppeteer/Playwright）
模拟真人点击、输入、滚动。
问题：需要服务端部署，无法复用前端业务逻辑，而且容易被反爬。
这就好比：
"You wouldn't ask a blind person to navigate a maze by describing the walls to them every second."
「你不会让一个盲人通过每秒给他描述墙壁位置来走迷宫吧。」
WebMCP 的出现，就是要给 AI Agent「装上眼睛」——不，准确说是给它一张完整的地图。
✦ ✦ ✦
二 WebMCP 是什么？一句话解释
💡 一句话定义：
WebMCP 是一个 W3C 提案中的 JavaScript API，让网站开发者可以把前端功能「打包」成结构化的「工具」（Tools），暴露给 AI Agent 直接调用。
"WebMCP turns your website's JavaScript functions into AI-callable tools. Register a function once, and any MCP-compatible AI client can discover and invoke it."
「WebMCP 把你网站的 JavaScript 函数变成 AI 可调用的工具。注册一次函数，任何兼容 MCP 的 AI 客户端都能发现并调用它。」
—— MCP-B 官方文档
🔧 核心概念拆解
把 WebMCP 想象成一个「网站功能菜单」：
1 网站开发者：把「加入购物车」「搜索商品」「提交表单」等功能注册成 Tools
2 浏览器：作为中间人，管理这些 Tools 的注册和权限
3 AI Agent：拿到「菜单」，直接调用需要的功能，不用再「假装人类」去点按钮
💻 代码长什么样？
注册一个 WebMCP 工具只需要几行代码：
import '@mcp-b/global';
navigator.modelContext.registerTool({
name: 'add_to_cart',
description: 'Add a product to shopping cart',
inputSchema: {
type: 'object',
properties: {
productId: { type: 'string' },
quantity: { type: 'number' }
}
},
async handler(args) {
// 复用已有的前端业务逻辑
return await cartService.addItem(args);
}
});
✅ 关键点：这比传统的服务端 MCP 方案简单太多了——不需要单独写后端服务，直接复用前端代码！
✦ ✦ ✦
三 两种接入方式：命令式 vs 声明式
WebMCP 提供了两种接入方式，满足不同场景的需求：
方式 A：命令式 API（Imperative）
📝 适合场景
✦ 需要精细控制的复杂交互
✦ 动态注册/注销工具
✦ 老练的开发者做精细控制
方式 B：声明式 API（Declarative）
📝 适合场景
✦ 通过标注 HTML 表单元素，让 Agent 自动理解页面上的交互能力
✦ 简单的网站用声明式快速接入
✦ 灵活度拉满，适合轻量级场景
✅ 好消息：两种方式可以混用。老练的开发者用命令式做精细控制，简单的网站用声明式快速接入。
Kyle Pflug（微软 Edge Web 平台产品经理）也确认：
"We expect some websites will use both WebMCP and traditional MCP servers simultaneously, as the two approaches serve different scenarios."
「我们预计一些网站会同时使用 WebMCP 和传统 MCP 服务器，因为两者服务的场景不同：WebMCP 适合有用户在场的浏览器场景，传统 MCP 适合无头的服务端场景。」
✦ ✦ ✦
四 人与 AI：核心设计哲学
WebMCP 的设计哲学有一条非常明确的红线：
Agent 是辅助，不是替代。
官方文档列了几条原则：
✦ 网页的人类界面仍然是主体，WebMCP 不会替代你的 UI
✦ AI Agent 是增强而不是取代人类交互
✦ 用户对 Agent 的所有操作保持可见和可控
✦ 人和 AI 协作，而不是 AI 单干
⚠️ 所以 WebMCP 不支持 无头浏览、完全自主的 Agent 模式。如果你想做全自动爬虫，传统的 Puppeteer/Playwright 仍然是更好的选择。
这个设计决策背后的考量是：
"The use cases for WebMCP are ones in which the user is collaborating with the agent, rather than completely delegating their goal to it."
「WebMCP 的使用场景是用户与 Agent 协作，而不是把目标完全委托给它。」
—— W3C WebMCP 提案
✦ ✦ ✦
五 极其节省 Token：最高省 89%
这可能是最让开发者心动的部分了。
据实测数据，WebMCP 的结构化工具调用相比截屏式的 Agent 交互：
Token 消耗最多可节省 89%
这意味着什么？来看一组对比数据：
截屏方式 · 一张截图 ≈ 2,000 Token（按 1512×982 视口计算）
WebMCP · 一个 JSON 响应 ≈ 20-100 Token
换算一下：
原来要花 2000 个 Token 处理一张截图才能「看懂」页面，现在一个 JSON 响应 20-100 个 Token 就搞定了。
而且还有一个隐藏福利：
🎯 不需要验证截图
传统方案中，Agent 执行一个操作后，往往需要再截一张图来「验证」是否成功。WebMCP 的工具返回值直接就是确认结果，省掉了验证步骤。
一篇学术论文《webMCP: Efficient AI-Native Client-Side Interaction for Agent-Ready Web Design》的实验数据更加详细：
✦ 处理需求降低：67.6%
✦ 任务成功率：保持在 97.9%（传统方案 98.8%）
✦ 成本降低：34-63%
✦ 电商场景优化：高达 78.6%
✦ ✦ ✦
六 微软和 Google 联手：这事儿不简单
你没看错——微软和 Google 真的在 WebMCP 上联手了。
故事是这样的：
2024年11月
Anthropic 发布 MCP（Model Context Protocol）标准
2025年初
社区开发者 Jason McGhee 发布 MCP-B（浏览器端 MCP 实现）
2025年8月
微软提出「Web Model Context」，Google 提出「Script Tools」
随后
两家决定合并方案，在 W3C WebML 工作组下共同推进 WebMCP
Chrome 146
Google 悄悄上线 WebMCP 早期预览版（需通过 flag 开启）
"Like many proposals, WebMCP started as a set of independent explainers across the community. Following early discussions with the Chrome team and the W3C WebML Working Group, we agreed to move forward with a single unified WebMCP proposal at the W3C."
「像很多提案一样，WebMCP 最初是社区里一系列独立的 explainer。在与 Chrome 团队和 W3C WebML 工作组的早期讨论后，我们同意在 W3C 推进一个统一的 WebMCP 提案。」
—— Kyle Pflug, Microsoft Edge
更有意思的是，社区开发者 Alex Nahas（MCP-B 作者）也加入了 W3C 工作组：
💬 Kyle Pflug 说：
"Community projects like MCP-B are integral to development of web standards, and the overlap in use cases and technologies between ideas like MCP-B, Script Tools, and Web Model Context helps validate the need for these kinds of capabilities on the web."
「像 MCP-B 这样的社区项目是 Web 标准发展不可或缺的一部分，这些项目在用例和技术上的重叠验证了 Web 需要这些能力。」
✦ ✦ ✦
七 实际应用场景：WebMCP 能做什么？
来看几个具体的使用场景：
🛒 场景一：智能购物助手
用户对浏览器 Agent 说：「帮我找一件适合夏天婚礼的红色连衣裙，无袖，不要装饰，预算 500 元以内」
Agent 通过 WebMCP 工具直接调用电商网站的搜索、筛选、排序功能，而不是「假装人类」去点击各种按钮。
🎨 场景二：设计工具协作
用户在 Figma/Canva 这类设计平台上说：「帮我找一个春天主题的模板，白色背景，日期时间要醒目」
Agent 通过 WebMCP 调用设计工具的模板搜索、筛选工具，精准找到符合要求的模板。
🔧 场景三：开发者调试
开发者对 Claude/Cursor 说：「检查一下 web.dev 的 LCP 性能」
Agent 通过 Chrome DevTools MCP 启动浏览器、录制性能追踪、分析结果，一气呵成。
♿ 场景四：无障碍辅助
这可能是最被忽视但最有意义的场景——
WebMCP 可以为辅助技术（屏幕阅读器等）提供更高级的操作接口，让视障用户也能通过语音命令完成复杂的网页操作。
✦ ✦ ✦
八 如何体验 WebMCP？
目前有几种方式可以体验 WebMCP：
方式一：Chrome 146 原生预览
✦ 升级到 Chrome 146 或更新版本
✦ 在地址栏输入 chrome://flags
✦ 搜索 WebMCP 相关 flag 并启用
⚠️ 注意：这是早期预览版，功能可能不完整
方式二：MCP-B 扩展（推荐）
✦ 安装 MCP-B 浏览器扩展
✦ 它会为你的浏览器提供 navigator.modelContext polyfill
✦ 可以连接 Claude Desktop、Cursor、VS Code Copilot 等 MCP 客户端
方式三：Chrome DevTools MCP
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
✅ 支持的 AI 客户端：Gemini CLI、Claude Code、Cursor、GitHub Copilot、VS Code 等
✦ ✦ ✦
九 开发者接入 Checklist
如果你是网站开发者，想要接入 WebMCP，这里是一份快速检查清单：
📋 接入前检查
☐ 确认你的场景是「人机协作」而非「全自动」
☐ 梳理出需要暴露给 Agent 的核心功能
☐ 确保这些功能已有前端 JavaScript 实现
🔧 开发中检查
☐ 安装 @mcp-b/global 或 @mcp-b/react-webmcp
☐ 为每个工具编写清晰的 description
☐ 定义完整的 inputSchema（类型、必填项、约束）
☐ 实现 handler 函数，复用已有业务逻辑
🧪 测试检查
☐ 使用 MCP-B 扩展在本地测试
☐ 连接 Claude Desktop 或 Cursor 验证工具发现
☐ 测试工具调用的返回值是否符合预期
✦ ✦ ✦
🎯 写在最后
WebMCP 的出现标志着 AI Agent 与 Web 的交互方式正在发生根本性变化。
从「假装人类」到「原生对话」，这是一个范式转移。
💡 一个预测：未来，网站可能需要像现在为 SEO 优化一样，为 Agent 兼容性做优化。WebMCP 可能会成为下一代「网站必备能力」。
📚 参考来源：
1. W3C WebMCP 提案 - Web Machine Learning Community Group
2. The New Stack - How WebMCP Lets Developers Control AI Agents With JavaScript
3. Google Chrome DevTools MCP 官方文档
4. MCP-B 官方文档
5. WebMCP 学术论文 - ResearchGate
6. W3C WebML CG 会议记录
参考原文信息列表：
1. https://developer.chrome.com/docs/ai/join-epp
2. https://github.com/webmachinelearning/webmcp
3. https://docs.mcp-b.ai/introduction
4. https://thenewstack.io/how-webmcp-lets-developers-control-ai-agents-with-javascript/
5. https://developer.chrome.com/blog/chrome-devtools-mcp
6. https://github.com/ChromeDevTools/chrome-devtools-mcp
7. https://github.com/WebMCP-org/chrome-devtools-quickstart
8. https://www.w3.org/2025/09/18-webmachinelearning-minutes.html
9. https://www.w3.org/2025/10/02-webmachinelearning-minutes.html
10. https://www.researchgate.net/publication/394472408_webMCP_Efficient_AI-Native_Client-Side_Interaction_for_Agent-Ready_Web_Design
11. https://github.com/MCP-B
12. https://www.npmjs.com/package/@mcp-b/chrome-devtools-mcp
✨
— END —