CC Workflow Studio

<p align="center">
  <img src="./packages/vscode/resources/icon-large.png" alt="CC Workflow Studio Icon" width="128">
</p>

# CC Workflow Studio

<p align="center">
  <a href="https://github.com/breaking-brake/cc-wf-studio/stargazers"><img src="https://img.shields.io/github/stars/breaking-brake/cc-wf-studio" alt="GitHub Stars" /></a>
  <a href="https://marketplace.visualstudio.com/items?itemName=breaking-brake.cc-wf-studio"><img src="https://vsmarketplacebadges.dev/version-short/breaking-brake.cc-wf-studio.svg?label=VS%20Marketplace" alt="VS Code Marketplace" /></a>
  <a href="https://open-vsx.org/extension/breaking-brake/cc-wf-studio"><img src="https://img.shields.io/open-vsx/v/breaking-brake/cc-wf-studio?label=OpenVSX" alt="OpenVSX" /></a>
  <a href="https://www.npmjs.com/package/@cc-wf-studio/cli"><img src="https://img.shields.io/npm/v/@cc-wf-studio/cli?label=npm%20%2F%20cli" alt="npm @cc-wf-studio/cli" /></a>
  <a href="https://www.npmjs.com/package/@cc-wf-studio/mcp"><img src="https://img.shields.io/npm/v/@cc-wf-studio/mcp?label=npm%20%2F%20mcp" alt="npm @cc-wf-studio/mcp" /></a>
  <a href="https://deepwiki.com/breaking-brake/cc-wf-studio"><img src="https://img.shields.io/badge/Ask-DeepWiki-009485" alt="Ask DeepWiki" /></a>
</p>

<p align="center">
  <img src="./packages/vscode/resources/hero.png" alt="CC Workflow Studio" width="800">
</p>

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

<p align="center">
  <a href="https://speakerdeck.com/seiyakobayashi/cc-workflow-studio">
    <img src="./packages/vscode/resources/deck-preview.png" alt="Learn more: Why CC Workflow Studio?" width="600">
  </a>
  <br>
  <em>Why CC Workflow Studio? - Speaker Deck Link</em>
</p>

---

## Supported Agents

| Agent | Export Format | Requires |
|-------|--------------|----------|
| Claude Code | `.claude/agents/` `.claude/commands/` | [Claude Code](https://github.com/anthropics/claude-code) |
| GitHub Copilot Chat | `.github/prompts/` | [Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat) |
| GitHub Copilot CLI | `.github/skills/` | [Copilot CLI](https://github.com/github/copilot-cli) |
| OpenAI Codex CLI | `.codex/skills/` | [Codex CLI](https://github.com/openai/codex) |
| Zoo Code (formerly Roo Code) | `.roo/skills/` | [Zoo Code](https://marketplace.visualstudio.com/items?itemName=ZooCodeOrganization.zoo-code) |
| Gemini CLI | `.gemini/skills/` | [Gemini CLI](https://github.com/google-gemini/gemini-cli) |
| Antigravity | `.agent/skills/` | [Antigravity](https://antigravity.google/) |
| Cursor | `.cursor/agents/` `.cursor/skills/` | [Cursor](https://github.com/cursor/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.

```mermaid
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`](./packages/vscode/README.md) |
| **CLI (`ccwf`)** | `npx @cc-wf-studio/cli --help` | Terminal / CI / SSH / Codespaces — render, validate, preview, export, run a workflow without VSCode | [`packages/cli`](./packages/cli/README.md) |
| **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`](./packages/mcp/README.md) |

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 Edit Demo GIF: MCP Server-based Workflow Editing -->
<p align="center">
  <img src="./packages/vscode/resources/demo_edit_with_ai.gif" alt="AI-Assisted Workflow Creation Demo - MCP Server-based Editing" width="800">
</p>



... (truncated)