[LangChain v1.0] Agent Chat UI

출처: https://docs.langchain.com/oss/python/langchain/ui

LangChain은 create_agent를 사용하여 생성된 에이전트와 원활하게 작동하는 강력한 사전 구축 사용자 인터페이스를 제공합니다. 이 UI는 로컬에서 실행하거나 배포된 환경(예: LangSmith)에서 최소한의 설정으로 에이전트를 위한 풍부하고 대화형 경험을 제공하도록 설계되었습니다.

Agent Chat UI

Agent Chat UI는 모든 LangChain 에이전트와 상호 작용하기 위한 대화형 인터페이스를 제공하는 Next.js 애플리케이션입니다. 실시간 채팅, 도구 시각화, 그리고 시간 여행 디버깅 및 상태 포크와 같은 고급 기능을 지원합니다.

Agent Chat UI는 오픈 소스이며 애플리케이션 요구 사항에 맞게 조정할 수 있습니다.

Features

Tool visualization

Studio는 도구 호출과 결과를 직관적인 인터페이스로 자동 렌더링합니다.

Time-travel debugging

대화 기록을 탐색하고 모든 지점에서 분기할 수 있습니다.

State inspection

실행 중 모든 시점에서 에이전트 상태를 보고 수정할 수 있습니다.

Human-in-the-loop

에이전트 요청을 검토하고 응답하기 위한 기본 제공 지원이 있습니다.

Agent Chat UI에서 generative UI를 사용할 수 있습니다. 자세한 내용은 Implement generative user interfaces with LangGraph를 참조하세요.

Quick start

가장 빠른 시작 방법은 호스팅된 버전을 사용하는 것입니다:

Agent Chat UI를 방문합니다
배포 URL 또는 로컬 서버 주소를 입력하여 에이전트를 연결합니다
채팅 시작 - UI가 도구 호출 및 중단을 자동으로 감지하고 렌더링합니다

Local development

사용자 정의 또는 로컬 개발을 위해 Agent Chat UI를 로컬에서 실행할 수 있습니다:

Use npx

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

# 종속성 설치 및 시작
pnpm install
pnpm dev

Clone repository

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를 시작한 후 에이전트에 연결하도록 구성해야 합니다:

Graph ID: 그래프 이름을 입력합니다 (langgraph.json 파일의 graphs 아래에서 찾을 수 있음)
Deployment URL: 에이전트 서버의 엔드포인트 (예: 로컬 개발의 경우 http://localhost:2024, 또는 배포된 에이전트의 URL)
LangSmith API key (선택 사항): LangSmith API 키를 추가합니다 (로컬 에이전트 서버를 사용하는 경우 필수 아님)

구성이 완료되면 Agent Chat UI는 에이전트에서 중단된 스레드를 자동으로 가져와 표시합니다.