CC Workflow Studio
# Add to your Claude Code skills
git clone https://github.com/breaking-brake/cc-wf-studioLast scanned: 4/19/2026
{
"issues": [
{
"type": "npm-audit",
"message": "brace-expansion: brace-expansion: Zero-step sequence causes process hang and memory exhaustion",
"severity": "medium"
},
{
"type": "npm-audit",
"message": "follow-redirects: follow-redirects leaks Custom Authentication Headers to Cross-Domain Redirect Targets",
"severity": "medium"
},
{
"type": "npm-audit",
"message": "hono: hono Improperly Handles JSX Attribute Names Allows HTML Injection in hono/jsx SSR",
"severity": "medium"
},
{
"type": "npm-audit",
"message": "picomatch: Picomatch: Method Injection in POSIX Character Classes causes incorrect Glob Matching",
"severity": "high"
}
],
"status": "WARNING",
"scannedAt": "2026-04-19T06:01:47.503Z",
"semgrepRan": false,
"npmAuditRan": true,
"pipAuditRan": true
}No comments yet. Be the first to share your thoughts!
You think visually. AI thinks in .md. CC Workflow Studio speaks both.
Design workflows on a canvas. Export as Markdown your AI agent already understands. No more prompt-guessing.
| Agent | Export Format | Requires |
|-------|--------------|----------|
| Claude Code | .claude/agents/ .claude/commands/ | Claude Code |
| GitHub Copilot Chat | .github/prompts/ | Copilot Chat |
| GitHub Copilot CLI | .github/skills/ | Copilot CLI |
| OpenAI Codex CLI | .codex/skills/ | Codex CLI |
| Roo Code | .roo/skills/ | Roo Code |
| Gemini CLI | .gemini/skills/ | Gemini CLI |
| Antigravity | .agent/skills/ | Antigravity |
| Cursor | .cursor/agents/ .cursor/skills/ | Cursor |
Note: Agents other than Claude Code require activation from Toolbar's More menu.
The VSCode extension is the most ergonomic editor, but it isn't the only entry point. The same workflow.json drives a CLI and an MCP server — pick whichever interface fits the situation.
flowchart LR
Wf(["workflow.json"])
subgraph IDE["🪟 VSCode Extension"]
Canvas["React Flow canvas<br/>+ editor + Slack share"]
end
subgraph Mcp["🔌 MCP Server"]
AIClient["Claude Code,<br/>MCP Inspector, ..."]
McpServer["@cc-wf-studio/mcp<br/>(stdio: <code>ccwf-mcp</code>)"]
AIClient --> McpServer
end
subgraph Cli["💻 CLI"]
CliBin["@cc-wf-studio/cli<br/>(<code>ccwf render | validate | export | run | preview | canvas | mcp</code>)"]
end
Wf <-->|edit| Canvas
Wf <-->|read / write| McpServer
Wf <-->|read / write| CliBin
Canvas -.->|writes skills + agents| Output["Agent skills on disk<br/>(.claude/, .codex/, .cursor/, ...)"]
McpServer -.-> Output
CliBin -.-> Output
| Interface | Try it | Best for | Docs |
|---|---|---|---|
| VSCode extension | code --install-extension breaking-brake.cc-wf-studio | Designing workflows visually | packages/vscode |
| CLI (ccwf) | npx @cc-wf-studio/cli --help | Terminal / CI / SSH / Codespaces — render, validate, preview, export, run a workflow without VSCode | packages/cli |
| MCP server (ccwf-mcp) | Add to your MCP client's .mcp.json so Claude Code (or any MCP client) can read and edit workflows over stdio | Letting an external AI client read and edit your workflows through MCP tools | packages/mcp |
There is no "VSCode-only" path: a workflow you draw in the canvas is the same file ccwf preview will render in a browser, and the same file an external Claude Code can edit through MCP.
🔀 Visual Workflow Editor - Intuitive drag-and-drop canvas for designing AI agent orchestrations without code
🤖 Agentic Engineering - Design multi-agent workflows with Sub-Agent orchestration, Agent Skills, and MCP tool integration — the building blocks of agentic engineering
✨ Edit with AI - Iteratively improve workflows through conversational AI - ask for changes, add features, or refine logic with natural language feedback
⚡ One-Click Export & Run - Export workflows to ready-to-use formats and run directly from the editor
Cmd+Shift+P) → "CC Workflow Studio: Open Editor".vscode/workflows/*.json.json workflow.md slash command or agent skill (use /workflow-name in AI coding agents)sequenceDiagram
actor User
box VS Code (CC Workflow Studio)
participant UI as Editor UI
participant MCP as MCP Server
end
participant Agent as AI Agent
User->>UI: Click agent button
UI->>MCP: Auto start server
UI->>Agent: Launch with editing skill
loop AI edits workflow
Agent->>MCP: get_workflow
MCP-->>Agent: workflow JSON
Agent->>MCP: apply_workflow
MCP->>UI: Update canvas
end
Coming soon - Sample workflows and tutorials are under development.
This project is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0-or-later).
See the LICENSE file for the full license text.
Copyright (c) 2025 breaking-brake
Built with React Flow • Powered by Claude Code • Inspired by Dify
Made with CC Workflow Studio