DEV Community

정상록
정상록

Posted on

CC Workflow Studio: Visual Workflow Editor for Claude Code AI Agents

CC Workflow Studio: Visual Workflow Editor for Claude Code AI Agents

Are you tired of editing JSON files and markdown manually every time you design an AI agent workflow? CC Workflow Studio brings a visual, drag-and-drop interface to VSCode, eliminating tedious text editing and bringing your workflow designs to life instantly.

What is CC Workflow Studio?

CC Workflow Studio is an open-source VSCode extension that lets you design AI agent workflows visually without touching a single line of YAML or JSON. Created by breaking-brake, a solo developer from Japan, this tool has already gained 4,600+ GitHub stars in just 5 months.

Think of it like this: If designing workflows with text files is like describing a building blueprint in words, CC Workflow Studio is like drawing the blueprint itself.

Key Stats (as of March 2026):

  • 4,600+ GitHub stars
  • 871 commits
  • 142 releases
  • 1 solo maintainer pushing updates at ~28 releases per month

Core Features

1. Visual Canvas Editor

A React Flow-based canvas where you drag nodes and connect them with edges. Eight node types are supported:

  • Sub-Agent — Invoke child agents
  • AskUserQuestion — Request user input
  • Branch — Conditional branching
  • Prompt — Define custom prompts
  • MCP Tool — Call MCP server tools
  • Skill — Reference reusable skills
  • Group — Bundle nodes
  • End — Terminate workflow

Each node's properties are editable with a single click, and flow changes happen instantly as you drag connections.

2. Edit with AI (Built-in MCP Server)

Here's where it gets interesting. CC Workflow Studio includes an embedded MCP server that lets you request workflow improvements in natural language.

Example: "Add a quality review step after research completion" — the AI automatically inserts the appropriate node and connects it to your existing flow. No code editing required.

3. Support for 8 AI Agents

The tool isn't locked to Claude Code. It supports:

  • Claude Code (Anthropic)
  • GitHub Copilot Chat / CLI (Microsoft)
  • OpenAI Codex CLI
  • Roo Code
  • Gemini CLI (Google)
  • Antigravity
  • Cursor
  • Windsurf

Multi-tool teams can manage all workflows through one unified visual interface.

4. One-Click Export

Export your finished workflow with a single click:

  • .claude/agents/ → Claude Code agent files
  • .claude/commands/ → Custom slash commands

The exported files are immediately ready to use. No additional setup needed.

5. Completely Offline

All data stays local. No cloud transmission, no API keys required. Perfect for sensitive projects or offline environments.

Getting Started

Installation (VSCode Marketplace)

  1. Open VSCode
  2. Extensions → Search "CC Workflow Studio"
  3. Click Install
  4. Restart VSCode

Build from Source 

git clone https://github.com/breaking-brake/cc-wf-studio.git
cd cc-wf-studio
npm install && npm run build
Enter fullscreen mode Exit fullscreen mode

Then in VSCode: Extensions → ... → Install from VSIX

Practical Example: Research → Review → Publish Workflow

Here's what a typical workflow looks like on the canvas:

[Start]
  ↓
[Sub-Agent: researcher]        ← Perform web research
  ↓
[AskUserQuestion]              ← "Approve research?"
  ↓
[Branch]                       ← Conditional split
  ├── Approved → [Sub-Agent: blog-writer] → [End]
  └── Rejected → [Sub-Agent: researcher] (loop)
Enter fullscreen mode Exit fullscreen mode

In traditional text-based approaches, you'd need to manually edit multiple agent markdown files. With CC Workflow Studio, you place nodes and draw connections. Same result, fraction of the time.

CC Workflow Studio vs. Dify vs. n8n

Aspect CC Workflow Studio Dify n8n
Type VSCode Extension Web SaaS Automation Platform
Visual Editing ✓ ✓ ✓
Fully Offline ✓ ✗ Self-hosted only
Installation Local VSCode Cloud/Self-hosted Cloud/Self-hosted
Target Users Developers Non-technical + Devs Automation Engineers
Pricing Free (OSS) Free + Paid Free + Paid
AI Agent Support 8 agents Multiple LLM APIs API-based
License AGPL-3.0 Apache 2.0 Commercial

Choose CC Workflow Studio if:

  • You already use VSCode as your primary editor
  • You need 100% offline operation
  • You manage Claude Code agents directly
  • You want to stay completely free

Choose Dify if:

  • You collaborate with non-technical team members
  • You need cloud-based collaboration

Choose n8n if:

  • You integrate with many SaaS tools (Slack, Gmail, etc.)
  • You need advanced automation features

Architecture at a Glance 

Editor UI (Webview - React Flow)
      ↕
Extension Host (VSCode Extension API)
      ↕
Workflow Definition (JSON → Markdown)
Enter fullscreen mode Exit fullscreen mode

The tech stack is mostly TypeScript (98.1%) powered by React Flow. Deep VSCode Extension API integration means zero friction for existing Claude Code users.

Limitations & Caveats

  1. 50-node limit per workflow — Complex workflows need to be split into multiple definitions or grouped with Group nodes
  2. VSCode-only — Won't work on JetBrains IDEs, Vim, Emacs, or other editors
  3. Solo maintainer risk — breaking-brake is the sole maintainer. Consider forking for long-term enterprise dependency
  4. AGPL-3.0 licensing — If you offer this as a SaaS or commercially modify it, source code disclosure is mandatory. Internal tool use is unrestricted

The Bottom Line

CC Workflow Studio fills a real gap for Claude Code users. If you're orchestrating complex multi-agent workflows (research → content generation → publishing), this tool saves significant time compared to manual YAML/JSON editing.

The visual representation makes it easier to:

  • Understand workflow logic at a glance
  • Spot bottlenecks or inefficiencies
  • Onboard team members to complex pipelines
  • Iterate on agent coordination without code edits

5 months in, 142 releases, and 4,600+ stars suggest the community sees real value here.

Try it today: Open VSCode, search "CC Workflow Studio" in Extensions, and drag your first nodes onto the canvas.

References

Top comments (0)