React
React hooks and TypeScript components. Start with CopilotChat, customize component slots, or use headless APIs.
React docsCopilotKit Frontend SDKs
React, Angular, Vue, and React Native SDKs for agent-powered applications. Add chat, generative UI, frontend tools, and shared state with ready-made components or a fully headless interface.
Any agent frameworkOpen protocolsSelf-hostableBuilt for your product
The SDK for your frontend.
Build for the web, iOS, and Android with the framework your team uses. Open-source SDKs, with framework-specific components and APIs.
Angular
Angular components, providers, stores, and signals. Register UI and frontend tools in your application’s injection context.
Angular docsReact Native
Build for iOS and Android with prebuilt chat or headless hooks. Share agent interaction patterns across your mobile experience.
React Native docs
Vue
Vue components and composables for chat, generative UI, tools, and state. Connect your agent to a Vue application.
Vue docsThe building blocks of an agentic application.
Start with ready-made components or compose your own. Add the interaction patterns your product needs without rebuilding the connection to your agent.
Chat components
Add prebuilt chat with streaming messages and tool activity. Style it with your CSS, replace its subcomponents, or build your own interface with headless APIs.
ExploreGenerative UI
Register your own components and their parameters. The agent chooses what to show and supplies the data; your components keep the experience in your design system.
ExploreRealtime shared state
Read agent state in your interface and update it from the application. Use read/write or read-only access so the agent and the user work from the same context.
ExploreHuman-in-the-loop approvals
Render an approval, a choice, or an input form when the agent needs human judgment. Return the user’s response to the running workflow.
ExploreFrontend tools
Expose application functions through typed parameters and handlers. Let the agent open a record, apply a filter, navigate a view, or call the code your product already uses.
ExploreAG-UI Streams
Persist and resume messages, generative UI, tool activity, and state with Intelligence. Import existing history so conversations can continue across sessions.
ExploreGENERATIVE UI
Your components. The agent’s next response.
A response can be a chart, a form, a table, or a working control. Register the UI your product already uses and let the agent populate it with the right data.
- Controlled UI: the agent selects from your registered components.
- Declarative UI: render structured UI specifications such as A2UI.
- Open-ended UI: render generated interfaces in a sandbox.
Building for the web? MCP Apps can also bring third-party tool interfaces into your application.
React · Controlled generative UI
// Controlled generative UI
useComponent({
name: "showRefundStatus",
description: "Show a refund status card.",
parameters: z.object({
orderId: z.string(),
amount: z.number(),
method: z.string(),
}),
// your component, your design system
render: RefundStatusCard,
});
function RefundStatusCard({ orderId, amount }) {
return <Card>…</Card>; // breakdown pie, your design system
}From prebuilt chat to fully headless.
Choose how much of the interface you want to own. Keep the connection to your agent while adapting the experience to your product.
Start with a working chat.
Drop in chat and style it with your CSS. Get a familiar conversation interface without building it from scratch.
Replace the parts you need.
Use component slots for your own message views, inputs, and controls. Mix the supplied UI with your product’s components.
Own the entire interface.
Work directly with messages, agent state, and activity rendering. Build the layout and interaction model your product needs.
CONVERSATIONS WITH CONTINUITY
Let the work outlast the session.
A useful conversation includes the UI, the tool results, and the state around it. Preserve that experience so a user can come back and continue.
Explore AG-UI StreamsYour agent backend stays yours. Connect through AG-UI, then choose how the experience looks and behaves.
Find your integrationStart with your app and your agent.
Copy the setup prompt into your coding agent to start building with CopilotKit.
