CopilotKit：6.3K+ Star！一个创新的开源框架，为开发者提供构建个性化 AI 协作伙伴的强大工具

小半 • 2025年2月15日下午10:21 • 技术前沿 • 阅读 72

项目简介

CopilotKit^[1] 是一个创新的开源框架，它为开发者提供了构建个性化 AI 协作伙伴（Copilots）的强大工具。

通过 CopilotKit，开发者能够在应用程序中轻松集成 AI 聊天机器人、AI 助手以及 AI 驱动的文本区域。

CopilotKit 支持 React 开发环境，并提供了丰富的组件和钩子（Hooks），如 <CopilotChat />、<CopilotTextarea /> 和 useCopilotReadable，让开发者能够快速构建出具有 AI 支持特性的应用。此外，它还支持与第三方服务（例如 Salesforce、Dropbox 等）的插件集成，拓展了 AI 助手的能力范围。

CopilotKit：6.3K+ Star！一个创新的开源框架，为开发者提供构建个性化 AI 协作伙伴的强大工具

使用场景

应用内 AI 聊天机器人：可以在应用内提供帮助和支持，提高用户体验。
AI 代理：可以代表用户执行任务，如自动化工作流程、数据输入等。
基于 AI 的文本区域：提供自动完成、AI 编辑和从头开始生成文本的功能，基于用户提供的数据和 Copilot 应用上下文。

使用方法

CopilotKit 的安装方法如下：

使用 npm（Node.js 包管理器）安装所需的 CopilotKit 包。在你的项目目录中打开终端，执行以下命令：

npm i @copilotkit/react-core @copilotkit/react-ui @copilotkit/react-textarea

这将安装 React 核心库、用户界面组件和文本区域组件。

在你的应用全局 CSS 中引入 CopilotKit 的样式。如果使用的是 <CopilotSidebar /> 组件，则需要添加以下行：

import "@copilotkit/react-ui/styles.css";

如果使用 <CopilotTextarea /> 组件，则需要添加：

import "@copilotkit/react-textarea/styles.css";

引入并使用 CopilotKit 组件。以下是一个简单的例子，展示如何在应用中使用 <CopilotSidebar /> 和 <CopilotTextarea /> 组件：

使用 <CopilotSidebar /> 组件：

import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";

function MyAmazingContent() {
  // ...your code...
  return <YourContent />;
}

export default function App() {
  return (
 <CopilotKit url="/api/copilotkit/chat">
<CopilotSidebar>
  <MyAmazingContent />
</CopilotSidebar>
 </CopilotKit>
  );
}

使用 <CopilotTextarea /> 组件：

import { CopilotKit } from "@copilotkit/react-core";
import { CopilotTextarea } from "@copilotkit/react-textarea";

// ...your code...

return (
  <CopilotKit url="/api/copilotkit/chat">
 <CopilotTextarea
// ...your props...
 />
  </CopilotKit>
);