00:00:00人工智能代理（AI Agents）现在已经开始融入我们生活的方方面面。
00:00:03而其中最主要的发生领域之一就是浏览器。
00:00:06每家主流人工智能公司都意识到，浏览器是每个人每天都会使用的
00:00:11唯一工具。
00:00:12那么，为什么不把 AI 放入浏览器呢？
00:00:14但事实是，它们现在的表现都很糟糕。
00:00:15而且这不仅仅是优化的问题。
00:00:17这其中存在一个根本性的缺陷，无论如何优化都无法解决。
00:00:20不过，谷歌与微软合作，刚刚发布了一项名为 WebMCP 的技术。
00:00:24它并没有试图让 AI 代理更好地使用网站，而是让网站更擅长
00:00:29与 AI 代理沟通。
00:00:30这是一个完全不同的思路。
00:00:32它所实现的功能是我们从未见过的。
00:00:35这是一个在本地服务器上运行的简单 HTML 页面。
00:00:38打开扩展程序标签页，我们可以看到 WebMCP 扩展。
00:00:41打开它，在网站名称下方，我们看到一个工具：BookTable（订位）。
00:00:45我们将这个 WebMCP 桥接器连接到了 Claude Code，并告知它我们已经
00:00:49打开了一个带有可用 WebMCP 工具的餐厅预订表单。
00:00:52我们给它的任务是预订一个两人桌，并提供日期、姓名和特殊要求。
00:00:57所有这些字段都在表单中显示。
00:00:59它确认了日期，使用了网站提供的 WebMCP 工具，填写了字段，
00:01:03并成功完成了预订。
00:01:06目前，AI 代理主要有两种方式来识别屏幕上的内容。
00:01:09第一种方式是基于视觉的。
00:01:11代理会对整个页面进行截图，标注它能看到的每一个元素，
00:01:15然后将图像传给模型，由模型尝试判断该点击哪里。
00:01:19第二种方式是 DOM 解析。
00:01:21代理会提取页面的原始 HTML 代码。
00:01:24如果你曾在任何网站上打开过“检查元素”，你就会知道那是什么样子。
00:01:28成千上万行代码。
00:01:29代理会通读所有代码，并尝试识别出正确的按钮。
00:01:33这两种方法都有一个相同的根本问题。
00:01:35它们都是非确定性的。
00:01:36代理每一次的操作其实都只是在进行“最佳猜测”。
00:01:39这一切之所以无法稳定运行，是因为整个互联网都是为了
00:01:43人类的眼睛而构建的。
00:01:45每个网站都默认是人在浏览。
00:01:47它没有为机器提供结构化信息。
00:01:48因此，无论模型多么出色，每个代理都不得不努力去解读一些
00:01:53从未设计给机器解读的东西。
00:01:55有了 WebMCP，不再是代理去揣摩你的网站，而是你的网站
00:02:00将其可用操作注册为工具。
00:02:01当代理访问页面时，它不需要猜测。
00:02:04它只需读取可用工具并直接调用它们。
00:02:07目前，WebMCP 仅供早期预览。
00:02:10随着代理化网络（Agentic Web）的发展，网站也需要随之进化。
00:02:13正如你所见，通过定义这些工具，我们赋予了代理更好的方式
00:02:18与我们的站点互动。
00:02:19之前的演示之所以成功，是因为那是一个简单的 HTML 表单。
00:02:21但大多数真实的网站并没有那么简单。
00:02:23因此，WebMCP 根据你的工作需求提供了两种不同的方案。
00:02:28有两种方式可以让代理控制浏览器。
00:02:31声明式 API 适用于简单的流程，比如你刚刚看到的 HTML 表单。
00:02:35命令式 API 适用于具有多个页面的全规模 Web 应用，这些应用
00:02:40需要我们在后续深入探讨的一些额外实现。
00:02:43目前还没有官方文档，但他们在 Google Chrome Labs 中
00:02:48提供了一个 WebMCP 工具库，包含两个演示，且只有一个是在线托管的。
00:02:52一个是简单的航班搜索演示，另一个是官方的 Marvel 上下文工具检查器扩展。
00:02:56安装后，无论哪个网站实现了 WebMCP，你都能通过扩展检测到
00:03:01这些工具，并且还能实现一些其他酷炫的功能。
00:03:05工具的输入模式（Schema）会直接显示在那里。
00:03:07目前该页面上只有一个工具：航班搜索工具。
00:03:10他们提供了两种使用方式。
00:03:12你可以提供自定义输入参数让 AI 模型填写，或者
00:03:16设置你的 Gemini API 密钥，直接用简单的英语给出用户提示，
00:03:21页面就会根据提示被控制。
00:03:22目前它有一些默认输入。
00:03:24我们更换了这些参数，它确实搜索了航班并得到了大量结果。
00:03:28我再次返回，这次 WebMCP 旅游网站提供了四个可用工具，
00:03:32其中三个现在是可以应用的筛选器。
00:03:35页面的输入参数也发生了变化。
00:03:37我添加了另一个参数，它给了我们一个筛选设置已更新的通知。
00:03:41虽然没有符合这些筛选条件的航班，但所有的设置都已应用。
00:03:44在这个过程中，我们不停地在 Zen 浏览器和 Chrome 之间切换，
00:03:48这是因为虽然 WebMCP 是作为任何浏览器都能使用的开放协议发布的，
00:03:54但目前它仅支持 Chrome 的 Canary 版本。
00:03:55直到他们发布正式标准，所有人才能使用。
00:03:58这就是目前官方工具的进展。
00:04:01没有文档，只有两个演示，仅支持 Chrome Canary，而且你无法直接
00:04:05配合 Claude Code 使用，因为它实际上是为浏览器代理设计的。
00:04:09于是我们找到了这个自定义的 WebMCP 桥接器，你可以安装在系统中，
00:04:14它会为你提供一个 MCP 和一个扩展程序。
00:04:16正是这个工具让 Claude Code 能够使用 WebMCP，并在任何网站上
00:04:22进行导航和使用其提供的工具。
00:04:23为了演示网站是如何具体实现的，我们先从较简单的方法开始。
00:04:27在声明式 API 中（即你看到的 HTML 表单），你真正需要做的
00:04:31只是在 HTML 表单中声明三样东西：工具名称、工具描述和工具参数
00:04:36描述。
00:04:37你不需要深入研究它们。
00:04:39你只需要确保你的代理将它们添加进去即可。
00:04:41我们根据 WebMCP 仓库中的演示逆向工程制作了两个指南，
00:04:46并让 Claude Code 访问了这些指南。
00:04:47在这个过程中，我们实际上遇到了一些常见问题，并不得不
00:04:51沿途修正这些指南。
00:04:53这两份指南都可以在 AI Labs Pro 中找到，那是我们的社区，
00:04:57提供即插即用的模板。
00:04:58你可以直接在本项目以及之前所有视频的项目中使用这些模板。
00:05:01核心教学都在这个视频里，但如果你想要实际的文件，
00:05:05链接就在描述栏中。
00:05:06如果你的代理添加了这些声明，剩下的就交给浏览器了，
00:05:10浏览器会从 HTML 中读取它们。
00:05:12第二种方式是命令式 API，适用于需要更复杂交互和
00:05:17JavaScript 执行的情况。
00:05:18我们初始化了一个 Next.js 应用，将 Next.js 指南交给 Claude Code，
00:05:23这就足以让它完成实现了。
00:05:24在 React 应用中，它会在 library 文件夹里创建一个新文件，
00:05:29在那里声明网站需要的所有工具。
00:05:30这些是所有的函数，而这些是它们的定义。
00:05:33但由于这些 Web 应用可能变得非常庞大，甚至拥有超过 100 个工具，
00:05:38我们就会遇到和 Claude Code 一样的问题，即上下文过载
00:05:41导致整个系统崩溃。
00:05:43因此，与其加载一个网站的所有工具，不如只加载
00:05:47单个页面所拥有的工具。
00:05:48这个概念被称为“上下文加载”。
00:05:50这就是我们让 Claude Code 制作的 Next.js 应用。
00:05:53这是一个功能完整的、带有后端实现的小型演示应用。
00:05:57现在我们在主页上，这个站点只有 3 个可用工具。
00:06:01当我进入购物车页面，这次我们有了 4 个工具，而且名称也变了。
00:06:05工具的可用性会根据你所在的页面而变化。
00:06:09这就是注册函数发挥作用的地方。
00:06:11每当你进入一个页面（如首页），它就会运行 register home tools 函数，
00:06:15当你离开时，它会运行 unregister home tools。
00:06:18根据哪些工具属于该页面，它会进行相应的注册和注销。
00:06:23这就是为什么在这种情况下它不光依赖浏览器，代码本身也
00:06:27处理了集成工作。
00:06:28我们目前并没有像谷歌设想的那样，通过浏览器自带的代理
00:06:32来使用 WebMCP。
00:06:34我们实际上是使用了一个桥接器将 Claude Code 连接到 WebMCP，
00:06:39并以此来控制网站。
00:06:40如果你想更深入地挖掘 Claude Code 本身，我们还有一段关于
00:06:4410 种最新进阶使用方法的视频。
00:06:46这个桥接器是一个社区项目，配合命令式 API 使用时，它存在一个问题：
00:06:51在这个 MCP 服务器上，工具切换功能并不太稳定。
00:06:54当我打开网站时，我们正处于结账页面，并在那里初始化了
00:06:58Claude Code 会话。
00:06:59当我们要求它导航回首页时，它无法识别首页上的可用工具。
00:07:03（空白）
00:07:04当我们在首页进入产品页面时，虽然看到了“加入购物车”按钮，
00:07:08但当代理在产品页面上时，它却无法真正看到那个按钮。
00:07:11所以我们不得不手动将商品添加到购物车来完成这个演示。
00:07:14但当我们要求它完成结账时，它自动填写了详细信息，下单
00:07:18并完成了整个购物流程。
00:07:21这是目前这个 MCP 的一个限制，这也把我们引向了另一个观点。
00:07:25WebMCP 是开源的，各大浏览器厂商和科技公司都被列为参与者。
00:07:30但目前，唯一支持它的浏览器是 Chrome Canary，而预期的代理
00:07:34是 Gemini，即谷歌直接内置在浏览器中的 AI。
00:07:38如果你现在是一名网站所有者并实现了 WebMCP，那么今天唯一能
00:07:42原生使用你工具的代理就是 Gemini。
00:07:44Claude Code 需要一个社区构建的桥接器，而且在上下文加载生效时会失效。
00:07:49所有非谷歌代理目前都处于劣势。
00:07:51那么 Claude 能够赶上吗？
00:07:52当然，他们有自己的浏览器扩展。
00:07:55既然那也是一个浏览器代理，它也有可能像 Gemini 一样
00:07:59去发现这些工具。
00:08:00但问题是，会有多少人刻意去安装一个 Claude 浏览器扩展，
00:08:04而不是直接使用 Chrome 里自带的 Gemini 呢？
00:08:08Chrome 拥有数十亿用户，他们不需要安装任何东西。
00:08:11在我们看来，谷歌并不是在排挤任何人。
00:08:13他们只是在利用自己现有的架构和受众群体。
00:08:17一个在他们拥有的浏览器中运行最出色、配合他们预装的代理
00:08:21使用的开放标准。
00:08:22但这并不意味着你不应该实现它。
00:08:23标准本身确实非常有用，让你的网站具备“代理可访问性”是明智的，
00:08:28无论哪个代理最先受益。
00:08:30如果你打算实现这个功能，有几件事值得注意。
00:08:33规范建议每个页面的工具不要超过 50 个。
00:08:36它的目的不是暴露你的整个应用程序。
00:08:38它是为了聚焦于特定的操作，即用户在该页面上真正想做的那些事。
00:08:42（空白）
00:08:43工具描述的重要性也超乎你的想象。
00:08:46代理通过阅读这些描述来决定调用哪个工具。
00:08:49模糊的描述意味着代理会选错工具，或者干脆跳过它。
00:08:53写描述时，就像在给一个从未见过你网站的人解释操作一样。
00:08:57而且这仍然处于实验阶段。
00:08:58API 层面还会发生变化。
00:09:00Chrome 146 将于 3 月发布，届时将提供更广泛的支持。
00:09:03但在那之前，这只是一个开发者测试版。
00:09:05先不要将其部署到生产环境。
00:09:06如果你关注本频道，你就会知道紧跟 AI 的步伐需要坚实的技术基础。
00:09:11这就是为什么我非常喜欢 Brilliant。
00:09:13这是一个互动学习平台，拥有来自麻省理工、哈佛和斯坦福等
00:09:17世界一流教师精心编写的实战课程。
00:09:19我强烈推荐他们的“聚类与分类”以及“AI 如何运作”课程。
00:09:23它们能教你发现隐藏的模式，并以互动的方式理解大语言模型
00:09:27背后的逻辑。
00:09:28正如你在屏幕上的目录中所见，他们提供了极其丰富的课程，
00:09:33涵盖从基础数学到高级数据科学和计算机科学的所有内容。
00:09:37Brilliant 还为我们的观众提供年度高级订阅 8 折优惠，
00:09:42让你每天可以无限次访问平台上的所有内容。
00:09:44想要在 Brilliant 上免费学习整整 30 天，请访问 brilliant.org/ailabs，
00:09:50扫描屏幕上的二维码，或点击描述栏中的链接。
00:09:53今天就开始养成真正的学习习惯，通过 Brilliant 将你的技能提升
00:09:56到一个新高度。
00:09:57视频到这里就结束了。
00:09:59如果你想支持本频道并帮助我们继续制作这样的视频，
00:10:03你可以点击下方的 Super Thanks（超级感谢）按钮。
00:10:06一如既往，感谢观看，我们下期再见。