Web 即将再次发生变革。 30 年来，网站一直是为人类构建的。我们设计页面时使用按钮、表单和导航菜单，让人们可以看到、点击和交互。但当用户不是人类——而是 **AI 代理**时，会发生什么？这就是 **WebMCP** 要解决的问题。 --- ## 什么是 WebMCP？ **WebMCP**（Web Model Context Protocol）是一项新的 W3C 标准，让网站能够向在浏览器中运行的 AI 代理暴露结构化的"工具"。AI 代理不再需要抓取你的页面、猜测该点击哪个按钮或解析非结构化的 HTML，你的网站可以直接告诉代理：*"这些是你能做的事情，每个操作需要什么，以及如何调用它们。"* 可以这样理解： - **有 WebMCP 之前**：AI 代理像蒙着眼睛一样与网站交互——在 DOM 元素中摸索，试图理解布局，期望自己点对了位置。 - **有 WebMCP 之后**：AI 代理看到一份清晰的可用操作菜单，配有描述、所需输入和预期输出。不用猜测，不用抓取。 ### 官方定义 WebMCP 是由 Google 和 Microsoft 在 W3C Web Machine Learning 社区组下开发的**浏览器原生 API**。它提供两种方式让网站注册工具： 1. **声明式 API** — 在现有的 `

` 元素上添加 HTML 属性 2. **命令式 API** — 通过 `navigator.modelContext` 使用 JavaScript 注册工具两种方式都让 AI 代理无需任何屏幕抓取或 DOM 操作即可发现和调用网站功能。 --- ## 为什么 WebMCP 很重要？ ### 1. AI 代理即将进入每个浏览器 Google Chrome 146（2026 年 2 月发布）包含了 WebMCP 的首个早期预览版。Microsoft Edge 紧随其后。一年内，每个主流浏览器都将支持它。这意味着数十亿用户将拥有能与网站交互的 AI 代理——但前提是这些网站支持 WebMCP。 ### 2. 这是 AI Web 的 HTTP 还记得网站没有 SSL 证书的时代吗？Google 开始在搜索排名中惩罚它们，几年内 HTTPS 就成了标配。WebMCP 正在走同样的路线： - **2026 年**：先行者获得竞争优势 - **2027 年**：AI 代理成为主流；不支持 WebMCP 的网站被绕过 - **2028 年以后**：WebMCP 变得像 HTTPS 一样理所当然 ### 3. 零额外认证与服务端协议（如 Anthropic 的 MCP）不同，WebMCP 在浏览器中运行，**复用用户现有的会话**。如果用户已登录你的网站，AI 代理自动拥有相同的访问权限。无需 OAuth 流程、无需 API 密钥、无需单独认证。 ### 4. 兼容现有网站声明式 API 设计为**零 JavaScript 改动**即可使用。如果你的网站已有 `` 元素，只需添加三个 HTML 属性就能让它们对 AI 可访问。下面我们将展示具体方法。 --- ## WebMCP 如何工作 ### 两种 API #### 声明式 API（HTML 属性）实现 WebMCP 最简单的方式。只需在现有表单上添加属性： ```html

