Skip to main content
Build rich, interactive 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 — messages, tool calls, interrupts, history, and more — that you render with any framework. 
import { createAgent } from "langchain";
import { MemorySaver } from "@langchain/langgraph";

const agent = createAgent({
  model: "openai:gpt-4.1",
  tools: [getWeather, searchWeb],
  checkpointer: new MemorySaver(),
});
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.

​
Display agent actions

Tool calling

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

Async iterator tools

Show real-time progress bars for long-running tool executions.

Human-in-the-loop

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

​
Manage conversations

Optimistic updates

Show messages instantly while the server processes in the background.

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.
Edit this page on GitHub or file an issue.
Connect these docs to Claude, VSCode, and more via MCP for real-time answers.