WebMCP：让网页直接告诉 AI 自己能做什么

01 · 为什么需要 WebMCP

它是什么

对前端意味着什么

以前的 AI Agent 操作网页，像让实习生隔电话做事

如果你让 AI 帮你在网站上订一张餐厅的桌子，它会做什么？

打开网页 → 找按钮 → 看页面 → 猜输入框 → 模拟点击 → 再看页面发生了什么。

听起来是不是很像：

让一个实习生隔着电话操作电脑。

网页稍微改一下布局，按钮换个位置，甚至弹出一个 Cookie 弹窗，Agent 都可能“迷路”。

图：传统 AI Agent 操作网页的流程（读取 → 分析 → 猜测 → 点击）

02 · WebMCP：别让 AI 猜了，直接告诉它

WebMCP 的思路很简单：

不要让 AI 猜网页怎么操作，直接告诉 AI 这个网页能做什么。

以一个餐厅网站为例。传统方式下，AI 要自己识别哪个按钮是“预订”。有了 WebMCP，网站可以直接声明：

book_table
参数：date, time, party_size

AI 不再猜，直接调用：

book_table({
  date: "今天",
  time: "20:00",
  party_size: 4
})

从“猜网页”变成了“调用网页能力”。

图：WebMCP 工作流程：网站声明工具 → Agent 发现工具 → 调用执行

03 · WebMCP 到底是什么？

WebMCP 可以理解为：

让网页自己向 AI Agent 暴露工具。

它是一个正在讨论中的 Web 标准提案，由 Google Chrome 和 Microsoft Edge 相关团队参与推动，目前仍处于早期阶段，并不是已经完成的正式 Web 标准。

如果你了解 MCP，会发现这个思路非常熟悉——MCP 是让 AI 调用外部工具，而 WebMCP 更进一步：

让浏览器里的网页直接提供这些工具。

图：MCP（服务器工具）vs WebMCP（浏览器网页工具）

这意味着：

网站不仅是给人看的，也开始可以直接给 AI 操作。

04 · 网站终于可以“告诉 AI 自己会什么”

这可能是 WebMCP 最值得关注的地方。

以前 Agent 进入一个电商网站：

“这里哪个按钮是加入购物车？”

现在网站可以直接声明工具：

AI 看到这些工具后，就知道这个网页能做什么、应该怎么调用。

这和 API 很像。

只不过以前 API 主要是：

程序 → 程序

而 WebMCP 想解决的是：

AI Agent → 网页能力

图：网站向 AI 声明工具接口示例

图：AI Agent 发现并调用网页工具的示意

05 · 对前端开发者来说，改动没有想象中大

WebMCP 不是要求你把整个网站重新开发一遍。

它更像是在现有功能上，套一层 AI 能理解的工具接口。

比如你的网站本来就有：

addTodoToPage(text)

现在只需要把它包装成 Agent 可以调用的工具：

registerTool({
  name: "add_todo",
  description: "Add an item to the to-do list",
  inputSchema: {
    type: "object",
    properties: {
      text: { type: "string" }
    }
  },
  execute: async ({ text }) => {
    addTodoToPage(text)
  }
})

核心逻辑没变。

以前：

用户点击按钮 → JavaScript 执行

以后：

AI 调用工具 → JavaScript 执行

图：WebMCP 工具注册代码示意

06 · 最关键的优势：它跑在用户已经登录的网页里

这一点非常重要。

传统自动化 Agent 有时候需要：

登录 → 获取 Cookie → 模拟浏览器 → 操作网站。

WebMCP 的思路则完全不同：

用户已经打开网站并登录 → Agent 调用网页暴露的工具。

工具本身就在当前页面执行，并使用页面现有的状态和会话。

图：WebMCP 直接使用用户当前登录会话，无需额外认证

这让很多原本复杂的 Agent 自动化场景变得更加自然。

当然，涉及付款、提交订单等重要操作时，仍然需要非常谨慎，WebMCP 本身也在强调权限、用户确认等安全问题。

07 · 我的判断

从映星视界的视角看，WebMCP 真正有意思的地方，不是又多了一个 MCP。

而是它可能改变一个很基础的问题：

“未来的网站，到底是给谁用的？”

以前答案很简单：

给人用。

现在开始出现第二个答案：

也给 AI Agent 用。

以前一个网站要考虑：

PC 端、移动端、无障碍

现在可能还要多考虑一个东西：

AI Agent 怎么操作？

图：未来网站可能同时拥有两套入口：人类 UI + AI Tools

图：WebMCP 官方 Demo：餐厅预订场景演示

WebMCP 还很早期。

浏览器支持有限，API 可能继续变化，而且最大前提还是：

网站自己愿意提供这些工具。

如果一个网站没有 WebMCP 工具，Agent 还是得回到传统的网页操作方式。

对前端开发者来说，最大的价值不是马上接入生产项目，而是提前理解 “Agent Native Web” 是什么。

以前 AI Agent 操作网页，像在看着网页猜按钮。

WebMCP 想做的事情则是：

“网页直接告诉 AI：我有什么能力，你可以怎么调用。”

END

我是映星视界，专注于端侧 AI 与开发者工具的观察与记录。

如果你觉得今天这篇有收获，欢迎点赞、在看、转发三连，我们下篇见。

#WebMCP #AI操作网页 #前端 #Agent Native Web