---
name: CC Workflow AI Editor
slug: cc-workflow-ai-editor
category: AI Engineering
description: CC Workflow AI Editor creates and edits visual AI agent workflows through interactive conversation using MCP tools. Use it to create new workflows, modify existing ones, or edit the workflow canvas in CC Workflow Studio via the built-in MCP server.
github: "https://github.com/breaking-brake/cc-wf-studio/tree/main/.github/skills/cc-workflow-ai-editor"
language: TypeScript
stars: 5353
forks: 571
install: "npx degit https://github.com/breaking-brake/cc-wf-studio/tree/main/.github/skills/cc-workflow-ai-editor ~/.claude/skills/cc-workflow-ai-editor"
installs_to: ~/.claude/skills/cc-workflow-ai-editor
source_path: .github/skills/cc-workflow-ai-editor/SKILL.md
collection_size: 11
category_size: 2451
collection_url: "https://dirskills.com/collections/breaking-brake/cc-wf-studio"
added: 2026-08-16T07:00:08.889Z
last_synced: 2026-08-16T07:00:08.889Z
canonical_url: "https://dirskills.com/skills/cc-workflow-ai-editor"
---

# CC Workflow AI Editor

CC Workflow AI Editor creates and edits visual AI agent workflows through interactive conversation using MCP tools. Use it to create new workflows, modify existing ones, or edit the workflow canvas in CC Workflow Studio via the built-in MCP server.

**Install:**

```bash
npx degit https://github.com/breaking-brake/cc-wf-studio/tree/main/.github/skills/cc-workflow-ai-editor ~/.claude/skills/cc-workflow-ai-editor
```

## README

1. Call `get_workflow_schema` via `cc-workflow-studio` MCP server
2. Call `get_current_workflow` via `cc-workflow-studio` MCP server
3. Ask the user what to create or modify
4. Generate workflow JSON: use built-in sub-agents (builtInType: explore/plan/general-purpose) by default. Only call `list_available_agents` when the user explicitly asks to use an existing custom sub-agent.
5. Apply changes via `cc-workflow-studio` MCP server:
   - **New workflow or structural changes** (add/remove nodes/connections): use `apply_workflow`
   - **Partial updates to existing nodes** (change name, position, or data): use `update_nodes` (more token-efficient)
   - Fix errors if any
6. Ask for feedback, repeat from step 4

## Group Node

Group nodes are visual containers for organizing related nodes on the canvas. They do NOT affect workflow execution.

### Rules
- Group nodes have `type: "group"` and require `data.label` (display name)
- Group nodes must have `style: { width, height }` to define their visual area
- Group nodes CANNOT have connections (no edges to/from group nodes)
- To place a node inside a group, set the child node's `parentId` to the group's `id`
- Child node `position` is relative to the group's top-left corner (not the canvas origin)
- The `name` field on group nodes is not validated (can be empty or omitted)

### Example
```json
{
  "nodes": [
    {
      "id": "group-1",
      "type": "group",
      "name": "",
      "position": { "x": 100, "y": 100 },
      "style": { "width": 400, "height": 300 },
      "data": { "label": "Data Processing" }
    },
    {
      "id": "node-1",
      "type": "subAgent",
      "name": "fetch-data",
      "parentId": "group-1",
      "position": { "x": 50, "y": 50 },
      "data": { "description": "Fetch data from API", "outputPorts": 1 }
    }
  ]
}
```