网络的新语言:Google 的 Web MCP 如何让每个网站都为智能体做好准备

多年来,网络是为人类的眼睛而构建的。点击这里,滚动那里,填写这个表单。每一个设计决策——颜色、布局、交互元素——都是为坐在屏幕前的人优化的。

但有些事情正在发生变化。智能体正在进入网络,而大多数网站还没有为它们做好准备。


问题:智能体在“盲目浏览”

想象一下,你拥有一个电商网站,并希望 AI 智能体能够使用它——搜索商品、添加到购物车、完成购买。在一个数百万智能体代表用户浏览网页并执行操作的未来,你的网站是否对这些智能体友好,可能决定你的业务成败。

今天,你有两个选择,但都不理想。

第一个是构建你自己的 MCP 服务器,并希望所有智能体都恰好安装了它。这几乎不可能发生。没有任何一个网站重要到可以被预加载进每个智能体的工具集中,成为永久组件。

第二个选择是依赖智能体的浏览器操作能力——让它截图、解析原始 HTML,然后自己判断该点击什么。这种方式正在变好,但从根本上说它是“非确定性的”。智能体需要在为人类设计的大量 HTML 代码中摸索:导航栏、广告位、Cookie 提示、动态内容。信息噪声大、速度慢,而且容易失败。智能体可能错过按钮、误读字段,或者直接放弃。

在 AI 智能体成为网页内容主要使用者的时代,一个难以被智能体导航的网站,终将被抛在后面。


解决方案:嵌入页面内部的 MCP

Google 的答案是 Web MCP —— 一种将 MCP 工具直接嵌入网站的方法,使得任何使用兼容浏览器的智能体在浏览页面时,都能自动发现当前页面可用的操作。

核心理念非常优雅。与其让智能体反向解析页面 HTML 来猜测能做什么,不如让页面主动告诉它。当智能体访问你的电商首页时,它会看到:search_productsget_categoriesapply_filters。当它进入商品详情页时,会看到:add_to_cartget_similar_products。不需要翻译层。不需要猜测。只有干净、结构化、确定性的操作——根据页面上下文逐页加载。

这正是 Web MCP 真正令人兴奋的关键点:工具不会预加载到智能体的全局上下文中,而是在智能体浏览时“当场发现”。正确的工具出现在正确的页面,当不再相关时自动消失。


两种构建方式

Web MCP 支持两种实现方式,取决于你的网站构建方式。

声明式:适用于静态 HTML

对于简单的静态页面,方法非常直接。你只需要在现有的表单元素上添加一些 HTML 属性——tool-nametool-description,以及每个输入字段的 tool-param-description。仅此而已。

当使用支持 Web MCP 的浏览器的智能体访问页面时,它会自动看到一个完整的 MCP 工具,包括名称、描述和输入结构——全部来自你添加的属性。不需要服务器,不需要 API,不需要额外基础设施。

你甚至可以监听智能体的操作。当智能体填写表单时,会触发一个特殊的 agent.invoked 事件,你可以返回结构化反馈——确认成功、返回错误,或者触发自定义 UI 元素,例如在提交前显示“请确认”的提示框。智能体获得标准的工具响应;人类用户也可以在最终提交前进行确认。

命令式:适用于动态应用

对于 React 或 Next.js 应用,命令式方式提供完全的编程控制。新版 Chrome 浏览器暴露了两个新的 navigator 函数——navigator.registerToolnavigator.unregisterTool,允许你将 MCP 工具绑定到特定组件。

模式很清晰:定义工具结构(名称、描述、输入结构、输出结构、处理函数),在组件挂载时注册工具,在组件卸载时取消注册。结果是一个实时、具备上下文感知能力的工具注册表,会随着用户或智能体的导航自动更新。

在一个演示的看板应用中,效果立刻显现。让智能体“为三个人准备晚餐制定所有任务计划,并将每一列作为一个类别”,它会实时创建列并填充卡片,自主完成,零错误。每个操作都通过类型化的 MCP 工具调用完成。没有猜测。没有幻觉。


一种新的上下文智能模式

Web MCP 不只是浏览器功能。它代表了一种新的架构模式,介于两种各有明显限制的方法之间。

传统 MCP 功能强大,但成本高:所有工具结构一开始就加载到智能体的上下文窗口中,无论是否需要。对于拥有数十个工具的智能体来说,这种开销非常大。

“技能”方法更轻量——初始只加载标题和描述,需要时再获取完整细节——但它牺牲了 MCP 在工具调用中提供的严格类型安全性。

Web MCP 在两者之间找到了平衡。工具根据上下文加载,由智能体所在位置触发,而不是预先配置。智能体在需要时拥有完整的结构保证,不需要时则不占用上下文成本。

