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

​
Agent Chat UI

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

​
Features

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

​
Quick start

시작하는 가장 빠른 방법은 호스팅된 버전을 사용하는 것입니다:
  1. Agent Chat UI 방문
  2. 배포 URL 또는 로컬 서버 주소를 입력하여 agent 연결
  3. 채팅 시작 - UI가 자동으로 tool 호출 및 interrupt를 감지하고 렌더링합니다

​
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

​
agent에 연결하기

Agent Chat UI는 로컬 및 배포된 agent 모두에 연결할 수 있습니다. Agent Chat UI를 시작한 후, agent에 연결하도록 구성해야 합니다:
  1. Graph ID: graph 이름을 입력하세요 (langgraph.json 파일의 graphs 아래에서 찾을 수 있습니다)
  2. Deployment URL: LangGraph server의 endpoint (예: 로컬 개발의 경우 http://localhost:2024, 또는 배포된 agent의 URL)
  3. LangSmith API key (선택사항): LangSmith API key를 추가하세요 (로컬 LangGraph server를 사용하는 경우 필수가 아닙니다)
구성이 완료되면 Agent Chat UI는 agent에서 중단된 thread를 자동으로 가져와 표시합니다.
Agent Chat UI는 tool call 및 tool result message 렌더링을 기본적으로 지원합니다. 표시되는 message를 사용자 정의하려면 Hiding Messages in the Chat을 참조하세요.
Edit the source of this page on GitHub.
Connect these docs programmatically to Claude, VSCode, and more via MCP for real-time answers.
⌘I