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

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

收藏

总结