深度解析 WebMCP：浏览器端 AI 智能体协议详解

3.1 两个核心组件

1. 宿主（Host）/ 智能体（Agent）：通常是浏览器内置的 AI（如 Gemini Nano）或侧边栏助手。
2. 页面（Web Page）：充当'微型服务器'，通过 WebMCP 接口提供工具、资源和提示词（Prompts）。

3.2 两种实现路径

为了让不同难度的项目都能接入，WebMCP 设计了两种 API 模式：

A. 声明式 API（Declarative API） —— 低代码接入

如果你的页面已经有现成的 HTML 表单，你只需要添加几个属性，它就能变身 AI 工具。

<form toolname="search_flights" tooldescription="查询往返航班信息">
  <input name="origin" type="text" placeholder="出发地" required>
  <input name="destination" type="text" placeholder="目的地" required>
  <button type="submit">搜索</button>
</form>

浏览器会自动解析这个表单，生成一个 AI 能够读懂的 JSON Schema。当 AI 需要查询航班时，它会向浏览器发送请求，浏览器代为填充表单并提交。

B. 命令式 API（Imperative API） —— 深度集成

对于复杂的逻辑，你可以直接注册 JavaScript 函数：

// 注册一个查询天气工具
navigator.modelContext.registerTool(
  'get_weather',
  '获取指定位置的当前天气情况',
  { location: { type: 'string', description: '城市名' } },
  async (args) => {
    const data = await fetchWeather(args.location);
    return { content: [{ type: 'text', text: `当前温度：${data.temp}度` }] };
  }
);

四、动手实践：如何体验 WebMCP？

目前，WebMCP 处于快速演进阶段。想要尝鲜的开发者可以通过以下方式：

4.1 开启浏览器支持

1. 下载 Chrome Canary (版本号 146+);
2. 进入 chrome://flags;
3. 搜索并启用 #experimental-web-platform-features 或 #webmcp-test-api（具体名称随版本波动，建议查看 W3C 最新文档）。

4.2 使用现有的库

如果你不想等浏览器原生普及，可以使用 Jason McGhee 维护的 WebMCP 开源库。它通过一个轻量级的 WebSocket 桥接方案，让你现在就能在普通浏览器里体验'页面即 MCP Server'的效果。

代码示例（使用 WebMCP SDK）：

import { WebMCP } from 'webmcp-sdk';
const mcp = new WebMCP();
// 暴露一个添加待办事项的方法给 AI
mcp.registerTool('add_todo', '在当前页面添加一条任务', { text: { type: 'string' } }, (args) => {
  window.myTodoApp.addItem(args.text);
  return "已成功添加任务";
});

五、WebMCP 的核心价值：为什么开发者要关注？

对于内卷严重的 AI 赛道，WebMCP 提供了几个降本增效的杀手锏：

5.1 隐私与安全（端侧处理）

国内政企客户对数据出域非常敏感。WebMCP 的工具是在用户本地浏览器中执行的。AI 智能体调用的是本地函数，敏感数据（如用户当前的 Session 信息）不需要发送到云端。这符合'数据不出域'的合规大趋势。

5.2 AI 时代的 SEO：从'被看到'到'被调用'

过去我们做 SEO 是为了让百度/谷歌抓取我们的关键词。在 AI 时代，SEO 将进化为 'Agent Optimization'。

通过 WebMCP 声明工具，你的网站将变成一个'可编程的节点'。当用户问 AI：'帮我订一张去北京的票'，AI 会直接调用你网页暴露的 book_ticket 工具，而不是带用户去搜链接。

5.3 跨平台一致性

WebMCP 磨平了不同 AI 平台（Gemini, Claude, GPT-4o-tools）与不同前端框架（Vue, React, Svelte）之间的鸿沟。你只需要写一套 registerTool，任何支持 WebMCP 的 AI 助手都能无缝使用。

六、最新动态与未来展望

6.1 W3C 标准化进程

2025 年 2 月，W3C WebML 社区组发布了最新的 WebMCP 草案。Intel、Google 和 Microsoft 正在推动将 navigator.modelContext 固化到 Web IDL 中。这意味着它未来将像 fetch 或 navigator.geolocation 一样成为 Web 开发的基础设施。

6.2 框架集

目前，React 和 Next.js 的社区已经出现了针对 WebMCP 的自定义 Hook，如 useWebMCPTool。

// 假设的未来用法
useWebMCPTool('checkout', (cart) => {
  // AI 触发结账逻辑
}, schema);

6.3 商业机会：AI 插件的终结者

以往我们为了给 AI 提供能力需要写 Chrome Extension。WebMCP 普及后，网站本身就是插件。只要用户打开你的网页，AI 就能立刻学会在该网页内操作。这对 SaaS 类产品、电商和企业内部工具是巨大的利好。

七、结语

WebMCP 不仅仅是一个 API，它代表了 'Agentic Web（智能体化 Web）' 的到来。

作为一个资深开发者，现在开始在你的项目中尝试 WebMCP，意味着你正在为你的网站准备一张进入'机器友好型互联网'的入场券。不要再让你的 AI 智能体去辛苦地'抠'DOM 树了，给它一个标准的接口，让它像调用函数一样调用你的业务逻辑。