dev-resources.site

for different kinds of informations.

Integrate AI Effortlessly: A Beginner's Guide to Using CopilotKit

Published at

10/27/2024

🌟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>

🚀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.

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

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.

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

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

<CopilotSidebar
        instructions={"You are assisting the user with creating flashcards on any topic they ask for. Break down information into concise, easy-to-remember points, and include key facts, definitions, or questions on one side, with answers or explanations on the other. Organize the information in a way that enhances memorization and recall. Add relevant tags for better categorization and future review."}
        labels={{
          title: "FlashCard Buddy - Study Assistant",
          initial: "Hey there! 👋 Ready to create some flashcards? Let me know the topic!",
        }}
      />

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

"use client";
import { CopilotSidebar } from '@copilotkit/react-ui';
import "@copilotkit/react-ui/styles.css";
import { useCopilotAction, useCopilotReadable } from '@copilotkit/react-core';
import useFlashCardStore from '@/lib/store/flashcardstore';
import { Flashcard, QuizQuestion } from '@/lib/store/flashcardstore';
import RecentFlashCardTopic from "@/components/FlashCardTopics";


export default function Home() {
  const flashcards = useFlashCardStore((state) => state.flashcards);
  const addFlashCard = useFlashCardStore((state) => state.addTopicContent);

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

  const addTopics = (args: { flashcards: Flashcard[], quiz: QuizQuestion[] ,topic:string}) => {
    // args.flashcards.forEach((newFlashcard) => {
    //   const existingFlashcard = flashcards.find(element => 
    //     element.flashcards.some(flashcard => 
    //       flashcard.term === newFlashcard.term &&
    //       flashcard.description === newFlashcard.description &&
    //       flashcard.topic === newFlashcard.topic
    //     )
    //   );

      // If the flashcard does not exist, add it
      // if (!existingFlashcard) {
      //   addFlashCard({ flashcards: [newFlashcard], quiz: args.quiz });
      // }
      addFlashCard(args);
    };


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

  return (
    <>
     <RecentFlashCardTopic/>
      <CopilotSidebar
        instructions={"You are assisting the user with creating flashcards on any topic they ask for. Break down information into concise, easy-to-remember points, and include key facts, definitions, or questions on one side, with answers or explanations on the other. Organize the information in a way that enhances memorization and recall. Add relevant tags for better categorization and future review."}
        labels={{
          title: "FlashCard Buddy - Study Assistant",
          initial: "Hey there! 👋 Ready to create some flashcards? Let me know the topic!",
        }}
      />
    </>
  );
}

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.

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';

// Interface for flashcards
interface Flashcard {
  term: string;
  description: string;
  topic: string;
  tags: string[];
}

// Interface for quiz options
interface QuizOption {
  id: number;
  text: string;
}

// Interface for a quiz question
interface QuizQuestion {
  id:number;
  question: string;
  options: string[]; // Array of 4 options
  correct: string; // ID of the correct option

}

// Interface for the topic's JSON object
interface TopicContent {
  id: number;
  topic:string;
  flashcards: Flashcard[];
  quiz: QuizQuestion[];
}

// Store interface
interface FlashcardStore {
  flashcards: TopicContent[];
  addTopicContent: (topicContent: Omit<TopicContent, 'id'>) => void;
  removeTopicContent: (id: number) => void;
}

const useFlashcardStore = create<FlashcardStore>()(
  persist(
    (set) => ({
      flashcards: [],
      addTopicContent: (newTopicContent) =>
        set((state) => ({
          flashcards: [...state.flashcards, { ...newTopicContent, id: Date.now() }],
        })),

      removeTopicContent: (id) =>
        set((state) => ({
          flashcards: state.flashcards.filter((topicContent) => topicContent.id !== id),
        })),
    }),
    {
      name: 'flashcard-storage', // Key to store flashcards in local storage
      storage: createJSONStorage(() => localStorage), // Use local storage for persistence
    }
  )
);
export default useFlashcardStore;
export type { Flashcard, QuizQuestion,TopicContent,QuizOption };

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.

copilotkit Article's

20 articles in total

Learn Coding with CopilotKit: A Revolutionary Approach to Mastering Programming