CopilotKit：SaaS 应用中 AI 聊天机器人的痛点

中文العربيةDeutschEnglishEspañolFrançaisहिन्दीBahasa Indonesia日本語한국어PortuguêsРусский
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00大多数 AI 功能和应用都有同样的问题，它们看起来不错，但实际上只是一个聊天框
00:00:06贴在屏幕的一侧，你问它什么，它就给你一段 Markdown，可能是一个表格
00:00:11甚至可能是几段解释你还需要做的工作的文字，但如果智能体不只是
00:00:17在那空谈呢？这就是 Copilot Kit，它可以渲染真实的组件，与你的应用共享实时状态
00:00:23并在更改任何内容之前停下来请求批准。那么，这能让 AI 功能感觉
00:00:29更像是产品的一部分吗？让我们一探究竟。
00:00:37首先，很多人认为他们是在为应用添加 AI，但实际上他们添加的是
00:00:43应用内的第二个应用。你的产品在那边，AI 在那边，用户不得不
00:00:49在脑子里来回复制上下文才能真正让事情运转起来。如果所有你
00:00:54真正需要的只是这种基础的问答结构，那还可以。但一旦你想要智能体更新状态
00:01:00调用工具或在真实工作流中与用户合作，我们就会遇到瓶颈。现在你正在构建
00:01:07流式事件、状态同步、审批流程，每个人都在重复造轮子，只是略有
00:01:14不同。Copilot 正在直面这个问题，不是“我们如何制作另一个聊天机器人”，更好的
00:01:20问题是“我们如何让智能体在应用内部感觉原生”。所以让我们从演示开始，然后
00:01:26我会分析哪些是真实的、有用的，哪些稍微有点过度了。如果你喜欢编码工具
00:01:32以加速你的工作流，请务必订阅，我们会持续发布视频。好了，现在
00:01:37看这个，我从一个干净的终端开始，我们直接运行我从 Copilot Kit 获得的安装命令
00:01:42这会搭建好应用脚手架，并给我一个可行的起点，就像我们真正开始的任何其他项目一样
00:01:49不仅仅是一个空的聊天气泡，而是真实的部分。前端组件已经连接在一起
00:01:56足以让我开始测试我们想要的实际体验了。现在我跳进去运行开发
00:02:02模式，这是在本地运行的应用。当然，这部分看起来很熟悉，有一个聊天界面
00:02:09但这并不是真正有趣的部分。最酷的是当
00:02:13智能体连接到 UI 时会发生什么。我在这里的界面上问一个问题，好了，就是这样
00:02:21注意这里的大重点：智能体不仅仅用一大堆文字回答，它可以流式传输
00:02:26响应，它可以调用工具，并且可以在应用内渲染一个实际的组件。这就是
00:02:32Copilot Kit 带来的第一个巨大变化：AI 不仅仅是在描述界面，它现在
00:02:38是这一切的一部分。现在让我们更进一步，我在这里问它一个后续问题
00:02:46好的，这是许多其他智能体会跳过的一步。现在我们的智能体暂停了，它要求
00:02:52批准，而它请求批准正是关键所在，这也是我真正喜欢的部分，因为
00:02:57在真实的软件中，控制权并非可有可无。我们的用户仍然需要对正在发生的事情拥有最终决定权
00:03:03演示很酷吧？解释 Copilot Kit 的最简单方法就是：Copilot Kit
00:03:09是一个用于代理式应用的前端栈。它不仅仅是一个聊天组件，也不仅仅是另一个 LLM API 的包装器
00:03:15它为你提供了我们需要的部分，用于构建存在于产品内部的 AI 体验。有
00:03:23四个部分需要真正了解。首先是 AGUI。AGUI 是一个基于事件的开源协议
00:03:31用于智能体如何与前端对话。现在智能体工具存在连接问题。你有 LangGraph
00:03:37CrewAI、自定义智能体，以及今天早上发布的所有新框架，我们试图
00:03:43将其放入我们的应用中。然后你有 React 应用、移动应用、仪表盘，所有这些
00:03:48都在发生。这些东西需要处理太多不同的事情，所有这些都是在没有共享
00:03:55协议的情况下处理的。每个后端都需要为每个前端编写自定义代码。AGUI 正试图成为智能体和界面之间的通用
00:04:01语言，消息、状态更新、工具调用、UI 事件都在通过一个公共的事件流传输
00:04:07然后是生成式 UI。模型不仅仅返回文本，智能体可以
00:04:14触发真正的组件。它不是随机的 HTML，而是在正确时刻渲染出的你的 UI。然后是共享
00:04:22状态，或者 Copilot Kit 所谓的协作智能体。前端和智能体后端可以双向共享状态
00:04:29当用户改变某些内容时，智能体可以做出反应；当智能体更新某些内容时，UI 可以
00:04:35反映出来。这在构建工具、仪表盘或任何用户和智能体都在处理同一个对象时非常重要
00:04:41最后是“人在回路”这件事。这是其中最重要的一部分。许多智能体
00:04:47许多智能体演示可能表现得好像最好的体验是完全自主
00:04:52但实际上并不总是如此，对吧？在真实的产品中，用户需要权力和
00:04:59控制：发送前确认、创建前批准、在选项之间做出选择等等。而 Copilot
00:05:05提供了正是为此准备的功能。Copilot 并不是每个人的正确选择，如果你把它
00:05:10与 Vercel AI SDK 相比，Copilot Kit 提供了更多“电池级”功能。如果你想要流式聊天
00:05:17生成式 UI、共享状态和开箱即用的人工审批模式，这就是 Copilot Kit
00:05:23正越来越接近完整的产品层。Vercel AI SDK 更轻量，它为你提供更多低级别的控制
00:05:31所以如果你想拥有架构的每一个部分，那么确定，那确实是一个更好的选择。现在如果你
00:05:38把 Copilot Kit 与一切都自己构建进行比较，这就是它很难被击败的地方
00:05:43因为难点不在于渲染出一些聊天气泡，这现在变得容易了，对吧？
00:05:49难点是围绕它的一切。但当然，任何事情都有权衡，它可能会感觉
00:05:54比极简的 AI SDK 更重。当然，你采用了 Copilot Kit 的模式。此外，它在一定程度上是免费的
00:06:02老实说，如果你只是独自尝试，它超级酷，但当你想要将其用于规模化时，它就变得很烦人
00:06:08因为那时一切都不是免费的。另外，如果你们确实知道一个完整的开源替代方案
00:06:14写评论告诉我，因为我正在寻找这样的方案。
00:06:19使用 Copilot Kit，你需要了解什么是开源的，你需要了解什么需要 API 密钥
00:06:25什么是托管的，什么是付费的。这不是要黑 Copilot 说它全都不好，但你确实需要
00:06:32了解什么是免费的，什么是收费的。如果你只需要一个基础的支持聊天机器人，Copilot Kit 可能
00:06:38是大材小用了。但如果你想要一些在代理式用户体验方面效果非常好、智能体能与
00:06:44你的 UI 和应用状态一起工作的东西，这真的很酷。所以你应该使用 Copilot Kit 吗？如果你
00:06:50正在构建一些严肃的应用内 AI，特别是如果你使用的是 React 或 Next.js，并且你希望 AI
00:06:56感觉像是产品的一部分，而不是仅仅一个侧边栏，这真的很棒。你可以非常快地启动它
00:07:02并且拥有我们所有的组件，使得将它投入工作流变得非常实用。如果你
00:07:07已经构建了自己的流式状态、工具调用 UI 切换，那可能不值得尝试。如果你的
00:07:13功能仅仅是提个问题、获得答案，Copilot Kit 对此来说会是大材小用
00:07:19你可能不需要一个完整的代理式前端栈，用些更轻量的就行。好吧，发布它，
00:07:25继续前进，开始吧。如果你喜欢这样的编码工具，请务必订阅 Better Stack 频道
00:07:30我们在下一个视频中见。

