DEV Community

Cover image for Integrate AI Effortlessly: A Beginner's Guide to Using CopilotKit
Niharika Goulikar
Niharika Goulikar

Posted on

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
Enter fullscreen mode Exit fullscreen mode
  • Create a .evn file in the root level of your application and add these variables into it:
GROQ_API_KEY=<your_groq_api_key>
Enter fullscreen mode Exit fullscreen mode

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

GroqCloud API Key

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode
  • 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);
      },
    });

Enter fullscreen mode Exit fullscreen mode
  • 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!",
        }}
      />
Enter fullscreen mode Exit fullscreen mode
  • 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!",
        }}
      />
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode
  • 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 };
Enter fullscreen mode Exit fullscreen mode

Final Application Screenshots:
QuizFlip

Chatbot

Learn

Quiz

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 (12)

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

Great work 🔥

Collapse
 
rohan_sharma profile image
Rohan Sharma

Cool application!!!

Copilotkit is one of the best OS product!

Collapse
 
navneet_verma profile image
Navneet Verma

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!

Collapse
 
niharikaa profile image
Niharika Goulikar

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.

Collapse
 
goulikar_rajesh_9eb772b11 profile image
Rajesh

Awesome article!

Collapse
 
rylan_foley_e655cbc8c3585 profile image
Rylan Foley

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.

Collapse
 
harshika_982e868132d9ddba profile image
Harshika

Nice article!

Collapse
 
anisaa_96baa257 profile image
Anisa • Edited

Looking forward to make something fun!

Collapse
 
akshaya_goulikar_0d04bc39 profile image
Akshaya Goulikar

Awesome!

Collapse
 
pallavigodse profile image
Pallavi Godse

Great knowledge sharing! Thanks buddy!

Collapse
 
annavi11arrea1 profile image
Anna Villarreal

😮✨️