Agent 聊天用户界面
LangChain 提供了一个功能强大的预构建用户界面，可与使用 create_agent 创建的 Agent 无缝协作。无论您是在本地运行还是在部署环境中（例如 LangSmith），此 UI 都旨在通过最少的设置，为您的 Agent 提供丰富、交互式的体验。
Agent Chat UI
Agent Chat UI 是一个 Next.js 应用程序，它提供了一个对话界面，用于与任何 LangChain Agent 进行交互。它支持实时聊天、工具可视化以及时间旅行调试和状态分叉等高级功能。
Agent Chat UI 是开源的，可以根据您的应用需求进行调整。
功能
工具可视化 (Tool visualization)
Studio 会在一个直观的界面中自动渲染工具调用和结果。
时间旅行调试 (Time-travel debugging)
在对话历史中导航，并从任何时间点分叉（fork）出新的对话。
状态检查 (State inspection)
在执行过程中的任何时间点查看和修改 Agent 状态。
人在回路中 (Human-in-the-loop)
内置支持审核和响应 Agent 请求。
💡 您可以在 Agent Chat UI 中使用生成式 UI。有关更多信息，请参阅 使用 LangGraph 实现生成式用户界面。
快速开始
最快的入门方法是使用托管版本：
- 访问 Agent Chat UI
- 通过输入您的部署 URL 或本地服务器地址来连接您的 Agent
- 开始聊天 - UI 将自动检测并渲染工具调用和中断
本地开发
为了进行定制或本地开发，您可以在本地运行 Agent Chat UI：
| 使用 npx | 克隆仓库 |
|---|---|
| ` bash | `bash |
| # 创建一个新的 Agent Chat UI 项目 | # 克隆仓库 |
| npx create-agent-chat-app --project-name my-chat-ui | git clone https://github.com/langchain-ai/agent-chat-ui.git |
| cd my-chat-ui | cd agent-chat-ui |
| # 安装依赖项并启动 | # 安装依赖项并启动 |
| pnpm install | pnpm install |
| pnpm dev | pnpm dev |
| ` | ` |
连接到您的 Agent
Agent Chat UI 可以连接到本地 Agent 和已部署的 Agent。
启动 Agent Chat UI 后，您需要配置它以连接到您的 Agent：
- Graph ID：输入您的图名称（在您的
langgraph.json文件中的graphs下查找） - 部署 URL：您的 LangGraph 服务器的端点（例如，本地开发的
http://localhost:2024，或您已部署 Agent 的 URL） - LangSmith API 密钥（可选）：添加您的 LangSmith API 密钥（如果使用本地 LangGraph 服务器则不需要）
配置完成后，Agent Chat UI 将自动获取并显示来自您的 Agent 的任何中断线程。
💡 Agent Chat UI 开箱即支持渲染工具调用和工具结果消息。要自定义显示哪些消息，请参阅 Hiding Messages in the Chat。