Dive into Development
Start with a single command and your existing app. Bring your own agents, models, or frameworks.
30.6k GitHub starsThe Enterprise
The Enterprise
Agentic Frontend Stack
Build fullstack agentic applications & generative UIs.
Start quickly, customize effortlessly.
30.6k GitHub starsThe Enterprise
The Enterprise
Agentic Frontend Stack
Build fullstack agentic applications & generative UIs.
Start quickly, customize effortlessly.
30.6k GitHub starsThe Enterprise
The Enterprise
Agentic Frontend Stack
Build fullstack agentic applications & generative UIs.
Start quickly, customize effortlessly.
Trusted by the majority of the Fortune 500s and Global 50.
The company behind the AG-UI protocol.
First party integrations from the leading agent stacks.
Explore
Get Started
Deploy Agentic Features
Understand the CopilotKit feature set and pricing, including premium and intelligence features.
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.
Deploy Agentic Features
Understand the CopilotKit feature set and pricing, including premium and intelligence features.
Learn about Agentic Apps
Explore how agentic protocols and generative UI enable agent↔user interaction.
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 CopilotKit to enable in-application agentic experiences that bring the power of AI into our applications, improving workflows and clarifying customer questions. The CopilotKit SDK has accelerated our development processes and enabled us to help our users accomplish their tasks more quickly and with more confidence. The CopilotKit 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
Explore the Dojo
Try AG-UI examples and interaction patterns in a focused hands-on environment.
Dev
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
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
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 { useComponent } from '@copilotkit/react-core';
useComponent({
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',
}),
},
});
Google ADK
Microsoft Agent Framework
LLM
LLM
LLM
Google ADK
Microsoft Agent Framework
LLM
LLM
LLM
Google ADK
Microsoft Agent Framework
LLM
LLM
LLM