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. 图 ID：输入您的图名称（在 langgraph.json 文件的 graphs 下查找）
  2. 部署 URL：您的 LangGraph 服务器端点（例如，本地开发使用 http://localhost:2024，或已部署智能体的 URL）
  3. LangSmith API 密钥（可选）：添加您的 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.