现在网页都能提供 MCP 了?!

你有没有过这种体验:让 AI 帮你填个表单、下个单,它要么疯狂截图"看"页面,要么对着 DOM 树猜哪个按钮是"提交",猜错了就点飞。你心里 OS:这玩意儿怎么这么笨。

其实不是 AI 笨。网页从头到尾都是给人看的,没人告诉机器"我能干嘛、该怎么调我"。直到最近,这个口子才被撬开,主角叫 WebMCP。

先澄清一个误会

看到标题你可能以为:MCP,就是你自己接的那堆连接器协议,能直接在网页里跑了?

不是。MCP 是后端协议,跑在 server 或进程里,跟浏览器没啥关系。WebMCP 是另一码事:一套正在 W3C WebML 社区组里孵化的浏览器标准,让网页在前端直接把"工具"亮给浏览器里的 AI 智能体。

你可以把它当成"受了 MCP 启发的浏览器 API",不是 MCP 的网页移植版。它俩是搭档,不是谁替代谁。

传统方式 vs WebMCP

以前 AI 跟网页打交道,就两条路,都又脆又费 token。一条叫"视觉派":截图丢给多模态模型,让它看页面推断怎么操作。另一条叫"语义派":解析 DOM 和无障碍树,模拟点击。页面一改版、按钮一挪位,全失效,复杂登录态更是重灾区。

WebMCP 换了思路:网页自己声明"我会什么"。开发者拿几行 JS 把页面里的函数注册成结构化工具,AI 智能体来了直接发现、直接调用,拿回结构化 JSON。不截图、不猜按钮、不依赖 UI 长啥样。

javascript 复制代码
const mc = document.modelContext || navigator.modelContext;
await mc.registerTool({
  name: 'get_order_status',
  description: '按时间段查订单,返回单号/物流状态/位置',
  inputSchema: {
    type: 'object',
    properties: {
      timeframe: { type: 'string',
        enum: ['today', 'yesterday', 'last_7_days', 'last_30_days', 'last_6_months'] }
    },
    required: ['timeframe']
  },
  execute: async ({ timeframe }) => { /* 接你已有的查询逻辑 */ }
});

浏览器在中间当传话人,它知道当前页面、session、Cookie,所以 AI 是以"你本人已经在页面上"的身份在操作,比无头自动化稳得多。

MCP 和 WebMCP 到底差在哪

维度 MCP WebMCP
位置 后端 / 服务端 前端 / 浏览器
生命周期 持久(常驻) 临时(关页即失效)
连接性 全局 仅当前标签页
交互 无头 API 调用 浏览器内、能碰 DOM / 会话
发现 手动配置 访问页面自动发现
适用 后台数据 / 动作 在真实 UI 上代你操作

一句话:MCP 管核心逻辑,哪儿都能调;WebMCP 管页面内的即时交互,你打开网页那刻 AI 就能上手。

现在的网站拿它能干啥

凡是"用户要在你网站上多步操作、又已经登录"的场景,都合适。比如让 AI 理解字段语义后帮你填结构化表单,不用盲点输入框;搜索、筛选、下单这种多步流程也不会因为按钮挪了位就跑偏;后台报表能直接吐 JSON,省得 AI 去解析 HTML 表格。

它还能干带登录态的活儿,复用浏览器现成的 session,复杂鉴权比 Playwright 稳。像购买这类敏感操作,可以加确认弹窗,工具调用在页面上可见执行,你盯着就行。

我看重的是三点:快,走浏览器内部通道,没有网络往返;抗改版,绑的是应用逻辑不是页面设计;规则你定,你明确告诉 AI 该怎么操作你的站,而不是盼它自己找对按钮。

怎么开始,以及坑

现在还偏早期,但已经能玩:

  1. Chrome 地址栏粘 chrome://flags/#enable-webmcp-testing,设成 Enabled,Relaunch;
  2. 页面得是 https 或 localhost,而且得是源隔离文档(不能设 Origin-Agent-Cluster: ?0,也不能改 document.domain);
  3. 跨源 iframe 要加 <iframe allow="tools"> 显式授权;
  4. 装 Model Context Tool Inspector 扩展,在 DevTools 里能看到注册的工具、手动执行,还能用自然语言让内置 agent 调它。

两个坑提醒一下。一是 API 名字在 149 是 navigator.modelContext,150 以上才迁到 document.modelContext,所以探测时两个都得试,就像上面代码那样先 || 再判空。二是目前只有 Chrome 系支持,Firefox、Safari 还是 undefined,线上必须做 feature detection 兜底,别裸调。

结语

WebMCP 还在提案、源试用阶段,离"人人都用"差得远。但方向挺清楚:JSON-LD 让网页能被搜索,WebMCP 想让网页能被 AI 操作。以后你打开一个站,浏览器里的 AI 助手不用再猜这个站怎么用,站自己把说明书递过去了。

Agentic Web,不是口号了。

相关推荐
在所不辞兄3 小时前
【零基础学智能仿真-53】多智能体协作——有限元自动化实战从工程需求到可审核的仿真报告
人工智能·深度学习·神经网络·机器学习·有限元
AI Coder 码农王6 小时前
AgentScope Java v2 第3课,从 ReActAgent 到 HarnessAgent
人工智能
格物致胜工业数智技术6 小时前
明治EOS系列传感器技术解析:精密制造高反光金属件在位检测
人工智能·制造
甲维斯6 小时前
DeepSeek 新版还是难评!
人工智能
晨间晓6 小时前
图片细节丰富不丰富?用华为云码道开发 OpenCV 纹理复杂度分析工具
人工智能·opencv·华为云
2603_965148116 小时前
电商选品调研:通过关键词搜索API获取市场热销商品,结合商品详情API分析竞品卖点与定价
开发语言·数据库·人工智能·python·信息可视化
镜象科技7 小时前
什么是好的校园AI心理健康解决方案服务商?从中外校园心理服务的一天说起
人工智能
lpfasd1237 小时前
node-sass 停止维护!老项目迁移 Dart Sass 完整教程
前端·rust·sass
Geeys7 小时前
拼多多单品推广完整方案(可直接落地)
大数据·人工智能
泡椒鸡脚7 小时前
AI室内设计风格融合:把布局、材质和光影参考分开写
人工智能·材质