Claude Workflow Composer: A Visual Multi-Agent Coding Workflow Orchestration Tool

Claude Workflow Composer is an open-source visual desktop application developed by fayzan123 and hosted on GitHub. It aims to address the pain points of manual configuration for multi-agent coding workflows. It allows developers to orchestrate multi-agent workflows via drag-and-drop, connect agents, attach skills and MCP, configure handover logic, and directly export to the .claude/ directory. Positioned as the 'n8n for coding agent workflows', this tool makes multi-agent collaboration logic intuitive and efficient.

With the popularity of AI coding assistants like Claude Code, multi-agent collaboration models have emerged, but there are many issues in building workflows: reliance on manual YAML configuration and agent definition file writing, lack of visual feedback, inability to intuitively see the workflow structure, and difficulty in easily sharing complete configurations.

The core value lies in visualizing abstract collaboration logic:

1. Agent Node Management: Drag existing agents (from ~/.claude/agents/) or create new custom nodes;
2. Handover Logic Visualization: Drag to connect and define agent handovers, configure trigger conditions, tags, and context transfer;
3. Terminal State Definition: Mark nodes as completed, escalated, or aborted to clarify workflow end conditions.

When a node is selected, you can configure:

1. Basic Attributes: Name, description, color identifier;
2. System Prompts: Real-time preview and editing;
3. Tools and Skills: Drag to add skills from the skill library, check to enable tools;
4. Completion Conditions: Define the criteria for task completion.

Export Steps:

1. Directory Selection: Global (~/.claude/) or project-level (./.claude/);
2. File Preview and Conflict Detection: Preview files and detect non-tool-created files to avoid overwriting;
3. Agent File Generation: Custom nodes generate .md files, referenced nodes use existing slugs;
4. Orchestrator Skill Generation: BFS traversal generates SKILL.md, delegating execution to sub-agents.

Technical Architecture: Separation of front-end and back-end. Front-end uses React + React Flow for visualization, back-end uses Express to provide APIs, and the storage layer manages workflows and recent files; Quick Start:

• Start: npx claude-cwc (visit http://localhost:3579);
• Stop: npx claude-cwc stop;
• Detects if the ~/.claude/ directory exists on startup and prompts to install Claude Code.

Application Scenarios: Complex code reviews, multi-step code generation, knowledge base Q&A systems; Future Outlook: Support conditional branches and loops, integrate third-party tools, provide a workflow template market, etc.