CopilotKit：开源 Copilot 框架，部署应用内 AI 代理，使用 Langchain 自动执行任何任务！

cover_image
原文链接：（更好排版、视频播放、社群交流、最新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>  
);