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

AI进修生

发布于 2024-12-02 18:39:01

4.1K0

文章被收录于专栏：AI进修生AI进修生

Aitrainee | 公众号：AI进修生
🌟如何仅用一行代码将强大的 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 + 语音：

视频介绍与教程

组件

🌟 <CopilotChat />: 构建应用感知的AI聊天机器人，可以“看到”当前的应用状态并在应用内执行操作。 AI聊天机器人可以与您的应用前端和后端以及第三方服务（如Salesforce、Dropbox等）进行对话，支持生成式UI。几秒钟内开始使用：

🌟 <CopilotTextarea />: 任何<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组件

• ✅ **<CopilotSidebar>**：内置的、可定制的Copilot UI（可选 - 你可以使用自己的UI）。
• ✅ **<CopilotPopup>**：内置的弹出UI。
• ✅ **<CopilotChat>**：独立的聊天UI。
• ✅ **<CopilotTextarea />**：具有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>
);