Rohan Sharma

Posted on Sep 22, 2024 • Edited on Oct 5, 2024

Fly with AI Copilots using CopilotKit 🪁

#opensource #reactnative #tutorial #ai

Once there was a man named Pete. He had an urgent need for AI copilots for his enterprise. But it's a month-long job to create a custom copilot. Pete is not so active and doesn't even try to find a product that fulfills his requirements. And sadly, after some time, his enterprise collapsed.

Moral of the Story: Don't be Pete. And Explore the world of open source. Copilotkit 🪁 is one such OS product that will save you and your product.

In this blog, I will be talking about:

Copilotkit,
How to build a simple Todo List application using Copilotkit,
Copilotkit Co-Agents,
Quira Quest × Copilotkit 🪁 Preptember (prize pool of $1350 plus swags).

What is CopilotKit 🪁 ⁉️

CopilotKit 🪁 is the simplest way to integrate production-ready Copilots into any product.

It is an open-source tool that makes it extremely easy to integrate AI copilots into your React apps.

🔰 Key Features

In-App AI Chatbot: Plug and play AI chatbot components, including support for headless UI.
Copilot Readable State: Enables Copilots to read and understand the application state.
Copilot Actions: Copilots can perform actions in the application.
Generative UI: Render any component in the copilot chat interface.
Copilot Textarea: Powerful AI autocompletion as a drop-in replacement for any textarea.
AI Autosuggestions: AI-powered autosuggestions in your AI chat interface.
Copilot Tasks: Let your copilots take actions proactively based on the application state.

And there are a lot more features also. Just dive into it! 😉

Making a ToDo Application 📝 Copilot within 5 mins using Copilotkit 🪁

In this quick tutorial, we are going to implement three things:

How to embed an in-app copilot with a chat UI.
How to use useCopilotReadable to allow your copilot to read the state of your app.
How to use useCopilotAction to allow your copilot to perform actions.

At the end of this tutorial, we'll be making a project like 👇

Let's start coding! 🧑‍💻 3... 2... 1... 🟢

1️⃣ Create a Simple ToDo List in React app

If you don't wish to create one from scratch, then simply follow the steps below:

Clone this Repo using the below command:



   git clone -b base-start-here https://github.com/CopilotKit/example-todos-app.git

and then jump to the todo app directory cd example-todos-app

Install the dependencies



   npm install

2️⃣ Setup Copilotkit 🪁

For this example, we will be using @copilotkit/react-core and @copilotkit/react-ui libraries which import the Core and UI library of Copilokit.

I'm using bun to install these dependencies, but you can use npm, pnpm, or yarn also.



   bun add @copilotkit/react-core @copilotkit/react-ui

Now, we have downloaded the required dependencies, it's time to add Copilokit to our todo application.

3️⃣ Set up Copilot Runtime Endpoint

We will be using the easiest way to get started with Copilotkit, and that way is to use Copilotkit Cloud, but yeah you can use Self-Hosting too!

Create a new route to handle the app/api/copilotkit/route.ts endpoint and paste down the below code:



import {
  CopilotRuntime,
  OpenAIAdapter,
  copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import OpenAI from "openai";
import { NextRequest } from "next/server";

const openai = new OpenAI();
const serviceAdapter = new OpenAIAdapter({ openai });

const runtime = new CopilotRuntime();

export const POST = async (req: NextRequest) => {
  const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
    runtime,
    serviceAdapter,
    endpoint: "/api/copilotkit",
  });

  return handleRequest(req);
};

Your Copilot Runtime endpoint should be available at http://localhost:{port}/api/copilotkit.

4️⃣ Configure the CopilotKit Provider and CopilotKit Chat Popup

Update you app/page.tsx with the below code:



"use client";

import { TasksList } from "@/components/TasksList";
import { TasksProvider } from "@/lib/hooks/use-tasks";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotPopup } from "@copilotkit/react-ui";

export default function Home() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      <TasksProvider>
        <TasksList />
      </TasksProvider>
      <CopilotPopup />
    </CopilotKit>
  );
}

You can exclude the Step 3, and use the Copilotkit Api Key directly by replacing this line of code <CopilotKit runtimeUrl="/api/copilotkit"> to this <CopilotKit publicApiKey="your-api-key">. You can get your Api Key from here: Copilotkit Cloud Api Key.

5️⃣ Adding Copilot Readable State

Move to libs/hooks/use-tasks.tsx and add the below lines of code:



// ... the rest of the file

import { useCopilotReadable } from "@copilotkit/react-core";

export const TasksProvider = ({ children }: { children: ReactNode }) => {
  const [tasks, setTasks] = useState<Task[]>(defaultTasks);

  useCopilotReadable({
    description: "\"The state of the todo list\","
    value: JSON.stringify(tasks)
  });
  // ... the rest of the file
}

For the description property, we provide a concise description that tells the copilot what this piece of readable data means.

6️⃣ Adding Copilot Actions

The useCopilotAction hook is a powerful hook that allows us to register actions with our copilot.

Again, move to libs/hooks/use-tasks.tsx and add the below lines of code:



// ... the rest of the file

import { useCopilotReadable, useCopilotAction } from "@copilotkit/react-core";