Key Takeaway

CopilotKit 通过提供 AGUI 协议和预制的生成式 UI 组件，将 AI 从简单的聊天机器人提升为能够直接操作应用状态、并受用户实时审批控制的原生协作工具。

Highlights

  • 大多数 AI 应用仅仅是侧边栏聊天框，无法直接与应用状态或真实组件交互。

  • CopilotKit 提供了一个用于代理式应用的前端栈，支持流式响应、工具调用和生成式 UI。

  • AGUI 是一种开源协议，旨在建立智能体与前端应用之间的通用事件流，解决自定义集成繁琐的问题。

  • 协作智能体模式允许前端 UI 与智能体后端实现双向状态共享，使 AI 能实时反映并操作应用内的对象。

  • 内置的人工审批流程允许用户在智能体执行操作前进行最终确认，确保应用控制权归用户所有。

  • 与轻量级的 Vercel AI SDK 相比，CopilotKit 提供更多开箱即用的“电池级”功能，但在大规模商用时涉及付费授权。

Timeline

当前 AI 应用的局限性

  • 目前的 AI 功能大多仅表现为附加在界面侧面的孤立聊天框。
  • 用户在应用与聊天界面之间来回切换，无法在应用内部直接运行实际工作流。
  • 开发人员在重复构建流式事件、状态同步和审批流程等基础设施。

