告别截图识屏，WebMCP 开启智能 Agent 网页交互新纪元

在 AI 技术日新月异的今天，你是否观察过 AI 浏览器是如何与网页互动的？一直以来，大多数 AI Agent 都在用一种笨拙的方式：给网页截图，然后丢给视觉模型去猜哪里可以点击，这种方式不仅慢，而且经常出错。现在，Google 和 W3C 社区正联手推出一项变革性技术 WebMCP，旨在终结这种低效的猜谜游戏。

什么是 WebMCP

WebMCP 的全称是 Web Model Context Protocol（网页模型上下文协议）。简单来说，它是一套让网站能够直接与 AI 模型“对话”的标准协议。以前是 Agent 费力地看像素识别按钮，现在有了 WebMCP，你的网站可以主动告诉 Agent：我这里有哪些工具，你需要提供什么参数，我能帮你完成什么任务。

WebMCP 的实现原理：从“视觉识别”到“结构化交互”

WebMCP 的核心理念是将网站抽象为一组能力（Capabilities）。

在传统的模式下，Agent 像人眼一样看 UI，如果你的提交按钮移动了几个像素，Agent 可能就找不到它了。而 WebMCP 改变了这种游戏规则，它利用结构化数据取代了屏幕抓取。

1. 直接通信：WebMCP 允许网站直接向 AI 暴露其功能，而不是通过解析复杂的 DOM 树或截图。
2. 浏览器中介：浏览器在其中充当安全中介，通过新的 navigator.modelContext 对象管理 Agent 与网页的交互。
3. 高性能表现：由于 WebMCP 使用轻量级的 JSON 架构而不是高分辨率图像，其计算开销降低了约 67%，任务准确率提升到了 98% 左右。

WebMCP 使用教程：如何让你的网站 Agent-Ready

如果你想让自己的网站支持 WebMCP，目前主要有两种路径：声明式和命令式。

1. 声明式 API（HTML 方式）

这是最简单的方式，适合标准的 HTML 表单。你只需要在现有的 <form> 标签中添加几个属性即可。

• 步骤：在表单中加入 toolname 和 tooldescription 属性。
• 代码示例：

  <form toolname="book_flight" tooldescription="预订航班工具">
    <input name="origin" type="text" toolparamdescription="出发城市">
    <input name="destination" type="text" toolparamdescription="到达城市">
    <button type="submit">搜索</button>
  </form>
  

• 交互逻辑：当 Agent 调用这个工具时，它会触发 SubmitEvent.agentInvoked 事件，你的后端可以据此判断请求是由机器还是人类发出的。

2. 命令式 API（JavaScript 方式）

对于需要多步工作流的复杂应用，可以使用 JavaScript API 进行深度集成。

• 步骤：调用 navigator.modelContext.registerTool() 方法。
• 代码示例：

  navigator.modelContext.registerTool({
    name: 'add_to_cart',
    description: '将商品添加到购物车',
    inputSchema: {
      type: 'object',
      properties: {
        productId: { type: 'string' },
        quantity: { type: 'number' }
      }
    },
    execute: async (args) => {
      // 执行你的添加购物车逻辑
      return { success: true };
    }
  });
  

• 优势：这种方式不需要 AI 重新登录或绕过安全头，因为它直接在用户的当前会话中运行。

3. 快速接入库

你也可以直接引入开源的 WebMCP JavaScript 库。只需在页面中添加 <script src="webmcp.js"></script>，它就会在页面右下角生成一个微型挂件，方便用户连接并授权 Agent 使用你注册的工具。

WebMCP 的典型使用场景

WebMCP 的出现，让很多复杂的线上操作变得异常简单：

• 电子商务：用户只需对 Agent 说一句“帮我买两张下周去上海的最便宜的机票”，Agent 就能通过 WebMCP 自动搜索、过滤并填充预订信息。
• 客户支持：Agent 可以调用 WebMCP 注册的工具，自动抓取用户的技术细节并填写支持工单，减少沟通成本。
• 数据查询：通过 provideContext() 和资源注册功能，Agent 可以直接读取页面上的结构化数据（如当前库存、订单状态），而无需重新解析 HTML。

总结与展望

WebMCP 不仅仅是一个技术标准，它更像是一种“为 Agent 设计的 SEO”。在不久的将来，网站是否拥有高质量的 WebMCP 工具描述和架构设计，将决定它能否在智能 Agent 的决策链条中占据一席之地。

目前，WebMCP 已经在 Chrome 146 版本中开启早期预览（EPP）。虽然它还处于早期阶段，但这种从像素识别到结构化对话的转变，无疑是构建智能网页生态的关键一步。如果你也是开发者，不妨现在就开始尝试在你的项目中集成 WebMCP，让你的网站在 AI 时代领先一步。