WebMCP 详解：让网页成为 AI 智能体的工具库

六大核心优势：

1. 代码复用 - 直接复用前端现有 JavaScript 逻辑，无需重写后端
2. 单一界面 - 用户和智能体使用同一个 UI，保持体验一致性
3. 共享状态 - 用户、智能体、应用三方共享上下文
4. 简化认证 - 用户已登录，智能体直接继承权限
5. 提升可访问性 - 为辅助技术提供标准化的功能访问方式
6. 增量集成 - 无需重构整个应用，逐步暴露功能

WebMCP 核心概念解析

1. 工具（Tools）

工具是 WebMCP 的核心抽象。每个工具包含：

• 名称（name）：工具函数名
• 描述（description）：自然语言说明工具用途
• 参数模式（input schema）：JSON Schema 描述输入参数
• 实现（implementation）：实际的 JavaScript 函数

2. 代理（Agent）

在 WebMCP 语境中，"代理"指：

• AI 平台代理：如 ChatGPT、Claude、 Gemini
• 浏览器代理：内置或通过扩展提供的 AI 助手

3. 人类在环（Human-in-the-Loop）

WebMCP 专为协作场景设计，智能体不是完全自治的，而是：

• 在用户授权下执行任务
• 随时向用户汇报进展
• 用户可以审核、修改或拒绝智能体的操作

典型使用场景

场景一：创意设计助手

背景：Jen 想创建一个 Yard Sale 宣传海报，但她不熟悉设计工具的复杂菜单。

交互流程：

1. Jen 打开设计网站 Easely，请求帮助找春季主题模板
2. 智能体发现网页暴露了 filterTemplates(description) 工具
3. 智能体调用工具筛选出符合条件的模板
4. Jen 选择模板后，智能体发现 editDesign(instructions) 工具
5. 智能体帮助修改字体、添加元素、填充信息
6. 最后调用 orderPrints() 直接下单打印

关键点：智能体使用网页提供的工具完成任务，用户全程掌控，可以随时介入修改。

场景二：智能购物

背景：Maya 想为朋友的婚礼挑选礼服，需要符合特定条件。

交互流程：

1. Maya 向智能体描述需求（环保、平价、正式场合）
2. 智能体打开服装网站，调用 getDresses(size, color) 获取商品
3. 智能体根据用户偏好筛选，展示结果
4. Maya 上传参考图片，智能体识别风格并进一步筛选
5. Maya 选中款式，智能体帮助完成下单

关键点：智能体跨越多个服务（邮件、地图、电商）协作，但通过统一的网页工具接口实现。

场景三：代码审查

背景：开发者 John 使用 Gerrit 进行代码审查，智能体帮助分析 CI 失败原因。

交互流程：

1. 智能体调用 getTryRunStatuses() 获取构建状态
2. 发现 Mac 和 Android 构建失败
3. 调用 getTryRunFailureSnippet() 获取错误日志
4. 智能体分析原因并调用 addSuggestedEdit() 添加修复建议
5. John 审核并接受修改

关键点：复杂工具网站通过 WebMCP 暴露专业功能，降低智能体操作门槛。

WebMCP vs 现有方案对比

与 MCP 的关系

WebMCP 被设计为 MCP 的客户端实现。开发者可以：

• 在前端使用 WebMCP 暴露工具
• 通过浏览器内置机制让外部 MCP 客户端访问这些工具
• 享受两套生态的叠加优势

技术架构浅析

注册工具的基本模式

// 网页端注册工具示例（概念性）
navigator.agent.registerTool({
  name: "filterTemplates",
  description: "Filters the list of templates based on a description",
  inputSchema: {
    type: "object",
    properties: {
      description: { type: "string", description: "A visual description of templates to show" }
    },
    required: ["description"]
  },
  handler: async (params) => {
    // 复用现有前端逻辑
    return await filterTemplates(params.description);
  }
});

调用链

用户请求 ↓
AI 智能体分析需求 ↓
发现网页暴露的工具 ↓
调用工具（通过浏览器 API） ↓
JavaScript 函数执行 ↓
返回结果给智能体 ↓
智能体展示/执行后续操作 ↓
用户审核确认

安全考量

WebMCP 规范明确指出需要关注的安全问题：

1. 模型投毒（Model Poisoning）

网页可以定义工具被用于 AI 推理，需要防止恶意工具影响模型行为。

2. 跨域数据流

智能体可能组合多个网站的工具，需要让用户清楚了解数据流向。

3. 权限控制

• 网页注册工具时需要用户授权
• 智能体调用工具时需要用户授权
• 应提供'始终允许'选项简化工作流

未来展望

1. PWA 集成

渐进式 Web 应用可以声明离线可用的工具，实现真正的后台服务。

2. 后台上下文提供者

某些工具可能不需要 UI（如待办事项添加），可以结合 launch 事件在 Service Worker 中处理。

3. 与辅助技术深度整合

为 OS 级辅助工具提供标准化的 Web 功能访问接口。

总结

WebMCP 代表了 Web 与 AI 融合的一个重要方向：

• 对开发者：可以用熟悉的 JavaScript 快速暴露功能，无需学习后端技术
• 对用户：保持对界面的控制，同时享受 AI 带来的效率提升
• 对可访问性：为辅助技术打开新的大门

虽然 WebMCP 仍处于提案阶段（截至 2025 年 8 月），但它提出的'网页即工具库'理念值得我们关注。随着 AI 智能体越来越普及，这种前端友好的集成方式可能会成为标准做法。

参考资料

• WebMCP 官方提案
• Model Context Protocol (MCP)
• MCP-B 项目