网站要给 AI 打工了?WebMCP 让浏览器成为 Agent 的工具箱

1. 概述

WebMCP（Web Model Context Protocol） 是一个提议中的浏览器级 Web 标准，由 Google Chrome 团队与 Microsoft Edge 团队联合推进，目前处于 W3C 孵化阶段。它允许任何网页将其功能声明为结构化的、可调用的工具，供 AI 代理（Agent）直接发现和执行。

一句话定义：WebMCP 让网站从”可读的”升级为”可执行的”——不仅让 AI 能找到并推荐你的产品，更能让 AI 代理直接在你的网站上完成操作。

2. 背景与动机

2.1 当前痛点

当前 AI 代理与网页交互面临以下核心问题：

2.2 WebMCP 的解决思路

传统方式下，AI 代理需要爬取页面 → 猜测输入字段 → 希望表单接受输入 → 祈祷成功。

WebMCP 的思路是：网站主动声明”我有一个叫 searchFlights 的函数，需要出发地、目的地和日期参数，调用它即可获得结构化结果。”

传统方式:
  网页 → 完整 HTML 文档 → AI 解析全量 DOM → 理解元素 → 执行操作
  （计算量大、耗时、成本高、不可靠）

WebMCP 方式:
  网页（内嵌结构化元数据） → AI 直接读取交互数据 → 执行操作
  （计算量大幅减少、快速、成本低、可靠）

2.3 性能数据

根据 arXiv 论文（2508.09171）的评估数据：

以极小的成功率代价（0.9%），换取大幅的效率和成本提升。

3. 核心概念

3.1 结构化工具发现

提供机器可读的方式，让代理询问”你能做什么？”并获得清晰的可用工具列表，包含参数和用途。无需代理自行解析页面结构来推断可用操作。

3.2 可预测的执行

使用明确的函数调用取代猜测。代理调用已定义的工具，传入结构化参数，获得可预测的结构化结果。不再需要模拟可能变化的点击模式。

3.3 意图明确

网站明确声明其功能，代理确切知道特定功能应如何运作，无需从界面元素中推断操作方式。

3.4 临时性生命周期

WebMCP 工具只有在网页处于打开状态时才会存在。用户离开网站或关闭标签页后，代理将无法再访问网站的工具。这确保了工具始终与当前页面状态一致。

3.5 上下文感知

工具可根据页面状态动态注册和注销。代理永远只能看到与当前上下文相关的工具。

4. 架构设计

4.1 整体架构

┌───────────────────────────────────────────────────────────┐
│                       浏览器                              │
│                                                           │
│  ┌─────────────────┐              ┌─────────────────────┐ │
│  │                 │   WebMCP     │                     │ │
│  │   AI 代理       │ ◄──────────► │   网页应用           │ │
│  │   (Agent)       │  标准化通信   │                     │ │
│  │                 │  工具发现/调用 │  - 声明式工具(HTML) │ │
│  │  - 工具发现     │              │  - 命令式工具(JS)    │ │
│  │  - Schema 获取  │              │  - 会话数据          │ │
│  │  - 工具调用     │              │  - Cookie / DOM     │ │
│  └─────────────────┘              └─────────────────────┘ │
│                                                           │
│              浏览器充当通信桥梁                              │
│         通信几乎即时，无需远程往返                           │
└───────────────────────────────────────────────────────────┘

4.2 核心角色

4.3 通信机制

• 浏览器使用内部系统进行通信，客户端与工具之间的通信几乎即时
• 无需等待往返远程服务器
• 代理可访问实时会话数据、Cookie 和 DOM 元素
• 继承浏览器会话认证（SSO、Cookies），无需单独设置认证

4.4 AI 可见性技术栈

WebMCP 处于扩展中的可见性栈的最上层：

┌─────────────────────────────────────┐
│   Agentic Readiness (WebMCP)        │  ← 网站功能对 AI 代理可执行
├─────────────────────────────────────┤
│   AI Visibility                     │  ← 品牌在 AI 回答中被提及/引用
├─────────────────────────────────────┤
│   SEO Foundations                   │  ← 传统搜索优化基础
└─────────────────────────────────────┘

