3D visualization of Claude Code as an interactive workshop
npm install vibecraft3D visualization of Claude Code as an interactive workshop. Watch Claude move between workstations as it uses tools.
- macOS or Linux (Windows not supported - hooks require bash)
- Node.js 18+
- jq - for hook scripts (brew install jq / apt install jq)
- tmux - for session management (brew install tmux / apt install tmux)
``bash1. Install dependencies
brew install jq tmux # macOSsudo apt install jq tmux # Ubuntu/Debian
Open http://localhost:4003 and use Claude Code normally. You'll see Claude move around the workshop as it uses tools.
From source:
bash
git clone https://github.com/nearcyan/vibecraft
cd vibecraft && npm install && npm run dev
Opens on http://localhost:4002
`To uninstall:
(removes hooks, keeps your data)Browser Control (Optional)
Run Claude in tmux to send prompts from browser:
`bash
tmux new -s claude
claude
`Then use the input field in the visualization with "Send to tmux" checked.
Stations
| Station | Tools | Details |
|---------|-------|---------|
| Bookshelf | Read | Books on shelves |
| Desk | Write | Paper, pencil, ink pot |
| Workbench | Edit | Wrench, gears, bolts |
| Terminal | Bash | Glowing screen |
| Scanner | Grep, Glob | Telescope with lens |
| Antenna | WebFetch, WebSearch | Satellite dish |
| Portal | Task (subagents) | Glowing ring portal |
| Taskboard | TodoWrite | Board with sticky notes |
Features
- Floating context labels - See file paths and commands above active stations
- Thought bubbles - Claude shows thinking animation while processing
- Response capture - Claude's responses appear in the activity feed
- Subagent visualization - Mini-Claudes spawn at portal for parallel tasks
- Cancel button - Send Ctrl+C to interrupt Claude
- Split-screen layout - 60% 3D scene (Workshop), 40% activity feed
- Voice input - Speak prompts with real-time transcription (requires Deepgram API key)
- Attention system - Zones pulse when sessions need input or finish
- Sound effects - Synthesized audio feedback for tools and events (docs/SOUND.md)
- Draw mode - Paint hex tiles with colors, 3D stacking, and text labels (press
)
- Text labels - Add multi-line labels to hex tiles with custom modal
- Zone context menus - Right-click zones for Info (I) or quick Command (C) input
- Station panels - Toggle with P to see recent tool history per workstation
- Context-aware animations - Claude celebrates commits, shakes head on errorsOrchestration (Multi-Claude)
Run multiple Claude instances and direct work to each:
1. Click "+ New" (or
Alt+N) to spawn a new session
2. Configure name, directory, and flags (-r, --chrome, --dangerously-skip-permissions)
3. Click a session or press 1-6 (or Alt+1-6 in inputs) to select it
4. Send prompts to whichever Claude you wantEach session runs in its own tmux, with status tracking (idle/working/offline).
See docs/ORCHESTRATION.md for the full API and architecture.
Keyboard Shortcuts
| Key | Action |
|-----|--------|
|
Tab / Esc | Switch focus between Workshop and Feed |
| 1-6 | Switch to session (extended: QWERTY, ASDFGH, ZXCVBN) |
| 0 / ` | All sessions / overview |
| Alt+N | New session |
| Alt+R | Toggle voice input |
| F | Toggle follow mode |
| P | Toggle station panels |
| D | Toggle draw mode |Draw mode:
1-6 colors, 0 eraser, Q/E brush size, R 3D stack, X clearCLI Options
`bash
vibecraft [options]Options:
--port, -p WebSocket server port (default: 4003)
--help, -h Show help
--version, -v Show version
``See docs/SETUP.md for detailed setup guide.
See CLAUDE.md for technical documentation.
Website: https://vibecraft.sh
MIT