WebMCP 实战指南：让你的网站瞬间变成 AI 的“大脑外挂”

一、 AI 终于不用"瞎猜"你的网页了

我们可以把 WebMCP 想象成一种**"翻译官协议"**：

• 以前的 AI（视觉模拟派） ：就像一个老外在看一份全中文的报纸，他得先拍照，再识别文字，最后猜哪里是按钮。一旦你把按钮从左边挪到右边，他就找不到了。
• WebMCP（接口直连派） ：你的网站现在给 AI 提供了一个**"操作说明书"**。AI 进门后不用看页面长什么样，直接问："那个'查询余额'的功能在哪？" 你的网站直接通过 WebMCP 告诉它："在这里，发个 JSON 给我，我就告诉你结果。"

一句话总结：WebMCP 让网页从"给人看的界面"变成了"给 AI 调用的函数"。

---

二、 核心能力：WebMCP 的"两把斧"

在实际开发中，WebMCP 提供了两种接入方式：

1. 宣告式（适合简单动作） ：在 HTML 里加个属性，就像给按钮贴个"AI 可读"的标签。
2. 命令式（适合高级逻辑） ：用 JavaScript 编写具体的执行函数，适合处理复杂计算。

---

三、 实战：WebMCP 的具体使用方法

目前，你可以在 Chrome Canary (v145+) 中通过以下步骤实现一个"AI 自动分析监控日志"的功能。

1. 开启实验室开关

在浏览器地址栏输入：chrome://flags/#enable-webmcp，将其设置为 Enabled 并重启。

2. 定义"说明书" (mcp-config.json)

在你的网站根目录放置一个配置文件，告诉 AI 你有哪些能力。

JSON

{
  "tools": [
    {
      "name": "get_frontend_error_logs",
      "description": "获取当前页面的前端错误日志详情",
      "parameters": {
        "type": "object",
        "properties": {
          "limit": { "type": "number", "description": "返回的日志数量" }
        }
      }
    }
  ]
}

3. JavaScript 具体实现逻辑

在你的网页脚本中，注册这个工具的具体执行逻辑。

JavaScript

// 检查浏览器是否支持 WebMCP
if ('modelContext' in navigator) {
  // 注册工具
  navigator.modelContext.registerTool('get_frontend_error_logs', async (args) => {
    // 1. 从你的监控系统中提取数据
    const logs = window.__MY_MONITOR_LOGS__.slice(0, args.limit || 5);
    
    // 2. 返回给 AI
    return {
      content: [
        { 
          type: "text", 
          text: JSON.stringify(logs, null, 2) 
        }
      ]
    };
  });
  
  console.log("WebMCP 工具已就绪，AI 现在可以直接读取你的日志了！");
}

---

四、 极致的 Token 优化：从"读图"到"读字典"

web系统经常有成千上万行的表格数据，让 AI 截图识别简直是灾难。

1. 结构化数据的降维打击

• 视觉识别：1 张 1080P 的截图可能消耗 1000+ Tokens，且 AI 经常看错行。
• WebMCP ：你返回一个 JSON.stringify(summary) 仅需几十个 Tokens。
• 工程技巧 ：在 registerTool 的返回结果中，你可以预先对数据进行特征提取（比如只返回异常波动点），将原本需要 AI 自己总结的过程，在本地通过高性能 JS 预处理完成，进一步压榨 Token 成本。

---

五、 交互新范式：从"被动响应"到"双向协同"

在你的实战代码中，展示了 AI 如何"主动"调数据，但 WebMCP 的真正威力在于它构建了一个双向总线。

1. 订阅模式：让 AI 实时盯盘

在金融监控或 K 线分析场景，AI 不应该总在问"现在价格是多少"，而应该是当价格波动超过阈值时，网站主动推送到 AI 上下文。

• 扩展用法：利用 WebMCP 的资源订阅（Resources Subscription）机制。
• 代码逻辑 ：通过 navigator.modelContext.updateResource()，当监控系统发现异常流量或金融数据触发对冲点时，自动将上下文注入 AI 的实时缓存，实现"无感预警"。

---

六、 安全深度防御：权限隔离

你一定关心：万一 AI 乱发指令怎么办？WebMCP 引入了显式授权与沙箱隔离。

1. 权限最小化原则

WebMCP 不会默认给 AI 权限去读你的整个 LocalStorage 或 Cookie。

• 层级控制 ：每一个 registerTool 注册的功能，都会在 Chrome 侧边栏显示详细的权限说明。
• 人类确认 (HITL) ：对于涉及敏感操作（如：执行转账、删除线上日志）的 Tool，WebMCP 支持声明 userApproval: "required"。当 AI 尝试调用时，浏览器会跳出原生确认框，这种系统级的阻断是任何第三方插件无法模拟的安全保障。

---

七、 架构解耦：一套标准，适配所有 AI 终端

你目前在研究 AI Prompt Manager 和 Trae/Cursor。WebMCP 的出现解决了前端工程中的"适配地狱"。

1. "一次开发，到处运行"的 AI 能力

• 旧模式：你得写一个 Chrome 插件给 Gemini 用，再写一个 MCP Server 给 Claude Desktop 用，再给 Cursor 写特定的插件。
• WebMCP 模式 ：你只需要在网页里 registerTool。由于 Chrome 是宿主，只要你在 Chrome 里打开这个网页，无论是侧边栏的 Gemini，还是通过 DevTools 接入的 AI Agent，都能识别并使用这套能力。这极大降低了你维护 AI 基础设施 的成本。

---

八、为什么非用它不可？

1. 性能屠宰场：不再需要给 AI 发送几万个 DOM 节点的 HTML 文本，只传核心 JSON，Token 消耗节省 90%。
2. 安全围栏：数据处理在本地浏览器完成。大模型只发指令，不直接接触你的敏感数据库明细。
3. 开发效率：你不再需要为不同的 AI 插件写不同的适配层，只要符合 WebMCP 标准，所有支持该协议的 AI 助手都能秒懂你的业务。

---