Niharika Goulikar

Posted on Oct 27

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

#javascript #copilotkit #react #ai

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

Top comments (11)

Anmol Baranwal • Oct 27

Great work 🔥

Rohan Sharma • Oct 27

Cool application!!!

Copilotkit is one of the best OS product!

Navneet Verma • Oct 27

Nice article! What are your thoughts regarding company policies as they wouldn't want any AI scanning and keeping their confidential code bae for its own study purpose? Don't you think AI should be only used in personal projects? Lmk!

Niharika Goulikar • Oct 28

I share the same view; while we can utilize some enterprise-level AI tools, the integrity of the data being used, collected, and trained upon remains uncertain, as many processes occur behind the scenes when using third-party AI tools.

Rajesh • Oct 27

Awesome article!

Rylan Foley • Oct 28

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

Integrating AI into your projects can seem daunting, but with tools like CopilotKit, it's easier than ever. Here's a beginner's guide to get you started:

Understanding CopilotKit: CopilotKit is designed to simplify the process of integrating AI capabilities into your applications. It provides a user-friendly interface that allows developers to utilize AI without needing extensive expertise.

Setting Up Your Environment: Start by installing CopilotKit. Follow the documentation provided on the official website to ensure you have all the necessary dependencies and configurations.

Creating Your First Project: Once set up, you can create a new project within CopilotKit. The platform offers templates to help you get started quickly, allowing you to focus on implementing AI features rather than the underlying code.

Utilizing Pre-built Models: CopilotKit includes access to pre-trained AI models for tasks like natural language processing, image recognition, and more. Choose the model that fits your project's needs and integrate it with just a few lines of code.

Testing and Iteration: After integrating the AI model, thoroughly test your application. Make use of CopilotKit's debugging tools to identify and resolve any issues. Continuous iteration will help you refine the AI functionality for better performance.

Learning Resources: Take advantage of the tutorials and documentation available on the CopilotKit website. These resources can provide valuable insights into more advanced features and best practices for AI integration.

By following these steps, you can easily incorporate AI into your projects using CopilotKit, making your applications smarter and more efficient without the complexity often associated with AI development.