Bring your Claude Agent SDK (TypeScript) agents
into any app
CopilotKit is an open-source framework that connects your app to Claude Agent SDK (TypeScript) agents. Give your agents chat, generative UI, human-in-the-loop, rich threads, automatic learning and more.
The Claude Agent SDK and CopilotKit running together, in the React frontend. Every demo below is the same integration with one capability turned on.
Build with Claude Agent SDK (TypeScript)
The Claude Agent SDK gives you the agent loop: tools, context handling, and a session that keeps its history. What it does not give you is the surface. Somewhere for the conversation to happen, a way to show the run while it is running, and a moment for a person to step in. Each capability below builds on something your agent already does.
Generative UI
Your agent calls tools and reports progress as it works. CopilotKit streams those calls to the browser and renders each one as a an Angular component, instead of leaving the user with a spinner.
Read the docs Live demoHuman-in-the-loop
The agent calls an approval tool and waits for its result. CopilotKit resolves that tool from the browser once the user decides, and the same Claude run continues with the answer.
Read the docs Live demoShared state
Your session carries state across turns on the server. CopilotKit mirrors it into your app and back, so a user edit and an agent write land in the same place.
Read the docs Live demoChat surfaces, headless UI, frontend tools and multi-agent flows work with the Claude Agent SDK 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 agent keeps running as its own service, with the AG-UI adapter from @ag-ui/claude-agent-sdk in front of it. CopilotKit reaches that service over HTTP, so nothing inside the agent 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;