5. API 规范

WebMCP 提供双轨制 API，覆盖不同复杂度的场景：

5.1 声明式 API（Declarative API）

定位：低成本接入方案，在现有 HTML 表单上添加属性即可。

核心属性：

工作原理：

1. 开发者在现有 <form> 元素上添加 toolname 和 tooldescription 属性
2. 浏览器自动将表单字段翻译为 AI 代理可解读的结构化 Schema
3. 当代理调用工具时，浏览器自动填充字段并提交表单

代码示例：

<formtoolname="reserveTable"tooldescription="在餐厅预订座位">
<labelfor="date">日期</label>
<inputid="date"name="date"type="date" />

<labelfor="time">时间</label>
<inputid="time"name="time"type="time" />

<labelfor="party_size">人数</label>
<inputid="party_size"name="party_size"type="number"min="1"max="20" />

<buttontype="submit">预订</button>
</form>

要点：浏览器自动从 <input> 的 type、name、min/max 等属性推断参数类型和约束，生成结构化 Schema。

5.2 命令式 API（Imperative API）

定位：复杂、动态交互场景，通过 JavaScript 编程式注册工具。

核心接口：navigator.modelContext

5.2.1 注册工具

const toolHandle = navigator.modelContext.registerTool({
name: "searchFlights",
description: "搜索可用航班",
inputSchema: {
type: "object",
properties: {
origin: {
type: "string",
description: "出发城市"
      },
destination: {
type: "string",
description: "到达城市"
      },
date: {
type: "string",
format: "date",
description: "出发日期"
      }
    },
required: ["origin", "destination", "date"]
  },
execute: async (inputs) => {
// 执行搜索逻辑，返回结构化结果
const results = await fetchFlights(inputs);
return {
flights: results.map(f => ({
flightNumber: f.id,
departure: f.departureTime,
arrival: f.arrivalTime,
price: f.price
      }))
    };
  }
});

5.2.2 注销工具

// 当页面状态变化时，注销不再可用的工具
toolHandle.unregister();

5.2.3 动态注册示例

// 根据购物车状态动态注册结算工具
functionupdateCheckoutTool(cart) {
if (checkoutToolHandle) {
    checkoutToolHandle.unregister();
  }

if (cart.items.length > 0) {
    checkoutToolHandle = navigator.modelContext.registerTool({
name: "checkout",
description: "结算购物车中的商品",
inputSchema: {
type: "object",
properties: {
shippingAddress: {
type: "string",
description: "配送地址"
          },
paymentMethod: {
type: "string",
enum: ["credit_card", "paypal"],
description: "支付方式"
          }
        },
required: ["shippingAddress", "paymentMethod"]
      },
execute: async (inputs) => {
returnawait processCheckout(cart.id, inputs);
      }
    });
  }
}

// 监听购物车变化
cart.onUpdate(() => updateCheckoutTool(cart));

5.2.4 API 参数说明

6. 工作流程

WebMCP 的工作流分为三步：

Discover → Schema → Execute

步骤详解

效率对比

传统方式（无 WebMCP）:
  1. 截图页面 → 2. 解析 DOM → 3. 找到搜索表单 → 4. 识别输入字段
  → 5. 模拟输入 → 6. 点击搜索 → 7. 等待加载 → 8. 截图结果
  → 9. 解析结果页面 → 10. 提取数据
  （10+ 步操作，每步消耗 Token 和时间）

WebMCP 方式:
  1. 发现 searchFlights 工具 → 2. 获取 Schema → 3. 调用工具
  （3 步操作，一次结构化调用完成）

7. WebMCP vs MCP

7.1 核心定位

MCP = 公司客户服务呼叫中心（随时随地可用，处理核心任务）WebMCP = 实体店专家（仅在特定网站可用，帮助代理更好地了解界面）

WebMCP 不是 MCP 的扩展或替代品，而是一组受 MCP 启发的浏览器 API。两者是合作伙伴，而非竞争对手。

7.2 详细对比

7.3 互补使用模式

