Claude Workflow Composer

n8n for coding agent workflows. A visual desktop app for composing multi-agent Claude 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.

The Problem

Building multi-agent workflows in Claude Code today means:

1. Hand-writing agent .md files with YAML frontmatter
2. Manually authoring orchestrator skills with disable-model-invocation: true and sequenced handoff prose
3. No visual representation of the pipeline before running it
4. No way to share a complete, working workflow with someone else
5. No way to discover what good pipelines look like

The authoring experience is entirely text-based. You can't see what you're building until you run it.

Quick Start

npx claude-cwc

Opens a browser at http://localhost:3579. No code signing, no Gatekeeper friction — paste it in a terminal and you're in.

npx claude-cwc stop    # Stop the server

Or from source:

npm run build && npm start

How It Works

Drag agents onto a canvas
  → Connect them with handoff arrows (author trigger conditions)
  → Edit each agent's system prompt, tools, skills, and completion criteria
  → Preview every file that will be written before exporting
  → Export → writes agent .md files + orchestrator SKILL.md to ~/.claude/
  → Invoke the workflow by name in Claude Code

The exporter writes directly to ~/.claude/ (user-scoped) or .claude/ inside any project directory (project-scoped, version-controllable). Conflict detection ensures it never touches files it doesn't own.

Build

Drag an existing agent from the sidebar (~/.claude/agents/) 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.

Connect 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, Escalated, or Aborted) to define workflow end states.

Edit 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.

Real-time validation surfaces duplicate slugs, empty names, disconnected nodes, and missing completion criteria immediately in the top bar — before you export.

Export

