개요

개요 (Overview)

Deep Agents를 위한 실시간 서브에이전트 스트림, 작업 진행 상황, 샌드박스를 표시하는 UI를 구축하세요.

딥 에이전트 워크플로를 실시간으로 시각화하는 프론트엔드를 구축하세요. 이 패턴들은 createDeepAgent로 만든 에이전트에서 서브에이전트 진행 상황, 작업 계획, 스트리밍 콘텐츠, IDE 같은 샌드박스 경험을 렌더링하는 방법을 보여줍니다.

딥 에이전트는 UI가 위임을 보이게 만들 때 가장 유용합니다. 단일한 불투명한 어시스턴트 말풍선을 보여주는 대신, LangChain SDK는 코디네이터, 서브에이전트 발견, 커스텀 state, 샌드박스 기반 산출물을 노출하여 사용자가 장기 실행 작업이 어떻게 분해되고 완료되는지 검사할 수 있게 합니다.

출처: 문서

본문

아키텍처 (Architecture)

Deep Agents는 코디네이터-워커 아키텍처를 사용합니다. 메인 에이전트가 작업을 계획하고 각각 격리되어 실행되는 전문화된 서브에이전트에 위임합니다. 프론트엔드에서 v1 스트림 핸들은 루트 스트림에 코디네이터 메시지를 표시하고, 범위 지정된 서브에이전트 뷰용 서브에이전트 발견 스냅샷을 노출합니다.

import { createDeepAgent } from "deepagents";

const agent = createDeepAgent({
  tools: [getWeather],
  systemPrompt: "You are a helpful assistant",
  subagents: [
    {
      name: "researcher",
      description: "Research assistant",
      systemPrompt: "You are a research assistant.",
    },
  ],
});

프론트엔드에서 createAgent와 같은 방식으로 useStream으로 연결하세요. 타입 안전 스트림 state를 위해 타입 파라미터를 전달하세요. 딥 에이전트 패턴은 stream.subagents, useMessages(stream, subagent) 같은 셀렉터 헬퍼, stream.values.todos 같은 커스텀 state 값을 사용해 서브에이전트별 UI를 렌더링합니다.

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가 노출하는 것 (What the SDK exposes)

딥 에이전트 UI는 보통 최종 답변보다 더 많은 것을 필요로 합니다. 프론트엔드 SDK는 사용자가 관심 있는 실행 부분에 대한 구조화된 프로젝션을 제공합니다:

이로써 단순한 채팅 대화록보다 IDE, 작업 보드, 워크플로 모니터에 더 가까운 인터페이스를 구축할 수 있습니다.

패턴 (Patterns)

• 서브에이전트 스트리밍 (/oss/javascript/deepagents/frontend/subagent-streaming): 스트리밍 콘텐츠, 진행 추적, 접을 수 있는 카드로 전문화된 서브에이전트 표시.
• 할 일 목록 (/oss/javascript/deepagents/frontend/todo-list): 에이전트가 작업 계획에 옵트인할 때 실시간 할 일 목록으로 진행 상황 추적.
• 샌드박스 (/oss/javascript/deepagents/frontend/sandbox): 샌드박스가 지원하는 파일 브라우저, 코드 뷰어, diff 패널로 IDE 같은 UI 구축.

관련 패턴 (Related patterns)

LangChain 프론트엔드 패턴(마크다운 메시지, 도구 호출, 휴먼 인 더 루프 포함)은 모두 딥 에이전트에서도 작동합니다. Deep Agents는 같은 LangGraph 런타임 위에 구축되므로 useStream은 같은 핵심 API를 제공합니다.

더 낮은 수준의 그래프 시각화는 LangGraph 프론트엔드 패턴을 참고하세요. 그래프 노드와 state 키를 UI 컴포넌트에 직접 매핑하는 방법을 보여줍니다.

더 알아보기

• 이 문서를 MCP로 연결하면 Claude, VSCode 등에서 실시간 답변을 받을 수 있어요.
• GitHub에서 이 페이지 편집하기 또는 이슈 제출하기.