ChatDev DevAll Web UI 使用指南从工作流启动到人工审阅的完整实操【免费下载链接】ChatDevChatDev 2.0: Dev All through LLM-powered Multi-Agent Collaboration项目地址: https://gitcode.com/GitHub_Trending/ch/ChatDev本文是一份面向 ChatDev DevAll 项目 Web 前端的实战入门指南覆盖系统入口与前后端启动方式、五大页面的功能定位、工作流从选择到启动再到结果下载的完整操作链路以及快捷键与常见故障排查。读完本文你将能独立完成一次含附件上传、人工审阅节点交互的多 Agent 工作流执行并理解其背后的 WebSocket 实时通信与 REST API 调用机制。1. 系统入口如何启动并进入 Web UIDevAll 采用前后端分离架构Web UI 由 frontendVue 3 Vite提供后端由 server_main.pyFastAPI uvicorn提供。启动前后端服务后在浏览器访问http://localhost:5173即可进入 Web UI。前端启动frontend/package.json 中定义的dev脚本cd frontend npm install npm run devVite 开发服务器默认监听5173端口。开发模式下前端通过 frontend/vite.config.js 配置的代理转发请求/api与/ws均被代理到后端目标http://localhost:6400可通过环境变量VITE_API_BASE_URL覆盖其中/ws启用了 WebSocket 代理ws: true这正是浏览器与后端建立实时连接的关键配置。后端启动uv run python server_main.py后端由 server_main.py 中的uvicorn.run(hostargs.host, portargs.port, ...)启动默认端口与前端代理目标一致6400并支持--reload等常用参数。适用前提需要先安装依赖仓库根目录 requirements.txt / pyproject.toml前端依赖见 package-lock.json并确保.env中配置了可用的 LLM Provider 密钥如 OpenAI / Gemini具体 Provider 配置可参考 docs/user_guide/zh/workflow_authoring.md。2. 页面总览五大核心页面前端路由定义在 frontend/src/router/index.js 中共五个页面路由页面组件定位/HomeView.vue首页提供快速导航入口/tutorialTutorialView.vue内置教程页帮助新用户了解系统功能/launchLaunchView.vue启动页工作流执行的主界面最常用/batch-runBatchRunView.vue批量执行视图/workflows/:name?WorkflowWorkbench.vue可视化工作流编辑器工作台2.1 首页 (Home)系统首页聚合入口导航供快速跳转到启动页、教程页、批量执行等工作区。2.2 工作流列表 (Workflow List)用于查看和管理所有可用的工作流 YAML 文件其核心能力浏览工作流数据来自yaml_instance/目录即仓库根目录 yaml_instance 下的全部 YAML如 ChatDev_v1.yaml、react.yaml、demo_human.yaml 等通过/api/workflows接口获取文件名与描述见 frontend/src/utils/apiFunctions.js 中的fetchWorkflowsWithDesc描述来自每个 YAML 的description字段预览与搜索支持按文件名/描述关键字搜索过滤WorkflowList.vue 中的filteredFiles按localeCompare(..., zh)排序进入执行或编辑点击列表项跳转到/workflows/name工作台进行编辑也可在启动页中选择执行。2.3 启动页 (Launch View)工作流执行的主界面所有交互都在 LaunchView.vue 中实现组件代码约 3600 行是前端最核心的页面。详见下文第 3、4 节。2.4 工作流工作台 (Workflow Workbench)可视化工作流编辑器对应路由/workflows/:name?提供拖拽式节点编辑基于vue-flow/*系列组件见 frontend/package.json 的 dependencies节点配置面板基于后端/api/config/schema动态渲染表单由 FormGenerator.vue 与 DynamicFormField.vue 实现边连接与条件设置导出/保存为 YAML 文件通过postYaml/updateYaml调用/api/workflows/upload/content与/api/workflows/{name}/update。2.5 教程页 (Tutorial)内置教程帮助新用户了解系统功能内容与仓库 frontend/public/tutorial-zh.md 对应的中英文教程资源相关。2.6 批量执行页 (Batch Run)通过/api/workflows/batch提交批量任务可携带 CSV 等数据文件、指定yaml_file、max_parallel与log_level参数对应 apiFunctions.js 中的postBatchWorkflow。3. 核心操作一运行工作流Launch View 全流程3.1 选择工作流进入 Launch View 后在右侧面板的工作流选择区域通过自定义文件选择器挑选要执行的 YAML 文件。该选择器支持关键字过滤、键盘回车快速选中第一个匹配项LaunchView.vue 中filteredWorkflowFiles与handleFileInputEnter选中后前端通过/api/workflows/{name}/get拉取 YAML 内容并解析若 YAML 的graph.initial_instruction字段存在会以系统通知的形式显示在聊天面板顶部handleYAMLSelection为图中每个节点预取角色头像 spritespriteFetcher资源位于 frontend/public/sprites选择结果会同步写入 URL query?workflowfile.yaml刷新页面后依然保持。3.2 上传附件可选点击输入框下方的上传文件按钮即可选择文件如 CSV 数据、图片等。除按钮外Launch View 还支持两种更便捷的上传方式handlePaste/handleDragEnter/handleDrop直接粘贴在输入框中Ctrl/Cmd V粘贴剪贴板中的文件拖拽上传将文件拖入输入区域出现虚线拖放遮罩后松开即可。上传通过postFile(sessionId, file)调用POST /api/uploads/{session_id}成功后返回attachment_id并显示在附件气泡中可随时移除removeAttachment。附件的底层存储与 manifest 规范见 docs/user_guide/zh/attachments.md。3.3 输入任务提示并点击 Launch在文本框中输入 Task Prompt任务提示随后点击Launch按钮。按钮是三态的buttonLabel计算属性未启动时显示Launch运行中显示Send用于向人工审阅节点发送输入见第 4 节完成后显示Relaunch一键复用相同工作流重新执行。点击 Launch 后前端构造请求体并调用POST /api/workflow/executelaunchWorkflow{ yaml_file: demo_human.yaml, task_prompt: 你的任务提示, session_id: 20260909-xxxx, attachments: [attachment_id_1, attachment_id_2] }启动成功后状态栏切换为Running...用户的提示与附件名以对话形式出现在聊天面板当前 Session ID 写入 URL query?workflow...session...即使刷新页面也能通过session_resumed协议恢复会话状态继续观察establishWebSocketConnection会读取 URL 中的session参数自动重连。3.4 执行期间双视图实时观察Launch View 左侧主区域支持Chat聊天与Graph图两种视图切换viewModeChat 视图以多 Agent 对话形式展示执行过程包括通知/警告/错误气泡来自后端log消息INFO/WARNING/ERROR三个级别分别渲染为通知、黄色警告、红色错误节点对话气泡每个节点开始输出时以该节点的角色头像名称展示NODE_END事件触发addDialogue内容支持 Markdown 渲染加载条目Loading Entries节点正在调用模型或工具时气泡内会显示动态标签卡片并计时例如Model gpt-4o、Tool web_search对应后端MODEL_CALL/TOOL_CALL事件stage: before/after卡片在调用结束后标记为完成态并显示耗时工件Artifact节点生成文件或图片时气泡内直接渲染图片缩略图或文件卡片可点击放大或下载。Graph 视图基于vue-flow/*渲染 DAG 拓扑LaunchView.vue 中generateNodesAndEdges依据 YAML 的graph.nodes/graph.edges生成节点与边执行中当前活跃节点高亮activeNodes由NODE_START/NODE_END事件驱动边条件满足时角色 sprite 会沿边从源节点走向目标节点animateSpriteAlongEdge通过getPointAtLength沿 SVG 路径逐帧动画实现方向自动判断左右悬停节点时高亮其关联边onNodeHover/onNodeLeave。3.5 取消运行运行中可点击Cancel按钮cancelWorkflow前端通过 WebSocket 发送{ type: cancel }消息让服务端停止工作流并将所有进行中的加载条目置为完成。4. 核心操作二人工审阅节点交互Human-in-the-loop当工作流包含human节点如 demo_human.yaml时执行会在该节点暂停等待人工介入执行暂停后端通过 WebSocket 推送human_input_required消息processMessage中处理前端将status置为Waiting for input...输入框重新获得焦点并显示呼吸光晕shouldGlow阅读上下文聊天面板展示该节点附带的task_description与提示内容输入审阅意见或操作指令在输入框中填写内容运行中的按钮此时变为Send也可同时附带上传附件提交继续执行点击 Send 或按Ctrl/Cmd Enter前端通过 WebSocket 发送human_input消息{ type: human_input, data: { input: 同意请继续, attachments: [attachment_id_1] } }提交后输入框清空、附件列表清空工作流恢复执行。该交互闭环对应后端 runtime/node/executor/human_executor.py 与 server/services/websocket_executor.py 中的人机消息处理逻辑。5. 核心操作三下载运行结果5.1 下载完整 Session 压缩包执行完成后状态为Completed或Cancelled右侧面板的Download按钮变为可用downloadLogs点击后调用GET /api/sessions/{session_id}/download返回整个 Session 的 ZIP 压缩包包含context.json上下文快照、附件、日志等运行资产。下载行为由 apiFunctions.js 中的fetchLogsZip实现以 Blob 方式触发浏览器下载文件名为execution_logs_session_id.zip。5.2 逐项下载工件在聊天面板中每个工件卡片都自带独立的Download按钮downloadArtifact图片工件优先使用已缓存的dataUri其余工件则通过GET /api/sessions/{session_id}/artifacts/{attachment_id}拉取后触发下载。图片工件还可以点击放大预览openImageModal按Esc关闭。6. 快捷键快捷键功能实现位置Ctrl/Cmd Enter提交输入启动工作流 / 发送人工审阅意见handleEnterKeyLaunchView.vueEsc关闭弹窗/图片预览面板handleKeydown同上7. 故障排查问题解决方案页面无法加载确认前端服务npm run dev正常运行访问http://localhost:5173无法连接后端确认后端服务uv run python server_main.py正常运行默认http://localhost:6400且VITE_API_BASE_URL未指向错误地址工作流列表为空检查仓库根目录yaml_instance/下是否有 YAML 文件前端通过/api/workflows拉取列表请同时确认后端路由 server/routes/workflows.py 返回正常执行无响应打开浏览器开发者工具的 Network/Console 面板检查/api/workflow/execute请求与 WebSocket 帧定位具体报错如 Provider 密钥缺失、YAML 校验失败WebSocket 断开刷新页面重新建立连接由于 Session ID 已持久化在 URL query 中刷新后会通过session_resumed自动恢复会话状态附件上传失败确认已通过/ws建立连接并获得session_id附件上传依赖 Session并检查/api/uploads/{session_id}返回8. 前后端通信机制速览Launch View 的运行体验高度依赖 WebSocket 实时通道其消息协议可直接在 LaunchView.vue 的processMessage中核对完整消息类型包括消息类型方向用途connection服务端→前端建立连接返回session_idsession_resumed服务端→前端断线重连后恢复工作流、状态与节点上下文human_input_required服务端→前端请求人工输入human_input前端→服务端提交人工输入与附件artifact_created服务端→前端推送新生成的工件事件log服务端→前端节点状态NODE_START/NODE_END、模型/工具调用MODEL_CALL/TOOL_CALL、边条件命中等信息workflow_completed/workflow_cancelled/error服务端→前端终态通知REST 侧则覆盖工作流列表与内容、上传、工件下载、Session 打包下载、批量执行等能力全部封装在 frontend/src/utils/apiFunctions.js 中可作为二次开发查阅的 API 速查清单。9. 相关文档工作流编排指南YAML 编写图执行逻辑DAG/循环图Dynamic 并行执行附件与工件 API节点类型详解Agent / Human / Python 等Memory / Thinking / Tooling 模块后端用户文档索引【免费下载链接】ChatDevChatDev 2.0: Dev All through LLM-powered Multi-Agent Collaboration项目地址: https://gitcode.com/GitHub_Trending/ch/ChatDev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考