轻松集成 AI：CopilotKit 使用初学者指南

?什么是副驾驶套件？

CopilotKit 是一个开源框架，可以轻松地将强大的、可用于生产的 AI Copilot 集成到任何应用程序中。借助 CopilotKit，您可以无缝实施自定义 AI 聊天机器人、代理、文本区域等来增强您的产品。

？让我们构建一个应用程序，在其中我们将学习如何将 CopilotKit 集成到我们的应用程序中：-

？这个应用程序是关于什么的？

该应用程序使用 CopilotKit 自动生成抽认卡和测验。只需要求人工智能聊天机器人创建任何主题的抽认卡，它就会立即生成抽认卡和相应的测验。这是学习任何学科的快速有效的方式。

？技术堆栈：

前端：NextJs、Tailwind CSS、shadcdn、Zustand
后端：下一个Js
数据存储：本地存储

？设置

• 继续并安装这些依赖项：

npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime

• 在应用程序的根级别创建一个 .evn 文件并将以下变量添加到其中：

GROQ_API_KEY=<your_groq_api_key>

？要获取您的 Groq API 密钥，请按照以下步骤操作：
转到 GroqCloud 并通过单击“创建 API 密钥”按钮生成 API 密钥。

？让我们深入了解开发：

后端：对于后端，我们将设置一个 /api/copilotkit 端点。此端点将处理来自前端的请求，提供数据或根据需要进行响应。这个端点是您使用 CopilotKit 为应用程序提供支持所需的全部内容。

import {
    CopilotRuntime,
    GroqAdapter,
    copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { NextRequest } from "next/server";
import Groq from "groq-sdk";

const groq:Groq = new Groq({ apiKey: process.env.GROQ_API_KEY }) ;

const copilotKit = new CopilotRuntime();

const serviceAdapter = new GroqAdapter({ groq, model: "llama3-groq-8b-8192-tool-use-preview" });

export const POST = async (req: NextRequest) => {
    const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
        runtime: copilotKit,
        serviceAdapter,
        endpoint: "/api/copilotkit",
    });

    return handleRequest(req);
};

前端：
现在，让我们将 CopilotKit 集成到我们的应用程序中。 CopilotKit 提供了几个有用的钩子，在本教程中，我们将重点关注两个重要的钩子：

• useCopilotReadable: useCopilotReadable 挂钩是一个 React 挂钩，为 Copilot 提供应用程序状态和其他相关信息。此外，此挂钩可以管理应用程序内的分层状态，允许您根据需要将父子关系传递给 Copilot。

npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime

• useCopilotAction： useCopilotAction 挂钩是一个 React 挂钩，使您的副驾驶能够在应用程序中执行操作。您可以使用此挂钩来定义可由应用程序中的 AI 触发的自定义操作。

GROQ_API_KEY=<your_groq_api_key>

• 要实现聊天机器人，您可以使用 @copilotkit/react-ui 包中的 CopilotSidebar 组件。以下是如何进行：

import {
    CopilotRuntime,
    GroqAdapter,
    copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { NextRequest } from "next/server";
import Groq from "groq-sdk";

const groq:Groq = new Groq({ apiKey: process.env.GROQ_API_KEY }) ;

const copilotKit = new CopilotRuntime();

const serviceAdapter = new GroqAdapter({ groq, model: "llama3-groq-8b-8192-tool-use-preview" });

export const POST = async (req: NextRequest) => {
    const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
        runtime: copilotKit,
        serviceAdapter,
        endpoint: "/api/copilotkit",
    });

    return handleRequest(req);
};

• 将所有这些组件放在一起，完整的文件如下所示：

useCopilotReadable({
    description: 'A code snippet manager',
    value: flashcards,
  });

• 此外，我们需要一个状态管理库来确保每当人工智能采取行动时我们的 UI 都会更新。您可以选择任何状态管理库，但在本教程中，我将使用 Zustand 和本地存储一起进行数据存储。这将充当应用程序状态的全局管理点。

useCopilotAction({
      name: "create-flashcards-and-also-quiz-questions-for-those-flashcards",
      description: `Create a new flashcard along with corresponding quiz questions. Each flashcard should contain a term, description, topic, and relevant tags. Additionally, for each flashcard, generate quiz questions with multiple answer options. 
      The quiz questions should conform to the 'QuizQuestion' interface, where:
      - Each question contains a string 'question', an array of four  'options', and the 'correctOption' corresponding to the correct answer.
     `,
      parameters: [
        {
          name: "flashcards",
          description: "The flashcards for the given topic",
          type: "object[]", // Use "array" as the type
        },
        {
          name: "quiz",
          description: "The quiz questions for the given topic, adhering to the QuizQuestion interface",
          type: "object[]", // Use "array" for QuizQuestion[]
        },
        {
          name:"topic",
          description: "The title of the topic",
          type: "string"
        }
      ],
      handler: (args: { flashcards: Flashcard[], quiz: QuizQuestion[], topic: string }) => {
        addTopics(args);
      },
    });

最终应用截图：

这是我引用的项目：
https://github.com/Niharika0104/learn-using-flash-cards

这里是该项目的现场演示：
https://learn-using-flash-cards.vercel.app/

我希望您喜欢这个关于 CopilotKit 的简短教程。请继续关注更多此类有趣且简洁的教程！

希望在下一场见到大家

尼哈里卡。

以上是轻松集成 AI：CopilotKit 使用初学者指南的详细内容。更多信息请关注PHP中文网其他相关文章！