스크립트
00:00:00由于人工智能的发展，整个行业正在发生巨大的范式转变。
00:00:04如今，越来越多的用户在日常搜索或研究时使用聊天机器人，
00:00:10这就是为什么 MCP 应用的概念越来越受欢迎。
00:00:14与其吐出一个 JSON 文件或 Markdown 文档，
00:00:18越来越多的应用和服务开始转变为在聊天机器人内部提供这些互动且实用的微件。
00:00:24Alpic 公司最近发布了一个很酷的新框架，叫做 SkyBridge，
00:00:29它使得为各种不同的用例创建自己的自定义 MCP 应用变得超级简单。
00:00:35所以在今天的视频中，我们将了解 SkyBridge，看看它是如何工作的，并亲自尝试一下。
00:00:41这会非常有趣，让我们深入探讨吧。
00:00:47要真正理解为什么 SkyBridge 如此重要，你必须了解这些新应用是如何工作的。
00:00:53当你构建传统的网页应用时，你是为单个用户——人类——构建的。
00:00:58但对于 MCP 应用，你实际上是在同时为两个用户构建：人类和 AI 助手，
00:01:05因为他们共享完全相同的界面。
00:01:08人类可以点击按钮、输入内容和滑动滑块，而大语言模型能立即看到该状态。
00:01:15反过来，大语言模型可以在后台更新数据，
00:01:18而用户面前的界面会实时发生变化。
00:01:21SkyBridge 是一个开源的 TypeScript 框架，负责处理所有复杂的底层工作，
00:01:26包括协议桥接、状态同步和安全规则，
00:01:30因此你可以专注于编写标准的 React 代码。
00:01:34如果你以前尝试过去为 ChatGPT 或 Claude 构建 MCP 应用，
00:01:39你就会知道本地测试循环曾经是一件非常头疼的事情。
00:01:43你必须手动设置公共隧道、复制粘贴配置，
00:01:47并且为了修复一个微小的 CSS 拼写错误而不断重启聊天会话。
00:01:52但 SkyBridge 1.0 最酷的地方在于它完全重新设计了开发工具控制面板。
00:01:59现在，当你运行本地开发服务器时，它会在浏览器中启动一个模拟器仪表板。
00:02:04在这个仪表板内部，你有三个极好的工具。
00:02:08第一个是 Alpik Playground，
00:02:11这是一个本地沙盒，你可以在其中使用实时模块热替换来测试你的工具并调整 React 微件。
00:02:17而且你可以立即看到更改，而无需接触实际的大语言模型。
00:02:21其次，这里集成了一个隧道功能，
00:02:24它允许你只需轻轻点击一下，就能通过安全的公共 URL 公开你的本地服务器。
00:02:30所以你再也不用费心处理外部隧道了。
00:02:33只需将此 URL 粘贴到 ChatGPT 的开发者设置中，你就上线了。
00:02:37第三个是 Beacon Audit 审计工具。
00:02:40如果你打算将应用提交到公开商店，这简直是救星。
00:02:44它会扫描你应用的元数据、工具和安全策略，以捕捉常见的拒绝触发因素，
00:02:49然后再提交你的应用进行审核。
00:02:52最酷的是，即使你从未开发过 MCP 应用，
00:02:56你也可以轻松地将 SkyBridge 技能安装到你最喜欢的 AI 代理上，立即开始使用。
00:03:02现在让我们尝试自己构建一个小型 MCP 应用，看看它是如何工作的。
00:03:07在这个演示中，我已经提前创建了一个小型电子商务网站，
00:03:11你可以在这里购买不同的相机镜头。
00:03:14它基本上是一个功能齐全、基于 React 的商店，带有购物车和结账功能。
00:03:19现在我想为它添加一个 MCP 应用。
00:03:22这样，如果潜在客户使用 ChatGPT 或 Claude 等聊天机器人搜索相机镜头推荐，
00:03:30它就会立即调用我们的 MCP 应用，向最终用户展示我们的产品列表。
00:03:36正如我之前所说，开始使用最简单的方法就是安装 SkyBridge 技能。
00:03:42我们可以全局安装它，或者只为我们的特定仓库安装。
00:03:46为了本次演示，我将继续在仓库中安装它。
00:03:51现在你可以看到我们有了这个包含 SkyBridge 技能的 .agents 目录。
00:03:57现在我需要做的就是让 Claude 为我的电商店铺构建一个 MCP 应用。
00:04:04在构建之前，Claude 首先会问我一些关于应用意图的后续问题，
00:04:09以更好地了解我们需要在其中包含什么样的功能。
00:04:13对于这个演示，我想要一个根据用户寻找的内容列出镜头的应用。
00:04:18然后我们可以选择它们并进行并排比较，还可以将它们添加到购物车中，
00:04:24并为我们的客户提供快捷的结账解决方案。
00:04:28这基本上就是我需要做的一切。
00:04:29现在我只需让 Claude 施展身手。
00:04:32大约几分钟后，我们看到 Claude 已经生成了我们的 MCP 应用。
00:04:37最酷的部分是，现在我们可以打开 SkyBridge 提供的开发者仪表板，
00:04:41并亲自尝试一下。
00:04:44所以现在如果我们打开仪表板，就能看到它的外观。
00:04:47这里我们有搜索镜头工具和下单工具。
00:04:53首先，对于搜索镜头，我将输入我寻找的镜头的最高价格。
00:05:00也许将其限制为五个镜头。
00:05:03你看，就是这样。
00:05:04它找到了 2,000 美元以下的 14 个匹配项。
00:05:09这是该应用在桌面端的外观。
00:05:12我们还可以预览移动端视图。
00:05:14看起来不错。
00:05:15我们还有深色模式和浅色模式。
00:05:18这里我们有工具输出和状态。
00:05:23看看如果我选择一些镜头会发生什么。
00:05:26如你所见，状态在动态更新，这真的超酷。
00:05:31现在让我们选择三个镜头。
00:05:34如果我们点击比较，现在就会进入比较屏幕。
00:05:40在这里，我们可以并排查看所有三个镜头以及所有参数。
00:05:45如果我们对这个选择满意，也可以前往结账。
00:05:49这将转到结账阶段，我们可以在其中输入全名、电子邮件和送货地址并下订单。
00:05:59如你所见，这个仪表板对于测试微件以查看一切是否按预期工作非常酷。
00:06:08现在，如果我们转到 Claude，在设置中，我们有一个名为“连接器”的部分。
00:06:16我们必须点击自定义。
00:06:19为此，你需要隧道 URL。
00:06:21所以请确保你已经激活了隧道。
00:06:24我们可以直接复制这个 URL。
00:06:26在连接器部分，你只需添加一个自定义连接器。
00:06:31起个名字。
00:06:33并将该隧道 URL 粘贴进去。
00:06:38然后点击添加。
00:06:39我已经在这里添加过了。
00:06:41你需要做的最后一件事是点击连接。
00:06:45你还可以设置权限，如果你希望这些工具自动运行，或者需要用户的批准。
00:06:53然后我们就可以直接开始一个新的聊天。
00:06:57在新聊天中，我现在可以问：给我一些适合人像拍摄的 2,000 美元以下最佳镜头的推荐。
00:07:05我们现在可以看到它说它将在镜头商店目录中搜索 2,000 美元以下的一些优秀人像选项。
00:07:12你看那个。
00:07:14它打开了我们的 MCP 应用。
00:07:16酷不酷？
00:07:18我们可以在这里做同样的事情。
00:07:20我们可以在这里选择一些镜头。
00:07:24然后转到比较部分。
00:07:27它有这个小小的比较表。
00:07:32我注意到唯一的一点是，我们有来自工具先前状态的空白区域。
00:07:40所以这可能是你可以在 CSS 中解决的问题。
00:07:43但一切看起来都很棒。
00:07:46我们还有结账选项。
00:07:49我们来到了结账部分，可以在那里下订单。
00:07:54这到底有多酷？
00:07:57最后，也是最重要的一点，要查看你的应用是否准备好发布到公共应用商店，
00:08:02我们还可以通过开发者仪表板运行应用审计，检查是否存在任何问题。
00:08:10基本上就是这样。
00:08:11在短短几分钟内，我们就能够使用 SkyBridge 构建一个生产就绪的 MCP 应用。
00:08:16理论上我们可以将其提交到 AI 应用商店。
00:08:20所以我希望这能向你展示使用 SkyBridge 上手是多么容易。
00:08:25老实说，这感觉就像是现代网络的面貌。
00:08:28我认为我们将开始在聊天机器人内部看到越来越多的此类交互式 MCP 微件应用。
00:08:34所以很高兴有像 SkyBridge 这样的框架存在，让咱们开发者创建这类应用的过程变得如此简单。
00:08:42所以，朋友们，就是这样。
00:08:44这就是 SkyBridge 的核心内容。
00:08:46那么你对 SkyBridge 有何看法？
00:08:47你试过吗？
00:08:48你会使用它吗？
00:08:49请在下方的评论区告诉我们。
00:08:52各位，如果你喜欢这类技术剖析，请通过猛戳视频下方的点赞按钮让我知道。
00:08:58同时，别忘了订阅我们的频道。
00:09:01我是来自 BetterStack 的 Andrus，我们下期视频再见。
00:09:16你们