輕鬆整合 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>
</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>
</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中文網其他相關文章！