最有效的智能体应用会同时使用 MCP 和 WebMCP：

┌──────────────────────────────────────────────────────┐
│                  AI 智能体架构                        │
│                                                      │
│  ┌──────────────────┐    ┌────────────────────────┐  │
│  │   MCP Server     │    │      WebMCP            │  │
│  │   (基础服务层)    │    │   (情境化界面层)        │  │
│  │                  │    │                        │  │
│  │  - 核心业务逻辑   │    │  - 浏览器内交互        │  │
│  │  - 数据检索       │    │  - 实时页面操作        │  │
│  │  - 后台任务       │    │  - 上下文感知执行      │  │
│  │  - 跨平台服务     │    │  - 会话继承认证        │  │
│  └──────────────────┘    └────────────────────────┘  │
└──────────────────────────────────────────────────────┘

• MCP 作为基础服务层：处理核心业务逻辑、数据检索和后台任务，确保服务与平台无关且始终可用
• WebMCP 作为情境化界面层：让代理在用户打开网站时快速可靠地代表用户执行操作

8. 代码示例

8.1 电商网站 — 商品搜索与结算

<!-- 声明式：商品搜索表单 -->
<formtoolname="searchProducts"tooldescription="搜索商品">
<inputname="keyword"type="search"placeholder="搜索关键词" />
<selectname="category">
<optionvalue="electronics">电子产品</option>
<optionvalue="clothing">服装</option>
<optionvalue="books">图书</option>
</select>
<inputname="maxPrice"type="number"placeholder="最高价格" />
<buttontype="submit">搜索</button>
</form>

// 命令式：购物车结算
let checkoutHandle = null;

functionregisterCheckoutTool(cartId, itemCount) {
if (checkoutHandle) checkoutHandle.unregister();

if (itemCount > 0) {
    checkoutHandle = navigator.modelContext.registerTool({
name: "checkout",
description: `结算购物车中的 ${itemCount} 件商品`,
inputSchema: {
type: "object",
properties: {
shippingAddress: { type: "string", description: "配送地址" },
paymentMethod: {
type: "string",
enum: ["credit_card", "alipay", "wechat_pay"],
description: "支付方式"
          }
        },
required: ["shippingAddress", "paymentMethod"]
      },
execute: async ({ shippingAddress, paymentMethod }) => {
const result = await fetch("/api/checkout", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ cartId, shippingAddress, paymentMethod })
        });
returnawait result.json();
      }
    });
  }
}

8.2 旅行预订 — 航班搜索

navigator.modelContext.registerTool({
name: "searchFlights",
description: "搜索可用航班，支持单程和往返",
inputSchema: {
type: "object",
properties: {
origin: { type: "string", description: "出发城市或机场代码" },
destination: { type: "string", description: "到达城市或机场代码" },
departDate: { type: "string", format: "date", description: "出发日期" },
returnDate: { type: "string", format: "date", description: "返程日期（往返时必填）" },
passengers: { type: "integer", minimum: 1, maximum: 9, description: "乘客人数" },
cabinClass: {
type: "string",
enum: ["economy", "business", "first"],
description: "舱位等级"
      }
    },
required: ["origin", "destination", "departDate", "passengers"]
  },
execute: async (inputs) => {
const response = await fetch("/api/flights/search", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(inputs)
    });
returnawait response.json();
  }
});

8.3 内容管理 — 文章发布

let publishHandle = null;

// 仅在编辑器加载完成后注册发布工具
editor.onReady(() => {
  publishHandle = navigator.modelContext.registerTool({
name: "publishArticle",
description: "发布当前编辑的文章",
inputSchema: {
type: "object",
properties: {
title: { type: "string", description: "文章标题" },
tags: {
type: "array",
items: { type: "string" },
description: "文章标签"
        },
scheduleTime: {
type: "string",
format: "date-time",
description: "定时发布时间（可选）"
        }
      },
required: ["title"]
    },
execute: async ({ title, tags = [], scheduleTime }) => {
const content = editor.getContent();
const result = await api.publish({ title, content, tags, scheduleTime });
return { articleId: result.id, url: result.url, status: "published" };
    }
  });
});

