Bring your CrewAI Flows agents
into any app
CopilotKit is an open-source framework that connects your app to CrewAI Flows agents. Give your agents chat, generative UI, human-in-the-loop, rich threads, automatic learning and more.
CrewAI and CopilotKit running together, in the React frontend. Every demo below is the same integration with one capability turned on.
Build with CrewAI Flows
CrewAI gives you the flow: steps, state and the crew that works through them. What it does not give you is the surface. Somewhere for the conversation to happen, a way to show the flow while it runs, and a moment for a person to step in. Each capability below builds on something your flow already does.
Generative UI
Your flow emits state and tool calls as each step completes. CopilotKit streams those to the browser and renders them as Angular components your users watch update while the flow runs.
Read the docs Live demoHuman-in-the-loop
A flow can stop and wait for a person. CopilotKit renders your own UI for that decision and resumes the flow with the answer.
Read the docs Live demoShared state
Flow state is the one object every step reads and writes. CopilotKit mirrors it into your app and back, so a user edit and a step write land in the same place.
Read the docs Live demoChat surfaces, headless UI, frontend tools and multi-agent flows work with CrewAI too. And more
Start building
Connect an existing agent or build a new one. Get a tailored setup prompt.
Where are you starting?
Tell us what you already have. We’ll tailor your setup.
Connect your agent
Your flow keeps running as its own Python service, with the AG-UI bridge from ag_ui_crewai in front of it. CopilotKit reaches that service over HTTP, so nothing inside the flow changes.
import {
CopilotRuntime,
createCopilotRuntimeHandler,
} from "@copilotkit/runtime/v2";
import { HttpAgent } from "@ag-ui/client";
const runtime = new CopilotRuntime({
agents: {
my_agent: new HttpAgent({ url: process.env.AGENT_URL! }),
},
});
const handler = createCopilotRuntimeHandler({
runtime,
basePath: "/api/copilotkit",
});
export const GET = handler;
export const POST = handler;