Agent Chat UI 是一个 Next.js 应用程序,为与任何 LangChain 智能体交互提供对话界面。它支持实时聊天、工具可视化以及时光旅行调试和状态分叉等高级功能。Agent Chat UI 可与使用 create_agent 创建的智能体无缝协作,无论您是在本地运行还是在部署环境(例如 LangSmith )中运行,都能以最少的设置为您的智能体提供交互式体验。 Agent Chat UI 是开源的,可以根据您的应用程序需求进行调整。
您可以在 Agent Chat UI 中使用生成式UI。有关更多信息,请参阅 使用 LangGraph 实现生成式用户界面 。

​
快速开始

最快的入门方式是使用托管版本:
  1. 访问 Agent Chat UI
  2. 连接您的智能体 ,输入您的部署 URL 或本地服务器地址
  3. 开始聊天 - UI 将自动检测并渲染工具调用和中断

​
本地开发

对于自定义或本地开发,您可以在本地运行 Agent Chat UI: 
# 创建新的 Agent Chat UI 项目
npx create-agent-chat-app --project-name my-chat-ui
cd my-chat-ui

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

​
连接到您的智能体

Agent Chat UI 可以连接到 本地 和 已部署的智能体 。 启动 Agent Chat UI 后,您需要配置它以连接到您的智能体:
  1. Graph ID :输入您的图名称(在 langgraph.json 文件的 graphs 下找到)
  2. 部署 URL :您的 Agent 服务器端点(例如,本地开发的 http://localhost:2024 ,或您已部署智能体的 URL)
  3. LangSmith API 密钥(可选) :添加您的 LangSmith API 密钥(如果您使用本地 Agent 服务器则不需要)
配置完成后,Agent Chat UI 将自动获取并显示来自您智能体的任何中断线程。
Agent Chat UI 内置支持渲染工具调用和工具结果消息。要自定义显示哪些消息,请参阅 在聊天中隐藏消息 。
在 GitHub 上编辑此页面 或 提交问题 。
连接这些文档 到 Claude、VSCode 等,通过 MCP 获取实时答案。