{"slug": "show-hn-visual-composer-for-claude-code-multi-agent-workflows", "title": "Show HN: Visual composer for Claude Code multi-agent workflows", "summary": "A new visual desktop app called Claude Workflow Composer (CWC) allows Claude Code users to build multi-agent workflows by dragging agents onto a canvas, connecting them with handoff arrows, and exporting working agent files directly into their Claude installation — eliminating the need for manual YAML editing in .md files. The tool, which runs locally via npx and opens in a browser at localhost:3579, generates orchestrator skills and agent configuration files for the approximately 115,000 Claude Code users who currently hand-wire agent pipelines without visual representation or sharing capabilities.", "body_md": "**n8n for coding agent workflows.** A visual desktop app for composing multi-agent [Claude Code](https://claude.ai/code) workflows — drag agents onto a canvas, wire handoffs, attach skills, and export a working workflow directly into your Claude installation. No YAML editing required.\n\nBuilt for the ~115k Claude Code users who are hand-wiring agent pipelines in\n\n`.md`\n\nfiles and wondering why there's no better way.\n\nBuilding multi-agent workflows in Claude Code today means:\n\n- Hand-writing agent\n`.md`\n\nfiles with YAML frontmatter - Manually authoring orchestrator skills with\n`disable-model-invocation: true`\n\nand sequenced handoff prose - No visual representation of the pipeline before running it\n- No way to share a complete, working workflow with someone else\n- No way to discover what good pipelines look like\n\nThe authoring experience is entirely text-based. You can't see what you're building until you run it.\n\n```\nnpx claude-cwc\n```\n\nOpens a browser at `http://localhost:3579`\n\n. No code signing, no Gatekeeper friction — paste it in a terminal and you're in.\n\n```\nnpx claude-cwc stop    # Stop the server\n```\n\nOr from source:\n\n```\nnpm run build && npm start\nDrag agents onto a canvas\n  → Connect them with handoff arrows (author trigger conditions)\n  → Edit each agent's system prompt, tools, skills, and completion criteria\n  → Preview every file that will be written before exporting\n  → Export → writes agent .md files + orchestrator SKILL.md to ~/.claude/\n  → Invoke the workflow by name in Claude Code\n```\n\nThe exporter writes directly to `~/.claude/`\n\n(user-scoped) or `.claude/`\n\ninside any project directory (project-scoped, version-controllable). Conflict detection ensures it never touches files it doesn't own.\n\nDrag an **existing agent** from the sidebar (`~/.claude/agents/`\n\n) onto the canvas to create a **reference node** — it points to that agent file by slug rather than duplicating it. Drag from **\"New / Blank Agent\"** to create a **bespoke node** — the exporter generates a new agent file for it.\n\nConnect nodes by dragging between handles. Each connection becomes a **handoff** with a trigger description and optional context artifacts (files, text, JSON) passed between agents. Mark any node as a **terminal** (`Complete`\n\n, `Escalated`\n\n, or `Aborted`\n\n) to define workflow end states.\n\nEdit any node's completion criteria, tool access, skills, and system prompt in the **Node Panel**. The first node can also have a **start trigger** describing what initiates the workflow.\n\nReal-time validation surfaces duplicate slugs, empty names, disconnected nodes, and missing completion criteria immediately in the top bar — before you export.\n\nClick **Export** in the top bar. Choose a target directory (`~/.claude/`\n\nor any project's `.claude/`\n\n). Review a **preview** of every file that will be written. Confirm to write.\n\nThe exporter:\n\n**Bespoke nodes**→ writes an agent`.md`\n\nfile with frontmatter (name, description, color, model, tools), system prompt, completion criteria, skill references, and an ownership comment.**Reference nodes**→ writes nothing — the`exportedSlug`\n\nis set to the existing agent's slug so the orchestrator routes to it directly.**Workflow skill**→ generates an orchestrator skill at`.claude/skills/<workflow-slug>/SKILL.md`\n\nwith`disable-model-invocation: true`\n\n. The orchestrator body is produced by BFS-traversing the node/edge graph into natural-language steps.**Rename handling**→ if a node was renamed, the old owned file is deleted and the new one is written.** Conflict detection**→ every file carries an ownership HTML comment. Before overwriting or deleting, the exporter verifies ownership — it never touches files created by other workflows or by hand.\n\nFrom any Claude Code session, invoke the workflow by its skill name:\n\n```\n/workflow-name\n```\n\nThe orchestrator skill delegates every implementation step to sub-agents via the Agent tool. Each step references an agent by name; Claude Code resolves it to the agent's `.md`\n\nfile and loads its system prompt, tools, and completion criteria.\n\n`POST /api/export/delete`\n\nscans every exported file, checks its ownership comment, and only removes files owned by the current workflow. Reference nodes have nothing to delete — they didn't write any files.\n\n**Visual canvas**— React Flow with background grid, minimap, zoom controls, and drag-to-connect** Left sidebar**— My Agents (searchable, draggable from`~/.claude/agents/`\n\n) and Skills (searchable, draggable onto selected nodes)**Right panels**— Node Editor (name, description, criteria, tools, skills, system prompt, terminal type) and Edge Editor (trigger, label, context artifacts)**Export modal**— target selection, full file preview, warning display before writing anything** Auto-save**— 500ms debounced save to`~/.cwc/workflows/`\n\n, no manual saving needed**Recent files**— home screen shows last 10 workflows, persisted to`~/.cwc/recents.json`\n\n**Markdown preview**— click any agent or skill card to view its source file** Open in editor**— view any agent or skill file in your system editor** Claude Code detection**— warns on startup if`~/.claude/`\n\nis missing\n\n```\nClient (React + React Flow)       Server (Express :3579)\n┌─────────────────────────┐       ┌─────────────────────┐\n│ TemplatePicker           │ ──►  │ /api/workflows      │\n│ TopBar                   │ ◄──  │ /api/recents        │\n│ Sidebar (Agents/Skills)  │ ──►  │ /api/agents         │\n│ Canvas (React Flow)      │ ──►  │ /api/skills         │\n│ NodePanel / EdgePanel    │ ──►  │ /api/export         │\n│ ExportFlow (modal)       │ ──►  │ /api/export/preview │\n│ useWorkflow (reducer)    │      │ /api/export/delete  │\n│ useAutoSave (debounced)  │      │ /api/health         │\n└─────────────────────────┘       └─────────────────────┘\n                                          │\n                                          ▼\nCore Library                     ┌─────────────────────┐\n                                  │ bfs.ts               │\n                                  │ conflict-detector.ts │\n                                  │ exporter.ts          │\n                                  │ file-writer.ts       │\n                                  │ prose-generator.ts   │\n                                  │ skill-resolver.ts    │\n                                  │ slugify.ts           │\n                                  └─────────────────────┘\n\nStorage:\n  ~/.cwc/\n    recents.json          Recent file paths (max 10)\n    workflows/            Saved .cwc workflow files\n    server.pid            PID of running server\n  ~/.claude/\n    agents/*.md           Agent definitions (read + written)\n    skills/*/SKILL.md     User skills (read by sidebar)\n    plugins/cache/...     Plugin skills (read by sidebar)\n```\n\n| Concept | Description |\n|---|---|\nCwcFile |\nJSON file format (`.cwc` ) representing a full workflow: metadata, nodes, edges |\nBespoke node |\nA node whose agent definition is authored in the UI — exporter writes a new `.md` file |\nReference node |\nA node with an `agentRef` slug pointing to an existing agent on disk — exporter writes nothing |\nHandoff |\nA directed edge with a trigger description and optional context artifacts |\nTerminal edge |\nAn edge with no target node — marks a workflow end state (complete/escalated/aborted) |\nOwnership comment |\nHTML comment appended to every exported file: `<!-- cwc:node:<id>:workflow:<id> -->` |\nOrchestrator skill |\nThe workflow skill generated on export — a Claude Code skill that delegates via Agent tool |\nConflict detection |\nReads the ownership comment from a file on disk to determine if this workflow can safely overwrite/delete it |\n\nThis tool has filesystem access to `~/.claude/`\n\n. Open source is the trust model — no data leaves your machine, no cloud dependency. The local Node.js server is the entire backend. You can read every line of code that touches your files.\n\n```\nnpm run dev:server          # Watch-mode server compilation\nnpm run dev:client          # Vite dev server with HMR (port 5173, proxies /api to :3579)\nnpm test                    # Run all tests (Vitest)\nnpm run typecheck           # Type-check server + client\nnpm run build               # Production build (server + client)\n```\n\n89 tests across 16 files covering:\n\n**BFS traversal**: linear chains, back-edges, fan-out, multi-root, terminal edges** Prose generation**: start triggers, bold wrapping, context artifacts, Oxford comma, back-edge ordering** File writer**: frontmatter, skills block, ownership comments, workflow skill generation** Exporter**: full integration with real temp filesystem, rename cleanup, skill resolution, re-export, conflict warnings** Validation**: empty workflows, missing names, duplicate slugs, disconnected nodes** Graph layout**: horizontal spacing, fan-out vertical spacing, back-edge stability** HTTP endpoints**: all 12 API routes tested with real server instances** Slugify**: special chars, truncation, hyphen collapse, empty input** Conflict detection**: owned, foreign, absent, malformed states** Skill resolution**: namespaced (plugin) and non-namespaced (user) skill lookup\n\nPRs welcome. The codebase is TypeScript end-to-end (client + server + core library). Run `npm test`\n\nand `npm run typecheck`\n\nbefore submitting.\n\nIf you build a workflow you're proud of, share the `.cwc`\n\nfile — that's how the community library grows.\n\nMIT", "url": "https://wpnews.pro/news/show-hn-visual-composer-for-claude-code-multi-agent-workflows", "canonical_source": "https://github.com/fayzan123/claude-workflow-composer", "published_at": "2026-05-26 21:36:26+00:00", "updated_at": "2026-05-26 22:11:46.769413+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "ai-products", "large-language-models", "ai-startups"], "entities": ["Claude Code", "n8n", "Claude"], "alternates": {"html": "https://wpnews.pro/news/show-hn-visual-composer-for-claude-code-multi-agent-workflows", "markdown": "https://wpnews.pro/news/show-hn-visual-composer-for-claude-code-multi-agent-workflows.md", "text": "https://wpnews.pro/news/show-hn-visual-composer-for-claude-code-multi-agent-workflows.txt", "jsonld": "https://wpnews.pro/news/show-hn-visual-composer-for-claude-code-multi-agent-workflows.jsonld"}}