如果你关注 AI 的发展，可能会发现：让 AI 自动订机票、买日用品或者填表，往往是一件非常痛苦的事情。现有的 AI 代理通常需要“阅读”庞大杂乱的网页代码（HTML），或者通过网页截图来猜测按钮在哪里，这导致它们的操作既缓慢又容易出错。

为了解决这个问题，近期，由 Google Chrome 团队大力推动的一项名为 Web MCP（Web Model Context Protocol） 的技术规范正式进入 W3C 社区组草案阶段，并且已率先在 Chrome 浏览器预览版中提供了实验性支持。这项脱胎于服务器端 MCP 协议的新技术，正原生延伸到浏览器和网页前端，即将彻底改变互联网的交互方式。

什么是 Web MCP？

简单来说，Web MCP 允许网站直接向 AI“亮出底牌”。它让网站能够在网页代码中直接声明自己具备哪些功能（工具），供 AI 直接调用。

过去，若想让 AI 精准操作业务系统，开发者需要额外搭建和维护一个复杂的后端 MCP 服务器。但现在，Web MCP 将这些工具直接嵌入到网页本身中。当 AI 访问网站时，它不再需要像人类一样去寻找“提交”按钮，而是直接使用网站提供的“标准接口”来完成任务。

为什么 Web MCP 是一项“杀手级”创新？

1. 消除 UI 不确定性，实现 API 级的精准执行 这是 Web MCP 要解决的核心痛点。大多数网站是设计给人类看的，充满了视觉噪音。传统的 AI 代理因为需要猜测 UI 元素（比如 DOM 结构变化、按钮被弹窗遮挡），经常会导致操作失败。有了 Web MCP，AI 可以直接通过结构化的数据（Schema）调用注册好的工具，让网页操作变得像调用 API 一样确定和精准。

2. 数量级的 Token 成本暴降与速度提升 传统的网页 AI 代理需要把动辄几万 Token 的 HTML 源码喂给模型，或者不断截取高分辨率网页图片让模型做视觉分析，成本极其高昂且延迟极高。Web MCP 直接向 AI 传递精简的 JSON Schema，省去了繁重的视觉解析过程。这能将 AI 处理网页的 Token 消耗和延迟降低几个数量级，几秒钟就能完成复杂的表单操作。

3. 极其聪明的“上下文按需加载” 这是 Web MCP 最受开发者称赞的特性之一。传统的 API 或 MCP 服务器往往会一次性把所有工具扔给 AI，容易让模型产生幻觉。Web MCP 支持动态加载：当 AI 停留在“航班搜索页”时，网站只提供“搜索航班”的工具；页面跳转到“搜索结果页”时，旧工具自动注销，加载“设置筛选条件”等新工具。这种上下文感知的机制，是扩展 AI 长尾能力的关键。

4. 自然语言的魔力，超越传统 UI 传统 UI 在处理批量任务时非常繁琐。想象一下，如果你要在传统的生鲜应用上实现“把上周买过的蔬菜再买一遍”或者“添加做鸡汤所需的所有食材”，开发者需要构建极其复杂的标签、筛选和购物车关联系统。但有了 Web MCP，AI 可以直接理解“鸡汤”包含哪些食材，并瞬间调用现成的“添加商品”工具，将鸡肉、胡萝卜、洋葱等直接加入购物车。你无需设计复杂的 UI，自然语言就是最好的界面，AI 能在后台瞬间完成这些跨越多个 UI 组件的繁杂操作。

5. 保留平台控制权，提升用户体验 很多公司最终关闭或限制公共 API（如 Twitter、Reddit），是因为他们希望用户留在自己的平台上，以提供完整的体验或进行商业变现（如展示广告、追加销售）。Web MCP 并没有脱离网站，它只是为访问网站的 AI 提供了一个“无障碍通道”。用户（或代表用户的 AI）依然是在访问网站本身，这让平台能够在拥抱 AI 的同时，保留对自身生态的控制权。

开发者如何低成本接入？

Web MCP 的另一个巨大优势是开发成本极低，完全不需要重写现有的业务后端逻辑。现代浏览器提供了两种接入方式：

声明式（Declarative）—— 适合静态表单 如果有一个静态的联系页面，只需在现有的 HTML <form> 和 <input> 标签上添加特定属性。浏览器会自动生成 AI 能看懂的结构。

<form tool-name="submit_contact" tool-description="Submit a contact request to support">
  <input type="text" name="username" tool-param-description="The user's full name">
  <button type="submit">发送</button>
</form>

命令式（Imperative）—— 适合现代复杂应用 对于 React、Vue 等复杂的单页应用（SPA），可以使用最新的 JavaScript API。可以将工具的注册动作与前端组件生命周期绑定，组件渲染时加载，销毁时注销。

// 命令式 Web MCP 示例：注册航班预订工具
navigator.modelContext.registerTool({
  name: "book_flight",
  description: "Book a flight using current search criteria",
  schema: {
    type: "object",
    properties: {
      flightId: { type: "string", description: "The unique ID of the flight" },
      passengerCount: { type: "number" }
    },
    required: ["flightId"]
  },
  handler: async (params) => {
    // 直接触发前端已有的预订逻辑，无需 AI 去点击按钮
    return await executeBookingAction(params.flightId, params.passengerCount);
  }
});

安全可控的交互状态（人类审核机制） 除了让 AI 自动填表，Web MCP 还支持向人类用户提供明确的视觉反馈。开发者可以通过监听特定的事件（如 agent-invoked）来判断当前是否是 AI 在操作。不仅可以将成功或报错的信息直接反馈给 AI，还可以使用专属的 CSS 类（如 .tool-form-active），在 AI 自动填写表单但尚未提交时，在网页上弹出一个类似“请仔细检查并确认（Please review and confirm）”的提示框。这极大地增加了 AI 替人办事时的透明度和安全性。

迫不及待想试试？

目前 Web MCP 还处于早期预览阶段，如果想作为开发者抢先体验，只需以下三步：

1. 下载最新版的 Chrome Beta 或 Canary 浏览器。
2. 在地址栏输入 chrome://flags，搜索并开启 Web MCP 或 Model Context Protocol 相关实验性选项。
3. 安装名为 Model Context Tool Inspector 的 Chrome 扩展程序。它不仅为你提供了一个专属的控制台来查看当前网页暴露了哪些工具， 还能让你直接在浏览器里像聊天一样，测试这些工具是否生效。

展望未来：重塑 Web 与 AI 的生态

跨应用的无缝协作即将成为可能。想象一下未来的“无头（Headless）”AI 代理模式：一个指令下达后，AI 可以在后台自动打开日历查看日程，然后无缝跳转到生鲜网站调用 Web MCP 工具购买食材，在不同应用之间自由穿梭并传递数据。

Web MCP 就像是给古老的 HTML 加上了“适配 AI”的魔法属性。就像多年前网站为了适配手机而采用“响应式设计”一样，现在，让网站“对 AI 友好（AI-Ready）”的时代已经真正到来了。