cc-wf-studio README

The project's README from github.com/breaking-brake/cc-wf-studio. As one markdown file: README.md.

CC Workflow Studio Icon

CC Workflow Studio

GitHub Stars VS Code Marketplace OpenVSX npm @cc-wf-studio/cli npm @cc-wf-studio/mcp Ask DeepWiki

CC Workflow Studio

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.

Learn more: Why CC Workflow Studio?
Why CC Workflow Studio? - Speaker Deck Link

Supported Agents

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
Zoo Code (formerly Roo Code) .roo/skills/ Zoo 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.

Use it without VSCode, too

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.

AI-Assisted Workflow Creation Demo - MCP Server-based Editing

✨ Edit with AI: AI agents (Claude Code, GitHub Copilot, etc.) create workflows through natural language via MCP Server

Run Workflow Demo - Execute workflows directly from the editor

▶️ Run workflows directly from the editor – See your AI automation in action instantly

Key Features

🔀 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

How to Use

Launch the Extension

Create a Workflow

Save & Load

Export & Run

Edit with AI

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

Usage Examples

Coming soon - Sample workflows and tutorials are under development.

License

The VSCode extension (cc-wf-studio) 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.

The reusable libraries published to npm — @cc-wf-studio/core, @cc-wf-studio/mcp, and @cc-wf-studio/cli — are released under the more permissive MIT license. Each package ships its own LICENSE file, which takes precedence for that package.

Copyright (c) 2025 breaking-brake

Star History

Star History Chart

Acknowledgments

Built with React Flow • Powered by Claude Code • Inspired by Dify

Made with CC Workflow Studio

cc-wf-studio (breaking-brake/cc-wf-studio)

Searching Database…

5.4K ·GitHub
Cc-wf-studio
这是什么？CC Workflow Studio 是一个 VSCode 扩展，可以在拖拽式画布上以可视化方式设计 AI 智能体工作流，然后将其导出为 Markdown 文件，让 Claude Code、GitHub Copilot、Codex CLI 等编程智能体直接运行。
这只是一个 VSCode 扩展吗？不是——同一个 workflow.json 也可以通过独立的命令行工具 ccwf（适用于终端、CI 或 SSH 环境）使用，还可以通过 MCP 服务器 ccwf-mcp 使用，它允许 Claude Code 这样的 AI 客户端通过 stdio 读取和编辑工作流。
我可以把工作流导出到哪些编程智能体？Claude Code、GitHub Copilot Chat/CLI、OpenAI Codex CLI、Zoo Code（原名 Roo Code）、Gemini CLI、Antigravity 和 Cursor，每个都有各自的导出文件夹（例如 .claude/agents/、.github/skills/、.codex/skills/）。
有教程或示例工作流吗？暂时还没有——README 中说示例工作流和教程仍在“开发中”，而且除 Claude Code 外，其他智能体需要先在工具栏的“More”菜单中手动启用。
“Edit with AI”按钮有什么作用？它会打开一个面板，你可以通过自然语言对话来优化工作流；点击某个 AI 智能体按钮即可直接进入原生编辑，同时 MCP 服务器会在后台自动启动。
点击导出后会发生什么？它会把可视化工作流转换为可直接使用的 .md 斜杠命令或智能体技能文件，之后你就可以在 AI 编程智能体中以 /workflow-name 的方式调用它。
CC Workflow Studio 的灵感来源是什么？README 中致谢了 React Flow 提供的画布，说明它基于 Claude Code 构建，并提到它受到 Dify 的启发。
What are similar projects?evenfire, 1code, paperclip, autoprompt-skill, ordewell, ruflo, claude-code, openrig
Which topics is it in?visual-programming, slash-commands, flowchart, mcp-tools, drag-and-drop, low-code, vscode-extension, github-copilot, workflow-automation, model-context-protocol, orchestration, agent-orchestration
Creator
breaking-brake
Size
46.2 MB
Stars
5.4K
Updated
CommitAug 02Release@cc-wf-studio/[email protected]Jul 11
Age
11mo
Commits · 90 Days