Quickstart
Get started with CopilotKit in under 5 minutes.
Set up Copilot Runtime (Backend Endpoint)
Add your OpenAI API key to your .env
file in the root of your project:
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.
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.
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
) :
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.
🎉 Congrats! You've successfully integrated a fully functional chatbot in your application! Give it a try now and see it in action.
Next Steps
Connecting Your Data
Learn how to connect CopilotKit to your data, applicaation state and user state.
Generative UI
Learn how to render custom UI components directly in the CopilotKit chat window.
Frontend Actions
Learn how to allow your copilot to take applications on frontend.
CoAgents (LangGraph)
Check out our section about CoAgents, the human-in-the-loop SDK for LangGraph agents.