WebMCP：用HTML属性定义AI工具，告别屏幕刮擦的浏览器原生协议

在 Chrome 146 的实验特性（Flags）中，隐藏着一个可能重塑 Browser Agent 生态的提案：WebMCP。

简单来说，它是浏览器原生实现的 MCP（Model Context Protocol）。如今，无论是 Vercel 的 Agent Browser 还是其他 AI 代理，在操作网页时本质上仍在沿袭“屏幕刮擦”的老路。它们依赖视觉识别按钮位置、分析 DOM 结构来猜测如何交互。这种方式不仅效率低下，而且极其脆弱——前端开发者随意修改一个 CSS 类名，就可能导致 AI 再也找不到那个关键的“提交”按钮。

WebMCP 的核心思路是“反客为主”：与其让 AI 代理在黑暗中摸索，不如让网页主动“自报家门”。它允许网站开发者显式地定义一系列“工具”。当 AI 代理访问页面时，只需通过一个标准 API 查询，就能获得一份清晰的交互说明书。例如，它会被告知：“本页面支持 search_flights 工具，需要提供 origin 和 destination 两个参数。”

两种实现方式，统一的“Web原生”哲学

WebMCP 的文档提出了两种与 Web 平台深度契合的实现方式，充分体现了其“Web 原生”的设计理念。

1. 命令式 API (Imperative API - JavaScript)

通过 navigator.modelContext.registerTool 方法进行注册。这种方式非常适合复杂的单页应用（SPA），你可以将现有的业务逻辑或 JavaScript 函数轻松封装成 AI 可调用的工具，其模式与我们在服务端编写 MCP Server 非常相似。

window.navigator.modelContext.registerTool({
  name: "searchFlights",
  description: "Search for flights between two cities.",
  inputSchema: { ... }, // 定义参数结构
  execute: ({ origin, destination }) => {
    // 这里调用你已有的搜索逻辑
    return { content: [{ type: "text", text: "Found 3 flights from LAX to JFK..." }] };
  }
});

2. 声明式 API (Declarative API - HTML) ⭐

这是最具 Web 精神的方式，也是我个人最欣赏的设计。开发者无需编写额外的 前端框架/工程化 逻辑，只需要在标准的 HTML <form> 元素上添加几个自定义属性即可。

<form toolname="book_flight" tooldescription="Book a flight for a passenger.">
  <input name="destination" toolparamdescription="City code of the destination">
</form>

仅仅添加几行属性，浏览器便会自动将这个表单识别并暴露为一个标准的工具。这才是语义化 HTML 应有的终极形态。过去，我们为 SEO 和屏幕阅读器优化语义；现在，我们可以为 AI 代理优化语义，让它们能更好地协助用户完成任务。

如何立即尝鲜？

目前 WebMCP 尚处于早期预览阶段，由 Google 的 Alex Klepper, Andre Bandarra 等人在 WebMachineLearning 工作组中推进。如果你想亲身体验，需要以下步骤：

1. 确保使用 Chrome 146 或更高版本。
2. 在地址栏输入 chrome://flags/#enable-webmcp-testing 并启用该实验性标志。
3. 安装官方的 Model Context Tool Inspector 浏览器扩展。
4. 访问官方提供的 Demo 页面，直观感受 AI Agent 是如何“看见”并理解页面上的工具的。

一点思考

我一直信奉“Web is Best”的理念。相比于从零构建一套封闭的应用层协议，充分利用现有、久经考验的 Web 标准往往是更优解。WebMCP 的声明式 API 就是一个绝佳的范例：它没有引入任何复杂的中间层或新语法，而是巧妙地扩展了最古老、最稳固的 HTML Form 元素。这种“少即是多”的设计哲学，正是 Web 保持长久生命力的源泉。

那么，如果这项标准得以普及，你会愿意为自己的网站添加上这几行简单的 HTML 属性吗？

参考链接：

1. WebMCP Explainer 文档：https://docs.google.com/document/d/1rtU1fRPS0bMqd9abMG_hc6K9OAI6soUy3Kh00toAgyk/mobilebasic