开源工具CopilotKit——让Copilot更加懂你！

Soul丶君

3787人浏览 · 2024-10-11 17:31:24

Soul丶君 · 2024-10-11 17:31:24 发布

我最近发现了 CopilotKit，对它（将生产就绪的 Copilot 无缝集成到任何产品中的最简单方法）产生了兴趣。

Here for Hacktoberfest? 🎉 Get started here 🚀 🎊.

在这里插入图片描述

CopilotKit是一个开源框架，用于将强大的AI Copilots集成到任何应用程序中。轻松实现自定义AI聊天机器人、AI代理、AI文本区域等。

示例和启动模板

🕹️ PowerPoint Clone + Copilot https://github.com/CopilotKit/demo-presentation	🕹️ Simple Todo App + Copilot https://github.com/CopilotKit/demo-todo
🕹️ Spreadsheets + Copilot https://github.com/CopilotKit/demo-spreadsheet	🕹️ PowerPoint Clone + Copilot + Voice Control https://github.com/CopilotKit/demo-presentation-voice

构建模块

💡 想了解更多？请查阅 CopilotKit 文档。

🧩 组件

<CopilotTextarea />：一个带有自动补全和 AI 插入/编辑功能的 AI 文本框。
<CopilotPopup />：一个 AI 驱动的浮动聊天弹出组件。
<CopilotSidebar />：AI 驱动的聊天侧边栏组件。
<CopilotChat />：一个简单的 AI 聊天组件。

⚡️ 钩子

useCopilotReadable：为你的 Copilot 提供应用内状态及其他信息。
useCopilotAction：使 Copilot 执行动作并在聊天中渲染自定义 UI。
useCopilotChat：直接与 Copilot 聊天实例互动，添加消息并操作聊天历史。
useCopilotChatSuggestions：集成 AI 驱动的聊天后续建议，了解你的应用状态和聊天历史。

简单的使用——simplifies tracking and managing contributions

目前在 Hacktoberfest 期间有多个开源活动正在进行，包括 Hacktoberfest、Devfest.ai、Taipy Hacktoberfest 等，各自有不同的规则。

在这些活动中跟踪拉取请求状态以及识别每个活动相关的贡献仓库变得相当具有挑战性。

我会结合掌握到的信息，来介绍如何利用 CopilotKit 创建一个简化跨活动贡献跟踪和管理的解决方案。

应用演示

在这里插入图片描述

用户提示：Hi, I want to see the pull requests created by jeevaramanathan for the Hacktoberfest 2024 event.

助理回应：I’ve fetched the pull requests created by jeevaramanathan for the Hacktoberfest 2024 event. Is there anything else you need help with?

它会检索所有属于 Hacktoberfest 2024 的拉取请求，并通过 CopilotKit 动作在表格中显示。

主要功能

AI 驱动的支持：借助 AI 轻松跟踪不同开源活动的拉取请求状态。
活动特定过滤：根据开源活动（如 Hacktoberfest、Devfest）过滤拉取请求。
自定义日期范围：允许设置特定日期范围，关注某一时期内的贡献，无论是否参与活动。
响应式设计：使用 Tailwind CSS 和 Shadcn-ui 构建，确保在所有设备上提供无缝用户体验。
主题与颜色切换：可在不同主题间切换，并自定义颜色，为你提供个性化的用户体验。
可分享链接：轻松生成链接，突出显示你的拉取请求或与他人分享进展，使协作更为顺畅。

技术栈

使用 Next.js（React）、Tailwind CSS、ShadCN UI、Apollo Client 以及 CopilotKit（用于 AI 功能）构建。

如何构建

我使用 GitHub API 来获取详细信息，并分析了 REST 端点和 GraphQL。最终选择 GraphQL，因为它允许我按所需结构获取数据，而不是默认格式。

为了集成到 Next.js 中，我使用了 Apollo Client 和 useLazyQuery。懒查询允许在需要时才执行查询，有助于优化性能。

在获取数据后，我根据活动特定的规则进行了过滤。对于 Devfest，我动态解析 devfest 以获取白名单仓库。
在这里插入图片描述

活动信息

接下来是 CopilotKit。
CopilotKit 提供了一种简单的方法，将 AI 功能集成到你的 Web 应用程序中。我使用了 Groq 模型的免费版本，以及 CopilotKit 运行时的后端组件。
在这里插入图片描述

工作流程

以下是我使用的一些提示的示例：

useCopilotAction({
  name: "setUsername",
  description: "设置 GitHub 用户名。",
  parameters: [
    {
      name: "username",
      type: "string",
      description: "要搜索的 GitHub 用户名",
      required: true,
    },
  ],
  handler: ({ username }) => {
    setUserName(username);
  },
});

useCopilotAction({
  name: "setEvent",
  description: "根据用户输入将活动设置为 hacktoberfest、devfest、taipy 或 none。",
  parameters: [
    {
      name: "event",
      type: "string",
      description: "要切换的活动名称（hacktoberfest、devfest、taipy、none）",
      enum: ["hacktoberfest", "devfest", "taipy", "none"],
      required: true,
    },
  ],
  handler: ({ event }) => {
    setSelectedEvent(event);
  },
});

在前端，我使用了 CopilotPopup 组件，为与 copilot 互动提供了一个弹出界面，并设置了初始指令以指导 copilot 检索各种活动的 GitHub 拉取请求详情。

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

<CopilotKit runtimeUrl="runtimeUrl">
  <CopilotPopup
    instructions={
      "帮助用户获取 hacktoberfest、devfest 等活动的 GitHub 拉取请求详情。"
    }
  />
</CopilotKit>