에이전트 채팅 UI
에이전트 채팅 UI (Agent Chat UI)
에이전트를 대화형 인터페이스로 만나보고 싶다면 Agent Chat UI를 써보세요. 이 Next.js 애플리케이션은 아무 LangChain 에이전트와도 대화할 수 있는 인터페이스를 제공해요. 실시간 채팅, 도구 시각화, 그리고 타임트래블 디버깅(time-travel debugging)이나 상태 포크(state forking) 같은 고급 기능까지 지원해요. Agent Chat UI는 create_agent로 만든 에이전트와 자연스럽게 동작하며, 로컬에서 실행 중이든 배포된 환경(예: LangSmith)이든 최소한의 설정으로 인터랙티브한 경험을 제공해요.
Agent Chat UI는 오픈소스라서 여러분의 애플리케이션 요구에 맞게 응용할 수 있어요.
Agent Chat UI에서 생성형 UI(generative UI)를 사용할 수 있어요. 자세한 내용은 LangGraph로 생성형 사용자 인터페이스 구현하기를 참고해요.
출처: 문서
본문
빠른 시작 (Quick start)
가장 빠른 시작 방법은 호스팅 버전을 쓰는 거예요.
- Agent Chat UI 방문
- 에이전트 연결 — 배포 URL이나 로컬 서버 주소를 입력해요.
- 채팅 시작 — UI가 도구 호출과 인터럽트를 자동으로 감지해 렌더링해요.
로컬 개발 (Local development)
커스터마이징이나 로컬 개발을 원한다면 Agent Chat UI를 로컬에서 실행할 수 있어요.
# 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
에이전트에 연결하기 (Connect to your agent)
Agent Chat UI는 로컬과 배포된 에이전트 양쪽 모두에 연결할 수 있어요.
Agent Chat UI를 시작한 뒤 에이전트에 연결하도록 설정해야 해요.
- Graph ID: 그래프 이름을 입력해요. (
langgraph.json파일의graphs에서 찾을 수 있어요) - Deployment URL: Agent 서버의 엔드포인트예요. (로컬 개발이면
http://localhost:2024, 배포된 에이전트면 그 URL) - LangSmith API key (선택): LangSmith API 키를 추가해요. (로컬 Agent 서버를 쓰는 경우엔 필요 없어요)
설정이 끝나면 Agent Chat UI가 에이전트에서 인터럽트된 스레드를 자동으로 가져와 보여줘요.
Agent Chat UI는 도구 호출과 도구 결과 메시지를 기본적으로 렌더링해 줘요. 표시할 메시지를 커스터마이즈하려면 Hiding Messages in the Chat을 참고해요.
더 알아보기 (Learn more)
- Agent Chat UI 저장소: 소스 코드와 커스터마이징 옵션을 확인해요.
- LangGraph로 생성형 사용자 인터페이스 구현하기: 생성형 UI를 쓰는 방법을 다뤄요.