Integrate AI Effortlessly: A Beginner&#s Guide to Using CopilotKit

?What is CopilotKit?

CopilotKit is an open-source framework that makes it easy to integrate powerful, production-ready AI Copilots into any application. With CopilotKit, you can seamlessly implement custom AI chatbots, agents, text areas, and more to enhance your product.

?Let's build an application in which we will learn how to integrate CopilotKit into our application:-

?What is this application all about?

This application uses CopilotKit to automatically generate flashcards and quizzes. Simply ask the AI-powered chatbot to create flashcards on any topic, and it will instantly generate both flashcards and a corresponding quiz. It’s a fast and efficient way to learn about any subject.

? TECH STACK:

Frontend: NextJs, Tailwind CSS,shadcdn,Zustand
Backend: Next Js
Data Storage: Local Storage

? SETUP

• Go-ahead and install these dependencies:

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

• Create a .evn file in the root level of your application and add these variables into it:

GROQ_API_KEY=<your_groq_api_key>
</your_groq_api_key>

?To get your Groq API Key follow these steps:
Go to GroqCloud and generate an API key by clicking on create API Key button.

? Let’s Dive into Development:

Backend: For the backend, we’ll set up an /api/copilotkit endpoint. This endpoint will handle requests from the frontend, serving data or responding as needed.This single endpoint is all you need to power your application with 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:
Now, let’s integrate CopilotKit into our application. CopilotKit provides several useful hooks, and for this tutorial, we’ll be focusing on two essential ones:

• useCopilotReadable: The useCopilotReadable hook is a React hook that supplies the Copilot with app state and other relevant information. Additionally, this hook can manage hierarchical state within your application, allowing you to pass parent-child relationships to the Copilot as needed.

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

• useCopilotAction: The useCopilotAction hook is a React hook that enables your copilot to perform actions within the app. You can use this hook to define custom actions that can be triggered by the AI in your application.

GROQ_API_KEY=<your_groq_api_key>
</your_groq_api_key>

• To implement the chatbot, you can use the CopilotSidebar component from the @copilotkit/react-ui package. Here’s how to proceed:

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

• Putting all these components together, here’s how the complete file would look:

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

• Additionally, we’ll need a state management library to ensure our UI updates whenever the AI takes action. You can choose any state management library, but in this tutorial, I’ll be using Zustand alongside Local Storage for data storage.This will act as a global management point for the application state.

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

Final Application Screenshots:

This is the project that I'm referencing to:
https://github.com/Niharika0104/learn-using-flash-cards

Here a live demonstration of the project:
https://learn-using-flash-cards.vercel.app/

I hope you enjoyed this short tutorial on CopilotKit.Stay tuned for more such interesting and concise tutorials!

Hope to see you all in the next one,

Niharika.

The above is the detailed content of Integrate AI Effortlessly: A Beginner&#s Guide to Using CopilotKit. For more information, please follow other related articles on the PHP Chinese website!