WebMCP● WebMCP 早期预览版 - 总结概述 WebMCP (Web Model Context Proto

● WebMCP 早期预览版 - 总结

概述

WebMCP (Web Model Context Protocol) 是一个提议的 Web 标准，用于向 AI Agent 暴露结构化工具 API，替代传统的"屏幕抓取"方式，实现更高效、更可靠的页面交互和知识检索。

核心价值

提升性能：通过向浏览器 Agent 暴露 API，显著提高 AI Agent 操作的性能和可靠性
减少幻觉：通过明确的 JSON Schema 定义输入输出，减少 AI 理解错误
状态同步：Agent 能实时了解当前页面可用的资源

使用场景示例

场景	传统方式	WebMCP 方式
机票预订	Agent 猜测如何填写人类友好的日历 UI	直接调用 book_flight 工具提交结构化数据
医疗/法律门户	数据填写到错误的字段	明确标注需要完整法律姓名 vs 分离的名字/姓氏字段
开发者设置页	触发隐藏在嵌套菜单后的诊断功能	暴露 run_diagnostics 工具直接调用

快速开始

环境要求

Chrome: 版本 146.0.7672.0 或更高
Flag: 必须启用 "WebMCP for testing"

启用步骤

打开 Chrome，访问 chrome://flags/#enable-webmcp-testing
将 Flag 设置为 Enabled
重启 Chrome

两套 API

命令式 API (Imperative API)

使用 JavaScript 动态注册/注销工具：

const addTodoTool = {
  name: "addTodo",
  description: "添加新待办事项",
  inputSchema: {
    type: "object",
    properties: { text: { type: "string" } },
  },
  execute: ({ text }) => `Added todo: ${text}`,
};

const controller = new AbortController();
navigator.modelContext.registerTool(addTodoTool, { signal: controller.signal });

// 注销工具
controller.abort();

声明式 API (Declarative API)

通过 HTML 表单注解自动转换：

<form toolname="my_tool" tooldescription="简单声明式工具" action="/submit">
  <label for="text">文本标签</label>
  <input type="text" name="text">

  <select name="select" required toolparamdescription="下拉描述">
    <option value="Option 1">选项 1</option>
    <option value="Option 2">选项 2</option>
  </select>

  <button type="submit">提交</button>
</form>

核心属性：

属性	说明
toolname	工具名称
tooldescription	工具描述
toolparamdescription	参数描述（支持 fieldset 包裹单选组）
toolautosubmit	自动提交表单

声明式 API 新增特性

SubmitEvent 新增

agentInvoked: 布尔属性，标识表单是否由 AI Agent 触发
respondWith(Promise): 返回表单结果数据给模型

form.addEventListener("submit", (e) => {
  e.preventDefault();
  if (e.agentInvoked) {
    e.respondWith("操作完成！");
  }
});

新增事件

事件	触发时机
toolactivated	Agent 调用工具并填充表单字段后
toolcancel	Agent 取消操作或调用 reset() 时

CSS 伪类

伪类	作用元素	视觉反馈
:tool-form-active	表单元素	蓝色虚线边框
:tool-submit-active	提交按钮	红色虚线边框

工具声明最佳实践

命名与语义

使用具体动词描述确切操作（如 create-event 而非 start-event-creation-process）
使用正面、清晰的描述
❌ 避免："不要用于天气查询..."
✅ 推荐："此工具可以创建日历事件..."

Schema 设计

接受原始用户输入，避免让 Agent 做数学运算或转换
所有参数必须有明确类型
解释选项的业务背景（如 shipping='EXPRESS' 表示需要次日达）

可靠性与错误恢复

代码严格校验，Schema 宽松约束
限流时返回有意义的错误信息
函数返回时应等待 UI 更新完成

工具策略

原子性：每个工具做单一功能，避免功能重叠
信任 Agent 的流程控制，不要硬编码 "A 之后不要调用 B"
根据页面状态动态注册/注销工具

局限性

需要浏览上下文：必须打开浏览器 Tab/窗口，不支持无头模式
UI 同步：开发者需确保 UI 反映当前应用状态
复杂度开销：复杂站点可能需要重构或添加处理状态的 JavaScript
工具可发现性：暂无内置机制让客户端发现哪些网站提供可调用工具

与 MCP 的区别

特性	MCP	WebMCP
架构	服务端协议	客户端协议（浏览器内）
部署	需要部署自己的服务器	在现有 Web 应用中实现
用途	连接 AI Agent 到应用	让 Agent 更好地与网页交互