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

​
快速开始

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

​
本地开发

如需自定义或本地开发，您可以在本地运行 Agent Chat UI： 
# 创建一个新的 Agent Chat UI 项目
npx create-agent-chat-app --project-name my-chat-ui
cd my-chat-ui

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

​
连接到您的代理

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