ContextQMD
Back to Copilotkit

Step 2: Setup CopilotKit

showcase/shell-docs/src/content/docs/tutorials/ai-todo-app/step-2-setup-copilotkit.mdx

1.57.02.7 KB
Original Source

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, textarea and more.

Install Dependencies

To install the CopilotKit dependencies, run the following:

npm
npm install @copilotkit/react-core @copilotkit/react-ui

Setup CopilotKit

<TailoredContent id="hosting"> <TailoredContentOption id="copilot-cloud" title="Copilot Cloud (Recommended)" description="Use our hosted backend endpoint to get started quickly." icon={<FaCloud />} > In order to use CopilotKit, we'll need to configure the `CopilotKit` provider. <CopilotCloudConfigureCopilotKitProvider /> </TailoredContentOption> <TailoredContentOption id="self-hosted" title="Self-hosting" description="Learn to host CopilotKit's runtime yourself with your own backend." icon={<FaServer />} > <Steps> <Step> ### Set up Copilot Runtime Endpoint <SelfHostingCopilotRuntimeCreateEndpoint /> </Step> <Step>

Configure the CopilotKit Provider

<SelfHostingCopilotRuntimeConfigureCopilotKitProvider /> </Step> </Steps> </TailoredContentOption> </TailoredContent>

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.

tsx
"use client";

export default function Home() {
  return (
    <>
      <TasksProvider>
        <TasksList />
      </TasksProvider>
      <CopilotPopup />
    </>
  );
}

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.

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! 🎉

<Cards> <Card title="← Previous: Check out the repo" href="/tutorials/ai-todo-app/step-1-checkout-repo" description="Clone the starter and install dependencies." /> <Card title="Next: Read app state →" href="/tutorials/ai-todo-app/step-3-copilot-readable-state" description="Use useCopilotReadable so the copilot can answer questions about your todos." /> </Cards>