메인 콘텐츠로 건너뛰기
Alpha Notice: These docs cover the v1-alpha release. Content is incomplete and subject to change.For the latest stable version, see the current LangGraph Python or LangGraph JavaScript docs.
LangChain provides a powerful prebuilt user interface that work seamlessly with agents created using create_agent(). This UI is designed to provide rich, interactive experiences for your agents with minimal setup, whether you’re running locally or in a deployed context (such as LangGraph Platform).

​
Agent Chat UI

Agent Chat UI is a Next.js application that provides a conversational interface for interacting with any LangChain agent. It supports real-time chat, tool visualization, and advanced features like time-travel debugging and state forking. Agent Chat UI is open source and can be adapted to your application needs.

​
Features

Studio automatically renders tool calls and results in an intuitive interface.
Tool visualization in Studio
Navigate through conversation history and fork from any point
Time-travel debugging in Studio
View and modify agent state at any point during execution
State inspection in Studio
Built-in support for reviewing and responding to agent requests
Human-in-the-Loop in Studio
You can use generative UI in the Agent Chat UI. For more information, see Implement generative user interfaces with LangGraph.

​
Quick start

The fastest way to get started is using the hosted version:
  1. Visit Agent Chat UI
  2. Connect your agent by entering your deployment URL or local server address
  3. Start chatting - the UI will automatically detect and render tool calls and interrupts

​
Local development

For customization or local development, you can run Agent Chat UI locally: 
# Create a new Agent Chat UI project
npx create-agent-chat-app my-chat-ui
cd my-chat-ui

# Install dependencies and start
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
⌘I