这时候，WebMCP 就像给 AI 配了个“遥控器”。

哈哈，这玩意儿的核心思想hen简单——把页面功Neng包装成工具，让模型直接调。

咱们先把概念拆开聊聊。

MCP，全称 Model Context Protocol，是 Anthropic 推出的开放协议。

它定义了 AI 模型怎么和外部工具、数据源打交道。

想象一下你让模型调用一个天气查询 API，它会按照协议发送请求、拿回结果。

这套协议在后端跑得风生水起，hen多 SaaS dou在用。

对，没错，就是把 MCP 从服务器搬到浏览器里。

于是页面本身Ke以变成一个“小型 MCP Server”。

开发者只要几行 JS，就Neng把「添加待办」之类的交互注册为工具。

AI kan到了工具的说明书，就知道该怎么点按钮、填表单。

document.modelContext.registerTool({
  name: "add-todo",
  description: "向待办列表添加新任务",
  inputSchema: {
    type: "object",
    properties: {
      text: {type: "string", description:"任务内容"},
      priority: {type:"string", enum:, description:"优先级"}
    },
    required:
  },
  async execute {
    // 假设这里有保存到后端的逻辑
    await saveTodo;
    return {content:};
  }
});

不对不对，应该是把 async execute 放在大括号里这样才会被当成方法。

默认情况下只对同源页面和浏览器内置 AI 开放。

Ru果你想让可信任的跨域 iframe 调用，就加个 exposedTo

document.modelContext.registerTool(
  {/*工具定义*/},
  {exposedTo:}
);

未来涉及支付、删除数据等敏感操作时浏览器会弹原生确认框。

用户点「确定」后才真的执行，这种人机协作比全自动geng靠谱。

想象一下你打开某电商页面对着浏览器里的 AI 小助手说：

"帮我把购物车里的红色连衣裙换成蓝色的，同价位的还有没有？"

Ai kan见页面Yi经注册了 "change-color", "query-similar" 两个工具，直接调接口就搞定了。

整个过程全程在用户可视化页面完成，省掉了爬虫+像素识别的老土Zuo法。

a) 页面必须显式声明哪些来源Ke以使用 WebMCP；

b) 未授权的脚本会收到 NoAllowedError，别想偷偷调用啦！

a) 每一次关键操作dou会弹出原生确认框；

b) 用户随时Ke以点「取消」，甚至手动在页面上自行修改。说实话，这比后台黑箱操作舒服多了。

a) 在嵌入第三方内容时用