손쉬운 AI 통합: CopilotKit 사용을 위한 초보자 가이드

?CopilotKit이 무엇인가요?

CopilotKit은 프로덕션에 즉시 사용 가능한 강력한 AI Copilot을 모든 애플리케이션에 쉽게 통합할 수 있게 해주는 오픈 소스 프레임워크입니다. CopilotKit을 사용하면 맞춤형 AI 챗봇, 에이전트, 텍스트 영역 등을 원활하게 구현하여 제품을 향상할 수 있습니다.

?CopilotKit을 애플리케이션에 통합하는 방법을 배울 애플리케이션을 만들어 보겠습니다.-

?이 애플리케이션의 목적은 무엇입니까?

이 애플리케이션은 CopilotKit을 사용하여 플래시카드와 퀴즈를 자동으로 생성합니다. AI 기반 챗봇에게 어떤 주제에 대해서도 플래시카드를 만들어 달라고 요청하기만 하면 플래시카드와 해당 퀴즈가 즉시 생성됩니다. 어떤 주제에 대해서도 빠르고 효율적으로 학습할 수 있는 방법입니다.

? 기술 스택:

프런트엔드: 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 후크는 Copilot에 앱 상태 및 기타 관련 정보를 제공하는 React 후크입니다. 또한 이 후크는 애플리케이션 내의 계층적 상태를 관리할 수 있으므로 필요에 따라 상위-하위 관계를 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,
  });

• 또한 AI가 조치를 취할 때마다 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!