Alpha Notice: These docs cover the v1-alpha release. Content is incomplete and subject to change.For the latest stable version, see the v0 LangChain Python or LangChain 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

​
Connect to your agent

Agent Chat UI can connect to both local and deployed agents. After starting Agent Chat UI, you’ll need to configure it to connect to your agent:
  1. Graph ID: Enter your graph name (find this under graphs in your langgraph.json file)
  2. Deployment URL: Your LangGraph server’s endpoint (e.g., http://localhost:2024 for local development, or your deployed agent’s URL)
  3. LangSmith API key (optional): Add your LangSmith API key (not required if you’re using a local LangGraph server)
Once configured, Agent Chat UI will automatically fetch and display any interrupted threads from your agent.
Agent Chat UI has out-of-the-box support for rendering tool calls and tool result messages. To customize what messages are shown, see Hiding Messages in the Chat.