代理聊天界面

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

智能体聊天 UI 是一个 Next.js 应用程序，为与任何 LangChain 智能体交互提供对话式界面。它支持实时聊天、工具可视化以及时间旅行调试和状态分支等高级功能。智能体聊天 UI 与使用@[create_agent] 创建的智能体无缝兼容，无论本地运行还是部署在 LangSmith 等环境中，都能为智能体提供交互式体验，且配置简单。

智能体聊天 UI 是开源的，可根据应用需求进行定制。

您可以在智能体聊天 UI 中使用生成式 UI。更多详情请参阅 使用 LangGraph 实现生成式用户界面。

快速开始

最快捷的启动方式是使用托管版本：

1. 访问 智能体聊天 UI
2. 连接您的智能体：输入部署 URL 或本地服务器地址
3. 开始聊天 - UI 会自动检测并渲染工具调用和中断

本地开发

如需定制或本地开发，可本地运行智能体聊天 UI：

Use npx

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

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

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

---

官方原文：src/oss/langgraph/ui.mdx · 非官方翻译，译文由 AI 生成，以英文原文为准。