Vibeleaderboard
← Back to Tools
Index / tool

CC Workflow Studio

github.com/breaking-brake/cc-wf-studio
Visit github.com
Category
AI Agents
Rank
No. 423Tools index
Pricing
Open Source
Type
TOOL
Use case
Agent Building
Interfaces
Editor Extension
Builder
@breaking-brake
GitHub
5.4k stars
Latest release
cc-wf-studio@3.36.0
Date

About

A Visual Studio Code extension that provides a drag-and-drop workflow editor for designing AI agent orchestrations. Create and manage multi-agent workflows with natural language editing through various AI platforms including Claude Code, GitHub Copilot, and Cursor.

What it does

CC Workflow Studio turns a node graph into portable workflow data, then renders, validates, exports, previews, or runs it. The same saved representation works across its editor, terminal tooling, browser preview, and external AI clients connected through MCP.

Why it's ranked here

The strongest idea is not the canvas itself, but the shared workflow representation underneath it. Visual authoring, terminal automation, and AI-driven edits operate on the same data. That makes the tool unusually practical for teams that want workflows checked into projects instead of trapped inside one editor.

What's good

It exports agent-ready Markdown for eight named coding-agent environments. The command line supports validation, rendering, previewing, exporting, and execution, which makes CI and remote use plausible. File-backed MCP writes are atomic and use content revisions to reject conflicting updates. Core workflow logic is also published as a reusable library.

Tradeoffs

The documentation says examples and tutorials are still under development. Most agents require manual activation from the toolbar. File-backed MCP has no live canvas feedback, treats highlighting as a no-op, and does not create sub-agent documents. The command-line package advertises an embeddable API, but its public module currently exports nothing.

How to use it well

Use it when a team wants to design agent workflows visually, store them as project data, validate them in CI, and export skills or commands for several coding agents. Prefer the command line for remote automation and MCP for AI-assisted editing. It does not replace the required coding-agent runtimes.

Technical notes+

The pnpm monorepo requires Node.js 20 or newer according to package.json. packages/core/src/index.ts exposes workflow types, schemas, validation, migration, formatting, and export logic. packages/cli/src/cli.ts registers render, validate, MCP, export, run, preview, canvas, tour, and skill-management commands, while packages/cli/src/index.ts currently exports nothing. packages/mcp/src/mcp.ts serves MCP over stdio; packages/mcp/src/factory.ts also supports caller-owned transports. packages/mcp/src/file-adapter.ts computes SHA-256 revisions, rejects stale writes, and commits through temporary-file rename. Vitest configurations exist for core, CLI, MCP, and VS Code packages. packages/vscode/vite.extension.config.ts bundles extension-host TypeScript as CommonJS while leaving VS Code and Node built-ins external.

Observed

Licensing
The VS Code extension uses AGPL-3.0-or-later; the core, CLI, and MCP npm packages use MIT.
Implementation
TypeScript packages target Node.js and use a pnpm monorepo.
Install surfaces
Distributed through the VS Code Marketplace, Open VSX, and npm packages for CLI and MCP use.
Interfaces
Provides a VS Code editor, command-line interface, browser preview, reusable core library, and stdio MCP server.
Agent targets
Exports for Claude Code, GitHub Copilot Chat and CLI, OpenAI Codex CLI, Zoo Code, Gemini CLI, Antigravity, and Cursor.
Testing structure
Vitest configurations cover the core, CLI, MCP, and VS Code extension packages.

Read from README.md, package.json, packages/cli/vitest.config.ts, packages/mcp/vitest.config.ts, packages/core/vitest.config.ts, packages/vscode/vitest.config.ts, packages/vscode/vite.extension.config.ts, packages/cli/src/cli.ts, packages/mcp/src/mcp.ts, packages/cli/src/index.ts, packages/mcp/src/index.ts, packages/core/src/index.ts, packages/mcp/src/factory.ts, packages/mcp/src/file-adapter.ts, packages/core/scripts/generate-toon-schema.ts.

What it can do

  • Create AI agent workflows using drag-and-drop interface

    Visual components and connections on canvas → Structured multi-agent workflow

  • Edit workflows through natural language commands

    Natural language instructions → Modified workflow configuration

  • Orchestrate multiple AI agents in sequence

    Workflow definition with multiple agent nodes → Coordinated multi-agent execution

  • Export workflows to executable format

    Visual workflow design → Runnable workflow file

  • Execute workflows with one-click run

    Completed workflow configuration → Workflow execution results

  • Integrate with AI platforms for agent functionality

    Workflow nodes and AI platform credentials → Connected AI agent services

Tags

ai-agentsworkflowvscodevisual-editorautomationclaudecopilportmcp

Tech Stack

Node.js

Comments (0)

No comments yet

Editorially curated, with community endorsements as a secondary signal. Corrections welcome.