WebMCP:开启 Agentic Web 新时代——Chrome 新 API 的特性与前瞻

WebMCP:开启 Agentic Web 新时代——Chrome 新 API 的特性与前瞻

2026 年 2 月,Google Chrome 团队正式发布了 WebMCP(Web Model Context Protocol)的早期预览版。这是一个旨在重塑网页与 AI 代理(Agent)交互方式的新标准。它让网站不再只是“给人看”的静态页面,而是可以直接向 AI 代理暴露结构化工具,让 Agent 以更高效、更可靠的方式完成复杂任务。

过去,AI 代理操作网页主要依赖模拟人类行为:截屏、解析 DOM、点击按钮、填写表单。这种方式不仅慢、容易出错,还会消耗大量 token。随着 Agentic AI 的快速发展,这种低效交互已成为瓶颈。WebMCP 的出现,正是为了解决这个问题。它让网站主动声明“我能做什么”,Agent 直接调用结构化工具,像调用 API 一样精准高效。

WebMCP 是什么?

WebMCP 是由 Google 和 Microsoft 联合推动、正在 W3C 社区孵化的网页标准。它在浏览器层面引入了 navigator.modelContext 接口,让网站可以向 AI 代理暴露可调用的工具(tools)。这些工具带有明确的名称、描述、输入输出 schema,Agent 可以直接发现并执行,而无需通过视觉或 DOM 模拟。

核心目标:

  • 提升速度、可靠性和精确性
  • 让网页成为 Agent 的“原生接口”
  • 推动“Agentic Web”——网页主动参与 AI 代理工作流

两大核心 API:声明式与命令式

WebMCP 提供了两种互补的实现方式,满足从简单到复杂的不同场景。

Imperative API(命令式 API)
通过 JavaScript 动态注册,更灵活,适合复杂交互(如多步骤配置、实时计算)。示例:电商网站添加购物车工具

