在 2024 年底Anthropic 推出了MCP (Model Context Protocol)试图为 AI 模型与外部数据源之间构建一条“通用数据总线”。然而对于广大的前端开发者和 Web 生态来说传统的 MCP 更多是在后端或桌面端发力。2025 年初由 Google 和 Microsoft 工程师联合发起的WebMCP提案正式进入 W3C Web 机器学习社区组WebML CG的视野。它标志着 AI 智能体Agent正式获得了与 Web 页面进行“结构化对话”的官方绿卡。本文将为你深度拆解 WebMCP 的前世今生、核心机制以及它将如何重塑前端开发者的技能图谱。一、 为什么我们需要 WebMCP在 WebMCP 出现之前AI 智能体访问网页的方式极其原始。1.1 “脆弱”的旧世界屏幕抓取Screen Scraping现在的 AI 智能体如各种浏览器助手通常通过解析 DOM 树、截图并发送给多模态模型来“理解”网页。痛点网页结构稍有变动如 CSS 类名修改智能体就会“迷路”成本频繁截图和发送长文本 DOM 导致 Token 消耗巨大响应延迟高权限智能体很难在复杂的认证环境下如登录后的 Session稳定工作。1.2 MCP 的局限性虽然 Anthropic 的 MCP 解决了数据接入的标准问题但它主要是为Server-to-Server场景设计的。如果你想让 AI 访问你当前打开的购物页面并执行“加入购物车”在传统 MCP 下你需要搭建一套后端代理逻辑还要处理复杂的跨域和身份同步。1.3 WebMCPAI 的“浏览器原住民”方案WebMCP 的核心思想是让网页自己告诉浏览器和智能体它能做什么。它将网页抽象为两个层人类层Human Layer传统的 HTML/CSS/JS供人类视觉交互。机器层Machine Layer由 WebMCP 定义的结构化工具契约供 AI 直接调用。二、 什么是 WebMCPWebMCP (Web Model Context Protocol)是一个正在标准化的浏览器原生 API目前已在 Chrome 146 Canary 版本中作为早期预览版提供。它允许开发者直接在前端代码中定义“工具Tools”这些工具可以被智能体发现浏览器能通过特定的 API 告诉 AI“这个页面可以查询库存、可以提交表单”。被智能体调用AI 不需要模拟点击而是直接以 JSON 参数调用网页暴露的 JavaScript 函数。共享上下文由于工具运行在页面运行环境下它们天然拥有当前的登录状态、Cookie 和内存状态。三、 WebMCP 的核心架构与机制WebMCP 引入了一个全新的全局对象navigator.modelContext。3.1 两个核心组件宿主Host/ 智能体Agent通常是浏览器内置的 AI如 Gemini Nano或侧边栏助手。页面Web Page充当“微型服务器”通过 WebMCP 接口提供工具、资源和提示词Prompts。3.2 两种实现路径为了让不同难度的项目都能接入WebMCP 设计了两种 API 模式A. 声明式 APIDeclarative API —— 低代码接入如果你的页面已经有现成的 HTML 表单你只需要添加几个属性它就能变身 AI 工具。form toolnamesearch_flights tooldescription查询往返航班信息 input nameorigin typetext placeholder出发地 required input namedestination typetext placeholder目的地 required button typesubmit搜索/button /form浏览器会自动解析这个表单生成一个 AI 能够读懂的 JSON Schema。当 AI 需要查询航班时它会向浏览器发送请求浏览器代为填充表单并提交。B. 命令式 APIImperative API —— 深度集成对于复杂的逻辑你可以直接注册 JavaScript 函数// 注册一个查询天气工具 navigator.modelContext.registerTool( get_weather, 获取指定位置的当前天气情况, { location: { type: string, description: 城市名 } }, async (args) { const data await fetchWeather(args.location); return { content: [{ type: text, text: 当前温度${data.temp}度 }] }; } );四、 动手实践如何体验 WebMCP目前WebMCP 处于快速演进阶段。想要尝鲜的开发者可以通过以下方式4.1 开启浏览器支持下载Chrome Canary(版本号 146);进入chrome://flags;搜索并启用#experimental-web-platform-features或#webmcp-test-api具体名称随版本波动建议查看 W3C 最新文档。4.2 使用现有的库如果你不想等浏览器原生普及可以使用 Jason McGhee 维护的 WebMCP 开源库。它通过一个轻量级的 WebSocket 桥接方案让你现在就能在普通浏览器里体验“页面即 MCP Server”的效果。代码示例使用 WebMCP SDKimport { WebMCP } from webmcp-sdk; const mcp new WebMCP(); // 暴露一个添加待办事项的方法给 AI mcp.registerTool(add_todo, 在当前页面添加一条任务, { text: { type: string } }, (args) { window.myTodoApp.addItem(args.text); return 已成功添加任务; });五、 WebMCP 的核心价值为什么开发者要关注对于内卷严重的 AI 赛道WebMCP 提供了几个降本增效的杀手锏5.1 隐私与安全端侧处理国内政企客户对数据出域非常敏感。WebMCP 的工具是在用户本地浏览器中执行的。AI 智能体调用的是本地函数敏感数据如用户当前的 Session 信息不需要发送到云端。这符合“数据不出域”的合规大趋势。5.2 AI 时代的 SEO从“被看到”到“被调用”过去我们做 SEO 是为了让百度/谷歌抓取我们的关键词。在 AI 时代SEO 将进化为“Agent Optimization”。通过 WebMCP 声明工具你的网站将变成一个“可编程的节点”。当用户问 AI“帮我订一张去北京的票”AI 会直接调用你网页暴露的book_ticket工具而不是带用户去搜链接。5.3 跨平台一致性WebMCP 磨平了不同 AI 平台Gemini, Claude, GPT-4o-tools与不同前端框架Vue, React, Svelte之间的鸿沟。你只需要写一套registerTool任何支持 WebMCP 的 AI 助手都能无缝使用。六、 最新动态与未来展望6.1 W3C 标准化进程2025 年 2 月W3C WebML 社区组发布了最新的 WebMCP 草案。Intel、Google 和 Microsoft 正在推动将navigator.modelContext固化到 Web IDL 中。这意味着它未来将像fetch或navigator.geolocation一样成为 Web 开发的基础设施。6.2 框架集目前React 和 Next.js 的社区已经出现了针对 WebMCP 的自定义 Hook如useWebMCPTool。// 假设的未来用法 useWebMCPTool(checkout, (cart) { // AI 触发结账逻辑 }, schema);6.3 商业机会AI 插件的终结者以往我们为了给 AI 提供能力需要写 Chrome Extension。WebMCP 普及后网站本身就是插件。只要用户打开你的网页AI 就能立刻学会在该网页内操作。这对 SaaS 类产品、电商和企业内部工具是巨大的利好。七、 结语WebMCP 不仅仅是一个 API它代表了“Agentic Web智能体化 Web”的到来。作为一个资深开发者现在开始在你的项目中尝试 WebMCP意味着你正在为你的网站准备一张进入“机器友好型互联网”的入场券。不要再让你的 AI 智能体去辛苦地“抠”DOM 树了给它一个标准的接口让它像调用函数一样调用你的业务逻辑。参考资源W3C WebMCP 草案 (webmachinelearning.github.io/webmcp)Codely: What is WebMCP and how to use itThe New Stack: Control AI Agents with JS作者注如果你对 WebMCP 的安全性如权限确认弹窗或具体的 React 封装感兴趣欢迎在评论区留言交流