WebMCP：W3C 社区草案定义 AI Agent 与网页交互的标准协议

AI Agent（智能体）正在从实验室走向实际应用，但它们与 Web 的交互方式还停留在非常原始的阶段——要么通过截图+视觉模型来"看"网页内容，要么通过模拟鼠标点击来操作页面。这种方式不仅效率低下、容易出错，还完全依赖于页面的视觉布局，一旦网站改版就会失效。WebMCP（Web Model Context Protocol）是 W3C 于 2026 年 2 月发布的社区草案，由 Google 和 Microsoft 的工程师共同开发，旨在为 AI Agent 提供一种标准化的方式来理解和操作网页，就像 Web API 为开发者提供程序化访问一样。Chrome 146 Canary 已经支持了早期预览。

当前 AI Agent 与 Web 交互的困境

要理解 WebMCP 的价值，先来看看当前 AI Agent 访问网页的典型方式：

方式一：截图 + 视觉模型

Agent 需要在网站上查询订单状态
→ 截取网页截图
→ 将截图发送给视觉模型（GPT-4o、Claude 等）
→ 模型识别页面元素和文字
→ Agent 决定下一步操作
→ 模拟点击对应位置
→ 重复上述过程...

这种方式的问题是显而易见的：截图传输消耗大量带宽和 Token，视觉识别可能出错（特别是对小字体、动态内容），而且模拟点击的定位精度取决于屏幕分辨率和页面缩放比例。

方式二：DOM 解析 + 元素操作

Agent 需要填写表单
→ 获取页面 DOM
→ 解析 HTML 结构找到表单字段
→ 通过 CSS 选择器或 XPath 定位元素
→ 模拟输入和点击

这种方式比截图高效，但依赖于页面的 DOM 结构。网站的一次小改版就可能导致选择器失效，维护成本极高。

WebMCP 的目标是从根本上改变这种局面：让网站主动告诉 AI Agent "我有哪些功能可以用、该怎么用"，而不是让 Agent 自己去猜。

WebMCP 的核心设计

WebMCP 引入了一个新的浏览器 API——navigator.modelContext，网站开发者可以通过这个 API 将网站的功能和数据结构化地暴露给 AI Agent。

声明式功能注册

// 网站开发者在页面中注册可用功能
navigator.modelContext.register({
  name: 'order-management',
  description: '订单管理功能',
  actions: [
    {
      name: 'search-order',
      description: '根据订单号查询订单状态',
      parameters: {
        orderId: {
          type: 'string',
          description: '订单号，格式为 ORD-XXXXXXXX',
          required: true,
        },
      },
      handler: async (params) => {
        const order = await fetchOrder(params.orderId);
        return {
          status: order.status,
          estimatedDelivery: order.eta,
          items: order.items.map((i) => i.name),
        };
      },
    },
    {
      name: 'cancel-order',
      description: '取消未发货的订单',
      parameters: {
        orderId: { type: 'string', required: true },
        reason: { type: 'string', required: false },
      },
      handler: async (params) => {
        return await cancelOrder(params.orderId, params.reason);
      },
    },
  ],
});

Agent 侧的调用

AI Agent（通过浏览器扩展或内置 Agent 功能）可以发现并调用这些注册的功能：

// AI Agent 发现页面上可用的功能
const contexts = await navigator.modelContext.discover();

// 返回结构化的功能清单
// [
//   {
//     name: "order-management",
//     actions: ["search-order", "cancel-order"],
//     ...
//   }
// ]

// Agent 调用具体功能
const result = await navigator.modelContext.invoke('order-management', 'search-order', { orderId: 'ORD-12345678' });

// 获得结构化的返回结果
// { status: "已发货", estimatedDelivery: "2026-03-20", items: ["书籍A", "书籍B"] }

协议架构

WebMCP 的设计受到了 Anthropic 的 MCP（Model Context Protocol）的启发，但它是一个专门面向 Web 平台的标准化协议。其架构分为三层：

┌──────────────────────────────────────────────┐
│              AI Agent 层                      │
│  （浏览器扩展 / 内置 Agent / 外部 Agent）     │
└──────────────────┬───────────────────────────┘
                   │ navigator.modelContext API
┌──────────────────┴───────────────────────────┐
│              浏览器中间层                      │
│  （权限管理、安全沙箱、速率限制）              │
└──────────────────┬───────────────────────────┘
                   │ 注册 / 调用
┌──────────────────┴───────────────────────────┐
│              网站应用层                        │
│  （功能注册、数据提供、操作处理）              │
└──────────────────────────────────────────────┘

安全模型是 WebMCP 设计中的重点。所有 Agent 调用都需要经过浏览器的权限系统：

// 权限声明（类似 Permissions API）
navigator.modelContext.register({
  name: 'payment',
  permissions: ['user-confirmation'], // 需要用户确认
  rateLimit: { maxCalls: 10, period: '1min' }, // 速率限制
  actions: [
    /* ... */
  ],
});

敏感操作（如支付、删除数据）会触发浏览器原生的确认弹窗，确保 AI Agent 不会在用户不知情的情况下执行危险操作。

Chrome 146 Canary 早期预览

Google Chrome 团队在 Chrome 146 Canary 中实现了 WebMCP 的早期预览版。目前支持的功能包括：

• navigator.modelContext.register() — 功能注册
• navigator.modelContext.discover() — 功能发现
• navigator.modelContext.invoke() — 功能调用
• 基础的权限管理

# 启用 WebMCP 实验标志
# chrome://flags/#enable-web-mcp
# 设置为 Enabled

# 或通过命令行启动
google-chrome-canary --enable-features=WebMCP

需要注意的是，Canary 版本中的实现仍处于非常早期的阶段，API 可能会在后续版本中发生变化。目前不建议在生产环境中使用。

对 Web 开发的影响

WebMCP 如果最终成为正式标准，将对 Web 开发产生深远影响：

新的"可发现性"维度

就像 robots.txt 告诉搜索引擎哪些页面可以抓取一样，WebMCP 让网站可以告诉 AI Agent 哪些功能可以使用。这意味着"对 AI Agent 友好"将成为网站设计的新维度。

<!-- 类似于 meta 标签的声明方式（提案中） -->
<meta name="model-context" content="/mcp-manifest.json" />

API 与 UI 的融合

传统上，面向人的 UI 和面向程序的 API 是两套独立的系统。WebMCP 模糊了这个边界——同一个网页既服务于人类用户（通过 UI），也服务于 AI Agent（通过 modelContext）。

无障碍性的提升

WebMCP 的功能声明本质上是对页面功能的语义化描述。这些描述不仅对 AI Agent 有用，对辅助技术（屏幕阅读器等）同样有价值，有望间接推动 Web 无障碍性的改善。

与现有方案的对比

WebMCP 相对于 REST API 的优势在于：它不需要网站额外开发一套 API，而是在现有页面基础上"声明"功能；它运行在浏览器沙箱中，天然具备安全隔离；它使用用户的身份和权限，无需单独的 API 认证。

总结

WebMCP 代表了 AI Agent 与 Web 交互方式的范式转变——从"Agent 自己想办法理解网页"到"网页主动告诉 Agent 该怎么交互"。虽然目前还只是 W3C 社区草案阶段，且只有 Chrome Canary 提供了早期预览，但 Google 和 Microsoft 的联合推动意味着这个方向有很高的可信度。

对于 Web 开发者来说，现在就开始关注 WebMCP 是值得的——不是为了立即采用，而是为了理解未来 Web 的演进方向。当 AI Agent 成为 Web 的"第二类用户"时，如何为它们提供良好的"用户体验"，将成为每个网站都需要考虑的问题。