에이전트 채팅 UI

에이전트 채팅 UI (Agent Chat UI)

Agent Chat UI는 어떤 LangChain 에이전트와든 대화할 수 있게 해주는 Next.js 애플리케이션이에요. 실시간 채팅, 도구 시각화, 그리고 타임트래블 디버깅이나 상태 포크(fork) 같은 고급 기능까지 지원해요.

create_agent로 만든 에이전트와 매끄럽게 동작하고, 로컬에서 돌리든 LangSmith에 배포된 환경에서 돌리든 최소한의 설정만으로 대화형 경험을 제공해요.

출처: 공식문서

빠른 시작 (Quick start)

가장 빠른 방법은 호스팅 버전을 쓰는 거예요.

  1. Agent Chat UI 방문 — https://agentchat.vercel.app
  2. 에이전트 연결 — 배포 URL이나 로컬 서버 주소를 입력
  3. 채팅 시작 — UI가 도구 호출과 인터럽트를 자동으로 탐지해서 렌더링

에이전트 채팅 UI에서 제너레이티브 UI(generative UI)를 쓸 수도 있어요. 자세한 내용은 LangGraph로 구현하는 제너레이티브 유저 인터페이스 문서를 참고하세요.

에이전트에 연결하기

Agent Chat UI는 로컬 에이전트 서버와 배포된 에이전트 모두에 연결할 수 있어요. UI를 시작한 뒤에는 에이전트에 연결되도록 설정해야 하는데, 세 가지를 입력해요.

  1. Graph ID — 그래프 이름 입력. langgraph.json 파일의 graphs 아래에서 찾을 수 있어요.
  2. 배포 URL — 에이전트 서버 엔드포인트. 로컬 개발이면 http://localhost:2024 같은 주소, 배포 환경이면 배포된 에이전트의 URL을 쓰면 돼요.
  3. LangSmith API 키 (선택) — LangSmith API 키를 추가할 수 있는데, 로컬 에이전트 서버를 쓰는 경우엔 필요 없어요.

설정이 끝나면 Agent Chat UI가 에이전트에서 인터럽트된 스레드를 자동으로 가져와 보여줘요. 도구 호출과 도구 결과 메시지 렌더링은 기본으로 지원되며, 어떤 메시지를 보여줄지 바꾸고 싶다면 저장소의 Hiding Messages in the Chat 문서를 확인하세요.

더 알아보기 (Learn more)