ホームページ ウェブフロントエンド jsチュートリアル AI を簡単に統合: CopilotKit の使用に関する初心者向けガイド

AI を簡単に統合: CopilotKit の使用に関する初心者向けガイド

Oct 29, 2024 am 03:34 AM

?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 キーを生成します。

Integrate AI Effortlessly: A Beginner

?開発について詳しく見ていきましょう:

バックエンド: バックエンドの場合、/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);
      },
    });

ログイン後にコピー

最終的なアプリケーションのスクリーンショット:
Integrate AI Effortlessly: A Beginner

Integrate AI Effortlessly: A Beginner

Integrate AI Effortlessly: A Beginner

Integrate AI Effortlessly: A Beginner

これは私が参照しているプロジェクトです:
https://github.com/Niharika0104/learn-using-flash-cards

ここではプロジェクトのライブデモンストレーションを示します:
https://learn-using-flash-cards.vercel.app/

CopilotKit に関するこの短いチュートリアルを楽しんでいただければ幸いです。今後もこのような興味深く簡潔なチュートリアルにご期待ください!

次回は皆さんにお会いできることを楽しみにしています。

ニハリカ。

以上がAI を簡単に統合: CopilotKit の使用に関する初心者向けガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

jQuery日付が有効かどうかを確認します jQuery日付が有効かどうかを確認します Mar 01, 2025 am 08:51 AM

jQuery日付が有効かどうかを確認します

jQueryは要素のパディング/マージンを取得します jQueryは要素のパディング/マージンを取得します Mar 01, 2025 am 08:53 AM

jQueryは要素のパディング/マージンを取得します

10 jQuery Accordionsタブ 10 jQuery Accordionsタブ Mar 01, 2025 am 01:34 AM

10 jQuery Accordionsタブ

10 jqueryプラグインをチェックする価値があります 10 jqueryプラグインをチェックする価値があります Mar 01, 2025 am 01:29 AM

10 jqueryプラグインをチェックする価値があります

ノードとHTTPコンソールを使用したHTTPデバッグ ノードとHTTPコンソールを使用したHTTPデバッグ Mar 01, 2025 am 01:37 AM

ノードとHTTPコンソールを使用したHTTPデバッグ

jQueryはscrollbarをdivに追加します jQueryはscrollbarをdivに追加します Mar 01, 2025 am 01:30 AM

jQueryはscrollbarをdivに追加します

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

See all articles