LangChain 中文文档

外观

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 works seamlessly with agents created using create_agent and provides interactive experiences for your agents with minimal setup, whether you're running locally or in a deployed context (such as LangSmith).

Agent Chat UI is open source and can be adapted to your application needs.

TIP

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:

bash
# 创建一个新的 Agent Chat UI 项目
npx create-agent-chat-app --project-name my-chat-ui
cd my-chat-ui

# 安装依赖并启动
pnpm install
pnpm dev
bash
# 克隆仓库
git clone https://github.com/langchain-ai/agent-chat-ui.git
cd agent-chat-ui

# 安装依赖并启动
pnpm install
pnpm dev

连接到你的智能体 ​

Agent Chat UI 既可以连接到本地智能体，也可以连接到已部署的智能体。

启动 Agent Chat UI 后，你需要配置它以连接到你的智能体：

  1. Graph ID：输入你的图名称（可在你的 langgraph.json 文件的 graphs 下找到）
  2. Deployment URL：你的 Agent Server 的端点（例如，本地开发使用 http://localhost:2024，或使用已部署智能体的 URL）
  3. LangSmith API key（可选）：添加你的 LangSmith API 密钥（如果使用本地 Agent Server，则不需要）

配置完成后，Agent Chat UI 将自动获取并显示来自你智能体的任何被中断的线程。

TIP

Agent Chat UI 开箱即用地支持渲染工具调用和工具结果消息。要自定义显示哪些消息，请参阅在聊天中隐藏消息。