> ## Documentation Index
> Fetch the complete documentation index at: https://langchain-5e9cc07a-preview-merged-1773673439-f47cb10.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Overview
> Build generative UIs with real-time streaming from LangChain and deep agents
Build rich, interactive frontends for agents. Use `createAgent` for single-agent workflows or `createDeepAgent` for coordinator-worker architectures with subagents. Both stream state to the frontend via the `useStream` hook.
Build frontends for agents created with `createAgent`. These patterns cover everything from basic message rendering to advanced workflows like human-in-the-loop approval and time travel debugging.
## Architecture
Every pattern follows the same architecture: a `createAgent` backend streams state to a frontend via the `useStream` hook.
```mermaid theme={null}
%%{
init: {
"fontFamily": "monospace",
"flowchart": {
"curve": "curve"
}
}
}%%
graph LR
FRONTEND["useStream()"]
BACKEND["createAgent()"]
BACKEND --"stream"--> FRONTEND
FRONTEND --"submit"--> BACKEND
classDef blueHighlight fill:#DBEAFE,stroke:#2563EB,color:#1E3A8A;
classDef greenHighlight fill:#DCFCE7,stroke:#16A34A,color:#14532D;
class FRONTEND blueHighlight;
class BACKEND greenHighlight;
```
On the backend, `createAgent` produces a compiled LangGraph graph that exposes
a streaming API. On the frontend, the `useStream` hook connects to that API
and provides reactive state, including messages, tool calls, interrupts, and
history, that you render with any framework.
```python agent.py theme={null}
from langchain import create_agent
from langgraph.checkpoint.memory import MemorySaver
agent = create_agent(
model="openai:gpt-5.4",
tools=[get_weather, search_web],
checkpointer=MemorySaver(),
)
```
```ts types.ts theme={null}
export interface GraphState {
messages: BaseMessage[];
}
```
```tsx Chat.tsx theme={null}
import { useStream } from "@langchain/react";
import type { GraphState } from "./types";
function Chat() {
const stream = useStream({
apiUrl: "http://localhost:2024",
assistantId: "agent",
});
return (
{stream.messages.map((msg) => (
))}
);
}
```
Build frontends that visualize deep agent workflows in real time. These patterns show how to render subagent progress, task planning, and streaming content from agents created with `createDeepAgent`.
## Architecture
Deep agents use a coordinator-worker architecture. The main agent plans tasks and delegates to specialized subagents, each running in isolation. On the frontend, `useStream` surfaces both the coordinator's messages and each subagent's streaming state.
```mermaid theme={null}
%%{
init: {
"fontFamily": "monospace",
"flowchart": {
"curve": "curve"
}
}
}%%
graph LR
FRONTEND["useStream()"]
BACKEND["createDeepAgent()"]
SUB1["Subagent A"]
SUB2["Subagent B"]
BACKEND --"stream"--> FRONTEND
FRONTEND --"submit"--> BACKEND
BACKEND --"delegate"--> SUB1
BACKEND --"delegate"--> SUB2
SUB1 --"result"--> BACKEND
SUB2 --"result"--> BACKEND
classDef blueHighlight fill:#DBEAFE,stroke:#2563EB,color:#1E3A8A;
classDef greenHighlight fill:#DCFCE7,stroke:#16A34A,color:#14532D;
classDef purpleHighlight fill:#EDE9FE,stroke:#7C3AED,color:#4C1D95;
class FRONTEND blueHighlight;
class BACKEND greenHighlight;
class SUB1,SUB2 purpleHighlight;
```
```python theme={null}
from deepagents import create_deep_agent
agent = create_deep_agent(
tools=[get_weather],
system_prompt="You are a helpful assistant",
subagents=[
{
"name": "researcher",
"description": "Research assistant",
}
],
)
```
On the frontend, connect with `useStream` the same way as with `createAgent`. Deep agent patterns use additional `useStream` features like `stream.subagents`, `stream.values.todos`, and `filterSubagentMessages` to render subagent-specific UIs.
```ts theme={null}
import { useStream } from "@langchain/react";
function App() {
const stream = useStream({
apiUrl: "http://localhost:2024",
assistantId: "agent",
});
// Deep agent state beyond messages
const todos = stream.values?.todos;
const subagents = stream.subagents;
}
```
`useStream` is available for React, Vue, Svelte, and Angular:
```ts theme={null}
import { useStream } from "@langchain/react"; // React
import { useStream } from "@langchain/vue"; // Vue
import { useStream } from "@langchain/svelte"; // Svelte
import { useStream } from "@langchain/angular"; // Angular
```
## Patterns
### Render messages and output
Parse and render streamed markdown with proper formatting and code highlighting.
Render typed agent responses as custom UI components instead of plain text.
Display model thinking processes in collapsible blocks.
Render AI-generated user interfaces from natural language prompts using json-render.
### Display agent actions
Show tool calls as rich, type-safe UI cards with loading and error states.
Pause the agent for human review with approve, reject, and edit workflows.
### Manage conversations
Edit messages, regenerate responses, and navigate conversation branches.
Queue multiple messages while the agent processes them sequentially.
### Advanced streaming
Disconnect from and reconnect to running agent streams without losing progress.
Inspect, navigate, and resume from any checkpoint in the conversation history.
### Deep agent patterns
Display specialist subagents with streaming content, progress tracking, and collapsible cards.
Track agent progress with a real-time todo list synced from agent state.
***
[Edit this page on GitHub](https://github.com/langchain-ai/docs/edit/main/src/oss/langchain/frontend/overview.mdx) or [file an issue](https://github.com/langchain-ai/docs/issues/new/choose).
[Connect these docs](/use-these-docs) to Claude, VSCode, and more via MCP for real-time answers.