构建深度集成AI助手：CopilotKit - 应用内的智能伙伴，让AI真正与用户协同工作！
设想一下，在您的应用中，AI不再是孤立的聊天窗口，而是真正融入工作流、理解上下文、并与用户协同完成任务的智能伙伴。这就是CopilotKit旨在实现的愿景。
它提供了一套优雅的React UI组件和强大的基础设施，帮助开发者轻松构建AI Copilots、AI聊天机器人和应用内AI代理。CopilotKit专注于“Agentic last-mile”，也就是让AI智能体能够深入应用的毛细血管，与用户界面、数据和工作流无缝交互，而不仅仅停留在简单的问答层面。
CopilotKit Logo
借助CopilotKit，您可以：
- • 深入集成： 将AI功能直接嵌入到应用界面的各个角落，与现有UI、数据和后端服务紧密结合。
- • 情境感知： AI助手能够理解当前的用户界面状态、屏幕上的内容以及用户的操作历史，提供高度相关的帮助。
- • 执行操作： AI不再只是提供信息，它可以通过定义好的“工具”或“行动”来执行用户意图，例如填写表单、修改数据、导航应用等。
- • 智能体协同 (CoAgents)： 构建更复杂的AI工作流，让多个AI智能体协同工作，甚至与用户协作，完成复杂的任务。
CopilotKit不仅仅是另一个聊天UI库，它提供了一整套基础设施，让您能够轻松地将AI的能力以Copilot或智能体的形式融入您的应用，从而显著提升用户体验和效率。
NPM
MIT
Discord
CopilotKit Discord
CopilotKit GitHub
CopilotKit GitHub
LI
Discord
214 (1)
🏆 精彩示例赏析
通过一系列精选示例，我们可以更直观地了解CopilotKit如何赋能您的应用：
📝 表单填写 Copilot (Form-Filling Copilot)
传统的表单填写过程往往繁琐而枯燥。有了表单填写Copilot，这一过程被转化为自然的对话。AI助手能够主动询问必要的信息，理解对话中的上下文，并自动将信息填充到相应的表单字段中。用户不再需要逐个字段地手动输入，只需与AI自然交流，即可轻松完成表单。这极大地提升了数据录入的效率和用户体验，尤其适用于包含大量字段或需要用户提供复杂信息的场景。
GitHub → Live Demo →
🔄 状态机 Copilot (State Machine Copilot)
在复杂的对话流程中，管理用户输入的意图和对话所处的状态是一个挑战。状态机Copilot示例展示了如何将复杂的会话流程转化为可管理的状态机。这个基于AI的汽车销售应用演示了如何构建 sophisticated 的多阶段交互，AI能够感知上下文并根据对话内容在不同状态之间平滑过渡。这种模式适用于需要引导用户完成特定流程（如购买、注册、故障排查）的应用。
GitHub → Live Demo →
💬 与您的数据对话 (Chat With Your Data)
数据可视化通常需要用户具备一定的操作技能和对图表含义的理解。通过“与您的数据对话”Copilot，您可以为数据看板添加一个AI驱动的助手。用户可以使用自然语言询问关于数据的问题，AI能够理解查询并提供洞察，甚至允许用户通过对话与指标进行交互。这使得非专业用户也能轻松获取数据价值，降低了数据分析的门槛。
GitHub → Live Demo →
🏦 SaaS Copilot (银行示例)
这是一个情境感知的金融助手，能够分析用户的交易记录，提供消费洞察，并通过自然对话帮助用户管理财务。这个示例展示了CopilotKit如何深度集成复杂的应用数据结构，为用户提供个性化、智能化的金融服务。类似的应用可以扩展到其他领域，例如项目管理中的任务助手、电商应用中的购物顾问等。
GitHub →
🧙♂️ 智能体示例 (Agent Examples)
CopilotKit不仅支持Copilot模式，其Agentic框架（CoAgents）还允许您构建更复杂的AI智能体应用：
✈️ 旅行规划师 (Travel Planner)
这是一个原生智能体应用，通过生成详细行程、查找景点和可视化旅行计划来帮助用户规划旅行。它展示了AI智能体如何与用户协作，创造丰富、互动的体验。与传统的单次回应式助手不同，旅行规划师智能体能够理解用户的多步骤请求，记忆偏好，并根据实时信息动态调整计划，体现了更强的自主性和规划能力。
GitHub → Tutorial →
🔍 研究画布 (Research Canvas)
一个多智能体文档分析系统，通过协同的AI工作流，帮助用户分析论文、综合信息并生成全面的研究摘要。多个AI智能体可能分别负责信息提取、内容总结、交叉引用等任务，共同协作完成一个复杂的研究分析流程。这在需要处理大量非结构化文本信息的场景（如法律文件审查、市场报告分析）中尤为有用。
[GitHub →](https:// vựcKit/CopilotKit/tree/main/examples/coagents-research-canvas) Live Demo →
这些示例生动地展示了CopilotKit的强大能力和广泛的应用潜力，无论您想构建一个简单的聊天机器人，还是一个能够深度参与用户工作流的复杂AI智能体，CopilotKit都能提供所需的基础设施和工具。
快速入门
想要立即体验CopilotKit的魔力？只需几分钟即可开始。请查看快速入门文档：
关键代码示例
CopilotKit提供了一系列React Hook和组件，让开发者能够灵活地构建AI功能：
无头UI与完整控制
如果您需要完全自定义UI，可以使用无头（Headless）Hook，它提供了底层的数据和状态管理，UI则由您自己构建：
// Headless UI with full control
// useCopilotChat Hook提供了控制聊天界面的核心逻辑
const { visibleMessages, appendMessage, setMessages, ... } = useCopilotChat();
// 您可以使用visibleMessages来渲染聊天消息，appendMessage发送消息，setMessages管理消息列表等等。
// 这种方式提供了最大的灵活性来集成到您现有的设计系统。
预构建组件与深度定制
CopilotKit也提供了预构建的组件，开箱即用，同时支持深度定制（CSS样式或替换子组件）：
// Pre-built components with deep customization options (CSS + pass custom sub-components)
// 这里是一个概念上的占位符，表示可以使用组件而非hook来快速搭建UI。
// 例如，可能有一个<CopilotChat />组件，通过属性来控制外观和行为。
// ...
前端检索增强生成 (Frontend RAG)
将用户当前正在查看的或前端可访问的数据提供给AI，增强其情境理解能力：
// Frontend RAG (Retrieval Augmented Generation)
// useCopilotReadable Hook允许您将前端的数据（如当前用户的同事列表）标记为AI可读。
// AI在生成回复时可以访问这些数据，从而提供更个性化和情境相关的响应。
useCopilotReadable({
description: "The current user's colleagues", // 数据的描述
value: colleagues, // 数据的值，例如一个同事列表数组
});
// knowledge-base integration
// useCopilotKnowledgebase Hook用于集成更复杂的知识库
useCopilotKnowledgebase(myCustomKnowledgeBase) // myCustomKnowledgeBase可以是您的知识库对象或加载函数
// 这使得AI能够查询和利用外部或应用内的结构化/非结构化知识。
前端操作与生成式UI
定义AI可以在前端执行的操作（工具），并支持流式生成UI响应：
// Frontend actions + generative UI, with full streaming support
// useCopilotAction Hook允许您定义一个AI可以调用的函数（一个"行动"）。
// 例如，这里的"appendToSpreadsheet"行动可以让AI将数据添加到应用内的电子表格。
useCopilotAction({
name: "appendToSpreadsheet", // 行动的名称
description: "Append rows to the current spreadsheet", // 行动的描述，供AI理解
parameters: [ // 行动所需的参数
{ name: "rows", type: "object[]", attributes: [{ name: "cells", type: "object[]", attributes: [{ name: "value", type: "string" }] }] }
],
render: ({ status, args }) => {
// render函数可以在AI调用行动时渲染一个临时的UI，例如显示正在添加数据。
// 根据status（如'running', 'success'）和args（AI传递的参数）来更新UI。
// ... 渲染逻辑 ...
},
handler: ({ rows }) => {
// handler函数是实际执行行动逻辑的地方
// 这里是将AI提供的rows数据添加到spreadsheet状态中。
setSpreadsheet({ ...spreadsheet, rows: [...spreadsheet.rows, ...canonicalSpreadsheetData(rows)] })
},
});
// 这个机制是构建生成式UI和实现AI与应用深度交互的关键。
// AI不仅能告诉你做什么，还能直接帮你完成。
结构化自动补全
为输入框或其他需要结构化输入的场景提供AI驱动的自动补全或修改建议：
// structured autocomplete for anything
// useCopilotStructuredAutocompletion Hook可以根据用户输入和上下文，
// 由AI生成结构化的自动补全建议。
const { suggestions } = useCopilotStructuredAutocompletion(
{
instructions: `Autocomplete or modify spreadsheet rows based on the inferred user intent.`, // 给AI的指令，说明自动补全的任务
value: { rows: spreadsheet.rows.map((row) => ({ cells: row })) }, // 提供给AI的当前值或上下文
enabled: !!activeCell && !spreadsheetIsEmpty, // 控制何时启用自动补全
},
[activeCell, spreadsheet] // 依赖项，当这些值变化时可能触发新的自动补全
);
// suggestions中包含了AI生成的结构化建议，可以用于展示给用户选择或自动应用。
代码示例 (CoAgents: 应用内 LangGraph 智能体)
CopilotKit的CoAgents框架集成了LangGraph.js， enabling您在应用中构建和运行基于状态图的复杂AI智能体：
// Share state between app and agent
// useCoAgent Hook用于管理AI智能体的状态，并与应用状态同步。
const { agentState } = useCoAgent({
name: "basic_agent", // 智能体的名称
initialState: { input: "NYC" } // 智能体的初始状态
});
// agentState可以在前端访问，反映智能体当前的内部状态或处理结果。
// agentic generative UI
// useCoAgentStateRender Hook允许您根据智能体的状态渲染特定的UI。
useCoAgentStateRender({
name: "basic_agent",
render: ({ state }) => {
// 根据智能体state中的值来渲染UI，例如显示旅行规划的当前步骤或结果。
// ... 渲染逻辑 ...
},
});
// 这使得智能体的进展和输出能够直接体现在应用的用户界面中。
// Human in the Loop (Approval)
// 将人类审批流程集成到AI智能体工作流中是Agentic应用的关键。
// 通过useCopilotAction，您可以定义一个需要用户批准的操作（如发送邮件）。
useCopilotAction({
name: "email_tool", // 行动名称
parameters: [{ name: "email_draft", type: "string", description: "The email content", required: true }], // AI会生成邮件草稿作为参数
renderAndWaitForResponse: ({ args, status, respond }) => (
// 这个函数会在AI调用email_tool时渲染一个UI，例如一个邮件预览框。
// 用户可以在UI中查看邮件草稿（args.email_draft），然后选择批准或拒绝。
respond?.({ approved: false })} // 点击取消时调用respond并传递结果
onSend={() => respond?.({ approved: true, metadata: { sentAt: new Date().toISOString() } })} // 点击发送时调用respond并传递结果
/>
),
});
// respond函数将用户的选择（批准或拒绝）传递回AI智能体，影响后续的流程。
// ---
// intermediate agent state streaming (supports both LangGraph.js + LangGraph python)
// 对于复杂的智能体工作流，实时显示中间步骤（intermediate state）非常重要。
// CopilotKit支持从LangGraph流式传输中间状态。
const modifiedConfig = copilotKitCustomizeConfig(config, {
emitIntermediateState: [{
stateKey: "outline", // LangGraph状态键
tool: "set_outline", // 对应的前端行动名称，用于处理这个中间状态
toolArgument: "outline" // 将stateKey的值映射到行动的哪个参数
}],
});
const response = await ChatOpenAI({ model: "gpt-4o" }).invoke(messages, modifiedConfig);
// 通过配置emitIntermediateState，LangGraph在更新指定状态键时，
// 会触发对应的useCopilotAction行动，让前端能够实时接收并处理这些中间结果，例如逐步显示文档大纲的生成过程。
这些代码示例展示了CopilotKit如何提供一套强大且灵活的工具集，帮助开发者将AI能力深度集成到他们的React应用中，构建出下一代的智能用户体验。无论您是想构建简单的聊天机器人，还是复杂的、能够与用户协同完成任务的AI智能体，CopilotKit都提供了所需的基础和高级特性。
同类项目介绍
在构建应用内AI助手和智能体的领域，存在一些其他工具和框架，它们通常专注于以下一个或多个方面：
- 1. AI Chat UI 库： 这些库主要提供用于构建聊天界面的前端组件，简化消息的显示、输入框、加载状态等。它们通常不包含太多AI交互逻辑本身，开发者需要自己处理与AI模型的通信和功能调用。
- 2. 函数调用/工具使用框架： 这些框架帮助开发者定义AI可以调用的后端服务或函数（即“工具”），并处理AI模型生成工具调用的解析和执行。它们专注于AI的“大脑”部分，但通常不涉及前端UI或与应用界面的深度集成。
- 3. Agent 框架： 一些框架如LangChain、LangGraph等，提供了构建复杂AI智能体工作流的能力，允许定义多个步骤、循环、条件判断等。它们通常是后端框架，专注于智能体的逻辑编排，而与前端应用的集成需要额外的工作。
与这些同类项目相比，CopilotKit的独特之处在于它提供了一个端到端的解决方案，特别强调AI与应用前端的深度集成。它不仅提供UI组件（尽管也支持无头模式），更重要的是提供了一套基础设施，使得前端数据（Frontend RAG）、前端UI状态、前端操作（Actions）能够无缝地暴露给AI，并且AI能够触发前端的响应或UI更新（Generative UI, Agentic UI）。其CoAgents框架也将复杂的Agent逻辑与React应用的状态管理紧密结合。这使得开发者能够更容易地构建出真正“在应用内工作”的AI Copilots和智能体，而不仅仅是将AI能力简单地通过一个独立的聊天窗口暴露出来。
