KI mühelos integrieren: Ein Leitfaden für Einsteiger zur Verwendung von CopilotKit

?Was ist CopilotKit?

CopilotKit ist ein Open-Source-Framework, das die einfache Integration leistungsstarker, produktionsbereiter KI-Copiloten in jede Anwendung ermöglicht. Mit CopilotKit können Sie benutzerdefinierte KI-Chatbots, Agenten, Textbereiche und mehr nahtlos implementieren, um Ihr Produkt zu verbessern.

?Lassen Sie uns eine Anwendung erstellen, in der wir lernen, wie wir CopilotKit in unsere Anwendung integrieren:-

?Worum geht es in dieser Anwendung?

Diese Anwendung verwendet CopilotKit, um automatisch Lernkarten und Tests zu generieren. Bitten Sie einfach den KI-gestützten Chatbot, Karteikarten zu einem beliebigen Thema zu erstellen, und er generiert sofort sowohl Karteikarten als auch ein entsprechendes Quiz. Es ist eine schnelle und effiziente Möglichkeit, etwas über jedes Thema zu lernen.

? TECH-STACK:

Frontend: NextJs, Tailwind CSS,shadcdn,Zustand
Backend: Nächste Js
Datenspeicherung: Lokaler Speicher

? AUFSTELLEN

• Machen Sie los und installieren Sie diese Abhängigkeiten:

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

• Erstellen Sie eine .evn-Datei im Stammverzeichnis Ihrer Anwendung und fügen Sie diese Variablen hinzu:

GROQ_API_KEY=<your_groq_api_key>
</your_groq_api_key>

?Um Ihren Groq-API-Schlüssel zu erhalten, befolgen Sie diese Schritte:
Gehen Sie zu GroqCloud und generieren Sie einen API-Schlüssel, indem Sie auf die Schaltfläche „API-Schlüssel erstellen“ klicken.

? Tauchen wir ein in die Entwicklung:

Backend: Für das Backend richten wir einen /api/copilotkit-Endpunkt ein. Dieser Endpunkt verarbeitet Anfragen vom Frontend, stellt Daten bereit oder antwortet nach Bedarf. Dieser einzelne Endpunkt ist alles, was Sie brauchen, um Ihre Anwendung mit CopilotKit zu betreiben.

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

Frontend:
Jetzt integrieren wir CopilotKit in unsere Anwendung. CopilotKit bietet mehrere nützliche Hooks, und in diesem Tutorial konzentrieren wir uns auf zwei wesentliche:

• useCopilotReadable: Der useCopilotReadable-Hook ist ein React-Hook, der den Copilot mit dem App-Status und anderen relevanten Informationen versorgt. Darüber hinaus kann dieser Hook den hierarchischen Status innerhalb Ihrer Anwendung verwalten, sodass Sie bei Bedarf Eltern-Kind-Beziehungen an den Copiloten übergeben können.

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

• useCopilotAction: Der useCopilotAction-Hook ist ein React-Hook, der es Ihrem Copiloten ermöglicht, Aktionen innerhalb der App auszuführen. Mit diesem Hook können Sie benutzerdefinierte Aktionen definieren, die von der KI in Ihrer Anwendung ausgelöst werden können.

GROQ_API_KEY=<your_groq_api_key>
</your_groq_api_key>

• Um den Chatbot zu implementieren, können Sie die CopilotSidebar-Komponente aus dem @copilotkit/react-ui-Paket verwenden. So gehen Sie vor:

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

• Wenn man alle diese Komponenten zusammenfügt, sieht die vollständige Datei so aus:

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

• Zusätzlich benötigen wir eine Zustandsverwaltungsbibliothek, um sicherzustellen, dass unsere Benutzeroberfläche aktualisiert wird, wenn die KI Maßnahmen ergreift. Sie können eine beliebige Statusverwaltungsbibliothek auswählen, aber in diesem Tutorial verwende ich Zustand neben Local Storage für die Datenspeicherung. Dies fungiert als globaler Verwaltungspunkt für den Anwendungsstatus.

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

Screenshots der endgültigen Anwendung:

Dies ist das Projekt, auf das ich mich beziehe:
https://github.com/Niharika0104/learn-using-flash-cards

Hier eine Live-Demonstration des Projekts:
https://learn-using-flash-cards.vercel.app/

Ich hoffe, Ihnen hat dieses kurze Tutorial zu CopilotKit gefallen. Seien Sie gespannt auf weitere interessante und prägnante Tutorials!

Ich hoffe, wir sehen uns alle beim nächsten Mal,

Niharika.

Das obige ist der detaillierte Inhalt vonKI mühelos integrieren: Ein Leitfaden für Einsteiger zur Verwendung von CopilotKit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!