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.

LangChain

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.

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.

agent.py

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(),
)

export interface GraphState {
  messages: BaseMessage[];
}

import { useStream } from "@langchain/react";
import type { GraphState } from "./types";

function Chat() {
  const stream = useStream<GraphState>({
    apiUrl: "http://localhost:2024",
    assistantId: "agent",
  });

  return (
    <div>
      {stream.messages.map((msg) => (
        <Message key={msg.id} message={msg} />
      ))}
    </div>
  );
}

Deep agents

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.

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.

import { useStream } from "@langchain/react";

function App() {
  const stream = useStream<typeof agent>({
    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:

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

Markdown messages

Parse and render streamed markdown with proper formatting and code highlighting.

Structured output

Render typed agent responses as custom UI components instead of plain text.

Reasoning tokens

Display model thinking processes in collapsible blocks.

Generative UI

Render AI-generated user interfaces from natural language prompts using json-render.

Display agent actions

Tool calling

Show tool calls as rich, type-safe UI cards with loading and error states.

Human-in-the-loop

Pause the agent for human review with approve, reject, and edit workflows.

Manage conversations

Branching chat

Edit messages, regenerate responses, and navigate conversation branches.

Message queues

Queue multiple messages while the agent processes them sequentially.

Advanced streaming

Join & rejoin streams

Disconnect from and reconnect to running agent streams without losing progress.

Time travel

Inspect, navigate, and resume from any checkpoint in the conversation history.

Deep agent patterns

Subagent streaming

Display specialist subagents with streaming content, progress tracking, and collapsible cards.

Todo list

Track agent progress with a real-time todo list synced from agent state.

---

Edit this page on GitHub or file an issue.

Connect these docs to Claude, VSCode, and more via MCP for real-time answers.