Step 2: Setup CopilotKit
Now that we have our todo list app running, we’re ready to integrate CopilotKit. For this tutorial, we will install the following dependencies:
@copilotkit/react-core
: The core library for CopilotKit, which contains the CopilotKit provider and useful hooks.@copilotkit/react-ui
: The UI library for CopilotKit, which contains the CopilotKit UI components such as the sidebar, chat popup, textare and more.
Install Dependencies
To install the CopilotKit dependencies, run the following:
npm install @copilotkit/react-core @copilotkit/react-ui
Setup CopilotKit
CopilotKit Chat Popup
We provide several plug-and-play components for you to interact with your copilot. Some of these are <CopilotPopup/>
, <CopilotSidebar/>
, and <CopilotChat/>
. You can of course use CopilotKit in headless mode and provide your own fully custom UI via useCopilotChat
.
In this tutorial, we’ll use the <CopilotPopup/>
component to display the chat popup.
"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>
);
}
Here’s what we did:
- We imported the
<CopilotPopup />
component from@copilotkit/react-ui
. - We wrapped the page with the
<CopilotKit>
provider. - We imported the built-in styles from
@copilotkit/react-ui
. This is optional.
Now, head back to your app and you’ll find a chat popup in the bottom right corner of the page. At this point, you can start interacting with your copilot! 🎉
In the next step, we’ll make our assistant smarter by providing it with readable state about our todo list.