// 离开编辑页面时注销
editor.onLeave(() => {
if (publishHandle) publishHandle.unregister();
});

9. 安全性考虑

9.1 安全模型

9.2 安全最佳实践

10. 性能与优化

10.1 性能优势来源

10.2 优化建议

11. 浏览器启用与调试

11.1 启用 WebMCP（Chrome 146+）

11.2 调试工具

11.3 验证工具注册

// 在 DevTools Console 中检查已注册的工具
// 具体API可能随版本变化
console.log(navigator.modelContext);

12. 应用场景

12.1 典型场景

12.2 行业影响

WebMCP 对 Web 生态的范式意义：

• SEO → AEO：优化不再仅关乎”被发现”，更关乎”被可用”（being usable）
• 移动端响应式的类比：早期实现 Agent-Ready 的网站将获得复合优势，与移动端响应式设计的先发优势逻辑一致
• 从内容思维到操作思维：WebMCP 奖励事务性清晰度，而非仅信息性内容

13. 最佳实践

13.1 接入策略

13.2 Schema 设计原则

// ✅ 好的 Schema：清晰、明确、有约束
{
name: "searchHotels",
description: "搜索指定城市的可用酒店",
inputSchema: {
type: "object",
properties: {
city: { type: "string", description: "城市名称" },
checkIn: { type: "string", format: "date", description: "入住日期" },
checkOut: { type: "string", format: "date", description: "退房日期" },
guests: { type: "integer", minimum: 1, maximum: 10, description: "入住人数" }
    },
required: ["city", "checkIn", "checkOut", "guests"]
  }
}

// ❌ 差的 Schema：模糊、缺少约束
{
name: "search",
description: "搜索",
inputSchema: {
type: "object",
properties: {
q: { type: "string" }
    }
  }
}

13.3 错误处理

navigator.modelContext.registerTool({
name: "queryOrder",
description: "查询订单状态",
inputSchema: {
type: "object",
properties: {
orderId: { type: "string", description: "订单编号" }
    },
required: ["orderId"]
  },
execute: async ({ orderId }) => {
try {
const order = await fetch(`/api/orders/${orderId}`).then(r => r.json());

if (!order) {
return { error: "NOT_FOUND", message: `未找到订单: ${orderId}` };
      }

return {
orderId: order.id,
status: order.status,
estimatedDelivery: order.estimatedDelivery
      };
    } catch (error) {
return {
error: "INTERNAL_ERROR",
message: "查询订单时发生错误，请稍后重试"
      };
    }
  }
});

14. 常见问题

Q1: WebMCP 会取代 MCP 吗？

不会。 两者互补而非竞争。MCP 适用于后端/AI 操作，WebMCP 适用于浏览器内实时交互。最有效的方案是同时使用两者。

Q2: WebMCP 可以在生产环境使用吗？

目前处于早期预览阶段，建议先在测试环境评估。生产使用需关注官方更新和安全公告。

Q3: WebMCP 支持哪些浏览器？

当前仅 Chrome 146+ 支持且需启用功能标志。预期 2026 年中后期获得更广泛的浏览器支持。

Q4: 声明式和命令式 API 如何选择？

Q5: WebMCP 与传统 REST API 的区别？

WebMCP 专为 AI 模型交互设计，支持工具发现、动态参数绑定和结构化响应；REST API 更适合传统客户端-服务器通信。WebMCP 不是替代 REST API，而是在其之上增加 AI 代理可理解的结构化层。

Q6: 如何调试 WebMCP？

• 使用 Model Context Tool Inspector 扩展检查已注册工具
• 使用 Chrome DevTools Console 查看 WebMCP 消息
• 使用 Network 面板 监控工具调用通信

Q7: 现有网站改造需要多少工作量？

• 声明式 API：仅需在表单上添加 toolname 和 tooldescription 属性，改动极小
• 命令式 API：需要编写 JavaScript 代码注册工具，工作量取决于交互复杂度
• 无论哪种方式，都无需修改服务端

15. 参考资源