构建能够实时可视化 deep agent workflows 的 frontends。这些 patterns 展示如何从使用 createDeepAgent 创建的 agents 中渲染 subagent progress、 task planning、streaming content，以及类似 IDE 的 sandbox experiences。 当 UI 能让 delegation 可见时，deep agents 最有用。LangChain SDKs 不会只显示单个不透明的 assistant bubble， 而是暴露 coordinator、subagent discovery、custom state 和 sandbox-backed artifacts， 让 users 可以检查 long-running task 如何被分解和完成。
这些 patterns 使用 v1 frontend SDK packages。如果你使用较早版本，请参阅 React、Vue、Svelte 和 Angular 的 migration guides。

​
Architecture

Deep Agents 使用 coordinator-worker architecture。Main agent 规划 tasks，并委派给 specialized subagents，每个 subagent 都隔离运行。在 frontend 中，v1 stream handle 会在 root stream 上呈现 coordinator messages，并为 scoped subagent views 暴露 subagent discovery snapshots。 
import { createDeepAgent } from "deepagents";

const agent = createDeepAgent({
  tools: [getWeather],
  systemPrompt: "You are a helpful assistant",
  subagents: [
    {
      name: "researcher",
      description: "Research assistant",
    },
  ],
});
在 frontend 中，像使用 createAgent 一样使用 useStream 连接。传入 type parameter 以获得 type-safe stream state。Deep agent patterns 使用 stream.subagents、useMessages(stream, subagent) 等 selector helpers，以及 stream.values.todos 等 custom state values 来渲染 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.values()];
}

​
SDK 暴露的内容

Deep agent UIs 通常需要的不只是 final answer。Frontend SDK 会为 users 关心的 run 部分提供 structured projections：
Projection用途
stream.messagesCoordinator conversation 和 final synthesis。
stream.subagentsSpecialist workers 的 live discovery，包括 status 和 task metadata。
stream.valuesShared state，例如 todos、plans、report sections、sandbox metadata，或 agent 写入的任何 custom key。
Tool-call state将 filesystem、search、browser 或 domain tools 渲染为带 progress 和 results 的 cards。
Interrupts在不丢失 run state 的情况下，为 user approval 或缺失 input 暂停 delegated work。
这让你可以构建更像 IDE、task board 或 workflow monitor，而不是普通 chat transcript 的 interfaces。

​
Patterns

Subagent streaming

使用 streaming content、progress tracking 和 collapsible cards 展示 specialist subagents。

Todo list

使用从 agent state 同步的 real-time todo list 跟踪 agent progress。

Sandbox

构建由 sandbox 支撑、包含 file browser、code viewer 和 diff panel 的 IDE-like UI。

​
相关 patterns

LangChain frontend patterns 也都适用于 deep agents， 包括 markdown messages、tool calling 和 human-in-the-loop。Deep Agents 构建在相同的 LangGraph runtime 上， 因此 useStream 提供相同的 core API。 若要查看更底层的 graph visualizations，请参阅 LangGraph frontend patterns。它们展示如何将 graph nodes 和 state keys 直接映射到 UI components。
Connect these docs to Claude, VSCode, and more via MCP for real-time answers.
Edit this page on GitHub or file an issue.