Why CC Workflow Studio? - Speaker Deck Link
✨ Edit with AI: AI agents (Claude Code, GitHub Copilot, etc.) create workflows through natural language via MCP Server
---
▶️ 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 - Click the
icon in the top-right corner of the editor
- Or: Command Palette (`Cmd+Shift+P`) → **"CC Workflow Studio: Open Editor"**
### Create a Workflow
- Add nodes from the palette and configure their settings, or use [Edit with AI](#edit-with-ai).
### Save & Load
- Click Save 
button in the toolbar to store your workflow as `.vscode/workflows/*.json`
- Click Load 
button in the toolbar to open a saved `.json` workflow
### Export & Run
- Click Export 
button in the toolbar to create a `.md` slash command or agent skill (use `/workflow-name` in AI coding agents)
- Click Run 
button in the toolbar to run your workflow directly in AI coding agents
### Edit with AI
- Click Edit with AI 
button in the toolbar to generate or refine workflows with natural language
- **Native with MCP Server**: Click an AI agent button in the Edit with AI panel to launch native AI editing. The MCP server starts automatically behind the scenes.
```mermaid
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.
## Use without VSCode
The extension is one of three entry points to the same workflow JSON. Outside VSCode you can drive the canvas through:
- **[`@cc-wf-studio/cli`](https://www.npmjs.com/package/@cc-wf-studio/cli)** — `ccwf preview` opens a read-only browser viewer for any workflow file, `ccwf export` / `ccwf run` materialise it as Agent Skills, `ccwf canvas` runs the full editor in a localhost browser.
- **[`@cc-wf-studio/mcp`](https://www.npmjs.com/package/@cc-wf-studio/mcp)** — the same MCP tools this extension exposes to in-canvas AI editing, available standalone via `npx @cc-wf-studio/mcp --file