00:00:00由 Google 和 Microsoft 背后支持的一项新提案可能会重塑
00:00:03我们使用网络的方式，而且我挺喜欢的。它叫 WebMCP，但别把它
00:00:08和普通的 MCP 服务器搞混了。相反，WebMCP 实际上是一个浏览器 API，它将允许
00:00:13前端开发人员将他们网站的功能作为工具开放给 AI 智能体，本质上
00:00:18让每个网站都变成一个微型 MCP 服务器。虽然你可能已经看到一些网站
00:00:23开始启用自己的 MCP 服务器了，但这个有点不同。它的目标是
00:00:27让你的智能体替你操作网站，而不仅仅是访问 API 并在聊天中显示结果。
00:00:32它将完全基于前端。现在，如果这种区别听起来有点
00:00:37令人困惑，那我们直接来看演示，聊聊我为什么喜欢它。
00:00:46首先我想承认，这个演示看起来不会太令人兴奋，但
00:00:49这正是 WebMCP 的意义所在。它是把已经可以实现的功能
00:00:54变得更好。所以请坚持看完。我现在使用的是
00:00:58他们测试该提案的 Chrome Canary 版本，还有一个设置了
00:01:02一些 WebMCP 工具的网站。你可以看到右边我有一个能够
00:01:06与这些 WebMCP 工具交互的插件，但想象一下在未来，这可能就是你浏览器
00:01:10内置的 AI，无论是 Gemini、ChatGPT Atlas 还是 ARC 现在变成的任何东西。
00:01:15你可以看到，如果我在这个网站上发送一个用户指令，说我
00:01:19想预订两个人在特定日期从伦敦到纽约的往返机票，
00:01:23然后点击发送，它就会带我进入搜索结果页面，也就是说它帮我
00:01:28操作了网站。哇，很疯狂吧？是的，正如我所说，这个演示看起来非常基础，
00:01:33但 WebMCP 的关键在于它是如何帮我操作网站的。目前 AI
00:01:38使用网站的方法往往是利用 Playwright、HTML 解析甚至是截取
00:01:42网站截图并尝试像人类一样去操作。但所有这些都非常低效，尤其在
00:01:48Token 消耗方面，而且仍然很容易出错。所以这就是 WebMCP 要解决的问题。
00:01:53WebMCP 反而让网站开发人员公开特定的 MCP 工具，然后
00:01:58与客户端 JavaScript 进行交互。所以当 AI 选择
00:02:03使用这些 WebMCP 工具之一时，所发生的一切仅仅是在你的网站上运行一个
00:02:07由开发人员设置好的 JavaScript 函数。你可以看到在这个演示机票
00:02:12页面上，我有一个名为 “search flights”（搜索航班）的 WebMCP 工具，你可以看到
00:02:16它接收一些输入参数，如出发地、目的地和行程类型，这些参数与
00:02:20我们这边的表单一一对应。关键点在于 AI 现在知道它可以利用这个
00:02:25MCP 工具。所以当我们发送这样的指令时，它不会通过
00:02:29Playwright 或 HTML 解析来填写表单。事实上，它根本不需要知道网站
00:02:34长什么样，也不需要知道 HTML 结构。它只需要知道它拥有那个 WebMCP
00:02:38工具，并使用那些输入参数调用它，而作为开发人员的我则设置了
00:02:43在接收这些参数后会发生什么并运行一个 JavaScript 函数，在这个例子中
00:02:47只是更新 React 状态，从而跳转到搜索航班页面。
00:02:52如果我们看一下前端代码，它非常简单，希望能
00:02:55让你更容易理解。你可以看到我们首先需要做的是
00:02:59注册该页面可用的 WebMCP 工具，我们可以通过 window.navigator.model_context 来实现。
00:03:04如果这项提案通过，这就是需要内置到浏览器中的 API，
00:03:09目前在 Chrome Canary 中可以测试。我们可以看到，
00:03:13一旦有了 model context API，我们就可以通过 register tool
00:03:18函数来注册工具，在这里我注册了之前看到的搜索航班工具。
00:03:22如果我们查看工具的具体内容，你会发现它是一个非常简单的对象定义。
00:03:26我们有一个名称，一个描述，这会传递给 AI，让它知道何时
00:03:30使用这个工具，如果我们需要接收参数，还有一个输入模式（input schema）。
00:03:34在我的案例中，我有出发地、目的地等项来匹配那个表单。你可以看到我们还有
00:03:38更多上下文信息可以提供给 AI，以帮助它理解这些参数具体
00:03:42应该是什么。工具定义中最重要的部分是 execute（执行）函数。这就是
00:03:47当此 MCP 工具被使用时，将在你的网站上运行的客户端 JavaScript。
00:03:51所以它基本上可以是任何你想要的功能。在我的案例中，我使用了 search flights 函数，
00:03:55我们不必过于担心具体实现，但本质上我只是获取
00:03:59AI 为这些输入参数填充的内容，并派发一个
00:04:03带有这些参数的 “search flights” 事件。然后在我的 React 代码中，我所做的
00:04:08只是为该事件添加一个监听器，当我们接收到它时，我只需运行
00:04:12handle search flights 函数，在这里我们可以执行任何
00:04:15在 React 中能做的事情，在我的案例中，我获取参数并将它们
00:04:19设置为搜索参数，从而触发跳转。它真的就这么简单，这也是我非常喜欢
00:04:24这种方法的原因，因为它不仅 Token 效率极高，而且还允许我作为
00:04:29开发人员来定义网站的交互方式，让 AI 遵循我的规范。这
00:04:34是一个非常巧妙的方案，在构建网站时同时考虑到人类用户和 AI 助手，
00:04:39而不是像目前的方法那样：先为人类建一个网站，再为 AI 建一个 MCP 服务器，
00:04:43如果 AI 之后需要使用网站，你就只能寄希望于它能以某种方式搞明白。
00:04:48另外值得注意的是，这些 Web MCP 工具不仅对于
00:04:51触发页面事件（如跳转或填表）很有用，而且当
00:04:55需要解析页面上的信息时也非常有用。假设我作为人类用户现在来到这里，
00:05:00开始调整一些过滤条件，比如我想要价格低于 500 美元且出发
00:05:05时间在中午之前的航班。页面上仍然有很多航班，所以我想要
00:05:11AI 帮我选择最好的一个。所以我可以问：你会推荐这个页面上的哪一班航线？
00:05:15现在的方法通常会使用 Playwright 或 HTML 解析来获取整个
00:05:20页面，并尝试理解这里的信息并将其转换为某种形式的结构化
00:05:24数据，但有了 Web MCP 我们就不需要这么做了。相反，我作为开发人员
00:05:29只需设置一个名为 “list flights”（列出航班）的 Web MCP 工具，它可以访问当前的 React 状态，
00:05:33因此它可以访问显示给用户的所有信息，而且是清晰的
00:05:38JSON 格式。这样一来，如果我真的向 AI 提出这个指令，你可以看到它调用了
00:05:42那个工具，列出了当前页面上显示的所有航班，并给了
00:05:46我们一个针对 56 号航班的建议。我可以在页面上的这里
00:05:51找到那个航班。这个过程消耗的 Token 要少得多，而且会更准确。最后
00:05:56我想展示的是，如何在不写 JavaScript 的情况下利用 Web MCP。
00:06:00到目前为止，我们一直在使用命令式 API，即由我这个
00:06:05开发人员编写 JavaScript 来处理工具调用并注册特定工具。
00:06:10还有第二种方法叫做声明式 API。这种方法简单得多，
00:06:14它适用于填充 HTML 表单这种简单的用例。你可以看到我有一个非常简单的
00:06:19预订表单，我只需让我的 AI 帮我订个位子，并提供一些
00:06:23填表所需的信息，它就会自动帮我填好那个表单。
00:06:27这是因为它拥有一个名为 “book table”（订位）的 Web MCP 工具。但
00:06:32这里最重要的部分是，我没有写任何 JavaScript 就获得了这个 Web MCP 工具。
00:06:36这是因为 Web MCP 声明式 API 的工作方式是，你只需要在
00:06:40HTML 表单上添加 tool name（工具名称）和 tool description（工具描述）属性，
00:06:44然后浏览器就会尝试将该表单转换为一个 Web MCP 工具，并尝试理解
00:06:49每个输入项对应 MCP 工具的哪些参数。我们在这里看到，在那个
00:06:53预订表单上有一个 “book table” 的工具名称和工具描述。所以 AI 知道
00:06:57何时调用它，而这只是一个普通的 HTML 表单。唯一的区别在于其中一些
00:07:02输入项。我们还使用了 tool param description 属性来给 AI
00:07:06更多关于如何填写该信息的上下文。至于其余部分，浏览器
00:07:10会自动获取 input、input type、input name，并使用它们来创建
00:07:14MCP 工具。我们可以在检查器中看到这一点，它正确地抓取了输入参数，
00:07:18包括姓名、电话、日期、时间、人数、座位和要求。
00:07:23这一切仅通过简单的 HTML 表单逻辑就实现了，我一行 JavaScript 也没写。这
00:07:27基本上就是目前 Web MCP 提案的全部内容。正如我所说，我
00:07:31对此非常乐观。我喜欢它弥合 Web 应用和 AI 智能体之间差距的方式，
00:07:34它消除了智能体尝试使用网站时的任何猜测工作，并确保
00:07:38所有的交互都由网站开发人员明确定义。另外，我也还没
00:07:43完全被 AI 洗脑。我喜欢这种能让 AI 智能体辅助我工作
00:07:47而不是取代我的工具。我不喜欢在 ChatGPT 的界面里
00:07:51订机票或订餐厅。我更喜欢自己在浏览器里访问实际的网站。
00:07:56如果我愿意，我可以让 AI 在那个页面上帮我。这是一种更好的系统，
00:08:00既能让人类参与其中，又允许网站开发人员定义这种体验
00:08:05如何进行。但也要记住，这目前还只是一个提案。所以它
00:08:08可能需要一些时间才会出现在浏览器中。而且还有一些局限性
00:08:12需要处理。比如经典的安全性问题，某些网站上可能会出现被投毒的工具
00:08:16和描述。所以它能获得多少用户信息权限，以及
00:08:21浏览器 AI 对整个浏览器的控制权有多少？如果这些投毒工具
00:08:25失控了，会造成多大的破坏？希望他们能找到答案，
00:08:29因为我对这个提案非常看好。在下方的评论区告诉我你的想法吧，
00:08:33顺便订阅一下。一如既往，我们下期再见。