CopilotKit：用于构建应用内 AI Copilot 的开源前端堆栈

构建 AI 驱动的应用程序传统上意味着将聊天 UI、AI 后端、状态管理和工具执行拼凑在一起——同时确保 AI 能够与应用程序的数据和 UI 实际交互。CopilotKit 通过提供一个完整的开源堆栈来解决这个问题，为任何 React 应用程序添加 AI copilot，处理流式 AI 响应、生成式 UI 和共享状态的复杂管道，让你专注于应用程序逻辑。

拥有超过 30,000 个 GitHub Stars，CopilotKit 已成为团队所称的「应用内 AI」的领先框架。与在单独窗口中运行的独立聊天机器人不同，CopilotKit 的 copilot 深度集成到你的应用程序中——它们可以读取和修改应用程序状态、在其响应中渲染自定义 UI 组件，以及执行影响实际应用程序的操作。

魔法通过 CopilotKit 的 AG-UI 协议（代理生成式 UI）发生，这是一个用于 AI 代理和 UI 组件之间实时通信的开放规范。此协议使 AI 能够直接在聊天中渲染动态表单、图表和表格，并且用户与这些组件的交互会作为下一个动作的上下文流回代理。

CopilotKit 的核心组件有哪些？

CopilotKit 提供一组设计为无缝协作的 React 组件和钩子。

graph TD
    A[CopilotKit<br>根提供者] --> B[CopilotSidebar<br>完整聊天界面]
    A --> C[CopilotPopup<br>浮动小部件]
    A --> D[useCopilotAction<br>注册工具]
    A --> E[useCopilotReadable<br>暴露状态]
    A --> F[useCopilotChat<br>编程式控制]
    B --> G[你的 React 应用]
    D --> H[后端代理<br>LangChain / OpenAI / 自定义]
    E --> H
    F --> H
    H --> I[生成式 UI<br>渲染的组件]
    I --> J[用户交互<br>流回代理]

AG-UI 协议是如何运作的？

AG-UI 协议是支持 CopilotKit 生成式 UI 能力的架构基础。它定义了 AI 代理和 UI 组件如何实时通信。

graph LR
    A[AI 代理] -->|流式 UI 定义<br>JSON schema| B[AG-UI 协议]
    B -->|渲染组件| C[React 组件<br>表单 / 图表 / 表格]
    C -->|用户交互| D[用户输入]
    D -->|发送交互<br>回代理| A
    A -->|更新状态| E[应用状态]
    E -->|代理可读取| A

该协议设计为与框架无关。虽然 CopilotKit 的参考实现针对 React，但协议本身可以为任何 UI 框架实现。这意味着你使用 AG-UI 协议构建的后端代理可以服务多个前端。

CopilotKit 支持哪些框架和集成？

CopilotKit 的集成生态系统涵盖前端框架和后端 AI 编排工具。

CopilotKit 如何处理状态管理？

CopilotKit 的状态集成是其最强大的功能之一。通过 useCopilotReadable 钩子，你可以将应用程序状态的部分暴露给 AI。AI 然后可以在对话中自然地引用此状态。

例如，如果你的电子商务应用通过 useCopilotReadable 暴露购物车，AI copilot 可以回答像「我的购物车里有什么？」、「总共多少钱？」之类的问题，以及——通过已注册的操作——「将蓝色毛衣中号加入我的购物车。」应用程序状态和 AI 对话会自动保持同步。

为什么要使用 CopilotKit 而不是构建自定义聊天 UI？

构建一个自定义 AI 聊天界面需要解决一系列复杂的问题：将 AI 响应流式传输到 UI、解析和渲染工具调用、处理生成式 UI、维护状态同步以及管理对话历史。CopilotKit 开箱即用地解决了所有这些问题。

对于构建生产代理应用程序的团队来说，CopilotKit 消除了数周的基础设施工作，并为 AI UI 集成最具挑战性的方面提供了经实战考验的模式。

常见问题

什么是 CopilotKit？ CopilotKit 是一个拥有超过 30,000 个 GitHub Stars 的开源 SDK，用于构建全栈代理 AI 应用程序。它提供 React 组件和钩子，让你可以添加应用内 AI copilot，支持生成式 UI、共享应用状态管理和人在循环工作流程。它抽象化了流式 AI 响应、工具执行和 AI 与应用程序之间状态同步的复杂性。

CopilotKit 的核心组件有哪些？ CopilotKit 有四个核心组件：CopilotSidebar（可读取/写入应用状态的聊天侧边栏）、CopilotPopup（用于快速 AI 交互的浮动聊天小部件）、CopilotKit（包装应用程序的根提供者），以及像 useCopilotAction（注册 AI 可调用的工具）、useCopilotReadable（向 AI 暴露应用状态）和 useCopilotChat（编程式聊天控制）等钩子。

什么是 AG-UI 协议？ AG-UI（代理生成式 UI）协议是 CopilotKit 的开放规范，用于 AI 代理和 UI 组件之间的实时通信。它定义了代理如何在聊天响应中渲染动态 UI 元素（表单、图表、表格）、用户与这些元素的交互如何流回代理，以及代理如何读取和修改应用状态。该协议与框架无关，专为互操作性而设计。

CopilotKit 支持哪些 React 框架？ CopilotKit 支持所有主要 React 框架，包括 Next.js（App Router 和 Pages Router）、Vite + React、Remix 和纯 React。SDK 包含针对服务器端渲染、流式传输和部署的框架特定优化。对 Vue、Svelte 和其他框架的支持可通过社区或 AG-UI 协议实现获得。

CopilotKit 支持哪些集成？ CopilotKit 集成多个 AI 提供商和服务。对于 AI 编排，它支持 LangChain、LangGraph、LangServe、OpenAI Assistants API 和自定义端点。对于向量存储和检索，它与 Pinecone、Chroma、Weaviate 和 Supabase 集成。对于 LLM，它支持任何可通过 LangChain 或直接 API 集成访问的模型，包括 Claude、GPT-4o、Gemini 和开源模型。

延伸阅读

• CopilotKit GitHub 仓库 – 源代码、议题和示例
• CopilotKit 官方文档 – 设置指南、API 参考和教程
• AG-UI 协议规范 – 用于 AI 到 UI 通信的开放协议
• CopilotKit 演示应用 – 附源代码的示例应用