``` 就这么简单。不需要 JavaScript。浏览器读取这些属性，将工具注册到其内置 AI 代理中，代理就能像人类一样填写字段并提交表单。 **关键属性：** - `toolname` — 操作的唯一、以动词开头的名称（如 `searchProducts`、`bookFlight`） - `tooldescription` — 工具功能的清晰描述（建议 20 个字符以上） - `toolautosubmit` — 允许 AI 代理在无需用户确认的情况下提交表单 #### 命令式 API（JavaScript）适用于无法映射到简单表单的更复杂交互： ```javascript await navigator.modelContext.registerTool({ name: "getWeatherForecast", description: "获取任意城市的 7 天天气预报", inputSchema: { type: "object", properties: { city: { type: "string", description: "城市名称" }, units: { type: "string", enum: ["celsius", "fahrenheit"] } }, required: ["city"] }, handler: async ({ city, units }) => { const data = await fetchWeather(city, units); return { forecast: data }; } }); ``` 命令式 API 让你完全控制输入验证、异步操作和响应格式化。 --- ## WebMCP 与 Anthropic MCP 的区别一个常见问题：*"WebMCP 和 Anthropic 的 MCP（Model Context Protocol）有什么不同？"* | 维度 | Anthropic MCP | WebMCP | |------|--------------|--------| | **运行位置** | 服务端（Python/Node.js 后端） | **浏览器**（客户端 JavaScript） | | **通信方式** | JSON-RPC（stdio/HTTP） | postMessage（浏览器原生） | | **认证** | 需要单独的 OAuth/API 密钥 | **复用浏览器会话** | | **用途** | 连接 AI ↔ 后端服务 | 连接 AI ↔ 网页 | | **复杂度** | 需要服务器配置 | **声明式 API 零配置** | **它们是互补的，不是竞争的。** MCP 连接 AI 代理到你的后端 API。WebMCP 连接 AI 代理到你的前端 UI。一个完全 AI 就绪的网站两者都需要。 --- ## 如何检查你网站的 WebMCP 分数想知道你的网站是否准备好迎接 AI 代理？**WebMCP Verify** 根据四个类别的 15 项标准扫描你的网站： - **WebMCP 工具注册**（40%）— 你的表单和工具是否正确注册？ - **AI 可发现性**（30%）— AI 代理能否通过结构化数据、llms.txt 和 meta 标签找到你的网站？ - **安全与兼容性**（20%）— 你的网站是否通过 HTTPS 提供服务并有兼容的 CSP 头？ - **最佳实践**（10%）— 你的工具命名、描述和注解是否规范？ [立即检查你的 WebMCP 分数 →](https://webmcpverify.com) 只需 30 秒，无需注册。你将获得一个字母等级（A+ 到 F）和可操作的修复建议及代码片段。 --- ## 开始使用 WebMCP ### 第 1 步：审查你现有的表单查看网站上的每一个 ` ``` ### 第 3 步：增强输入字段确保你的 `` 元素具有： - `type` 属性（text、email、number、date 等） - 适当位置的 `required` - 有帮助的 `pattern` 用于验证 - 带有示例值的 `placeholder` ### 第 4 步：添加 AI 可发现性除了 WebMCP 工具，还要帮助 AI 代理找到和理解你的网站： - 添加 **Schema.org JSON-LD** 结构化数据 - 在域名根目录创建 **llms.txt** 文件 - 确保 **meta 描述**清晰且有信息量 - 检查 **robots.txt** 没有阻止 AI 爬虫 ### 第 5 步：验证你的分数通过 [WebMCP Verify](https://webmcpverify.com) 运行你的网站，查看得分和需要改进的地方。 --- ## WebMCP 的未来 WebMCP 还处于早期阶段。Chrome 146 的实现在功能标志后面（`chrome://flags/#web-mcp`）。但趋势很明确： - **2026 年第一季度**：Chrome 146 DevTrial（当前阶段） - **2026 年第二至三季度**：Chrome 稳定版推出，Edge 跟进 - **2026 年第四季度**：Safari 和 Firefox 开始实现 - **2027 年**：WebMCP 成为标准期望现在准备的网站将拥有巨大的先发优势。等待的网站将疲于追赶——就像那些在移动端、HTTPS 或 Core Web Vitals 上慢人一步的网站一样。 --- ## 关键要点 1. **WebMCP 是一项新的 W3C 标准**，让网站向 AI 代理暴露工具 2. **两种 API**：声明式（HTML 属性，零 JS）和命令式（JavaScript，完全控制） 3. **Chrome 146** 已在早期预览中支持 4. **它补充而非替代** Anthropic 的服务端 MCP 5. **现在就开始**：在表单上添加 `toolname`、`tooldescription` 和 `toolautosubmit` 6. **检查你的分数**：使用 [WebMCP Verify](https://webmcpverify.com) 进行免费 30 秒审计 AI 代理 Web 即将到来。确保你的网站已经准备好。