ChatDev/docs/user_guide/en/web_ui_guide.md

Frontend Web UI Quick Start Guide

This guide helps users quickly get started with the DevAll Web UI, covering main functional pages and operation workflows.

1. System Entry

After starting frontend and backend services, visit http://localhost:5173 to access the Web UI.

2. Main Pages

2.1 Home

System homepage providing quick navigation links.

2.2 Workflow List

View and manage all available workflow YAML files.

Features:

• Browse workflows in yaml_instance/ directory
• Preview YAML configuration content
• Select workflow to execute or edit

2.3 Launch View

The main interface for workflow execution, the most commonly used page.

Operation Flow:

1. Select workflow: Choose YAML file from the left panel
2. Upload attachments (optional): Click upload button to add files (CSV data, images, etc.)
3. Enter task prompt: Input instructions in the text box to guide workflow execution
4. Click Launch: Start workflow execution

During Execution:

• Nodes View: Observe node status changes (pending → running → success/failed)
• Output Panel: View real-time execution logs, node output context, and generated artifacts (all share the same panel)

Human Input:

• When execution reaches a human node, the interface displays an input prompt
• Fill in text content or upload attachments, then submit to continue execution

2.4 Workflow Workbench

Visual workflow editor.

Features:

• Drag-and-drop node editing
• Node configuration panel
• Edge connections and condition settings
• Export to YAML file

2.5 Tutorial

Built-in tutorial to help new users understand system features.

3. Common Operations

3.1 Running a Workflow

1. Go to Launch View
2. Select workflow from the left panel
3. Enter Task Prompt
4. Click Launch button
5. Monitor execution progress and wait for completion

3.2 Downloading Results

After execution completes:

1. Click the Download button on the right panel
2. Download the complete Session archive (includes context.json, attachments, logs, etc.)

3.3 Human Review Node Interaction

When workflow contains human nodes:

1. Execution pauses and displays prompt message
2. Read context content
3. Enter review comments or action instructions
4. Click submit to continue execution

4. Keyboard Shortcuts

Shortcut	Function
Ctrl/Cmd + Enter	Submit input
Esc	Close popup/panel

5. Troubleshooting

Issue	Solution
Page won't load	Confirm frontend npm run dev is running
Cannot connect to backend	Confirm backend uv run python server_main.py is running
Empty workflow list	Check yaml_instance/ directory for YAML files
Execution unresponsive	Check browser DevTools Network/Console logs
WebSocket disconnected	Refresh page to re-establish connection

6. Related Documentation

• Workflow Authoring - YAML writing guide