Transcription
欢迎来到 Syntax。今天我们来谈谈 WebMCP。这个东西是全新的。它是一个新的规范，我们将解释它是什么。我们将进行演示，并且我有一些关于它的热门观点。但本质上，WebMCP 是通过您自己的网站来展示工具和与您的网站进行交互的方式。所以这与 MCP 服务器不同，也与 MCP UI 和 MCP 应用不同。它有关联。它的工作方式相同，但这是一种通过您的网站简单地展示功能的新方法，而无需额外的服务器。那么，让我们开始吧。我叫 Wes。和我在一起的，一如既往，是 Scott。Scott，你好吗？嘿。嗯，我很好。你呢，伙计？嗯，是的，我很有兴趣了解这个，因为我听到 WebMCP，我首先想到的是 ChromeDevTools MCP 或 Agent Browser 或这类东西。我很好奇 >> 了解这些。>> 是的。所以，对我来说，这本身就是一个启示。所以我很兴奋能了解这个东西是什么，以及人们如何利用它。>> 是的。好的。所以，这一切的背景是我构建了一个叫做杂货应用的小应用，对吧？它只是一个非常简单的看板式的东西，你可以在其中列出你可能想去的每个杂货店。然后在每个杂货店下面，你可以添加、删除和勾选你想购买的食品。对吧？所以，这是相当标准的。如果你要构建这样一个应用，你会有诸如添加商店、添加商品、重新排序商品、重命名、删除商品、勾选等等，你知道，就像所有标准的待办事项列表应用的东西一样。现在，如果你有一个应用，并且你想将你的应用的功能展示给某种 AI，你有几个选择，对吧？一种选择是你可以直接在你的应用中构建 AI，你的用户可以这样做，而你来承担费用。另一种方法是你可以创建一个 MCP 服务器，它展示所有工具，然后 AI 聊天将通过 MCP 服务器简单地进行来回通信，添加、删除等等。然后我们还了解到，前几天我们请来了 Keny Daws，我们有了 MCP UI，现在叫做 MCP 应用，你将能够返回并生成，也许你想将组件和风格化的结构嵌入到聊天中。这与那个不同，因为 WebMCP 本质上说，好的，我有一个网站，我有一个应用，它做了这些事情。如果有人访问我的网站，或者如果一个 AI 以编程方式打开一个浏览器，并且它想使用你的网站，你现在有几个选择，比如你可以设置 Playwright，Playwright 会转储 HTML，或者获取可访问性树，或者截取 UI 的屏幕截图，然后它就会像人类一样使用网站。它会点击按钮等等。根据我的经验，这还不错，但实际上使用起来非常慢，因为它必须解析所有内容，弄清楚它应该按哪个按钮，等等。所以，解决这个问题的方法是让你的网站明确发布。这些是我能做的事情，对吧？我有一个杂货清单，我有几个不同的工具，对吧？你有添加商品、获取商品、删除、删除商品、删除商店、创建商店、按商店获取商品、移动商品，所有这些。这与你通常会发布的 MCP 服务器没有什么不同。而且，它的工作方式是，你会发布这些工具，然后你还会定义输入和输出模式。也就是说，你对 AI 说，嘿，我有一个叫做添加商品的工具。这是它做什么的描述。然后这是输入和输出模式。也就是说，如果你想调用我的工具，你必须提供我想添加的商品以及你想添加到的商店。然后我将向你返回以下信息。对吧？这是一种很好的结构化方式，可以与 AI 进行来回交流。对吧？>> 有趣。所以，嗯，我一直在想这个问题，关于我正在做的一些项目。我一直在考虑为我的 AI 构建一个 API 来消费我的习惯追踪器，老实说，这感觉和你这里的待办事项列表、杂货列表非常相似。>> 所以，这似乎比创建一个 API 和 API 密钥，然后告诉 AI 如何使用 API 更适合这项任务，还是你会两者都做？你会创建 API，然后创建 MCP 来与该 API 通信。>> 这取决于你希望人们如何与之互动。但如果我看看现在的网络，有数百万个应用，而且要让 AI 现在与之互动，你必须发布自己的 MCP 服务器，并基本上重新实现你的很多逻辑作为 MCP 服务器。这个所做的是，它允许你通过 HTML 或 JavaScript 来声明性地或命令式地发布，说这些是你在访问时可以使用的工具。所以，看看这个例子。所以 Chrome 发布了一个小的 Chrome 扩展程序，这只是一个与它交互的例子。我可以简单地进去说，嗯，我加载页面。它说，“好的，我找到了所有工具。”然后我把它连接到 Gemini Flash 2.5 Flash，我只是说，“请将香蕉添加到 Costco 的购物清单。”一旦完成，向我展示我购物清单上的所有东西。哦，你能删除然后将香蕉从 Costco 移到 Whole Foods 吗？然后我直接发送给 AI，它会解析我需要做什么。查看它拥有的工具。你会看到它将香蕉添加到了 Costco，然后又移到了 Whole Foods。我还可以做一些事情，比如，嗯，我可能会说，“请将鸡汤面所需的所有食材添加到 Whole Foods，对吧？”所以，它会去解析。它会弄清楚，好的，我需要什么来做鸡汤面？然后，它就添加了鸡汤、鸡胸肉、鸡蛋面、胡萝卜、芹菜和洋葱。我可以说，嗯，勾选掉任何带有鸡肉的东西。我已经有了。好了，搞定了。我拼错了鸡肉。发送。>> 它应该。好了，它勾选了鸡肉。鸡汤。>> 是的。>> 我能说一句吗，伙计，AI 的一个好处是，我可以拼错东西，它就像，随便吧。不在乎。>> 它知道你的意思。是的，这实际上非常棒。>> 是的。所以，这只是一个非常简单的例子，说明它是如何工作的。浏览器能够知道工具是什么，有两种方法可以做到。这是 WebMCP 的文档。基本上，你所做的是，作为发布你的网站的一部分，你只需发布工具是什么。你可以通过两种方式做到。你可以用 JavaScript 命令式地声明它们。所以，它就是 window.navigator.modelcontext.register tool，你可以注册工具，包括描述、输入以及你得到的数据。然而，你可以执行或声明你的工具的另一种方式是使用表单元素，我认为这是绝对天才的，因为>> 如果你的网站已经有表单，或者如果你只是想简单地声明性地发布某项功能，你可以添加几个不同的属性。所以，工具名称、工具描述、工具参数标题和工具参数描述。然后它会简单地解析 HTML 元素并弄清楚，好的，这些是东西，在这种情况下，你甚至不需要发布模式，因为它可以从你的表单中推断出模式。>> 嗯，我认为这很棒，你可以用两种方式做到。>> 哇，这很酷。>> 我喜欢这种世界的融合，这很有趣。如果你想看到你应用中的所有错误，你可以在 sentry.io/syntax 查看 Sentry。你不想让你的生产应用出现问题，而你却毫无头绪，甚至可能不知道。所以，请访问 sentry.io/syntax。我们已经使用这个工具很长时间了，它真的很棒。好的，让我们来谈谈一些好处、一些问题，然后我的一些看法。所以，第一个是这种混合 UI 方法，我真的很喜欢，因为我们请来了 Keny Dods，他说，“是的，一切都会变成一个嵌入到你的聊天中的 UI 小部件，或者他谈到了几种不同的方法。”我不知道是不是每个东西都想变成一个 UI 小部件。嗯，尤其是当你看看预订航班之类的。>> 我不认为卖机票的这些人只是想被简化成一个公用事业，就像你支付水电费一样，你知道，预订航班。他们想为你提供良好的体验。他们想进行追加销售。他们想说，“哦，而且，虽然这些事情不能在聊天界面中完成，但有时人们确实想访问网站并使用那个 UI。”如果我现在仍然可以使用网站，就像我一直以来一样，对吧？就像现在所有的一切都只是一个网站上的应用。但然后我也可以用我的自然语言与之互动，这要好得多，因为如果我在这里添加鸡汤面，>> 我不是添加五六件商品并将它们拖到那个东西里。我只需输入，嘿，你能添加 X、Y 和 Z 吗？这要快得多。或者如果我在我的会计软件里，我可能会粘贴六七笔信用卡交易，然后说，嘿，你能添加这些并对它们进行分类吗？嗯，这种自然语言是最好的。>> 你可以更进一步。如果你有历史杂货清单，你可以说，“把上周的所有蔬菜添加到本周的，”你知道，这用实际的 UI 很难做到，因为你正在进入它的自然语言。如果不是自然语言，你就必须构建一个完整的标签系统来处理所有不同的东西。你将不得不处理很多事情才能获得这个功能。我认为这真的很酷。>> 另一件事是，这比我用过的几个 AI 交互浏览器要快得多。嗯，当你只是让他们自由发挥，然后你可以走开做别的事情时，它们工作得很好。但如果你只是坐在那里等着它完成，因为你需要它，它太慢了，而且根本不可能，使用 ChatGPT 浏览器，无论它叫什么，都太痛苦了。它叫什么？我甚至不知道它叫什么。它太慢了。我过去用过很多，它现在太慢了。所以，能够明确地去做，而不是让它从你的 HTML 中推断出来，要好得多。就像看看它有多快。添加一个新商店，一家药店。添加润唇膏。发送。一，二，三，四，五。五秒钟，它就添加了一个新商店并添加了润唇膏。现在，这相当快。>> 这很酷。>> 嗯，另一件事是，它更节省 token，对吧？如果你为这些东西按 token 付费，它只是将工具调用以及可能的选项发送给 AI，而不是发送整个 DOM 树或整个屏幕截图，然后不得不去处理那个屏幕截图并弄清楚按钮在哪里点击。>> 是的。>> 嗯，最后，这似乎非常适合框架来实现，对吧？你已经拥有了所有这些数据作为你应用的一部分，对吧？你已经有了你的模式，你已经有了你的验证，你已经有了你的 UI 层来模拟你的表单将是什么样子，或者其他什么。只需再迈出一步，在你的 HTML 网站上发布这些你可以做的事情就太容易了。然后这不需要别人再启动一个 MCP 服务器。你不需要托管比你的网站更多的东西。>> 是的。不。哇。多么酷的 API。是的。不，我只是嗯嗯，我喜欢发现这样的东西，然后立即理解它的效用，而不是说，“哦，我不知道什么时候会用到它，或者怎么用。”是的。>> 我有一些问题，而且，这只是昨天发布的。我是早期访问的一部分，所以显然这还很早期，他们正在尝试确定规范是什么。但有些问题是，跨应用是否可能？因为 Kent 说过，当我们谈论 MCP UI 时，他说，“是的，人们不想只去一个网站做他们的事。”就像你想说，“啊，杂货清单。嗯，看看我的日历，看看那顿晚餐是什么时候，然后如果我这周有任何晚餐计划，就把它添加到你的，你想让事物相互作用。”所以，跨应用是否可能？而且，我猜是的，因为这个小侧边栏在 Chrome 里，这并不是最终的 UI，这只是为了让你能够测试和调试它。就像我猜会发生的是，你将使用某种聊天应用或其他什么。而且，非常像 MCPI，它将简单地访问网站，发现工具，看到你已登录，然后它可以一次访问多个网站，并在它们之间移动数据。是的。哇。酷。嗯，是的，无头。它很可能无头。我猜它最终会无头。然后我在这里的最后一件事就是我的看法。嗯，我认为这是网络适应 AI 的好方法，对吧？因为我不知道你会让太阳下的每个人都发布一个 MCP 服务器，然后用 ChatGPT 创建一个应用并让它工作。我们可能会。我们看到了。iPhone 应用就是这样，对吧？现在每个人都有一个 iPhone 应用。所以，但我认为这是一个很好的桥梁，可以让你简单地在表单上添加几个属性，或者发布你想要在 JavaScript 包中提供的任何工具，然后你的网站就已经准备好了，对吧？这类似于响应式设计，就像，哦，我只需要稍微改变一些东西，现在我的网站就可以用于移动设备了。然后另一件事是 API。就像，我不知道每个网站都想展示这些东西。我们看到了 API 的情况。就像早期一样，每个网站都有一个 API，任何人都可以免费使用该 API。每个人都在构建。有大约一百个不同的 Twitter 客户端。你知道，我们正在制作混搭。一切都很好。然后，慢慢地，所有这些应用都说，“你知道吗？API 访问很糟糕。我们希望人们来我们的网站。”Reddit API 完全消失了。Twitter API 也消失了，而且每月要花费 40,000 美元，或者类似的价格。现在他们刚刚发布了按使用量付费的功能，每美元大约有 200 次请求。仍然非常昂贵。Instagram 根本不可能通过 API 进行交互，对吧？他们所有这些大公司都不希望你只是说，“哦，当然，你想把我们当作一个公用事业吗？就这样和我们互动。”他们希望你在他们的平台上，以他们的方式使用它，这样他们就可以向你推销东西并赚取最多的钱。所以，>> 我不知道这是否会是所有这些东西的最终结局。但我当然认为，对于那些确实希望 AI 与他们的应用互动的人来说，这是一个很好的前进方向。>> 是的，我认为这很酷。我很期待深入了解。嗯，一如既往，Wes。这是一个很好的解释。是的，>> 就是这样。如果你想自己测试一下，嗯，你可以注册 WebMCP 早期预览版。我会在下面的描述中留下链接。但就是这样。>> 再见。>> 再见。