Dive into Development
Start with a single command and your existing app. Bring your own agents, models, or frameworks.
30.4k GitHub stars
Bring Agents to Your Users
in Real Applications
Bridge the gap with CopilotKit: the enterprise-ready frontend stack for agents.
30.4k GitHub stars
Bring Agents to Your Users
in Real Applications
Bridge the gap with CopilotKit: the enterprise-ready frontend stack for agents.
30.4k GitHub stars
Bring Agents to Your Users
in Real Applications
Bridge the gap with CopilotKit: the enterprise-ready frontend stack for agents.
Trusted by the majority of the Fortune 500s and Global 50.
1st Party Partners
Customers
Explore
Get started
Learn about Agentic Apps
Explore how agentic protocols and generative UI enable agent↔user interaction.
Dive into Development
Start with a single command and your existing app. Bring your own agents, models, or frameworks.
Learn about Agentic Apps
Explore how agentic protocols and generative UI enable agent↔user interaction.
Built for developers, by developers
Get started in minutes with our simple, powerful APIs.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { useAgent, useCopilotKit } from '@copilotkit/react-core';
export default function Chat() {
const { agent } = useAgent();
const { copilotkit } = useCopilotKit();
return (
<div>
{agent.messages.map(m => (
<p key={m.id}>{m.content}</p>
))}
<button onClick={() => copilotkit.runAgent({ agent })}>
{agent.isRunning ? 'Thinking...' : 'Send'}
</button>
</div>
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
import { CopilotSidebar } from '@copilotkit/react-ui';
export default function App() {
return (
<CopilotSidebar
input={<MyCustomInput />}
header={<MyBrandedHeader />}
welcomeScreen={false}
>
<YourApp />
</CopilotSidebar>
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
import { useCopilotAction } from '@copilotkit/react-core';
useCopilotAction({
name: 'showWeather',
description: 'Display a weather card',
parameters: [
{ name: 'city', type: 'string' },
{ name: 'temp', type: 'number' },
],
render: ({ city, temp }) => (
<WeatherCard city={city} temp={temp} />
),
});
1
2
3
4
5
6
7
8
9
10
import { CopilotRuntime,
LangGraphHttpAgent } from '@copilotkit/runtime';
const runtime = new CopilotRuntime({
agents: {
myAgent: new LangGraphHttpAgent({
url: 'http://localhost:8000/agent',
}),
},
});
Features
Everything you need to build AI experiences
Powerful features that make integration simple and scalable.
Generative UI
Your agent renders your own React components. Rich, interactive UI that updates in real time as your agent works.
1
2
3
4
5
6
7
8
9
10
11
12
useCopilotAction({
name: "showFlight",
render: ({args}) => (
<FlightCard
flight={args.flight}
status={args.status}
/>
),
)
AI Assistant
What's the status of my flight to NYC?
Here's your flight info:
AA 2047On Time
LAX10:30 AM
5h 20m
›
JFK6:50 PM
Gate B12Seat 24ATerminal 4
Ask a follow-up...
Connect any agent to your user interface
Seamlessly integrate AI agents with your frontend components. Build intelligent interfaces that respond to user needs.
Threads+Persistence
Automatic conversation threading and state persistence. Never lose context across sessions.
Frontend SDKs for React and Angular
First-class support for modern frameworks. Get started in minutes with our intuitive APIs.
Chat components
Pre-built, customizable chat UI components. Beautiful interfaces out of the box.
Explore additional famous spots in NYC such as the Rockefeller Center and the High Line
Col1
Col2
Col3
Row 1
Row2
Row3
Row4
44
45
46
47
48
49
50
51
52
.chat-container {
background: #000000;
border-radius: 16px;
}
.text-bubble {
background: #FFFFFF;
font: 14px sans-serif;
}
3
2
1
A
B
C
Hi! I'm your AI Assistant, what can i help you with today?
Create a table of these features, include the companies that asked for it...
Data Distribution
Compare PR completion ra...
Visualize author prod...
Type a message
Features
Everything you need to build AI experiences
Powerful features that make integration simple and scalable.
Generative UI
Your agent renders your own React components. Rich, interactive UI that updates in real time as your agent works.
1
2
3
4
5
6
7
8
9
10
11
12
useCopilotAction({
name: "showFlight",
render: ({args}) => (
<FlightCard
flight={args.flight}
status={args.status}
/>
),
)
AI Assistant
What's the status of my flight to NYC?
Here's your flight info:
AA 2047On Time
LAX10:30 AM
5h 20m
›
JFK6:50 PM
Gate B12Seat 24ATerminal 4
Ask a follow-up...
Connect any agent to your user interface
Seamlessly integrate AI agents with your frontend components. Build intelligent interfaces that respond to user needs.
Threads+Persistence
Automatic conversation threading and state persistence. Never lose context across sessions.
Frontend SDKs for React and Angular
First-class support for modern frameworks. Get started in minutes with our intuitive APIs.
Chat components
Pre-built, customizable chat UI components. Beautiful interfaces out of the box.
Explore additional famous spots in NYC such as the Rockefeller Center and the High Line
Col1
Col2
Col3
Row 1
Row2
Row3
Row4
44
45
46
47
48
49
50
51
52
.chat-container {
background: #000000;
border-radius: 16px;
}
.text-bubble {
background: #FFFFFF;
font: 14px sans-serif;
}
3
2
1
A
B
C
Hi! I'm your AI Assistant, what can i help you with today?
Create a table of these features, include the companies that asked for it...
Data Distribution
Compare PR completion ra...
Visualize author prod...
Type a message
Testimonials
What customers are saying
Teams around the world are building the future of AI-powered applications with CopilotKit.
“Docusign is partnering with CopiloKit to enable in-application agentic experiences that bring the power of AI into our applications, improving workflows and clarifying customer questions. The CopiloKit SDK has accelerated our development processes and enabled us to help our users accomplish their tasks more quickly and with more confidence. The CPK team has been a delight and has consistently responded to our concerns and feature requests.”
Mark Peterson, VP of Software Engineering
Docusign
“CopilotKit has been a valuable addition to our stack. The AG-UI architecture lets us cleanly decouple our agent framework from the frontend, so we can evolve each independently. The pre-built component library saved us from rolling our own, and the agent's ability to drive the UI directly has let us build experiences that go well beyond a standard chatbot. Their support team has also been consistently responsive whenever we've needed help.”
Bryan Godwin, CTO
Evergreen Wealth
Architecture built for scale
Tools
LLM
Agentic Backend
Agentic Frontend
Your users
Frontend SDKs
Customizable pre-built components or full headless code control
Drop in a fully-featured copilot UI, or go headless and build your own. React, Next.js, and Vue SDKs with streaming-first architecture that just works.
Frontend SDKs
Customizable pre-built components or full headless code control
Drop in a fully-featured copilot UI, or go headless and build your own. React, Next.js, and Vue SDKs with streaming-first architecture that just works.
Threads + Persistence
Product Insights
Self-Learning
AG-UI
Frontend SDKs
Customizable pre-built components or full headless code control
Drop in a fully-featured copilot UI, or go headless and build your own. React, Next.js, and Vue SDKs with streaming-first architecture that just works.
Threads + Persistence
Product Insights
Self-Learning
AG-UI
Solutions
See how teams are building amazing AI experiences with CopilotKit.
SaaS Copilot
Add an intelligent assistant to your SaaS product. Help users navigate features, automate workflows, and get insights from their data.
Co-Creation Copilot
Collaborate with AI to build, design, and create. Perfect for creative tools, design platforms, and content creation apps.
Go check out the Dojo
Google ADK
Microsoft Agent Framework
LLM
LLM
LLM
Google ADK
Microsoft Agent Framework
LLM
LLM
LLM
Google ADK
Microsoft Agent Framework
LLM
LLM
LLM
