How to Set Up CopilotKit in Your React App: A Step-by-Step Guide

If you've ever built an AI based application, you may have noticed that developing an AI heavy feature for your app that uses the power of LLMs through APIs (like that of OpenAI, Anthropic etc) can be super time consuming and frustrating. It's not just about coding the API integration, it's the overall time spent writing the business logic thats on top of it that takes so much effort.

This is where CopilotKit comes in. It allows you to build scalable LLM-powered applications with little to no time. It also offers endless ways of building cool, unique features for your app.

In this article we'll cover how to get started the easy way with an example repo provided by CopilotKit and then later we'll also cover how to integrate CopilotKit into a new/existing React app from scratch.

What's CopilotKit and why use it?

CopilotKit is a framework that helps you integrate AI assistants and agents in your apps easily. If you're using React it especially helps to have hooks and functions for building complex components that interact with LLM APIs.

By using CopilotKit you no longer have to write LLM API integration logic and it simplifies implementing business logic on top of it.

Here are some features you can build using CopilotKit:

• AI chatbots


• AI Agents


• AI Assistants


• Dynamically generated Components

...and much more!

If you're not familiar with AI agents, think of them as autonomous digital workers that can perform tasks proactively. They don't require user inputs to execute a task as they make decisions independently based on their own understanding. AI assistants on the other hand are comparatively less powerful as they only perform specific actions whenever a user instructs them, like setting reminders, booking meetings, etc.

Getting Started with an Example Repo

Lets go ahead and set up a simple React application with CopilotKit. The fastest way to see CopilotKit in action is by using one of the official example repositories.

Head over to their GitHub homepage by clicking

Each repo demonstrates the unique abilities of CopilotKit framework.

Let's see how we can make these repos work locally with an example. We'll be cloning the repo named example-todos-app.

In your VS Code, open the terminal and type the following command to clone the example-todos-app repository:

git clone https://github.com/CopilotKit/example-todos-app.git

Great, once you have cloned the repo, go to the project directory by doing:

cd example-todos-app

Now that we have the codebase locally we'll need to add an important environment variable to get the app fully set-up. That environment variable is NEXT_PUBLIC_COPILOT_CLOUD_PUBLIC_API_KEY which requires us to create a new account at

After filling the form you'll be taken to the project dashboard page:

You'll notice on the bottom right there's a chat icon. If you click on that it'll open the chat interface. Here, you can command the AI to modify your To Do list as you want.

Try sending these messages one by one:

1. Delete all to do list items.


2. Come up with 3 random business ideas and add them to the list.


3. Mark all ideas as completed.

Cool stuff huh? You can find more example repos on their GitHub homepage

To fix this, go ahead and install the missing dependency called "ajv" as follows:

npm install ajv@latest 

Now try running npm start again and it should work normally. It will start the server at the default port 3000. Go to localhost:3000 and it should look like this:

]

Setting up CopilotKit

Great, let's go ahead and modify the code so that we can use the capabilities of CopilotKit in our app.

In order to use all features of the CopilotKit framework we need to add the CopilotKit Provider to the app. This provider should wrap around all the components of your app, which is why we'll need to add it to the Parent component or at the top of the component tree. This parent component may differ depending on your app structure. For instance, if your app was initialised using create-react-app (like in our case) then the parent component is the index.js component. On the other hand if you're using _Next.js _then you need to add the CopilotKit provider inside the layout.tsx component.

As we're using create-react-app for this example, we'll add the CopilotKit provider inside the src/index.js file.

This is how your index.js file should look like:

import React from "react";

import ReactDOM from "react-dom/client";

import "./index.css";

import App from "./App";

import reportWebVitals from "./reportWebVitals";

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

import "@copilotkit/react-ui/styles.css";



const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(

  <React.StrictMode>

    <CopilotKit publicApiKey={process.env.REACT_APP_COPILOTKIT_API_KEY}>

      <App />

    </CopilotKit>

  </React.StrictMode>

);



// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

We're done setting up the Copilotkit provider. All we need now is to host the CopilotKit runtime, and we can start using CopilotKit.

There are 2 ways to use CopilotKit: Either by self-hosting the runtime or by using CopilotKit cloud.

To keep this guide simple and straight-forward we'll use CopilotKit cloud to build the "talk to AI" page.

We've already covered above how you can register for CopilotKit cloud and get the API key for your app. Its fairly easy and you can do it at

import "./App.css";

import { CopilotChat } from "@copilotkit/react-ui";

function App() {

  return (

    <div className="App">

      <CopilotChat />

    </div>

  );

}



export default App;

npm start