Skip to main content
Build frontends that visualize LangGraph pipelines in real time. These patterns show how to render multi-step graph execution with per-node status and streaming content from custom StateGraph workflows.

​
Architecture

LangGraph graphs are composed of named nodes connected by edges. Each node executes a step (classify, research, analyze, synthesize) and writes output to a specific state key. On the frontend, useStream provides reactive access to node outputs, streaming tokens, and graph metadata so you can map each node to a UI card. 
from langgraph.graph import StateGraph, MessagesState, START, END

class State(MessagesState):
    classification: str
    research: str
    analysis: str

graph = StateGraph(State)
graph.add_node("classify", classify_node)
graph.add_node("research", research_node)
graph.add_node("analyze", analyze_node)
graph.add_edge(START, "classify")
graph.add_edge("classify", "research")
graph.add_edge("research", "analyze")
graph.add_edge("analyze", END)

app = graph.compile()
On the frontend, useStream exposes stream.values for completed node outputs and getMessagesMetadata for identifying which node produced each streaming token. 
import { useStream } from "@langchain/react";

function Pipeline() {
  const stream = useStream<typeof graph>({
    apiUrl: "http://localhost:2024",
    assistantId: "pipeline",
  });

  const classification = stream.values?.classification;
  const research = stream.values?.research;
  const analysis = stream.values?.analysis;
}

​
Patterns

Graph execution

Visualize multi-step graph pipelines with per-node status and streaming content.
The LangChain frontend patterns—markdown messages, tool calling, optimistic updates, and more—work with any LangGraph graph. The useStream hook provides the same core API whether you use createAgent, createDeepAgent, or a custom StateGraph.
Edit this page on GitHub or file an issue.
Connect these docs to Claude, VSCode, and more via MCP for real-time answers.