许多 AI 集成只是简单地将 Markdown 文本贴在界面一侧。这种分离导致用户必须在脑海中整合上下文，无法实现与应用状态的真正交互。当试图构建具备工具调用能力或状态更新功能的复杂智能体时，缺乏统一的架构标准导致开发效率低下。

CopilotKit 的核心功能架构

  • CopilotKit 支持在应用内实时渲染实际的 UI 组件，而非仅输出文本。
  • 智能体具备请求人工批准的机制，确保用户在关键操作执行前拥有最终决策权。
  • 开发者可通过标准化命令快速搭建包含聊天界面与前端组件连接的应用。

通过演示展示了智能体如何不仅流式传输响应，还能直接调用工具并在应用界面内触发特定组件。该框架的设计重点在于让 AI 成为产品的原生部分。审批流程是该架构的关键，它避免了智能体在未经授权的情况下直接更改应用的关键状态。

技术实现与协议说明

  • AGUI 协议作为通用语言，连接智能体（如 LangGraph, CrewAI）与各类前端应用。
  • 协作智能体模式支持双向状态同步，使 UI 和后端能够共同处理同一个对象。
  • 系统架构内建了针对真实应用场景的‘人在回路’审批机制。

AGUI 是该方案的核心，解决了不同后端框架与多样化前端（Web、移动端）之间缺乏共享协议的问题。这一协议标准化了消息、状态更新和 UI 事件的传输。通过生成式 UI 和共享状态，AI 能够在正确的时间点渲染 UI 并实时同步操作，将智能体提升为协作助手。

选型建议与权衡

  • CopilotKit 适合需要深度集成 AI 到 React/Next.js 环境的严肃型应用。
  • 对于仅需简单问答功能或已具备成熟状态同步架构的应用，此工具过于沉重。
  • 商用规模下的成本结构是选择该工具时需要考虑的因素。

CopilotKit 是一个更全面、预设功能更多的解决方案，相比 Vercel AI SDK 更适合追求快速实现复杂代理交互的开发者。然而，如果项目仅需要基础的聊天交互，使用轻量级工具更为合适。此外，开发者在使用时需明确开源部分与需要 API 密钥或付费授权部分之间的界限。

Community Posts

No posts yet. Be the first to write about this video!

Write about this video