Logo
Docs

Quickstart

Get started with CopilotKit in under 5 minutes.

Install dependencies

First, install the CopilotKit dependencies.

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

Set up Copilot Runtime (Backend Endpoint)

Add your OpenAI API key to your .env file in the root of your project:

.env
OPENAI_API_KEY=your_api_key_here

Please note that the code below uses GPT-4o, which requires a paid OpenAI API key. If you are using a free OpenAI API key, change the model to a different option such as gpt-3.5-turbo.

Endpoint Setup

Create a new route to handle the /api/copilotkit endpoint.

app/api/copilotkit/route.ts
import {
  CopilotRuntime,
  OpenAIAdapter,
  copilotRuntimeNextJSAppRouterEndpoint,
} from '@copilotkit/runtime';
import OpenAI from 'openai';
import { NextRequest } from 'next/server';
 
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
const llmAdapter = new OpenAIAdapter({ openai });
 
const runtime = new CopilotRuntime();
 
export const POST = async (req: NextRequest) => {
  const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
    runtime,
    llmAdapter,
    endpoint: '/api/copilotkit',
  });
 
  return handleRequest(req);
};

Your Copilot Runtime endpoint should be available at http://localhost:3000/api/copilotkit.

Configure the CopilotKit Provider

The <CopilotKit> provider must wrap the Copilot-aware parts of your application. For most use-cases, it's appropriate to wrap the CopilotKit provider around the entire app, e.g. in your layout.tsx

Point it at the Copilot Runtime URL you configured in the previous step.

layout.tsx
import { CopilotKit } from "@copilotkit/react-core"; 
 
export default function RootLayout({children}) {
  return (
    {/* Make sure to use the URL you configured in the previous step */}
    <CopilotKit runtimeUrl="/api/copilotkit">
      {children}
    </CopilotKit> 
  );
}

Connect Copilot UI

You are almost there! Now it's time to setup your Copilot UI.

First, import the default styles in your root component (typically layout.tsx) :

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

Copilot UI ships with a number of built-in UI patterns, choose whichever one you like.

CopilotPopup is a convenience wrapper for CopilotChat that lives at the same level as your main content in the view hierarchy. It provides a floating chat interface that can be toggled on and off.

Popup Example
import { CopilotPopup } from "@copilotkit/react-ui";
 
export function YourApp() {
  return (
    <>
      <YourMainContent />
      <CopilotPopup
        instructions={"You are assisting the user as best as you can. Ansewr in the best way possible given the data you have."}
        labels={{
          title: "Popup Assistant",
          initial: "Need any help?",
        }}
      />
    </>
  );
}

🎉 Congrats! You've successfully integrated a fully functional chatbot in your application! Give it a try now and see it in action.


Next Steps

On this page

Edit on GitHub