Intermediate9 min
useStream: Real-Time Agent UI
The useStream React hook renders LangGraph agent output in real-time — per-node status indicators, streaming tokens, and custom events from tools. Works with StateGraph, create_agent, and create_deep_agent.
Quick Reference
- →useStream from @langchain/react — React hook for real-time LangGraph agent output
- →Shows per-node execution status: pending, running, completed, errored
- →Streams LLM tokens as they generate — typing effect for chat UIs
- →Receives custom events from runtime.stream_writer or get_stream_writer()
- →Works with any LangGraph backend: local, Agent Server, or remote
- →Supports custom transports for non-HTTP connections
What useStream Does
useStream connects a React component to a running LangGraph agent and provides real-time state updates. As the agent executes — calling the LLM, running tools, updating state — useStream delivers each update to your UI. No polling, no WebSocket setup, no manual state management.
| What You Get | How | UI Pattern |
|---|---|---|
| Node execution status | Per-node pending/running/completed/errored | Progress indicators, step tracker |
| LLM token chunks | Streamed as they generate | Typing effect in chat bubbles |
| Tool call progress | Custom events from tools | Progress bars, status messages |
| Final state | Complete state after agent finishes | Final response rendering |
| Interrupt payloads | When agent pauses for human input | Approval dialogs, form inputs |