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 を使用してアプリケーションを強化するために必要なのは、この 1 つのエンドポイントだけです。

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 にはいくつかの便利なフックが用意されており、このチュートリアルでは 2 つの重要なフックに焦点を当てます:

• useCopilotReadable: useCopilotReadable フックは、アプリの状態やその他の関連情報を Copilot に提供する React フックです。さらに、このフックはアプリケーション内の階層状態を管理できるため、必要に応じて親子関係をコパイロットに渡すことができます。

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 中国語 Web サイトの他の関連記事を参照してください。