ChatDev Web UI 快速入门工作流选择、启动执行、人工审阅与可视化编排实战【免费下载链接】ChatDevChatDev 2.0: Dev All through LLM-powered Multi-Agent Collaboration项目地址: https://gitcode.com/Dennis_Huang/ChatDevDevAllChatDev 2.0的前端 Web UI 是操作 LLM 多智能体协作工作流的主要入口从浏览yaml_instance/目录下的 YAML 工作流、上传附件并输入任务提示到实时观察节点执行状态、在human节点处进行人工审阅再到用可视化画布拖拽编排并导出工作流全部可在浏览器中完成。读完本指南你将掌握 DevAll Web UI 的完整操作链路包括 Launch 执行界面、工作流工作台、快捷键与常见故障排查方法。1. 系统入口与启动方式Web UI 是前后端分离架构前端使用 Vue 3 Vite工程位于 frontend/后端为 FastAPI 服务入口 server_main.py。启动顺序如下# 终端一启动后端服务 uv run python server_main.py # 终端二启动前端开发服务 cd frontend npm run dev前后端都启动后在浏览器访问http://localhost:5173进入 Web UI。需要说明的是开发模式下前端通过 Vite 代理转发请求查看 frontend/vite.config.js 可知/api与/ws路径会被代理到http://localhost:6400即后端默认地址可通过环境变量VITE_API_BASE_URL覆盖因此前端页面中的 API 调用与 WebSocket 连接均使用相对路径无需额外配置跨域。2. 主要页面与路由总览Web UI 的路由定义集中在 frontend/src/router/index.js主要页面如下路由页面用途/首页 (Home)系统入口与快速导航/launch启动页 (Launch View)工作流执行主界面最常用的页面/batch-run批量运行 (Batch Run)批量执行工作流调用/api/workflows/batch/workflows/:name?工作流工作台 (Workflow Workbench)可视化编辑、查看与导出 YAML/tutorial教程页 (Tutorial)内置使用教程帮助新用户了解系统功能2.1 首页 (Home)系统首页提供各功能页面的快速导航入口适合作为进入工作流列表、启动页或教程页的起点。2.2 工作流列表 (Workflow List)用于查看和管理所有可用的工作流 YAML 文件其数据来源于后端对yaml_instance/目录的扫描浏览工作流列出yaml_instance/目录下的全部 YAML 文件含ChatDev_v1.yaml、react.yaml、deep_research_v1.yaml、demo_human.yaml等示例。预览 YAML 配置点击工作流可查看其 YAML 内容后端接口为/api/workflows/{filename}/get前端封装见 frontend/src/utils/apiFunctions.js 中的fetchWorkflowYAML。选择工作流进入执行或编辑。工作流列表加载时还会并行请求/api/workflows/{filename}/desc拉取每个工作流的描述信息对应fetchWorkflowsWithDesc。2.3 启动页 (Launch View) —— 工作流执行主界面启动页是整个 Web UI 中最核心、最高频使用的页面对应源码 frontend/src/pages/LaunchView.vue。页面由左侧对话/图谱面板、底部输入区与右侧控制面板组成。操作流程选择工作流在右侧工作流选择框中点击输入框从下拉列表中挑选要执行的 YAML 文件下拉框支持按文件名关键字过滤选中后 URL 会带上?workflowxxx.yaml参数。上传附件可选点击上传按钮选择文件如 CSV 数据、图片等。除此之外页面还支持三种快捷上传方式直接将文件拖拽到输入区、从剪贴板粘贴文件handlePaste、以及点击上传按钮选择文件已上传的附件会以徽标计数展示可单独移除。输入任务提示 (Task Prompt)在输入框中填写指导工作流执行的提示词。点击 Launch启动工作流执行。执行期间节点视图右侧可切换Chat对话与Graph图谱两种视图。Graph 视图基于 Vue Flow 渲染见 frontend/src/pages/LaunchView.vue 中的generateNodesAndEdges通过 WebSocket 收到的NODE_START/NODE_END日志事件驱动节点状态变化pending → running → success/failed当前活跃节点会高亮节点之间流转时还会触发角色精灵Sprite沿边的行走动画animateSpriteAlongEdge。若后端保存过该工作流的图谱布局/api/vuegraphs/{key}执行时会优先加载以还原手动调整过的布局。输出面板左侧对话面板实时展示执行日志、节点输出上下文和生成的工件三者共用同一面板。模型调用与工具调用会以加载条目形式展示对应MODEL_CALL、TOOL_CALL事件并附带耗时计时生成的图片工件在面板内直接渲染缩略图代码/数据类工件则以文件卡片形式呈现均提供 Download 按钮downloadArtifact走后端/api/sessions/{sessionId}/artifacts/{attachmentId}。人工输入Human-in-the-loop当执行到human节点时前端收到human_input_required消息界面状态变为Waiting for input...并在对话区展示节点要求审阅的任务描述与上下文。填写文本内容或上传附件后提交前端通过 WebSocket 发送human_input消息见sendHumanInput后端恢复执行。服务端对应逻辑位于 runtime/node/executor/human_executor.py其通过HumanPromptService.request将任务描述与输入上下文转发给人工审阅者。按钮三态逻辑右侧主按钮会根据状态自动切换——初始为Launch发起执行调用/api/workflow/execute携带yaml_file、task_prompt、session_id、attachments运行中且等待人工输入时为Send提交审阅意见执行完成或被取消后变为Relaunch一键重新运行同一工作流。运行过程中可随时点击Cancel前端通过 WebSocket 发送{ type: cancel }取消执行。2.4 工作流工作台 (Workflow Workbench) —— 可视化编辑器工作台是可视化工作流编辑器对应 frontend/src/pages/WorkflowWorkbench.vue 与 frontend/src/pages/WorkflowView.vue左侧为工作流列表侧栏右侧为基于 Vue Flow 的画布。功能包括拖拽式节点编辑在画布上选中节点后可拖动调整位置右键节点可复制/删除双击画布空白处可新建节点同样支持右键边进行删除。节点配置面板通过FormGenerator动态表单渲染节点配置表单字段由后端/api/config/schema根据配置路径动态生成支持递归编辑复杂嵌套配置。边连接与条件设置提供创建边向导create_edge模态框可指定边的来源节点、目标节点以及条件表达式如关键词匹配、函数判断等相关能力见 runtime/edge/conditions/。导出为 YAML画布内容可序列化回 YAML 字符串并支持预览、保存/api/workflows/upload/content与重命名/复制工作流/api/workflows/{filename}/rename、/api/workflows/{filename}/copy图谱布局可单独保存到/api/vuegraphs/upload/content供 Launch 页还原。2.5 教程页 (Tutorial)内置教程页面frontend/src/pages/TutorialView.vue内容来自 frontend/public/tutorial-zh.md帮助新用户系统了解 Web UI 的功能与使用方式。3. 常用操作3.1 运行工作流进入Launch View首页导航或访问/launch。从右侧下拉列表选择工作流 YAML 文件。输入 Task Prompt任务提示必要时上传附件。点击Launch按钮。观察左侧对话面板的日志与右侧节点视图的状态变化等待执行完成状态显示Completed。3.2 下载运行结果执行完成后状态为Completed或Cancelled点击右侧面板的Download Logs按钮fetchLogsZip。浏览器会下载完整的 Session 压缩包文件名为execution_logs_{sessionId}.zip。该压缩包由后端 server/routes/sessions.py 的GET /api/sessions/{session_id}/download接口实时打包生成内容为WARE_HOUSE_DIR下对应session_{session_id}目录的完整归档包含context.json运行上下文、附件、日志等全部运行产物。此外对话面板中每个工件条目也提供独立的 Download 按钮可只下载单个文件。3.3 人工审阅节点交互当工作流包含human节点时执行暂停界面提示需要人工输入状态变为Waiting for input...。阅读对话面板中节点展示的任务描述与上下文内容。在输入框中填写审阅意见或操作指令可附带上传附件。点击提交主按钮变为 Send继续执行。提示执行中断后刷新页面WebSocket 会以?session_idxxx参数重连并通过session_resumed消息恢复会话状态包括选中的工作流、运行状态与已回放的对话消息因此可以放心地在运行过程中刷新页面而不会丢失现场。4. 快捷键快捷键功能Ctrl/Cmd Enter提交输入提交任务提示或人工审阅意见Esc关闭弹窗/面板如图片预览大图Ctrl/Cmd Enter的实现在 frontend/src/pages/LaunchView.vue 的handleEnterKey中其触发条件与 Launch 主按钮的可用性判断保持一致Esc除关闭弹窗外还用于关闭图片工件的大图预览handleKeydown。5. 故障排查问题解决方案页面无法加载确认前端服务npm run dev正常运行并检查http://localhost:5173端口无法连接后端确认后端服务uv run python server_main.py正常运行默认 6400 端口检查 Vite 代理配置frontend/vite.config.js工作流列表为空检查yaml_instance/目录下是否存在 YAML 文件并确认后端已成功启动执行无响应打开浏览器开发者工具检查 Network/api/workflow/execute请求与 Console 日志WebSocket 断开刷新页面重新建立连接执行中的会话可通过 URL 中的session参数自动恢复6. 相关文档工作流编排YAML 编写指南 - 了解yaml_instance/下工作流文件的语法与节点、边的配置方式Web UI 前端逻辑说明 - 深入理解前端与后端的 WebSocket 消息协议执行逻辑 - 了解工作流从 YAML 加载到节点执行的整体链路可运行的示例工作流可直接参考 yaml_instance/ 目录下的demo_*.yaml系列文件如demo_human.yaml演示人工审阅、demo_dynamic.yaml演示动态流程【免费下载链接】ChatDevChatDev 2.0: Dev All through LLM-powered Multi-Agent Collaboration项目地址: https://gitcode.com/Dennis_Huang/ChatDev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考