7acadae
CopilotKitDocs
  • Docs
  • Integrations
  • Reference
Get Started
QuickstartCoding Agents
Concepts
ArchitectureGenerative UI OverviewOSS vs Enterprise
Agentic Protocols
OverviewAG-UIAG-UI MiddlewareMCPA2A
Build Chat UIs
Prebuilt Components
CopilotChatCopilotSidebarCopilotPopup
Custom Look and Feel
CSS CustomizationSlots (Subcomponents)Fully Headless UIReasoning Messages
Multimodal AttachmentsVoice
Build Generative UI
Controlled
Tool-based Generative UITool RenderingState RenderingReasoning
Your Components
Display ComponentsInteractive Components
Declarative
A2UIDynamic Schema A2UIFixed Schema A2UI
Open-Ended
MCP Apps
Adding Agent Powers
Frontend ToolsShared State
Human-in-the-Loop
HITL OverviewPausing the Agent for InputHeadless Interrupts
Sub-AgentsAgent ConfigProgrammatic Control
Agents & Backends
Built-in Agent
Backend
Copilot RuntimeFactory ModeAG-UI
Runtime Server AdapterAuthentication
LangGraph (Python)
Your Components
Display-onlyInteractiveInterrupt-based
Shared state
Reading agent stateWriting agent stateInput/Output SchemasState streaming
ReadablesInterruptsConfigurableSubgraphsDeep Agents
Advanced
Disabling state streamingManually emitting messagesExiting the agent loop
Persistence
Loading Agent StateThreadsMessage Persistence
Videos
Video: Research Canvas
Error Debugging & ObservabilityCommon LangGraph issues
Troubleshooting Copilots
Migrate to AG-UI
Observe & Operate
InspectorVS Code Extension
Troubleshooting
Common Copilot IssuesError Debugging & ObservabilityDebug ModeAG-UI Event InspectorHook ExplorerError Observability Connectors
Enterprise
CopilotKit PremiumHow the Enterprise Intelligence Platform WorksHow Threads & Persistence WorkObservabilitySelf-Hosting IntelligenceThreads
Deploy
AWS AgentCore
What's New
Full MCP Apps SupportLangGraph Deep Agents in CopilotKitA2UI Launches with full AG-UI SupportCopilotKit v1.50Generative UI Spec SupportA2A and MCP Handshake
Migrate
Migrate to V2Migrate to 1.8.2
Other
Contributing
Code ContributionsDocumentation Contributions
Anonymous Telemetry
LangGraph (Python)Subgraphs

Subgraphs

Use multiple agents as subgraphs in your application.

Info

This example demonstrates subgraphs in the CopilotKit Feature Viewer.

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.

On this page
What are Subgraphs?When should I use this?How does CopilotKit support this?