Skip to main content
LangChain은 create_agent를 사용하여 생성된 에이전트와 원활하게 작동하는 강력한 사전 구축 사용자 인터페이스를 제공합니다. 이 UI는 로컬에서 실행하든 LangSmith와 같은 배포 환경에서 실행하든, 최소한의 설정으로 에이전트를 위한 풍부하고 인터랙티브한 경험을 제공하도록 설계되었습니다.

​
Agent Chat UI

Agent Chat UI는 모든 LangChain 에이전트와 상호작용할 수 있는 대화형 인터페이스를 제공하는 Next.js 애플리케이션입니다. 실시간 채팅, 도구 시각화, 타임 트래블 디버깅 및 상태 포크와 같은 고급 기능을 지원합니다. Agent Chat UI는 오픈 소스이며 애플리케이션 요구 사항에 맞게 조정할 수 있습니다.

​
기능

Studio는 도구 호출과 결과를 직관적인 인터페이스로 자동 렌더링합니다.
Tool visualization in Studio
대화 기록을 탐색하고 임의의 시점에서 포크할 수 있습니다
Time-travel debugging in Studio
실행 중 임의의 시점에서 에이전트 상태를 확인하고 수정할 수 있습니다
State inspection in Studio
에이전트 요청을 검토하고 응답하기 위한 기본 제공 지원
Human-in-the-Loop in Studio
Agent Chat UI에서 생성형 UI를 사용할 수 있습니다. 자세한 내용은 LangGraph로 생성형 사용자 인터페이스 구현하기를 참조하세요.

​
빠른 시작

가장 빠르게 시작하는 방법은 호스팅된 버전을 사용하는 것입니다:
  1. Agent Chat UI를 방문하세요
  2. 배포 URL 또는 로컬 서버 주소를 입력하여 에이전트를 연결하세요
  3. 채팅을 시작하세요 - UI가 도구 호출과 인터럽트를 자동으로 감지하고 렌더링합니다

​
로컬 개발

사용자 정의 또는 로컬 개발을 위해 Agent Chat UI를 로컬에서 실행할 수 있습니다: 
# 새 Agent Chat UI 프로젝트 생성
npx create-agent-chat-app --project-name my-chat-ui
cd my-chat-ui

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

​
에이전트에 연결하기

Agent Chat UI는 로컬 및 배포된 에이전트 모두에 연결할 수 있습니다. Agent Chat UI를 시작한 후, 에이전트에 연결하기 위해 다음과 같이 구성해야 합니다:
  1. Graph ID: 그래프 이름을 입력합니다 (langgraph.json 파일의 graphs 항목에서 확인할 수 있습니다)
  2. Deployment URL: LangGraph 서버의 엔드포인트입니다 (로컬 개발 환경의 경우 http://localhost:2024, 배포된 에이전트의 경우 해당 URL을 입력합니다)
  3. LangSmith API key (선택사항): LangSmith API 키를 추가합니다 (로컬 LangGraph 서버를 사용하는 경우 필수가 아닙니다)
구성이 완료되면, Agent Chat UI는 에이전트에서 중단된 스레드를 자동으로 가져와 표시합니다.
Agent Chat UI는 도구 호출 및 도구 결과 메시지를 렌더링하는 기본 지원을 제공합니다. 표시되는 메시지를 커스터마이징하려면 채팅에서 메시지 숨기기를 참조하세요.
Edit the source of this page on GitHub.
Connect these docs programmatically to Claude, VSCode, and more via MCP for real-time answers.
⌘I