에이전트 채팅 UI

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

Agent Chat UI는 모든 LangChain 에이전트와 대화할 수 있는 Next.js 애플리케이션이에요. 실시간 채팅·도구 시각화·시간 여행 디버깅(time-travel debugging)·상태 포킹(state forking) 같은 고급 기능을 지원하죠. Agent Chat UI는 create_agent로 만든 에이전트와 자연스럽게 동작하며, 로컬에서 실행하든 LangSmith 같은 배포 환경에서 실행하든 최소한의 설정으로 에이전트에 인터랙티브한 경험을 제공해요.

Agent Chat UI는 오픈소스라 여러분의 애플리케이션 요구에 맞게 수정할 수 있어요.

출처: 공식문서

💡 팁 — Agent Chat UI에서 제너레이티브 UI(generative UI)를 사용할 수 있어요. 자세한 내용은 LangGraph로 제너레이티브 사용자 인터페이스 구현을 참고하세요.

빠른 시작

가장 빠른 시작 방법은 호스팅 버전을 사용하는 거예요.

Agent Chat UI 방문
배포 URL이나 로컬 서버 주소를 입력해 에이전트 연결
채팅 시작 — UI가 도구 호출과 인터럽트를 자동으로 감지하고 렌더링해요

로컬 개발

커스터마이징이나 로컬 개발을 위해 Agent Chat UI를 로컬에서 실행할 수 있어요.

npx 사용

# Create a new Agent Chat UI project
npx create-agent-chat-app --project-name my-chat-ui
cd my-chat-ui

# Install dependencies and start
pnpm install
pnpm dev

저장소 클론

# Clone the repository
git clone https://github.com/langchain-ai/agent-chat-ui.git
cd agent-chat-ui

# Install dependencies and start
pnpm install
pnpm dev

에이전트에 연결

Agent Chat UI는 로컬 및 배포된 에이전트 모두에 연결할 수 있어요.

Agent Chat UI를 시작한 뒤 에이전트에 연결하도록 설정해야 해요.

Graph ID: 그래프 이름을 입력하세요 (langgraph.json 파일의 graphs 아래에서 찾을 수 있어요).
Deployment URL: 에이전트 서버의 엔드포인트 (로컬 개발은 http://localhost:2024, 배포된 에이전트는 해당 URL).
LangSmith API key (선택): LangSmith API 키를 추가하세요 (로컬 에이전트 서버를 사용한다면 필요 없어요).

설정이 끝나면 Agent Chat UI가 에이전트에서 인터럽트된 스레드를 자동으로 가져와 표시해요.

💡 팁 — Agent Chat UI는 도구 호출과 도구 결과 메시지 렌더링을 즉시 지원해요. 어떤 메시지를 표시할지 커스터마이징하려면 채팅에서 메시지 숨기기를 참고하세요.

에이전트 채팅 UI