跳到主要内容
LangChain 提供了一个功能强大的预构建用户界面，可与使用 create_agent 创建的代理无缝协作。无论您是在本地运行还是在部署环境中（例如 LangSmith），此 UI 都旨在通过最少的设置，为您的代理提供丰富、交互式的体验。

​
代理聊天界面

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

​
特性

Studio 会自动以直观的界面渲染工具调用和结果。
Tool visualization in Studio
浏览对话历史并从任何时间点分叉
Time-travel debugging in Studio
在执行期间的任何时间点查看和修改代理状态
State inspection in Studio
内置支持审查和响应代理请求
Human-in-the-Loop in Studio
您可以在 Agent Chat UI 中使用生成式 UI。有关更多信息，请参阅 使用 LangGraph 实现生成式用户界面。

​
快速开始

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

​
本地开发

为了进行定制或本地开发，您可以在本地运行 Agent Chat UI 
# 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：输入您的图名称（可在 langgraph.json 文件中的 graphs 下找到）
  2. 部署 URL：您的 LangGraph 服务器端点（例如，本地开发为 https://:2024，或您已部署代理的 URL）
  3. LangSmith API 密钥（可选）：添加您的 LangSmith API 密钥（如果您使用的是本地 LangGraph 服务器，则不需要）
配置完成后，Agent Chat UI 将自动从您的代理中获取并显示任何中断的线程。
Agent Chat UI 默认支持渲染工具调用和工具结果消息。要自定义显示哪些消息，请参阅 在聊天中隐藏消息。
在 GitHub 上编辑此页面源文件。
以编程方式连接这些文档到 Claude、VSCode 等，通过 MCP 获取实时答案。
© . This site is unofficial and not affiliated with LangChain, Inc.