Click Export in the top bar. Choose a target directory (~/.claude/ or any project's .claude/). Review a preview of every file that will be written. Confirm to write.

The exporter:

• Bespoke nodes → writes an agent .md file with frontmatter (name, description, color, model, tools), system prompt, completion criteria, skill references, and an ownership comment.
• Reference nodes → writes nothing — the exportedSlug is 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 with disable-model-invocation: true. 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.

Run

From any Claude Code session, invoke the workflow by its skill name:

/workflow-name

The 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 file and loads its system prompt, tools, and completion criteria.

Automate

Open the Node Panel for any node and switch to the Triggers tab to add a schedule:

• Cron — enter a cron expression (e.g. 0 9 * * 1-5 for weekdays at 9 am) and optionally a day/time window.
• Webhook — CWC generates an inbound URL; post to it to fire the workflow.
• Precondition — a shell command run before the workflow starts; if it exits non-zero the run is skipped.

Add a gate node (drag from the "Gate" section of the sidebar) at any point in the workflow. When the run reaches a gate it:

1. Commits all changes to a cwc/<runId> branch and pauses.
2. Posts a diff of the working branch to the inbox in the Run panel.
3. Waits — the reviewer reads the diff, writes an optional note, and clicks Approve or Reject.
4. On approval, the run resumes in the same Claude Code session from the gate point.

The Run panel header has an Automations toggle that globally suspends all scheduled runs without disarming triggers, and a ⚙ gear that opens notification settings (macOS banners and/or a webhook URL).

Delete

POST /api/export/delete scans 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.

Features

• Visual canvas — React Flow with background grid, minimap, zoom controls, and drag-to-connect
• Left sidebar — My Agents (searchable, draggable from ~/.claude/agents/) 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/, no manual saving needed
• Recent files — home screen shows last 10 workflows, persisted to ~/.cwc/recents.json
• 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/ is missing
• ▶ Test Run — launch an exported workflow headlessly from the UI (--permission-mode bypassPermissions, user-chosen working directory, worktree or in-place isolation) and stop it mid-run
• Live run view — the active node pulses on the canvas, completed nodes get a check, and events stream into a timeline panel
• Run history — every run of every exported workflow (started from CWC or any terminal) persists to ~/.cwc/runs/ with status, duration, source, and cost
• Triggers & preconditions — attach cron schedules, webhook URLs, or manual triggers to a workflow; add a shell command as a precondition guard and a day/time window to restrict when it fires
• Approval gates — insert a gate node into any workflow; when reached the run pauses and posts a diff of its working branch, a reviewer approves or rejects from the inbox (or terminal), the run resumes on the same session
• Isolated runs — Test Run (and scheduler-fired runs) create a git worktree on a cwc/<runId> branch so the main checkout is always untouched; the worktree is removed after the run completes
• Notifications — macOS banner + optional webhook on run complete, gate pause, and approval request; configured from the settings gear in the Run panel
• Global pause — one toggle in the Run panel suspends all scheduled automation runs without disarming triggers

Architecture

Client (React + React Flow)       Server (Express :3579)
┌─────────────────────────┐       ┌─────────────────────┐
│ TemplatePicker           │ ──►  │ /api/workflows      │
│ TopBar                   │ ◄──  │ /api/recents        │
│ Sidebar (Agents/Skills)  │ ──►  │ /api/agents         │
│ Canvas (React Flow)      │ ──►  │ /api/skills         │
│ NodePanel / EdgePanel    │ ──►  │ /api/export         │
│ ExportFlow (modal)       │ ──►  │ /api/export/preview │
│ RunModal / RunPanel      │ ──►  │ /api/export/delete  │
│ useWorkflow (reducer)    │      │ /api/runs (+SSE)    │
│ useAutoSave (debounced)  │      │ /api/automations    │
│ useRunEvents (SSE)       │ ◄──  │ /api/triggers       │
└─────────────────────────┘       └─────────────────────┘
                                          │
                                          ▼
Core Library                     ┌─────────────────────────┐
                                  │ bfs.ts                   │
                                  │ conflict-detector.ts     │
                                  │ exporter.ts              │
                                  │ file-writer.ts           │
                                  │ prose-generator.ts       │
                                  │ skill-resolver.ts        │
                                  │ slugify.ts               │
                                  │ run-events.ts            │
                                  └─────────────────────────┘

Server modules                   ┌─────────────────────────┐
                                  │ run-store.ts             │
                                  │ workflow-runner.ts       │
                                  │ run-isolation.ts         │
                                  │ run-launcher.ts          │
                                  │ automation-state.ts      │
                                  │ automation-scheduler.ts  │
                                  │ notifier.ts              │
                                  │ config.ts                │
                                  └─────────────────────────┘

Storage:
  ~/.cwc/
    recents.json              Recent file paths (max 10)
    workflows/                Saved .cwc workflow files
    runs/<workflowId>/        Run event logs (one .jsonl per run)
    worktrees/                Git worktrees for isolated runs (auto-cleaned)
    automation-state.json     Global pause flag + per-trigger arm state
    config.json               Notification settings (macos, webhookUrl)
    server.pid                PID of running server
  ~/.claude/
    agents/*.md               Agent definitions (read + written)
    skills/*/SKILL.md         User skills (read by sidebar)
    plugins/cache/...         Plugin skills (read by sidebar)

Key Concepts

| Concept | Description | | ---------------------- | ------------------------------------------------------------------------------------------------------------ | | CwcFile | JSON file format (.cwc) representing a full workflow: metadata, nodes, edges | | Bespoke node | A node whose agent definition is authored in the UI — exporter writes a new .md file | | Reference node | A node with an agentRef slug pointing to an existing agent on disk — exporter writes nothing | | Handoff | A directed edge with a trigger description and optional context artifacts | | Terminal edge | An edge with no target node — marks a workflow end state (complete/escalated/aborted) | | Ownership comment | HTML comment appended to every exported file: <!-- cwc:node:<id>:workflow:<id> --> | | Orchestrator skill | The workflow skill generated on export — a Claude Code skill that delegates via Agent tool | | Conflict detection | Reads the ownership comment from a file on disk to determine if this workflow can safely overwrite/delete it | | Gate node | A nodeType: 'gate' node that pauses a run at a checkpoint, diffs the branch, and waits for approval | | Trigger | A cron / webhook / manual definition attached to a workflow node; scheduler evaluates it on each tick | | Isolation | Worktree mode creates a cwc/<runId> branch so the main checkout is never modified by an automated run |

Why Open Source

This tool has filesystem access to ~/.claude/. 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.

Development

npm run dev:server          # Watch-mode server compilation
npm run dev:client          # Vite dev server with HMR (port 5173, proxies /api to :3579)
npm test                    # Run all tests (Vitest)
npm run typecheck           # Type-check server + client
npm run build               # Production build (server + client)

Tests

308 tests across 38 files (run npm test for the current count) covering:

• 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 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
• Claude runner: binary resolution (incl. Windows shims), stdin prompt delivery, timeout/error envelopes
• Undo history: coalescing, redo-stack clearing, edge cascade on node delete, history cap
• Run isolation: worktree create/remove, diff generation, git detection
• Run launcher: fireWorkflow lifecycle, worktree + in-place paths, classifyAndFinish
• Automation scheduler: cron firing, precondition checks, daily cap, global pause gate
• Automation state: arm/disarm, paused flag persistence, trigger hashing
• Gate endpoints: approve (resume), reject, 409 on wrong state, diff response
• Notifier: macOS toast, webhook POST, event filtering

Contributing

PRs welcome. The codebase is TypeScript end-to-end (client + server + core library). Run npm test and npm run typecheck before submitting.

If you build a workflow you're proud of, share the .cwc file — that's how the community library grows.

License

MIT