에이전트 채팅 UI

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

에이전트를 만들었으니 이제 그 에이전트와 대화할 인터페이스가 필요할 거예요. Agent Chat UI는 어떤 LangChain 에이전트와든 대화형으로 상호작용할 수 있는 Next.js 애플리케이션입니다. 실시간 채팅, 도구 시각화, 그리고 타임-트래블 디버깅(time-travel debugging)과 상태 포크(state forking) 같은 고급 기능까지 지원해요. Agent Chat UI는 create_agent로 만든 에이전트와 자연스럽게 연동되며, 로컬에서든 배포된 환경(예: LangSmith)에서든 최소한의 설정으로 에이전트에 인터랙티브한 경험을 더해줍니다. 오픈소스라서 여러분의 애플리케이션 필요에 맞게 수정할 수도 있어요.

출처: LangChain 공식 문서 — Agent Chat UI

Agent Chat UI에서 생성형 UI(generative UI)를 사용할 수도 있어요. 자세한 내용은 LangGraph로 생성형 사용자 인터페이스 구현하기 문서를 참고하세요.

빠른 시작 (Quick start)

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

  1. Agent Chat UI 방문하기
  2. 에이전트 연결하기 – 배포 URL이나 로컬 서버 주소를 입력합니다.
  3. 채팅 시작하기 – UI가 도구 호출과 인터럽트(interrupt)를 자동으로 감지해서 렌더링해요.

로컬 개발 (Local development)

커스터마이즈하거나 로컬 개발을 하고 싶다면 Agent Chat UI를 로컬에서 실행할 수 있어요.

# 새 Agent Chat UI 프로젝트 만들기
npx create-agent-chat-app --project-name my-chat-ui
cd my-chat-ui

# 의존성 설치 후 시작
pnpm install
pnpm dev

# 저장소 클론하기
git clone https://github.com/langchain-ai/agent-chat-ui.git
cd agent-chat-ui

# 의존성 설치 후 시작
pnpm install
pnpm dev

에이전트에 연결하기 (Connect to your agent)

Agent Chat UI는 로컬 에이전트와 배포된 에이전트 둘 다에 연결할 수 있어요.

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

  1. Graph ID: 그래프 이름을 입력합니다. (langgraph.json 파일의 graphs 아래에서 찾을 수 있어요)
  2. Deployment URL: Agent server의 엔드포인트를 입력합니다. (예: 로컬 개발이면 http://localhost:2024, 배포된 에이전트라면 해당 URL)
  3. LangSmith API key (선택): LangSmith API 키를 추가합니다. (로컬 Agent server를 쓰면 필수는 아니에요)

설정이 끝나면 Agent Chat UI는 에이전트의 인터럽트된 스레드(thread)를 자동으로 가져와서 보여줍니다.

Agent Chat UI는 도구 호출과 도구 결과 메시지를 렌더링하는 기능을 기본으로 내장하고 있어요. 어떤 메시지를 보여줄지 커스터마이즈하려면 채팅에서 메시지 숨기기를 참고하세요.

더 알아보기 (Learn more)