Claude Workflow Builder
Visual workflow editor for designing multi-agent AI workflows with Claude Code integration.
Features
- Visual Workflow Editor: Drag and drop nodes to create workflows
- AI-Powered Generation: Generate workflows from natural language descriptions
- Agent Nodes: Configure AI agents with roles, instructions, and tools
- Document Nodes: Define shared documents between agents
- Human Approval Nodes: Add checkpoints for human review
- Export to .claude: Generate
.claude/agents/ and .claude/commands/ files
- Local Save/Load: Save workflows as JSON files
- Google Authentication: Secure sign-in with your Google account
Quick Start
- Open Command Palette (
Ctrl+Shift+P / Cmd+Shift+P)
- Run "Claude Workflow: Open Workflow Editor"
- Sign in with your Google account
- Start building your workflow!
AI Generate
Click the "AI Generate" button to create workflows from natural language:
- "Create a code review workflow with style checker and security reviewer"
- "Build a documentation generator that analyzes code and writes docs"
- "Design a test automation pipeline with unit and integration tests"
Usage
- Open Command Palette (
Ctrl+Shift+P / Cmd+Shift+P)
- Run "Claude Workflow: Open Workflow Editor"
- Drag nodes from the left palette onto the canvas
- Connect nodes to define execution flow
- Configure node properties in the right panel
- Click "Export to .claude" to generate files
Exported workflows create the following structure:
.claude/
├── commands/
│ └── your-workflow.md # Main orchestrator command
└── agents/
├── agent-1.md # Agent definitions
└── agent-2.md
Run your workflow in Claude Code:
/your-workflow
Configuration
Open VS Code Settings and search for "Claude Workflow Builder":
| Setting |
Description |
cwb.apiUrl |
Backend API URL |
cwb.supabaseUrl |
Supabase URL for authentication |
cwb.supabaseAnonKey |
Supabase Anonymous Key |
cwb.openaiApiKey |
OpenAI API Key for AI generation |
Commands
| Command |
Description |
Claude Workflow: Open Workflow Editor |
Open the visual editor |
Claude Workflow: Sign In with Google |
Sign in to your account |
Claude Workflow: Sign Out |
Sign out |
Development
# Watch mode for extension
npm run watch
# Dev server for webview
npm run dev:webview
Project Structure
vscode-extension/
├── src/
│ ├── extension/ # VS Code extension code
│ │ ├── extension.ts # Entry point
│ │ ├── webviewProvider.ts
│ │ └── services/
│ ├── webview/ # React app for webview
│ │ ├── src/
│ │ │ ├── App.tsx
│ │ │ ├── components/
│ │ │ ├── store/
│ │ │ └── types/
│ │ └── vite.config.ts
│ └── shared/ # Shared types
├── package.json
└── tsconfig.json
License
MIT
| |
