点击上方 程序员成长指北关注公众号 回复1加入高级Node交流群前言WebMCP 是一种全新的 Web 标准旨在让网站直接为 AI 代理提供可调用工具从而提升交互效率和安全性。它不取代网页而是让代理访问网站更可靠、更结构化为开发者提供渐进式增强方式让现有网站功能轻松被代理发现和调用开启网页与智能代理协作的新可能。今日前端早读课文章由 Nabors 分享飘飘编译。译文从这开始想象一下你的网站可以直接告诉访客的 ChatGPT Agent“这是我能做的事情这里是如何让我执行它的方法。”直到 2026 年 2 月 10 日之前AI 代理与网站交互只有两种方式1、视觉层面代理通过截图评估内容读取文本并推断光标在屏幕上应该移动到哪里。2、语义层面代理解析大量底层 XMLDOM、无障碍树提取数据并调用元素上的事件。这些操作可以在浏览器层面执行也可以由代理控制整个计算机系统来系统化完成。无论哪种方式都需要额外的往返请求、推理和多模态模型影响性能、成本和可靠性同时消耗大量令牌和时间而代理往往还在自己 “摸索”。WebMCP 提供了第三种更高效、更可靠的选择。网站可以将结构化工具以 JavaScript 函数的形式公开并附带描述和模式让代理直接调用。目前它正由 W3C Web 机器学习社区组孵化并已在 Chrome 上发布。如果你是网页开发者WebMCP 值得关注它可能会改变 “构建网站” 的定义。亚马逊的起源故事Alex Nahas 在 2025 年初 MCP 出现时是亚马逊的后端工程师。亚马逊内部有成千上万的服务他们搭建了一个庞大的 MCP 服务器相当于把所有工具都塞进了同一个上下文窗口。Alex 解释道“你必须在连接字符串里用进程命令去禁用它们。”—— 可以说这是一个相当混乱的局面。真正的问题在于 授权。MCP 规范采用了 OAuth 2.1而亚马逊内部几乎没人实现它。每个内部服务都有自己的认证方式且互不兼容 OAuth 2.1。在亚马逊所有授权都是通过统一浏览器体验管理的用户登录后可访问所有服务、仪表板和资源。Alex 想到了一个办法在浏览器中运行 MCP利用浏览器的单点登录 (SSO)、会话 Cookie 和现有身份提供者。这就是 MCP-B“B” 代表 Browser 浏览器。Alex 将 MCP TypeScript SDK 集成到客户端 JavaScript 应用中并使用postMessage构建自定义通信传输与 Chrome 扩展通信。而且效果非常好以至于不能仅限于亚马逊内部使用。从边缘项目到 W3C 标准谷歌 Chrome 和微软 Edge 的团队也在研究类似想法。Chrome 在试验 “脚本工具”Edge 也在探索同样的问题如何让代理以结构化方式与 Web 应用交互当 MCP-B 出现后他们通过 W3C 与 Alex 合作并将其命名为 WebMCP。不过名字可能会引起误解WebMCP 不是 MCP。它不遵循 JSON-RPC 规范。Alex 曾推动将完整 MCP 协议移植到浏览器但工作组不希望过于绑定原始规范。WebMCP 继承了 MCP 的 API 表面和概念模型是代理可调用的带模式的工具。它专为浏览器设计完全在客户端运行不存在 Anthropic MCP 的客户端 - 服务器模式。在 WebMCP 中网页就是 “服务器”当代理访问时启动。React 组件中用于提交表单或查询数据库的函数现在可以直接提供给代理省去了模拟点击事件和文本输入的麻烦。如果你现在在想 “Java 和 JavaScript”你不是一个人。命名确实可能造成混淆因为 WebMCP 暂无计划实现提示或资源功能仅实现 MCP 标准的 “工具” 部分。幸运的是Alex 提供了一个 polyfill可以在浏览器中运行 WebMCP API并转换为 JSON-RPC让你得到规范兼容的 MCP SDK。致命三联问题当前访问网页的代理面临一个未解决的安全问题致命三联。设想你打开两个标签页。标签页 A 是银行标签页 B 是恶意网站。浏览器代理位于两者之间获取了两个标签页的上下文并将它们视为平等。恶意标签页可能指示 Agent 从银行标签页提取路由号或者向银行标签页发送指令转账资金。这不是理论问题而是浏览器代理现有架构下的必然结果。Alex 说“如果你要用 Comet 或 Atlas你就必须接受这是一个你愿意承担的风险。”WebMCP 并不能完全消除这个问题但可以显著降低攻击面。代理不再操作截图和原始 DOM而是通过 明确的工具调用 执行操作。也就是网站特意公开的操作。你可以对工具进行哈希处理设置首次连接的引导流程并将信任范围限定在特定域名及 TTL生存时间。它是否万无一失不动态第三方工具仍可能存在提示注入问题。但从 “模型能看到并执行用户能做的任何操作包括读取 DOM” 到 “模型只能调用这些特定函数”这是显著的范围缩小可能会改变未来浏览器的设计。三种 WebMCP 工具模式Alex 构建了多个支持 WebMCP 的网站他发现 WebMCP 工具通常分为三类1、只读工具应作为平面列表公开始终可在代理上下文中访问。这是 GET 操作获取数据、读取状态。你不希望代理为了读取信息而遍历整个 UI。公开所有内容让代理查询所需数据。2、导航工具是网站的系统提示告诉代理网站的功能及信息所在位置。“这些是链接你访问时会发现更多工具。” 这是蓝图。标记为破坏性操作时它会产生可见更改 —— 页面实际导航尊重破坏性提示的代理会提醒用户。3、写入工具执行动作如填写表单、提交数据、修改内容。这里 MCP 的引导功能非常关键代理可以填写表单然后向用户展示 ——“我即将提交这些内容是否确认” 人类仍在决策环中。Alex 认为通过这三种基础工具即便是老旧的 WordPress 网站也能 “基本上变成 AI 公司”。所有功能都可以用原生 JavaScript 实现无需额外框架。为什么网络不会消失Alex 并不认为 MCP 和智能代理会取代网络。考虑使用场景许多应用不仅仅提供文本像 Figma 这样的画布应用或 Quickbooks、Shopify 这样的复杂仪表板需要可视化界面人类是主要操作方代理只起辅助作用。而其他一些应用只做数据查询和简单事务这类场景更适合把应用 “带到代理身边”。WebMCP 服务的正是第一类场景代理访问网站而不是网站去找代理。无论未来人们如何浏览网页HTML、CSS 和 JavaScript 仍然是构建兼容性应用的核心基础每个平台都可以渲染它们。交互模式可能从浏览器转向代理但底层技术不会消失。WebMCP 是对网络的渐进式增强使网站既能服务人类也能服务代理。网站会一直存在而代理需要更好的方式与它们交互。制定一个 Web 标准是实现这一目标的正确途径。我们还处于早期阶段WebMCP 仍处于早期阶段。规范正从社区孵化阶段过渡到正式草案。Chrome 在 Chromium 中已提供实验性实现需开启标志。Alex 预计官方浏览器支持将在 2026 年中后期发布。如果你现在想尝试1、Polyfill安装mcp-b/global并通过navigator.modelContext.registerTool()注册工具。它兼容任何前端工具调用框架 ——CopilotKit、AGUI、SystintUI。2、Chrome DevTools 分支Alex 维护了 Chrome DevTools 的 MCP 服务器分支可调用 WebMCP 工具这意味着 Claude Code 可以自行编写和测试 WebMCP 工具。3、标准关注 WebMCP 官方 GitHub。主席 Anssi Kostiainen 对新手非常欢迎。加入社区小组参与其中。4、文档docs.mcp-b.ai 提供 polyfill 和参考实现的完整文档。这对你意味着什么如果你开发 Web 应用WebMCP 值得关注因为它允许你定义代理如何与网站交互而不是让代理自己去猜测。它是一种主动、渐进式的增强就像给网站添加无障碍功能一样。你无需重构现有架构。核心在于你只是把已有的客户端逻辑包装一下。你的add-to-cart()函数、搜索、表单提交已经可用WebMCP 只是让它们可被代理发现和调用。无论它最终是否成为标准方向已经很明确想吸引使用 Claude 或 ChatGPT 等代理的用户的网站所有者会希望提供面向代理的层以提供最佳体验。WebMCP 是目前最严肃的尝试旨在让代理支持成为平台原生能力而不是事后补充。如何实现 WebMCP实现 WebMCP 有两种 API声明式Declarative 和 命令式Imperative。声明式 API声明式 API 的出现非常便利它让在现有网站中添加 WebMCP 变得像在表单上加几个 HTML 属性一样简单toolname必填在form上添加此属性告诉系统这是一个 WebMCP 工具并指定工具名称。例如如果表单用于发布评论可以命名为publish-comment。tooldescription必填描述该工具的功能。如果不加此属性表单不会被声明为 WebMCP 工具。toolautosubmit可选当代理填写表单时自动提交。如果没有此属性代理只会填写表单不会提交。示例表单form idlogin-form toolnamelogin tooldescription通过邮箱和密码登录应用 toolautosubmittrue label foremail邮箱/label input typeemail idemail nameemail required toolparamtitle邮箱 toolparamdescription用户邮箱地址 / /form只需添加这些属性表单即可被 WebMCP 识别。命令式 API命令式 API 允许我们通过 JavaScript 动态声明或移除 WebMCP 工具。浏览器提供navigator.modelContext.registerTool方法通过传入工具名称、描述和属性模式 (schema) 来注册工具。然后通过execute方法定义当代理调用该工具时应执行的操作。何时使用哪种 API由于 WebMCP 非常新撰写本文时仅几小时历史还没有明确的最佳实践但已有一个趋势1、每个表单都应声明为 WebMCP 工具实现成本非常低不这样做代理仍会使用网站但效果会更差2、非表单操作 **如登出可以使用命令式 API是否这类操作应设计为表单而不是普通链接这将是另一个讨论话题关于本文译者飘飘作者Nabors原文https://www.arcade.dev/blog/web-mcp-alex-nahas-interviewNode 社群我组建了一个氛围特别好的 Node.js 社群里面有很多 Node.js小伙伴如果你对Node.js学习感兴趣的话后续有计划也可以我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。 “分享、点赞、在看” 支持一波