Intégrez l'IA sans effort : guide du débutant sur l'utilisation de CopilotKit

?Qu'est-ce que CopilotKit ?

CopilotKit est un framework open source qui facilite l'intégration de copilotes IA puissants et prêts pour la production dans n'importe quelle application. Avec CopilotKit, vous pouvez implémenter en toute transparence des chatbots IA personnalisés, des agents, des zones de texte et bien plus encore pour améliorer votre produit.

?Créons une application dans laquelle nous apprendrons comment intégrer CopilotKit dans notre application :-

?De quoi parle cette application ?

Cette application utilise CopilotKit pour générer automatiquement des flashcards et des quiz. Demandez simplement au chatbot alimenté par l'IA de créer des flashcards sur n'importe quel sujet, et il générera instantanément à la fois des flashcards et un quiz correspondant. C’est un moyen rapide et efficace d’en apprendre davantage sur n’importe quel sujet.

? PILE TECHNIQUE :

Frontend : NextJs, Tailwind CSS, shadcdn, Zustand
Backend : Js suivants
Stockage de données : Stockage local

? INSTALLATION

• Allez-y et installez ces dépendances :

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

• Créez un fichier .evn au niveau racine de votre application et ajoutez-y ces variables :

GROQ_API_KEY=<your_groq_api_key>

?Pour obtenir votre clé API Groq, suivez ces étapes :
Accédez à GroqCloud et générez une clé API en cliquant sur le bouton Créer une clé API.

? Passons au développement :

Backend : Pour le backend, nous allons configurer un point de terminaison /api/copilotkit. Ce point de terminaison traitera les requêtes du frontend, servira les données ou répondra selon les besoins. Ce point de terminaison unique est tout ce dont vous avez besoin pour alimenter votre application avec 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);
};

Frontend :
Maintenant, intégrons CopilotKit dans notre application. CopilotKit fournit plusieurs hooks utiles, et pour ce tutoriel, nous nous concentrerons sur deux essentiels :

• useCopilotReadable : Le hook useCopilotReadable est un hook React qui fournit au Copilot l'état de l'application et d'autres informations pertinentes. De plus, ce hook peut gérer l'état hiérarchique au sein de votre application, vous permettant de transmettre les relations parent-enfant au Copilot selon vos besoins.

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

• useCopilotAction : Le hook useCopilotAction est un hook React qui permet à votre copilote d'effectuer des actions au sein de l'application. Vous pouvez utiliser ce hook pour définir des actions personnalisées qui peuvent être déclenchées par l'IA dans votre application.

GROQ_API_KEY=<your_groq_api_key>

• Pour implémenter le chatbot, vous pouvez utiliser le composant CopilotSidebar du package @copilotkit/react-ui. Voici comment procéder :

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

• En rassemblant tous ces composants, voici à quoi ressemblerait le fichier complet :

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

• De plus, nous aurons besoin d'une bibliothèque de gestion d'état pour garantir que notre interface utilisateur soit mise à jour chaque fois que l'IA entre en action. Vous pouvez choisir n'importe quelle bibliothèque de gestion d'état, mais dans ce didacticiel, j'utiliserai Zustand aux côtés du stockage local pour le stockage des données. Cela servira de point de gestion global pour l'état de l'application.

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

Captures d'écran de l'application finale :

C'est le projet auquel je fais référence :
https://github.com/Niharika0104/learn-using-flash-cards

Ici une démonstration en direct du projet :
https://apprendre-à-utiliser-flash-cards.vercel.app/

J'espère que vous avez apprécié ce court tutoriel sur CopilotKit. Restez à l'écoute pour d'autres tutoriels aussi intéressants et concis !

J'espère vous voir tous dans le prochain,

Niharika.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!