Bring your Deep Agents agents
into any app
CopilotKit is an open-source framework that connects your app to Deep Agents agents. Give your agents chat, generative UI, human-in-the-loop, rich threads, automatic learning and more.
Build with Deep Agents
Deep Agents gives you a planning agent on LangGraph: subagents, a task list and the state they share. What it does not give you is the surface. Somewhere for the conversation to happen, a way to show the plan while it is worked through, and a moment for a person to step in. Each capability below builds on something your agent already does.
Generative UI
Your agent updates its plan and calls tools as it works. CopilotKit streams both to the browser and renders them as Angular components, so the user watches the task list fill in.
Read the docsHuman-in-the-loop
A node can interrupt and wait for a person. CopilotKit renders your own UI for that decision and resumes the run with the answer.
Read the docsShared state
The graph carries one state object between subagents. CopilotKit mirrors it into your app and back, so a user edit and an agent write land in the same place.
Read the docsChat surfaces, headless UI, frontend tools and subagent flows work with Deep Agents 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 stays where it runs today, on LangGraph Platform or your own service. CopilotKit reaches it over AG-UI, so nothing inside the agent changes.
import { CopilotRuntime, createCopilotRuntimeHandler } from "@copilotkit/runtime/v2";
import { LangGraphAgent } from "@copilotkit/runtime/langgraph";
const runtime = new CopilotRuntime({
agents: {
sample_agent: new LangGraphAgent({
deploymentUrl: process.env.LANGGRAPH_DEPLOYMENT_URL!,
graphId: "sample_agent",
langsmithApiKey: process.env.LANGSMITH_API_KEY!,
}),
},
});
const handler = createCopilotRuntimeHandler({
runtime,
basePath: "/api/copilotkit",
});
export const GET = handler;
export const POST = handler;
export const PATCH = handler;
export const DELETE = handler;