LangChain 提供强大的预构建用户界面，可与使用 create_agent 创建的智能体无缝协作。此 UI 旨在以最少的设置为您的智能体提供丰富的交互体验，无论您是在本地运行还是在部署环境中运行（例如 LangSmith）。

​
Agent Chat UI

Agent Chat UI 是一个 Next.js 应用程序，为与任何 LangChain 智能体交互提供对话界面。它支持实时聊天、工具可视化以及时间旅行调试和状态分叉等高级功能。 Agent Chat UI 是开源的，可以适应您的应用程序需求。

​
功能

Studio 自动在直观的界面中渲染工具调用和结果。
Studio 中的工具可视化
浏览对话历史记录并从任何点分叉
Studio 中的时间旅行调试
在执行期间的任何时刻查看和修改智能体状态
Studio 中的状态检查
内置支持审查和响应智能体请求
Studio 中的人机回路
您可以在 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

​
连接到您的智能体

智能体聊天 UI 可以连接到本地和已部署的智能体。 启动智能体聊天 UI 后，您需要配置它以连接到您的智能体：
  1. 图 ID：输入您的图名称（在 langgraph.json 文件的 graphs 下查找）
  2. 部署 URL：您的智能体服务器的端点（例如，本地开发使用 http://localhost:2024，或您已部署智能体的 URL）
  3. LangSmith API 密钥（可选）：添加您的 LangSmith API 密钥（如果您使用本地智能体服务器则不需要）
配置完成后，智能体聊天 UI 将自动获取并显示智能体的任何中断线程。
智能体聊天 UI 开箱即用地支持渲染工具调用和工具结果消息。要自定义显示的消息，请参阅在聊天中隐藏消息。
Edit the source of this page on GitHub.
Connect these docs programmatically to Claude, VSCode, and more via MCP for real-time answers.