Sepadukan AI Dengan Mudah: Panduan Pemula untuk Menggunakan CopilotKit

?Apakah itu CopilotKit?

CopilotKit ialah rangka kerja sumber terbuka yang memudahkan untuk menyepadukan Copilot AI yang berkuasa dan sedia pengeluaran ke dalam sebarang aplikasi. Dengan CopilotKit, anda boleh melaksanakan chatbot AI tersuai, ejen, kawasan teks dan banyak lagi dengan lancar untuk meningkatkan produk anda.

?Mari kita bina aplikasi di mana kita akan belajar cara mengintegrasikan CopilotKit ke dalam aplikasi kita:-

?Apakah maksud aplikasi ini?

Aplikasi ini menggunakan CopilotKit untuk menjana kad imbas dan kuiz secara automatik. Cuma minta chatbot yang dikuasakan AI untuk mencipta kad imbas pada sebarang topik, dan ia akan menjana kedua-dua kad imbas dan kuiz yang sepadan dengan serta-merta. Ia merupakan cara yang pantas dan cekap untuk mempelajari mana-mana subjek.

? TINDAKAN TEKNIK:

Frontend: NextJs, Tailwind CSS,shadcdn,Zustand
Backend: Js Seterusnya
Storan Data: Storan Setempat

? SETUP

• Teruskan dan pasang kebergantungan ini:

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

• Buat fail .evn dalam tahap akar aplikasi anda dan tambahkan pembolehubah ini ke dalamnya:

GROQ_API_KEY=<your_groq_api_key>
</your_groq_api_key>

?Untuk mendapatkan Kunci API Groq anda ikuti langkah berikut:
Pergi ke GroqCloud dan jana kunci API dengan mengklik butang cipta Kunci API.

? Mari Selami Pembangunan:

Backend: Untuk bahagian belakang, kami akan menyediakan titik akhir /api/copilotkit. Titik akhir ini akan mengendalikan permintaan daripada bahagian hadapan, menyampaikan data atau bertindak balas mengikut keperluan. Titik akhir tunggal ini adalah semua yang anda perlukan untuk menguasakan aplikasi anda dengan 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);
};

Hadapan:
Sekarang, mari kita integrasikan CopilotKit ke dalam aplikasi kami. CopilotKit menyediakan beberapa cangkuk yang berguna, dan untuk tutorial ini, kami akan memfokuskan pada dua cangkuk yang penting:

• useCopilotReadable: Cangkuk useCopilotReadable ialah cangkuk React yang membekalkan Copilot dengan keadaan apl dan maklumat lain yang berkaitan. Selain itu, cangkuk ini boleh mengurus keadaan hierarki dalam aplikasi anda, membolehkan anda menghantar perhubungan ibu bapa-anak kepada Copilot mengikut keperluan.

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

• useCopilotAction: Cangkuk useCopilotAction ialah cangkuk React yang membolehkan copilot anda melakukan tindakan dalam apl. Anda boleh menggunakan cangkuk ini untuk menentukan tindakan tersuai yang boleh dicetuskan oleh AI dalam aplikasi anda.

GROQ_API_KEY=<your_groq_api_key>
</your_groq_api_key>

• Untuk melaksanakan chatbot, anda boleh menggunakan komponen CopilotSidebar daripada pakej @copilotkit/react-ui. Berikut ialah cara untuk meneruskan:

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);
};

• Menggabungkan semua komponen ini, berikut ialah rupa fail lengkap:

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

• Selain itu, kami memerlukan perpustakaan pengurusan negeri untuk memastikan kemas kini UI kami apabila AI mengambil tindakan. Anda boleh memilih mana-mana pustaka pengurusan negeri, tetapi dalam tutorial ini, saya akan menggunakan Zustand bersama Storan Tempatan untuk penyimpanan data. Ini akan bertindak sebagai titik pengurusan global untuk keadaan aplikasi.

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);
      },
    });

Tangkapan Skrin Permohonan Akhir:

Ini adalah projek yang saya rujuk:
https://github.com/Niharika0104/learn-using-flash-cards

Di sini demonstrasi langsung projek:
https://learn-using-flash-cards.vercel.app/

Saya harap anda menikmati tutorial ringkas ini tentang CopilotKit. Nantikan lebih banyak tutorial yang menarik dan ringkas!

Semoga berjumpa anda semua pada yang seterusnya,

Niharika.

Atas ialah kandungan terperinci Sepadukan AI Dengan Mudah: Panduan Pemula untuk Menggunakan CopilotKit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!