Streaming Typed Agent Messages in LangChain and React

본 영상 시리즈는 langjs (LangChain/LangGraph)를 사용하여 구축된 에이전트의 응답을 애플리케이션으로 스트리밍하고 제너레이티브 UI(Generative UI)를 구축하는 방법을 다룹니다.

에이전트 개발 및 호스팅을 위해 Langraph dev server가 사용되며, 이는 특히 고급 에이전트 패턴 및 브랜칭에 유리합니다. 에이전트는 npm create langraph 명령어를 통해 손쉽게 설정 및 배포될 수 있으며, 이를 통해 Langraph는 프로젝트 내의 에이전트 파일을 감지하고 구성을 생성하여 Langraph dev server에서 에이전트를 호스팅합니다.

프론트엔드에서 에이전트와의 상호작용은 Langraph SDK react에서 제공하는 useStream hook을 통해 이루어집니다. 이 hook은 현재 React에서만 사용 가능하지만, 다른 프레임워크로의 확장이 예정되어 있습니다. useStream hook은 개발자가 Langraph 구성 파일에 정의된 특정 에이전트(tool calling agent 등)를 참조하여 통신할 수 있도록 합니다. 기본적으로 Langraph server는 localhost:2024에서 실행됩니다.

useStream hook을 통해 애플리케이션은 에이전트로부터의 메시지(stream.messages)에 접근할 수 있으며, stream.submit 메서드를 호출하여 에이전트에게 새 메시지를 보낼 수 있습니다. 메시지 렌더링은 stream.messages를 매핑하여 수행되며, 각 메시지의 type에 따라(human message, system message, AI/assistance message 등) 다른 UI를 표시합니다.

특히, tool calls는 AI message의 일부로 포함됩니다. LLM이 에이전트 환경 내에서 도구 호출을 수행할 때, 해당 도구 호출 정보는 AI message 내에 첨부됩니다. UI에서 도구 호출을 렌더링하기 위해 AI message 내에 getToolCalls 메서드를 사용하여 도구 호출 정보를 추출합니다. 추출된 도구 호출은 ToolCallCard와 같은 특정 컴포넌트를 통해 렌더링되며, 예를 들어 get weather tool의 경우 WeatherToolCard가 실행된 도구의 입력(위치)뿐만 아니라 출력(온도, 습도, 바람 등)까지 표시합니다.

예시로 제시된 "two calling agent"는 GPT4 mini 모델을 사용하며, get weather tool (Open-Meteo API 연동)과 web search tool (OpenAI 제공자 패키지에 내장) 두 가지 도구를 활용하여 날씨 정보 조회 및 웹 검색 기능을 제공합니다. 사용자가 "San Francisco 날씨"와 같은 메시지를 보내면, 에이전트는 날씨 도구를 호출하고, 그 결과가 WeatherToolCard 형태로 UI에 표시된 후 에이전트의 최종 답변이 렌더링됩니다.

추가적으로, Langraph 문서에서는 프론트엔드 스트리밍에 대한 자세한 내용을 제공하며, 향후 비디오에서는 human-in-the-loop 워크플로우, 에이전트 스트림 재개, 추론 정보 표시, 사용자 정의 이벤트 UI 전송 등 다양한 스트리밍 패턴을 다룰 예정입니다.