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

​
连接到您的智能体

智能体聊天UI可以连接到本地和已部署的智能体。 启动智能体聊天界面后，您需要对其进行配置以连接到您的智能体：
  1. 图ID：输入您的图名称（在您的 langgraph.json 文件中的 graphs 下查找）
  2. 部署URL：您的 LangGraph 服务器端点（例如，用于本地开发的 http://localhost:2024，或您部署的智能体的URL）
  3. LangSmith API密钥（可选）：添加您的LangSmith API密钥（如果您使用的是本地LangGraph服务器则不需要）
一旦配置完成，智能体聊天界面将自动检索并显示您智能体中任何中断的线程。
智能体聊天 UI 支持开箱即用的渲染工具调用和工具结果消息。要自定义显示哪些消息，请参阅隐藏聊天中的消息。
在GitHub上编辑此页面的源代码。
通过MCP将这些文档编程连接到Claude、VSCode等，以获取实时答案。