CopilotKit + LangGraph

Bring your LangGraph agents
into any app

CopilotKit is an open-source framework that connects your app to LangGraph agents. Give your agents chat, generative UI, human-in-the-loop, rich threads, automatic learning and more.

Quickstart

Loading Chat…

LangGraph and CopilotKit running together, in the React frontend. Every demo below is the same integration with one capability turned on.

Build with LangGraph

LangGraph gives you the graph: nodes, edges, one state object, and interrupts that stop a run mid-node. 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 graph already does.

Generative UI

Your nodes return state updates and tool calls as they run. CopilotKit streams both to the browser by default and renders them as Angular components your users watch update while the graph works.

Read the docs Live demo

Human-in-the-loop

A node calls interrupt() and stops mid-execution. CopilotKit catches that event, renders your own UI for the decision, and resumes the graph with the answer.

Read the docs Live demo

Shared state

Your graph carries one state object from node to node. CopilotKit mirrors it into your app and back, so a user edit and a node write land in the same place.

Read the docs Live demo

Chat surfaces, headless UI, frontend tools and subagent flows work with LangGraph 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 graph stays where it runs today: LangGraph Platform, LangSmith, or your own FastAPI service. CopilotKit reaches it over AG-UI, so nothing inside the graph 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;

Read the setup guide

Already have LangGraph conversations?

When you add a user-facing app to an existing LangGraph agent, your users may need to open and continue conversations they already started. CopilotKit Intelligence can import supported LangGraph history as Rich Threads so your app does not start with an empty thread list.

The importer reads LangGraph Server, LangGraph Platform, or LangSmith Deployment thread and run APIs. It does not import standalone LangChain message stores, LangSmith traces, or embedded checkpointers that are not exposed through those APIs.

Import history once; future CopilotKit-mediated runs synchronize with Intelligence and continue through LangGraph's native persistence path when your durable checkpointer or Platform deployment remains configured. This is not a continuous mirror of runs made outside CopilotKit.

Import and synchronize LangGraph threads for source setup, agent mapping, and thread continuity.