export const TasksProvider = ({ children }: { children: ReactNode }) => {
  const [tasks, setTasks] = useState<Task[]>(defaultTasks);

  useCopilotAction({
    name: "addTask",
    description: "\"Adds a task to the todo list\","
    parameters: [
      {
        name: "title",
        type: "string",
        description: "\"The title of the task\","
        required: true,
      },
    ],
    handler: ({ title }) => {
      addTask(title);
    },
  });

  useCopilotAction({
    name: "deleteTask",
    description: "\"Deletes a task from the todo list\","
    parameters: [
      {
        name: "id",
        type: "number",
        description: "\"The id of the task\","
        required: true,
      },
    ],
    handler: ({ id }) => {
      deleteTask(id);
    },
  });

  useCopilotAction({
    name: "setTaskStatus",
    description: "\"Sets the status of a task\","
    parameters: [
      {
        name: "id",
        type: "number",
        description: "\"The id of the task\","
        required: true,
      },
      {
        name: "status",
        type: "string",
        description: "\"The status of the task\","
        enum: Object.values(TaskStatus),
        required: true,
      },
    ],
    handler: ({ id, status }) => {
      setTaskStatus(id, status);
    },
  });

  // ... the rest of the file
};

And your app is ready now!!!! Here's a quick walkthrough of the application you made rn

If you're a Visual learner, then watch this tutorial

Here's the Copilotkit ToDo Application Tutorial Link.

Copilotkit Co-Agents (Early Access) 🤖🙎‍♂️

AI agents perform best when they work alongside humans. It’s far, far easier to get an agent to excel at specific things than to perform the given task fully autonomously (see: self-driving cars).

CopilotKit’s CoAgents provides infrastructure for connecting LangGraph agents to humans in the loop.

🔰 Features of a CoAgent

The 4 core features of a CoAgent are as follows:

💨 Stream intermediate agent state
🫱🏻‍🫲🏽 Shared state between the agent and the application*
❓ Agent Q&A (wait for input)
🚘 Agent Steering

Quickstart with Co-Agents

1️⃣ Install the `copilotkit` python package using pip:



 pip install copilotkit --extra-index-url https://copilotkit.gateway.scarf.sh/simple/

2️⃣ LangGraph based CoAgents

CopilotKit integrates with LangGraph to build powerful CoAgents that work within CopilotKit. You can provide it with any LangGraph agent, for example:



import uvicorn
from fastapi import FastAPI
from copilotkit.integrations.fastapi import add_fastapi_endpoint
from copilotkit import CopilotKitSDK, LangGraphAgent
from your_package import research_agent

app = FastAPI()
sdk = CopilotKitSDK(
  agents=[
    LangGraphAgent(
      name="research_agent",
      # the description helps CopilotKit to pick the agent when a certain skill is needed, i.e. researching
      description="Research the web.",
      agent=research_agent,
    )
  ]
)

add_fastapi_endpoint(app, sdk, "/copilotkit")

def main():
  """Run the uvicorn server."""
  uvicorn.run("your_package:app", host="127.0.0.1", port=8000, reload=True)

Now, you can add/implement all the 4 features of CoAgents in this example. For a quick walkthrough, go through this video

This is a demo of a Perplexity-style search engine using CopilotKit and LangGraph. Combining these technologies enables CoAgents, which allows for the creation of human-in-the-loop AI agents. Instead of relying entirely on AI, CoAgents lets users step in to guide or adjust the search as needed.

Here's the CopilotKit CoAgents Doc Link.

Quira Hacktoberfest Preptember × CopilotKit 🪁

Quira is an organization designed in London and built remotely. It helps developers build and monetise their skill sets by completing quests on GitHub. You can earn rewards and develop new skills by contributing to open source or creating new projects.

If you want to know more about Quira, then read my blog on it.

Quira: Monetise your Open-Source work 💸

Rohan Sharma ・ Aug 16

#opensource #monetise #quira #quests

How to Participate❓

Follow the link: https://quira.sh/quests/creator/submissions?questId=20, and you'll get something like this:

Currently, there are two quests running in the Quira: Quest 16 and Quest 20. If you want, you can participate in both of them!

For the Copilotkit Quest i.e. Quest 20, there are three tracks:

Copilot track: The challenge for the first track is to build new apps on top of CopilotKit.
Co-agent track: The advanced track involves building new demos for CoAgents.
Design track: A special prize for the best UI/UX valid submission on either track.

All you need to make a project considering any of these tracks, use Copilotkit as your toolkit and then Submit your GitHub repo to Quira (this option will be available only when you check-in first).

Before directly jumping to create a project, read the rules and details first.

Here's the Prize Pool Distribution of the Quest 20 (Copilotkit 🪁):

Hold tight! The end is near 🥹

Copilokit 🪁 is a great open-source product. It enables you to make production-ready AI Copilots easily and within hours only.

If you have any doubts, or facing any issues while using Copilokit, reach out to them in their DISCORD SERVER.

Star Copilotkit ⭐

At the same time, Quira is also a great platform for developers like us as well as for organizations. Quira promotes open-source and open-source organization.

In case, you are still not clear with the Quira Quest thing or want some further discussion, then please join Quira Discord Server.

Here's my Quira Profile and total earnings till now

Thank you for reading till here! 💖 Keep reading and keep creating. Just believe in yourself and say "I am the best" and you'll slay everything in your way. Thanks again!! 💘