尚拙
Search K

Appearance

Agent Chat UI ​

Agent Chat UI 是一个 Next.js 应用程序，为与任何 LangChain Agent 进行交互提供了对话界面。它支持实时聊天、工具可视化，以及时间旅行调试（time-travel debugging）和状态分支（state forking）等高级功能。Agent Chat UI 可以与使用 create_agent 创建的 Agent 无缝协作，只需最少的配置，无论是在本地运行还是在部署环境（例如 LangSmith）中，都能为您的 Agent 提供交互式体验。

Agent Chat UI 是开源的，可以根据您的应用程序需求进行定制。

Agent Chat UI

TIP

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

快速开始 ​

最快的上手方式是使用托管版本：

  1. 访问 Agent Chat UI
  2. 连接您的 Agent：输入您的部署 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 ​

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

启动 Agent Chat UI 后，您需要对其进行配置以连接到您的 Agent：

  1. Graph ID：输入您的 Graph 名称（可在 langgraph.json 文件的 graphs 下找到）
  2. Deployment URL：您的 Agent 服务器端点（例如本地开发时的 http://localhost:2024，或已部署 Agent 的 URL）
  3. LangSmith API key (optional)：添加您的 LangSmith API 密钥（如果使用的是本地 Agent 服务器则无需填写）

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

TIP

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