How breaking-brake/cc-wf-studio works
CC Workflow Studio is a visual designer and interchange layer for AI-agent workflows, with VS Code, CLI, and MCP entry points over a shared workflow definition. The principal path is authoring a canvas workflow, validating its node structure, then exporting it for an agent or running it from the editor. Separate capabilities include AI-assisted editing, MCP tool integration, workflow preview, and Slack sharing. The README documents the shared-file and agent workflows; sampled source confirms selected UI, server, and service behavior, but not every subsystem’s internal wiring.
Main entry points: App.tsx Editor canvas · cli.ts CLI commands · mcp.ts MCP server · extension.ts VS Code host
Components 21
Workflow authoring
- Editor canvas
packages/vscode/src/webview/src/App.tsx - VS Code host
packages/vscode/src/extension/extension.ts - Canvas state
packages/vscode/src/webview/src/stores/workflow-store.ts - AI refinement
packages/vscode/src/extension/commands/workflow-refinement.ts
Workflow model
- workflow.json
- Node schemas
packages/core/src/schema/index.ts - Workflow validation
packages/core/src/utils/validate-workflow.ts - Workflow export
packages/core/src/services/workflow-export.ts
CLI and MCP
- CLI commands
packages/cli/src/cli.ts - Browser preview
packages/cli/src/preview/server.ts - MCP server
packages/mcp/src/mcp.ts - Workflow tools
packages/mcp/src/tools.ts
Agent execution
- Agent skills
- Workflow execution
packages/vscode/src/extension/services/execution-session-manager.ts - Run commentary
packages/vscode/src/extension/services/commentary-session-manager.ts
Integrations
- MCP integration
packages/vscode/src/extension/commands/mcp-handlers.ts - Slack sharing
packages/vscode/src/extension/commands/slack-share-workflow.ts - Slack API
packages/vscode/src/extension/services/slack-api-service.ts
Other components
- Workflow designer
- AI agent client
- Slack
Connections 27
- Workflow designer → Editor canvas: designs
- Editor canvas → Canvas state: updates state
- Editor canvas → workflow.json: saves and loads
- workflow.json → Editor canvas: loads for editing
- Editor canvas → VS Code host: sends messages
- VS Code host → Editor canvas: posts updates
- Editor canvas → Node schemas: configures nodes
- workflow.json → Workflow validation: validates
- CLI commands → Workflow validation: validates
- CLI commands → Workflow export: exports
- Workflow export → Agent skills: writes formats
- CLI commands → workflow.json: reads and writes
- CLI commands → Browser preview: starts preview
- Browser preview → workflow.json: serves workflow
- AI agent client → MCP server: uses tools
- MCP server → Workflow tools: dispatches
- Workflow tools → workflow.json: reads and edits
- MCP server → Editor canvas: updates canvas
- Editor canvas → AI refinement: requests refinement
- AI refinement → workflow.json: refines workflow
- Editor canvas → Workflow execution: starts run
- Workflow execution → Run commentary: manages session
- Editor canvas → MCP integration: requests tools
- MCP integration → MCP server: queries server
- Editor canvas → Slack sharing: shares workflow
- Slack sharing → Slack API: calls API
- Slack API → Slack: exchanges data