Overview

Build UIs that display real-time subagent streams, task progress, and sandbox for Deep Agents

Build frontends that visualize deep agent workflows in real time. These patterns show how to render subagent progress, task planning, streaming content, and IDE-like sandbox experiences 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.

import { createDeepAgent } from "deepagents";

const agent = createDeepAgent({
  tools: [getWeather],
  system: "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 in v1 of each package:

import { useStream } from "@langchain/react";   // React
import { useStream } from "@langchain/vue";      // Vue
import { useStream } from "@langchain/svelte";   // Svelte
import { useStream } from "@langchain/angular";  // Angular

@langchain/react, @langchain/vue, @langchain/svelte, and @langchain/angular v1 is a breaking release. The new useStream hook ships a v2-native streaming protocol that requires langgraph-api>=0.9.0rc1 on the LangGraph Agent Server. Upgrade with pip install -U "langgraph-api>=0.9.0rc1", or run a recent langgraph dev from langgraph-cli.

If you’d rather not upgrade the server yet, pin your frontend package to the pre-v1 release—@langchain/react@0.3, @langchain/vue@0.4, @langchain/svelte@0.4, or @langchain/angular@0.4—which talk to the legacy streaming protocol.

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.

Sandbox

Build an IDE-like UI with a file browser, code viewer, and diff panel backed by a sandbox.

Related patterns

The LangChain frontend patterns, including markdown messages, tool calling, and human-in-the-loop, all work with deep agents too. Deep Agents are built on the same LangGraph runtime, so useStream provides the same core API.

---

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

Edit this page on GitHub or file an issue.