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 here. You'll notice they have multiple example repos for you to explore their powerful framework.
At the time of writing, they have the following example repos:
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 cloud.copilotkit.ai and then get the API key.
Copilotkit offers a free trial which is more than enough to play around with it. Once you have signed up you should see this screen:
After filling the form you'll be taken to the project dashboard page:
Here you can find important stuff like your Copilot Cloud API key, number of copilot cloud requests made, etc. Note that it says you can make up to 50 requests without providing an OpenAI API key, which is perfect for those who don't have an active OpenAI subscription!
Ok moving on. Copy your Copilot Cloud API key and then go back to your VS Code and create a new .env file in your project folder (inside example-todos-app) and add the following line inside the .env file:
NEXT_PUBLIC_COPILOT_CLOUD_PUBLIC_API_KEY="paste_your_copilot_cloud_api_key"
Perfect, let's install all the required dependencies now:
npm install
or
yarn install
Cool! Once the dependencies are done installing, lets go ahead and start the server to get our app running.
npm run dev
or
yarn dev
That's about it! You can see the app working in your browser at the URL localhost:3000.
It'll look something like the following:
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:
- Delete all to do list items.
- Come up with 3 random business ideas and add them to the list.
- Mark all ideas as completed.
Cool stuff huh? You can find more example repos on their GitHub homepage here.
Integrating CopilotKit into your React app
For those who want to integrate CopilotKit into their existing or new React app, here’s how to set it up from scratch. Let's build a simple chat app that lets you talk to AI like chat gpt. Nothing big, but enough to show you the power of CopilotKit.
I'll be using create-react-app for initializing a new project.
So let's go ahead and make sure we actually have create-react-app installed globally:
npm install -g create-react-app
Great, now go ahead and open a new window in VS Code, open a folder and go to the VS Code terminal and type this:
npx create-react-app chat-app
or
yarn create react-app chat-app
This should automatically create a new react project along with all the started files.
Before we move forward make sure you are in the project directory.
cd chat-app
Voila, we can now run the server to ensure our project is set up.
npm start
Note that in some rare cases, you may get the following error when running npm start:
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:
Cool, so let's go ahead and start modifying our react app. We will try implementing a "talk to AI" feature. CopilotKit provides a component to do this out of the box, so we just have to import and use it. Nothing too fancy, but it goes a long way in showing the power of CopilotKit.
But first we need the CopilotKit framework installed and set up in order to use it.
Adding CopilotKit to your React app
The first step is to install the CopilotKit libraries in our app. There are essentially 2 libraries that we're going to need. The first is copilotkit/react-ui which provides ready to use AI powered components right out of the box.
The second library is copilotkit/react-core that contains the main logic for interacting with LLM APIs.
Go to the terminal and type:
npm install @copilotkit/react-ui @copilotkit/react-core
[To view CopilotKit's official Quickstart guide, go here]
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 cloud.copilotkit.ai.
Once you're done signing up, you'll find your API keys on the Dashboard which should look something like this:
Copy the Copilot Cloud Public API Key as we'll need to add it to our environment variable. Create a new file inside the chat-app folder called .env and add the following value:
REACT_APP_COPILOTKIT_API_KEY="paste_your_copilot_cloud_api_key"
And.. we're done setting up CopilotKit! All we need to do now is to import the CopilotKit functions/hooks inside any component and we can start building out LLM powered features supported by CopilotKit. Let's do just that.
Since we're building a talk to AI feature we're going to use a React component called . This is provided by CopilotKit and we just have to import it to start using it.
Go to your src/App.js file inside the src folder and make sure it looks like this:
import "./App.css";
import { CopilotChat } from "@copilotkit/react-ui";
function App() {
return (
<div className="App">
<CopilotChat />
</div>
);
}
export default App;
That's it, we're done! Now let's run the command to start our server like this:
npm start
Your server should start automatically at localhost:3000. Here is how it should look:
You can now start talking to AI like you normally talk to chat GPT!
As you saw, it was fairly simple to set everything up, because of the ready-made UI components provided by CopilotKit library and because the API calls to the OpenAI are being taken care of by CopilotKit as well.
You can build LLM based applications quickly without re-writing the same API call logic and creating the UI components that update dynamically based on LLM responses.
Top comments (1)
This is a great guide! Could you use the CoAgents tool from CopilotKit to build an agent with LangGraph?