navigator.modelContext.registerTool({name:"add_to_cart",description:"将商品加入购物车",inputSchema:{type:"object",properties:{productId:{type:"string"},quantity:{type:"integer"}},required:["productId"]},execute:async(params)=>{// 实际业务逻辑awaitaddToCart(params.productId, params.quantity);return{success:true,cartCount:getCartCount()};}});

Agent 可以直接调用 add_to_cart,无需模拟点击、滚动、等待加载。

Declarative API(声明式 API)
最轻量的方式,直接在 HTML 标记中添加属性即可。适合已有表单的场景,几乎零额外成本。示例:一个航班搜索表单

<formtoolname="search_flights"tooldescription="搜索可用航班,支持出发地、目的地和日期筛选"><inputname="origin"placeholder="出发地"/><inputname="destination"placeholder="目的地"/><inputname="date"type="date"/><buttontype="submit">搜索</button></form>

Agent 看到这个表单后,就能直接调用 search_flights 工具,传入结构化参数,返回 JSON 格式的航班列表。

WebMCP 的核心优势

相比传统的 UI 模拟方式,WebMCP 带来了质的飞跃:

  • 速度更快:一次工具调用取代数十次截屏+推理+操作,延迟大幅降低。
  • 可靠性更高:明确工具契约,避免因页面布局变动导致的失败。
  • 成本更低:大幅减少 token 消耗,不再需要传输大量截图或无关 DOM。
  • 开发者友好:复用现有前端代码,无需额外后端 API 或重构。
  • 用户体验更好:支持“human-in-the-loop”,Agent 在用户可见的页面上操作,保持上下文共享。

典型应用场景:

  • 旅行预订:Agent 直接搜索、筛选、预订航班
  • 电商:精准搜索商品、配置选项、完成下单
  • 客户支持:自动填写技术细节、提交工单

前瞻性功能与影响

WebMCP 不仅是技术升级,更是 Agentic Web 的基础设施。它预示着几个重要趋势:

  1. 开发者红利期来临
    谁先实现高质量的 WebMCP 工具层,谁就能在 Agent 流量中占据先机。早期采用者可以吸引更多 AI 代理访问,提升网站在 Agent 生态中的曝光和转化。
  2. 标准化与跨浏览器支持
    目前仅在 Chrome 146 Canary 中通过 flag 启用,但 Microsoft 已参与孵化,Edge 很可能跟进。未来有望成为 W3C 正式标准,像 HTTP 一样成为网页与 Agent 交互的通用接口。
  3. 与其它协议互补
    WebMCP 专注于浏览器内、用户可见的交互场景,与 Google A2A(headless 自动化)、Anthropic MCP(服务端)形成互补,共同构建完整的 Agent 生态。
  4. 潜在挑战与演进
    发现机制(如何让 Agent 知道网站支持 WebMCP)、安全性(权限控制)、以及网站货币化模式仍需探索。但正如帖子中讨论的,一些平台可能选择封闭,而开放者将赢得未来。

结语

WebMCP 的出现,标志着网页从“被动展示”向“主动协作”转变。它让 AI 代理真正“理解”网站意图,而不是盲目模拟人类行为。对于开发者来说,现在就是最佳窗口期:打开 Chrome Canary,启用 flag,尝试 travel-demo,亲手注册几个工具。

Agentic Web 时代已经拉开序幕。你的网站准备好迎接 Agent 了吗?

Read more

【前端】Vue3+elementui+ts,TypeScript Promise<string>转string错误解析,习惯性请出DeepSeek来解答

【前端】Vue3+elementui+ts,TypeScript Promise<string>转string错误解析,习惯性请出DeepSeek来解答

🌹欢迎来到《小5讲堂》🌹 🌹这是《前端》系列文章,每篇文章将以博主理解的角度展开讲解。🌹 🌹温馨提示:博主能力有限,理解水平有限,若有不对之处望指正!🌹 目录 * 前言 * 报错信息 * DeepSeek解答 * 问题原因 * 解决方案 * 最佳实践 * 异步和同步 * 1. 同步(Synchronous)操作 * 示例:同步数据更新 * 2. 异步(Asynchronous)操作 * 示例 1:`setTimeout` * 示例 2:`async/await` * 3. Vue 3 的异步更新机制 * 如何等待 DOM 更新? * 4. 生命周期钩子中的异步 * 5. 总结 * 最佳实践 * 文章推荐 前言 好久没有写前端,

PyTorch生成式人工智能(29)——基于Transformer生成音乐

PyTorch生成式人工智能(29)——基于Transformer生成音乐

PyTorch生成式人工智能(29)——基于Transformer生成音乐 * 0. 前言 * 1. 音乐 Transformer 简介 * 1.1 基于演奏的音乐表示 * 1.2 音乐 Transformer 架构 * 1.3 训练音乐 Transformer 流程 * 2. 音乐片段分词 * 2.1 下载训练数据 * 2.2 MIDI 文件分词 * 2.3 准备训练数据 * 3. 构建音乐生成 Transformer * 3.1 音乐 Transformer 超参数 * 3.2 构建音乐Transformer * 4 训练和使用音乐Transformer * 4.1 训练音乐Transformer

Harness Engineering工程化教程(非常详细),AI Agent复杂长任务从入门到精通,收藏这一篇就够了!

Harness Engineering工程化教程(非常详细),AI Agent复杂长任务从入门到精通,收藏这一篇就够了!

Views are my own. “Yet Another Chapter”,Generated by Google Lyria OpenAI 的一个团队在五个月内用 Codex 写了一百万行代码,三个工程师平均每天合并 3.5 个 PR,没有一行代码是工程师手写的。Anthropic 的 Claude Code 能连续工作数天构建完整应用。LangChain 的 Coding Agent 在 Terminal Bench 2.0 上从 52.8% 跃升至 66.5%,却只改了 harness,模型没动。 随着 Coding Agent 能力过去一段时间的突飞猛进,软件工程师的工作变了:从“

面向AI浪潮:openGauss在向量数据库与RAG场景下的应用深度研究

面向AI浪潮:openGauss在向量数据库与RAG场景下的应用深度研究

文章目录 * 引言 * 一、openGauss技术演进与AI能力基础 * 1.1 openGauss版本迭代回顾:迈向智能与云原生 * 1.2 核心AI特性:从AI4DB到DB4AI * 1.3 生态系统支撑 * 二、openGauss向量数据库能力深度解析与实战 * 2.1 向量数据库:AI时代的基石 * 2.2 openGauss的向量能力:datavec扩展 * 2.3 实战演练:构建基于openGauss的向量检索引擎 * 2.3.1 环境准备与登录 * 2.3.2 向量能力启用与数据表创建 * 2.3.3 向量数据插入 * 2.3.4 IVFFlat索引构建 * 2.3.5 向量相似度检索 * 三、