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 助手都能秒懂你的业务。