Deep Agents UI入门指南：从安装到第一个智能对话界面搭建

【免费下载链接】deep-agents-ui Custom UI for Deep Agents 项目地址: https://gitcode.com/gh_mirrors/de/deep-agents-ui

Deep Agents UI是一个专为Deep Agents打造的自定义界面，让用户能够轻松与智能代理进行交互。本指南将带你快速掌握从环境搭建到创建第一个智能对话界面的全过程，即使是新手也能轻松上手。

准备工作：环境要求与依赖

在开始前，请确保你的系统满足以下基本要求：

• Node.js（推荐v18+版本）
• Yarn包管理器
• Git版本控制工具

这些工具将帮助你顺利完成Deep Agents UI的安装和运行。

快速安装：3步完成部署

1. 克隆项目仓库

首先，使用Git命令将项目克隆到本地：

git clone https://gitcode.com/gh_mirrors/de/deep-agents-ui
cd deep-agents-ui

2. 安装依赖包

进入项目目录后，运行以下命令安装所需依赖：

yarn install

这个过程可能需要几分钟时间，取决于你的网络速度和系统性能。

3. 启动开发服务器

依赖安装完成后，启动开发模式：

yarn dev

成功启动后，你将看到类似以下的输出：

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from .env.local
wait  - compiling...
event - compiled client and server successfully in XXXX ms (XXX modules)

配置Deep Agent：连接你的智能代理

部署Deep Agent示例

要使用Deep Agents UI，你需要先部署一个Deep Agent。以deep_research示例为例：

# 进入quickstarts目录（假设你已克隆相关仓库）
cd deepagents-quickstarts/deep_research
# 启动LangGraph开发服务器
langgraph dev

启动后，终端会显示部署信息，包括：

• API地址（通常是http://127.0.0.1:2024）
• Studio UI链接
• API文档地址

连接到UI界面

打开浏览器访问http://localhost:3000，在设置界面输入：

• Deployment URL：从LangGraph部署输出中获取的API地址
• Assistant ID：在langgraph.json文件中定义的agent ID（如示例中的"research"）
• LangSmith API Key（可选）：你的LangSmith API密钥，格式为lsv2_pt_...

开始使用：创建你的第一个智能对话

基本界面介绍

Deep Agents UI的主要组件包括：

• ChatInterface.tsx：核心聊天界面，用于与智能代理交互
• ThreadList.tsx：对话历史记录列表
• TasksFilesSidebar.tsx：任务和文件管理侧边栏
• ConfigDialog.tsx：设置对话框

交互方式

1. 在聊天输入框中输入你的问题或任务指令
2. 智能代理将开始处理请求，你可以在界面上看到实时进度
3. 任务执行过程中，你可以通过ToolApprovalInterrupt.tsx组件批准或拒绝代理的工具调用请求
4. 完成后，结果将显示在聊天窗口中，相关文件可以通过FileViewDialog.tsx查看

高级功能：调试模式

Deep Agents UI提供了调试模式，让你可以逐步执行代理的每个步骤：

1. 在设置中启用"Debug Mode"
2. 代理将暂停在每个关键步骤，等待你的确认
3. 你可以检查每个步骤的输入输出，帮助调试和优化代理行为

自定义配置：环境变量设置

除了UI设置外，你还可以通过环境变量配置应用：

# 创建.env.local文件并添加以下内容
NEXT_PUBLIC_LANGSMITH_API_KEY="lsv2_xxxx"

注意：UI中设置的参数优先级高于环境变量

总结与下一步

恭喜！你已经成功搭建并开始使用Deep Agents UI。通过这个强大的界面，你可以轻松与各种Deep Agents进行交互，完成复杂任务。

接下来，你可以：

• 探索更多Deep Agents示例项目
• 自定义ChatMessage.tsx修改消息显示样式
• 通过MarkdownContent.tsx优化内容展示效果

深入了解项目源码，请查看src/app/目录下的组件和工具实现。

希望本指南能帮助你快速掌握Deep Agents UI的使用，开启智能代理交互的新篇章！

【免费下载链接】deep-agents-ui Custom UI for Deep Agents 项目地址: https://gitcode.com/gh_mirrors/de/deep-agents-ui