LangChain UI Playground
Explore production-ready UI patterns for LangChain agent apps — across React, Vue, Svelte, and Angular. Pick a framework, browse demos, and open in your editor.Framework Previews
Every pattern is implemented across all four frontend frameworks. Choose a tab to browse demos.- React
- Vue
- Svelte
- Angular
Tool Calling
Render agent tool calls as rich cards — calculator, weather, search, email and more.
Human in the Loop
Agent pauses and surfaces an approval card before taking a sensitive action.
Generative UI
Server-driven dynamic UI — the agent emits structured component payloads rendered live.
Reasoning Tokens
Collapsible chain-of-thought blocks that stream thinking tokens before the final answer.
Structured Output
Agent returns typed structured data rendered with LaTeX math support.
Time Travel
Branch conversation history and replay from any checkpoint using LangChain state.
Join / Rejoin
Visualize fan-out/fan-in parallel subgraph execution with merge indicators.
Async Iterator Tools
Stream incremental tool progress using async iterators with live progress cards.
Deep Agent — Subagent Cards
Hierarchical activity cards for Deep Research-style multi-subagent orchestration.
Deep Agent — Todo List
Agent builds and checks off a live todo list while executing a long-running task.
Graph Execution Cards
Timeline cards that visualize each LangGraph node as it executes in real time.
Markdown Messages
Rich Markdown rendering with syntax-highlighted code blocks inside chat bubbles.
Message Branching
Display multi-branch message threads with branch selectors inline in the chat history.
Branching Chat
Full chat interface with first-class branch navigation and history traversal.
Message Queues
Visualize message queue state and throughput for multi-step agent pipelines.
Subagent Streaming
Stream output from multiple parallel subagents simultaneously with isolated windows.
UI Framework Integrations
Drop-in UI component libraries built to work with@langchain/react out of the box.ai-elements
Headless, composable React components for building AI chat UIs. Uses
useStream under the hood with full shadcn/ui compatibility.- Scroll-sticky conversation container
- Streaming code blocks with syntax highlighting
- Collapsible reasoning / thinking blocks
- Tool call display with args & results
- Shimmer loading states & suggestion chips
assistant-ui
A Claude-style assistant UI built with
@assistant-ui/react primitives wired to LangChain via useExternalStoreRuntime.- Claude-style warm parchment theme
- Chain-of-thought collapsible reasoning
- Image attachment support
- Copy / thumbs-up / thumbs-down action bar
- Full dark mode support
OpenUI
Generative UI chat where a LangChain agent emits arbitrary React components as part of the message stream — rendered live in the browser.
- Agent-driven dynamic component rendering
- Streaming message composition
- Custom component registry
- Live preview of generated interfaces
Connect these docs to Claude, VSCode, and more via MCP for real-time answers.