Subgraphs

<IframeSwitcher id="subgraphs-example" exampleUrl="https://feature-viewer.copilotkit.ai/langgraph/feature/subgraphs?sidebar=false&chatDefaultOpen=false" codeUrl="https://feature-viewer.copilotkit.ai/langgraph/feature/subgraphs?view=code&sidebar=false&codeLayout=tabs" exampleLabel="Demo" codeLabel="Code" height="700px" />

What are Subgraphs?

A subgraph is simply a graph used as a node inside another graph. Think of it as encapsulation for LangGraph: each subgraph is a self-contained unit that can be combined to build larger, more complex systems.

When should I use this?

Subgraphs are useful when you need to structure a graph into smaller, reusable pieces. They let you build multi-agent systems, reuse node sets across multiple graphs, and let different teams develop separate parts of a graph independently.

How does CopilotKit support this?

CopilotKit supports streaming directly from subgraphs, so nested graphs can emit events in real time just like a single graph.

Using this feature requires no extra steps on the agent side. All you need to do, is to enable subgraph streaming using the useAgent hook:

const { agent } = useAgent({
  agentId: "sample_agent",
});

// Access agent state as usual - subgraph streaming is handled automatically
const state = agent.state;

The subgraph nodes will stream as usual, and you can also use interrupt() directly from a subgraph.