Skip to main content
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 LangSmith).

​
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 --project-name 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.
Connect these docs programmatically to Claude, VSCode, and more via MCP for real-time answers.
⌘I