原文链接：（更好排版、视频播放、社群交流、最新AI开源项目、AI工具分享都在这个公众号！）
CopilotKit：开源 Copilot 框架，部署应用内 AI 代理，使用 Langchain 自动执行任何任务！
?如何仅用一行代码将强大的 AI 代理无缝集成到您的应用程序中。
Hello，大家好啊，今天想分享一个 Copilot 新项目： 用于构建自定义 AI Copilots
的框架?，应用内AI聊天机器人、应用内AI代理和AI驱动的文本区域。
Copilot构建的“Hello World” 模板
Demo： 这里展示了利用Copilot构建各种小型应用程序的演示，每一个演示都单独分配的一个仓库。
您可以在我们的GitHub示例中找到各种用例的示例。以下是其中一些示例：
Hello World: 一个简单的待办事项应用，展示了如何在React中使用CopilotKit。
Presentation Voice: 展示了如何将CopilotKit与PowerPoint和语音识别结合使用。
Presentation Demo: 一个更复杂的示例，展示了如何在PowerPoint演示中使用CopilotKit。
Spreadsheet Demo: 展示了如何在电子表格应用中使用CopilotKit。
**比如， ** PowerPoint + Copilot + 语音 ** ： **
视频介绍与教程
组件
? ** : **
构建 应用感知的AI聊天机器人 ，可以“看到”当前的应用状态并在应用内执行操作。
AI聊天机器人可以与您的应用前端和后端以及第三方服务（如Salesforce、Dropbox等）进行对话，支持生成式UI。几秒钟内开始使用：
? ** : **
任何 <textarea /> 的替代品，具有AI辅助文本生成功能。
自动完成 + AI编辑 + 从头生成。基于用户数据和Copilot应用上下文。
只需将 textarea 更改为 CopilotTextarea 。
? 应用内代理（由LangChain驱动）:
为代理提供实时应用上下文，让代理在应用内执行操作。
? 联合代理（由LangChain驱动，敬请期待）:
允许最终用户观察和干预应用内代理的操作，具有原生应用UX。
最终用户可以 纠正 中间步骤中的错误（如果有），并 从该点重新开始代理操作 。
工作原理
定义以下简单的入口点 进入您的应用程序，CopilotKit?执行引擎将处理其余部分！
• 应用状态 （前端 + 后端 + 第三方）
• 应用交互 （通过普通的TypeScript代码，前端 + 后端）
• 特定用途的LLM链
• 还有更多。
安装
要安装CopilotKit，请执行以下命令：
pnpm i @copilotkit/react-core # or npm i @copilotkit/react-core # or yarn add @copilotkit/react-core ** ? 阅读文档以了解更多 ? **
组成模块
有关更全面和最新的概述，请参阅文档。大致如下：
Copilot入口点
• ✅ useCopilotReadable ：将前端状态提供给copilot。
• ✅ useMakeCopilotDocumentReadable ：将文档状态提供给copilot，特别适用于第三方状态（例如Gong通话记录）。
• ✅ useCopilotAction ：前端应用程序交互。
• ✅ CopilotRuntime ：服务器端运行时。
• ? useCopilotChain ：提供特定用例的LLM链。
内置UI组件
• ✅ ：内置的、可定制的Copilot UI（可选 - 你可以使用自己的UI）。
• ✅ ：内置的弹出UI。
• ✅ ：独立的聊天UI。
• ✅ ：具有Copilot自动完成功能的替代 <textarea /> 组件。
• ✅ useCopilotChat()：用于完全自定义的UI组件。
• ? 使用自定义UX元素在聊天中 （即将推出）。
示例
<CopilotSidebar /> import "@copilotkit/react-ui/styles.css"; // 添加到应用全局CSS import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; function MyAmazingContent() { const importantInfo = useImportantInfo(); useCopilotReadable({ description: "非常重要的信息", value: importantInfo, }); useCopilotAction( { name: `selectDestinations_${toCamelCase(heading)}`, description: `在${heading}表格中将给定的目的地设置为“已选择”`, parameters: [ { name: "destinationNames", type: "string[]", description: "要选择的目的地名称", required: true, }, ], handler: async ({ destinationNames }) => { setCheckedRows((prevState) => { const newState = { ...prevState }; destinationNames.forEach((destinationName) => { newState[destinationName] = true; }); return newState; }); }, }, [] ); return <YourContent />; } export default function App() { return ( <CopilotKit url="/api/copilotkit/chat"> {/* 全局状态和copilot逻辑。将其放在整个应用程序周围 */} <CopilotSidebar> {/* 内置的Copilot UI（或使用你自己的UI）。放在单个页面或整个应用程序周围 */} <MyAmazingContent /> </CopilotSidebar> </CopilotKit> ); } <CopilotTextarea /> 一个具有自动完成、AI插入/编辑和从头生成的替代`<textarea />`组件。<br/> 基于提供给Copilot的数据进行索引。 import "@copilotkit/react-textarea/styles.css"; // 添加到应用全局CSS import { CopilotTextarea } from "@copilotkit/react-textarea"; import { CopilotKit } from "@copilotkit/react-core"; // 在应用程序中的任何地方调用以提供外部上下文（确保用<CopilotKit>包装应用）: // 见下文以了解更多功能（父/子层次结构、类别等） useCopilotReadable({ description: "您的数据描述", value: relevantInformation, }); useMakeCopilotDocumentReadable(document); return ( <CopilotKit url="/api/copilotkit/chat"> {/* 全局状态和copilot逻辑。将其放在整个应用程序周围 */} <CopilotTextarea className="p-4 w-1/2 aspect-square font-bold text-3xl bg-slate-800 text-white rounded-lg resize-none" placeholder="一个CopilotTextarea！" autosuggestionsConfig={{ purposePrompt: "一个关于CopilotTextarea的酷炫公告帖。简短、清晰、酷炫。", forwardedParams: { // 自定义自动完成的额外参数 max_tokens: 25, stop: ["\n", ".", ","], }, }} /> </CopilotKit> ); 用例
CopilotKit帮助开发者为用户构建 全新的体验 。以下是一些常见用例：
• SaaS应用程序中的AI助理 ：构建您的应用感知型AI聊天机器人。
• AI编辑器助手 ：通过CopilotTextarea使用强大的助手。
• AI增强的CRM ：使用AI增强您的客户关系管理工具。
• 自定义AI工作流 ：在您的应用程序中定义自定义的AI工作流。
• 还有更多！
知音难求，自我修炼亦艰
抓住前沿技术的机遇，与我们一起成为创新的超级个体
（把握AIGC时代的个人力量）
**
**
** 点这里 ? 关注我，记得标星哦～ **
一键三连「分享」、「点赞」和「在看」
科技前沿进展日日相见 ~
预览时标签不可点
微信扫一扫
关注该公众号
轻触阅读原文
AI进修生
收藏
总结
**文章总结**：**CopilotKit - 开源AI代理框架，重塑你的应用开发体验**
CopilotKit 作为一个创新的开源框架，致力于帮助开发者轻松将AI代理整合至应用程序中，创建应用内AI聊天机器人、代理及AI驱动的文本功能区。通过仅仅一行代码，即可接入强大的AI功能，极大简化了AI技术的集成与应用开发流程。
**核心功能亮点：**
1. **应用感知AI聊天机器人**：能够“看见”应用状态，并在应用内无缝执行操作，支持与销售力、Dropbox等第三方服务交互，实现生成式UI。
2. **智能文本编辑器（CopilotTextarea）**：替代传统``，集成自动完成、AI编辑及从头生成功能，显著提升文本创作和工作效率。
3. **LangChain 驱动的应用内代理**：提供实时应用上下文，允许代理在应用中自主执行任务，支持联合代理模式，允许用户干预和纠正代理操作。
**示例与操作流程**：
通过GitHub示例仓库，可以学习到如何使用CopilotKit构建包括待办事项应用、PowerPoint演示助手、电子表格应用等多种案例。安装简单快捷，只需通过npm、yarn或pnpm即可引入SnakeCore包，并有完善的文档支持，确保开发者能够顺利上手。
**工作原理**：
CopilotKit通过定义应用状态、应用交互、LLM（大型语言模型）链等入口点，由CopilotKit执行引擎自动处理后续任务，实现前端、后端乃至第三方服务的全面整合与交互。
**组成模块：**
框架包含Copilot入口点（如`useCopilotReadable`、`useMakeCopilotDocumentReadable`等）、内置UI组件（如`CopilotSidebar`、`CopilotTextarea`）及可定制的Copilot UI，方便开发者根据项目需求灵活配置与扩展。
**实用用例：**
CopilotKit适用于多种开发场景，如SaaS应用中的AI助理、AI编辑器助手、AI增强的CRM系统等，帮助开发者轻松创建智能、高效的应用体验。
**结语：**
文章鼓励把握AIGC时代的前沿技术机遇，与社区一起成为创新的超级个体，提供了一键关注与学习的便捷路径，希望每一位开发者都能借助CopilotKit，实现个人与项目的双重飞跃。 copilot应用程序reactai聊天机器人聊天机器人ai聊天自定义开发者机器人自动完成scriptidelangchainpowerpoint上下文ai编辑doccsserpchat
