作为天天跟DOM、交互、浏览器打交道的前端人，谷歌这波WebMCP的发布，绝对不是一次普通更新，而是直接掀翻了AI与Web交互的底层逻辑。

Chrome团队正式推出 WebMCP（Web模型上下文协议），简单说：AI智能体终于不用再伪装成人，去点按钮、看页面了。

目前在Chrome 146预览版中，开启对应flag就能直接体验。它只靠一个API：navigator.modelContext，就让AI绕过整个前端UI，直接跟Web应用内核对话。

以前AI订机票，要截图标注、识别按钮、模拟点击，跟人一样一步步操作。 现在有了WebMCP，Agent直接调用底层协议，一句话完成预订。 用开发者的话说：WebMCP就是UI里的API。

这标志着，AI与网页的交互，正式从视觉模拟，跃迁到逻辑直连。

---

以前的Agent有多蠢？前端看了都头疼

现在主流AI Agent操作网页的方式，在前端眼里又笨又脆弱：

• 截屏识图，消耗大量token

• 抓取DOM，靠选择器定位元素

• 模拟点击，页面一改直接失效

• 反复确认状态，效率极低

网站稍微改个样式、换个结构，AI直接“瘫痪”。这种基于视觉的交互，本质上是强行让AI去适应人类的界面，而不是让网页适配AI。

WebMCP的出现，直接把这套方案彻底淘汰。

---

前端狂喜：不用写后端，JS直接给AI开“绿色通道”

更让前端关注的是，WebMCP根本不是谷歌单打独斗。 早在2025年8月，谷歌+微软就联手共建这个标准，现在已开源在GitHub。

过去想让AI调用网站功能，前端还得去写Node、Python后端服务，跨语言、跨栈麻烦不断。 WebMCP直接把能力放在浏览器端，用我们最熟悉的前端JS就能实现：

• 不用额外部署服务

• 直接复用现有前端代码

• 统一用户与AI的界面与状态

• 权限、登录、状态全部同步

Chrome官方提供了两套接入方式，前端一看就懂：

1. 声明式API：在HTML里直接定义标准操作，简单快捷

<form
  data-tool-name="search_products"
  data-tool-description="搜索商品">
  <input name="query" required>
  <button type="submit">搜索</button>
</form>

search_products("iphone")

1. 命令式API：用JS实现复杂动态交互

if ('modelContext'in navigator) {
  navigator.modelContext.registerTool({
    name: "search_products",
    description: "搜索商品",
    inputSchema: {
      type: "object",
      properties: {
        query: { type: "string" }
      },
      required: ["query"]
    },
    execute: async (params) => {
      returnawait api.search(params);
    }
  });
}

谷歌工程师甚至直接定义：WebMCP就是AI时代的USB-C。

不再“猜按钮”，网页直接给AI发“操作说明书”

WebMCP的核心思路，前端一眼就能抓住精髓：

别只给像素，直接发布工具。

不让AI去猜按钮是干嘛的、输入框填什么， 而是网站主动提供：

• 有哪些可用操作（查询、下单、筛选、预订等）

• 标准JSON输入输出结构，减少幻觉

• 统一的页面状态与共识

过去是：乱点、重试、碰运气。 未来是：直接调用 book_flight(参数)。

控制权也回归到网站和开发者手里：我们定义AI能做什么、怎么传数据。

---

前端未来：网页分成两层，一半给人，一半给AI

如果WebMCP成为通用标准，未来的Web会彻底分层：

• 一层给人：好看的UI、交互、品牌视觉

• 一层给AI：结构化工具、函数、极速执行

未来的产品比拼，不再只是界面好不好看， 而是给AI的“工具契约”够不够清晰、好用。

电商、出行、客服、自动化……所有依赖网页操作的场景，都会被重构：

• 购物：一句话自动比价、领券、下单

• 出行：直接组合最优行程，无需翻页筛选

• 工单：AI自动填写、提交，无需人工填表

---

前端视角总结：这不是淘汰前端，是升级前端

很多人看到“AI绕过UI”，第一反应是：前端要没了？

恰恰相反。 WebMCP不是干掉前端，而是把前端的价值从“画页面”拉高到“定义AI与世界的接口”。

以前我们写页面给人用， 未来我们还要写标准、Schema、工具、协议给AI用。

AI Agent不再是网页的“外来访客”，而是和用户平级的一等公民。 用户、AI、网页，三者在同一个界面里协同工作。

作为前端，这波不是危机，是一次全新的赛道开局。 Web的下一个时代，叫 Agentic UI。 而定义它的人，很大概率还是我们。

-END -

如果您关注前端+AI 相关领域可以扫码进群交流

添加小编微信进群😊

关于奇舞团

奇舞团是 360 集团最大的大前端团队，非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。