这种“上下文驱动”的 MCP 模式——在正确时刻呈现正确工具,由任务和上下文驱动而非静态配置——很可能是更广泛智能体生态系统的发展方向。


开始使用

今天想要试验 Web MCP,你需要:

  1. Chrome Beta(需要最新版本)
  2. chrome://flags 中启用 Web MCP flag
  3. 安装 Model Context Protocol Tool Inspector Chrome 扩展

之后,无论是为静态页面添加声明式 HTML 属性,还是在动态应用中调用 navigator.registerTool,都可以轻松设置并在本地测试。

网络最初是为人类而建。Web MCP 正在开始让它也能被智能体理解。

Read more

【亮数据 × Dify】零代码秒搭 AI 实时爬虫,数据伸手就来!

👨‍🎓博主简介 🏅ZEEKLOG博客专家 🏅云计算领域优质创作者 🏅华为云开发者社区专家博主 🏅阿里云开发者社区专家博主 💊交流社区:运维交流社区 欢迎大家的加入! 🐋 希望大家多多支持,我们一起进步!😄 🎉如果文章对你有帮助的话,欢迎 点赞 👍🏻 评论 💬 收藏 ⭐️ 加关注+💗 文章目录 * 讲解概况 * ✅ 总结: * 1. 工具介绍 * 2. 操作步骤 * 3. 亮点 * ✅ 一句话总结: * ✅ 带你一起体验 * --------------------------------------- 扩展 ---------------------------------------------- * 一、先把“玩具”变“工具”:补全 6 大缺失环节 * 二、一条可复制的「电商竞品监控」流水线 * 三、把“免费额度”用到极限的 5 个技巧 * 四、两个“

OpenClaw 搭建一人公司:10 个 AI Agent,24 小时自动开工

OpenClaw 搭建一人公司:10 个 AI Agent,24 小时自动开工

1. 你的 AI 是不是也在"摸鱼" 你有没有这种经历——让 AI 助手写完小红书笔记,接着写公众号文章,它把种草语气带过来了。你说"别用那种语气",它说"好的",下一段又犯。 问题不是 AI 不行,是你让一个 AI 同时干了 10 个部门的活。 换个角度想:你见过哪家公司的 CEO 亲自写文案、亲自修 Bug、亲自追热点、亲自剪视频吗? 不会对吧。正常公司的做法是:分部门,每个部门各司其职。 那为什么你的 AI 不能也分部门? 回顾 AI 的进化路径:2023 年我们跟

OpenClaw Skills 安装与实战:打造你的 AI 技能工具箱

OpenClaw Skills 安装与实战:打造你的 AI 技能工具箱

OpenClaw Skills 安装与实战:打造你的 AI 技能工具箱 本文介绍如何使用 ClawHub 安装和管理 OpenClaw 技能包,并通过实战案例演示多个技能的协同使用。 前言 OpenClaw 是一个强大的 AI 助手框架,而 Skills(技能包)则是扩展其能力的核心方式。通过安装不同的技能包,你可以让 AI 助手具备搜索、总结、开发指导、自我学习等能力。 本文将带你完成: * ClawHub CLI 的安装与使用 * 多个实用技能包的安装 * Self-Improving 记忆系统的初始化 * 一个综合实战案例演示 一、ClawHub:技能包管理器 1.1 什么是 ClawHub ClawHub 是 OpenClaw 的官方技能包市场,提供了丰富的技能包供用户安装使用。 安装 ClawHub

AI工具链:Gradio演示界面

AI工具链:Gradio演示界面

AI工具链:Gradio演示界面 📝 本章学习目标:本章聚焦职业发展,帮助读者规划AI学习与职业路径。通过本章学习,你将全面掌握"AI工具链:Gradio演示界面"这一核心主题。 一、引言:为什么这个话题如此重要 在人工智能快速发展的今天,AI工具链:Gradio演示界面已经成为每个AI从业者必须掌握的核心技能。Python作为AI开发的主流语言,其丰富的生态系统和简洁的语法使其成为机器学习和深度学习的首选工具。 1.1 背景与意义 💡 核心认知:Python在AI领域的统治地位并非偶然。其简洁的语法、丰富的库生态、活跃的社区支持,使其成为AI开发的不二之选。掌握Python AI技术栈,是进入AI行业的必经之路。 从NumPy的高效数组运算,到TensorFlow和PyTorch的深度学习框架,Python已经构建了完整的AI开发生态。据统计,超过90%的AI项目使用Python作为主要开发语言,AI岗位的招聘要求中Python几乎是标配。 1.2 本章结构概览 为了帮助读者系统性地掌握本章内容,我将从以下几个维度展开: 📊 概念解析 → 原理推导 → 代码