写过 AI agent 自动化操作的人大概都踩过这个坑——每次改了网站布局，之前的自动化脚本就全红了。今天 WebMCP 把这件事彻底原生化了

写过 AI agent 自动化操作的人大概都踩过这个坑——每次改了网站布局，之前的自动化脚本就全红了。你不知道它为什么会这样，只知道它又在一遍遍截图猜你的按钮在哪。

这就是现在 AI agent 访问网站的现状：靠视觉猜测吃饭。今天这件事被一个叫 WebMCP 的浏览器 API 彻底原生化了。

浏览器终于有了自己的「工具清单」

WebMCP（Web Model Context Protocol）是个 W3C 标准，Chrome 149 开始公开测试，Google 和 Microsoft 联合起草。它让网站直接告诉 AI agent：「我能做什么、怎么调用」。

这和之前 Safari MCP（让 AI 控制浏览器）以及 managedMcpServers（企业管住 MCP 服务器）是完全不同的方向——WebMCP 是让网站反过来对 AI agent 敞开心扉。

怎么暴露工具

分两种方式：

声明式：纯 HTML，几行属性就够

<form action="/api/search" method="GET" 
      modelContext="tool"
      toolname="search"
      tooldescription="Search the documentation">
  <input name="q" toolparamdescription="Search query">
  <button type="submit">Search</button>
</form>

加四个属性，浏览器自动把这个表单合成成一个结构化工具。AI agent 不需要猜这个 input 叫什么、submit 按钮在哪——网站直接告诉它参数和格式。

命令式：JavaScript，接真实逻辑

document.modelContext.registerTool({
  name: "book_slot",
  description: "Reserve a 30-minute consultation",
  inputSchema: {
    type: "object",
    properties: {
      date: { type: "string", format: "date" },
      time: { type: "string" },
      name: { type: "string" }
    },
    required: ["date", "time", "name"]
  },
  annotations: {
    readOnlyHint: false,
    requiresConfirmation: true
  },
  async execute({ date, time, name }) {
    const res = await fetch("/api/booking", {
      method: "POST",
      body: JSON.stringify({ date, time, name })
    });
    return { content: [{ type: "text", text: await res.text() }] };
  }
});

返回值格式是 MCP 标准格式，AI agent 能直接解析。

比截图强在哪

截图的问题：每次改布局，agent 就要重新学。按钮从左上角挪到右上角，从「提交」改成「确认」，之前的 prompt 全废。

WebMCP 的优势：工具描述和网站代码绑定，接口契约不变就不需要改。AI agent 拿到的是结构化参数，不是像素坐标。

一个 B2B SaaS 公司在 Google 公布 WebMCP 后，接入后 AI 带来的试用从每月 550 次涨到 2300 次——因为 AI agent 能直接调用定价 API 对比方案了，不需要再截图猜价格字段在哪。

安全性是内置的

WebMCP 在浏览器安全边界内运行，同源策略、用户授权一样都不少。工具可以声明 requiresConfirmation: true，让 agent 在执行危险操作前必须用户点同意。敏感页面可以用 document.modelContext.clearContext() 撤回所有工具注册。

现状与下一步

Chrome 149+ 公开测试，Edge 同步跟进，Safari 态度待定。现在是 Origin Trial 阶段，2026 年内有望全面稳定。

建议三步走：

1. 先 Feature Detect：if (document.modelContext) { /* 注册工具 */ }，没有 WebMCP 的浏览器完全不受影响
2. 给关键路径加上：搜索框、预约表单、查询类操作先接，它们最值得让 AI agent 直接调用
3. 读官方文档：goo.gle/webmcp-origin-trial 注册测试资格

AI agent 是新的访客，但它们不该靠猜。你的网站能做的，远比它们能看到的多。