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