尚拙
Search K

Appearance

Agent Chat UI ​

Agent Chat UI 是一个 Next.js 应用程序，提供用于与任何 LangChain 智能体交互的对话界面。它支持实时聊天、工具可视化以及时间旅行调试和状态派生分支等高级功能。Agent Chat UI 与使用 create_agent 创建的智能体无缝协作，并通过最少的设置（无论你是在本地运行还是在部署的上下文中，例如 LangSmith）为你的智能体提供交互式体验。

Agent Chat UI 是开源的，可以根据你的应用程序需求进行调整。

Agent Chat UI 演示视频

TIP

你可以在 Agent Chat UI 中使用生成式 UI。有关更多信息，请参阅使用 LangGraph 实现生成式用户界面。

快速开始 ​

最快的入门方式是使用托管版本：

  1. 访问 Agent Chat UI
  2. 连接你的智能体：输入你的部署 URL 或本地服务器地址
  3. 开始聊天：UI 将自动检测并呈现工具调用和中断

本地开发 ​

对于自定义或本地开发，你可以在本地运行 Agent Chat UI：

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 开箱即用支持呈现工具调用和工具结果消息。要自定义显示哪些消息，请参阅在聊天中隐藏消息。