A modular, AI-first IDE built specifically for developers using Claude Code CLI. This IDE reimagines the traditional development environment with a flexible 3-dock system that lets you customize your workspace exactly how you need it. Built around the Claude Code CLI tool, it solves context loss issues in long coding sessions through intelligent features like persistent knowledge base, multi-instance support, visual task management, and context optimization.
🎨 What Makes Clode Studio Different?
Unlike traditional IDEs with fixed layouts, Clode Studio introduces a revolutionary 3-dock modular system that adapts to your workflow:
🔧 Modular Everything: Every feature is a draggable module
🎯 AI-First Design: Claude AI is deeply integrated, not an afterthought
🚀 Workflow Flexibility: Switch between coding, planning, and research modes instantly
💾 State Preservation: Your layout and context persist across sessions
⚡ Performance Focus: Lazy-loaded modules keep everything fast
✨ Key Features
🎯 Modular 3-Dock System
Left Dock: Primary workspace (Explorer + Editor by default)
Right Dock: AI assistance (Claude instances by default)
# Start in desktop mode (default)
clode-studio
# Start with remote access enabled
clode-studio --hybrid
# Start in headless mode (server only) - requires workspace
clode-studio --headless --workspace=/path/to/project
Manual Installation
Clone the repository
git clone https://github.com/haidar-ali/clode-studio.git
cd clode-studio
Install dependencies
npm install
Compile TypeScript
npm run electron:compile
Start the application
# Desktop mode (development with hot reload)
npm run electron:dev
# Hybrid mode (desktop + remote) with hot reload - HIGH BANDWIDTH
CLODE_MODE=hybrid npm run electron:dev
# Hybrid mode with optimized production build - LOW BANDWIDTH (Recommended for remote)
CLODE_MODE=hybrid npm run electron:remote
# Hybrid mode with custom relay server
RELAY_TYPE=CLODE RELAY_URL=wss://your-relay.example.com CLODE_MODE=hybrid npm run electron:remote
# Hybrid mode with Cloudflare tunnel
RELAY_TYPE=CLOUDFLARE CLODE_MODE=hybrid npm run electron:remote
# Hybrid mode with your own tunnel (ngrok, serveo, etc.)
RELAY_TYPE=CUSTOM CLODE_MODE=hybrid npm run electron:remote
# Headless mode (server only, no GUI) - REQUIRES workspace path
CLODE_WORKSPACE_PATH=/path/to/project npm run electron:headless
# Headless with custom relay URL
RELAY_TYPE=CLODE RELAY_URL=wss://your-relay.com CLODE_WORKSPACE_PATH=/path/to/project npm run electron:headless
Prerequisites
Node.js 20+ (installed automatically on macOS)
Git (installed automatically on macOS)
Claude Code CLI (optional, for enhanced features)
Ripgrep (optional, for faster search)
⚙️ Configuration
Claude Code CLI Setup
Ensure Claude Code CLI is installed:
# Install Claude Code CLI
npm install -g claude-code
# Verify installation
claude --version
Headless Mode (Server Only)
Run Clode Studio as a headless server without any GUI, perfect for cloud deployments and remote servers:
# Basic headless mode (uses CLODE relay by default)
CLODE_WORKSPACE_PATH=/path/to/project npm run electron:headless
# With custom relay server
RELAY_TYPE=CLODE RELAY_URL=wss://your-relay.com CLODE_WORKSPACE_PATH=/path/to/project npm run electron:headless
# With Cloudflare tunnel
RELAY_TYPE=CLOUDFLARE CLODE_WORKSPACE_PATH=/path/to/project npm run electron:headless
# Local network only (no external access)
RELAY_TYPE=LOCAL CLODE_WORKSPACE_PATH=/path/to/project npm run electron:headless
Important: CLODE_WORKSPACE_PATH is required for headless mode. The server will exit with an error message if not provided.
Remote Access Setup
Clode Studio offers multiple options for remote access via the RELAY_TYPE environment variable.
Optimized Remote Mode (Recommended)
For remote access, use the optimized production build to save 70-80% bandwidth:
# Auto-detect if rebuild needed (recommended)
RELAY_TYPE=CLODE CLODE_MODE=hybrid npm run electron:remote
# Force rebuild before running
RELAY_TYPE=CLODE CLODE_MODE=hybrid npm run electron:build
# Use existing build (fastest startup)
RELAY_TYPE=CLODE CLODE_MODE=hybrid npm run electron:preview
# Development mode with hot reload (high bandwidth)
RELAY_TYPE=CLODE CLODE_MODE=hybrid npm run electron:dev
Benefits of optimized mode:
70-80% bandwidth reduction
No hot reload overhead
Minified and compressed assets
Faster loading times
Auto-detects when rebuild is needed
Remote Access Options
Option 1: Clode Relay (Default)
# Uses relay.clode.studio automatically
CLODE_MODE=hybrid npm run electron:dev
# Or with a custom relay server
RELAY_TYPE=CLODE RELAY_URL=wss://your-relay.example.com CLODE_MODE=hybrid npm run electron:dev
# The app will:
# 1. Connect to relay server
# 2. Get a unique subdomain (e.g., abc123.relay.clode.studio)
# 3. Generate QR code and connection URL
Option 2: Cloudflare Tunnel
# Uses Cloudflare's quick tunnel (no account needed)
RELAY_TYPE=CLOUDFLARE CLODE_MODE=hybrid npm run electron:dev
# Generates a .trycloudflare.com URL
# Requires cloudflared installed on your system
# Start Clode Studio
RELAY_TYPE=CUSTOM CLODE_MODE=hybrid npm run electron:dev
# In another terminal, start your preferred tunnel on port 3000:
npx tunnelmole@latest 3000
# OR
npx localtunnel --port 3000
# OR
ngrok http 3000
# OR
ssh -R 80:localhost:3000 serveo.net
Option 4: Local Network Only
# No external access, LAN only
RELAY_TYPE=NONE CLODE_MODE=hybrid npm run electron:dev
How the Relay Works
The relay server provides HTTP-over-WebSocket tunneling, similar to ngrok or Cloudflare Tunnel:
Desktop connects to relay server via WebSocket
Relay assigns unique subdomain based on connection ID
Remote devices access via https://[subdomain].relay.clode.studio
Relay forwards HTTP requests through WebSocket to desktop
Desktop processes requests and sends responses back
Authentication handled locally by desktop (tokens never leave your machine)
Technical Details:
Uses wildcard DNS (*.relay.clode.studio) for subdomain routing
Each desktop connection gets a unique 6-character subdomain
HTTP requests are serialized and sent through WebSocket frames
Supports streaming responses for large files
Handles binary data and all HTTP methods
No data is stored on relay server (pure passthrough)
Security Features
Token-based auth: Each device gets a unique token
Pairing codes: Easy manual entry for devices without QR scanning
Local validation: Desktop validates all tokens locally
Automatic expiry: Tokens expire after configured time
Instant revocation: Remove device access immediately from desktop
🎯 How to Use
Getting Started
Launch the application
Select workspace using the folder button
Customize your layout by dragging modules between docks
Start coding with Claude assistance!
Quick Layout Tips
For Development: Keep Editor in left, Claude in right, Terminal below
For Planning: Move Tasks to left dock, keep Claude accessible in right
For Research: Put Knowledge in left, split Claude + Prompts in right
Need Space?: Hide right sidebar with the toggle, minimize bottom dock
Reset Layout: Settings → Reset Layout to restore defaults
Multi-Instance Claude
Click + to create new instance
Name your instance (e.g., "Frontend", "API")
Select personality from dropdown
Each instance maintains separate context
Knowledge Base
Click Knowledge tab
Create entries with New button
Use markdown with frontmatter for metadata
Double-click titles to edit inline
Claude automatically accesses your knowledge
Custom Slash Commands
Open Commands tab
Browse existing commands
Create new with visual editor
Test commands before saving
Use in any Claude instance
Prompt Engineering
Open Prompt Studio tab or press Cmd/Ctrl+P
Build complex prompts with templates
Design sub-agents for specialized tasks
Manage prompt resources
Save to template library
AI Code Intelligence
Ghost Text
Automatically appears as you type after a short delay
Press Tab to accept suggestions
Press Escape to dismiss
Press Cmd/Ctrl+G to manually trigger
Configure delay in Autocomplete Settings
Smart Autocomplete
Press Cmd/Ctrl+Space for dropdown completions
Multiple providers: LSP, Claude AI, and local cache
Real-time filtering as you type
Provider indicators show source
Code Generation
Press Cmd/Ctrl+P for quick prompt
Describe what you want to generate
AI loading indicator shows progress
Diff view shows changes by default
Accept or reject generated code
Hooks Automation
Press Cmd/Ctrl + Shift + H for Hook Manager
Add hooks for tool events
Test with simulated events
Enable/disable as needed
MCP Servers
Click MCP tab
Browse popular servers
Quick-add with one click
Configure custom servers
Monitor connection status
Snapshots & Checkpoints
Creating Snapshots
Click camera icon for instant snapshot
Schedule automatic snapshots (hourly/daily)
Add tags and descriptions
Smart storage only saves changed files
Comparing Snapshots
Select any two snapshots to compare
Visual diff viewer shows all changes
File-by-file comparison available
Export differences as patches
Restoring from Snapshots
Browse snapshot contents visually
Restore entire project or specific files
Preview changes before applying
Non-destructive restore options
Git Worktrees & Sessions
Creating a Worktree
Click the + button in the Worktree panel
Enter branch name (new or existing)
Optionally provide session name and description
Claude settings automatically copied to new worktree
All Claude instances preserved during creation
Managing Sessions
Each worktree can have an associated session
Sessions track metadata, descriptions, and tags
Visual indicators show active worktree
Lock worktrees to prevent accidental deletion
Switching Worktrees
Click "Switch" on any worktree card
All Claude instances maintain their state
File explorer updates to new directory
Terminal sessions preserved across switches
Comparing Worktrees
Click compare button between any two worktrees
Visual diff viewer shows code differences
See files added/removed/modified
Apply changes from one worktree to another
Customizing Your Workspace
Moving Modules
Drag module tabs between docks
Right-click tabs for quick actions
Some modules have preferred docks (e.g., Claude prefers right dock)
Split Views
Right dock supports split view mode
Show two modules simultaneously
Perfect for Claude + Knowledge or Claude + Prompts
Minimizing Panels
Bottom dock can be minimized
Right sidebar can be hidden
Activity bar can be collapsed
More space for your code when needed
Workspace Presets
Development: Editor + Claude + Terminal
Planning: Tasks + Claude + Knowledge
Research: Knowledge + Claude + Context
DevOps: Terminal + Claude + Worktrees
🔧 Advanced Features
Personality System
Full Stack: General development
Frontend/Backend: Specialized roles
Architect: System design focus
Plumber: DevOps and systems
Theorist: Algorithms and theory
Pedagogue: Teaching mode
Jester: Creative problem-solving
Context Optimization
Visual context usage meter
Checkpoint creation and restoration
Smart file inclusion
Context pruning suggestions
Memory file integration
Task Integration
Automatic TASKS.md synchronization
Drag-and-drop between columns
Claude can read/update tasks
Visual progress tracking
Markdown-based persistence
Search & Replace
Global project search
Regex support
Multi-file replace
Search history
Ripgrep integration
Minimum 3-character search requirement
Language Server Features
Error Detection: Real-time syntax and semantic errors
Quick Fixes: Auto-fix common issues
Refactoring: Smart rename, extract method
Code Navigation: Go to definition, find references
Documentation: Inline documentation on hover
Type Information: See types without leaving editor
Multi-Language: Support for 15+ programming languages
Snapshot Management
Instant Capture: One-click project state snapshots
Scheduled Backups: Automatic snapshots at intervals
Smart Storage: Only changed files tracked
Visual Comparison: Built-in diff viewer
Selective Restore: File-level or full restore
Git Compatible: Works alongside version control
Worktree Management
Isolated Feature Development: Each feature in its own directory
Zero-Conflict Switching: No stashing or committing required
Session Tracking: Remember why each worktree was created
Automatic Configuration: .claude settings copied to each worktree
Branch Protection: Lock worktrees to prevent accidental deletion
Visual Comparison: Compare code between worktrees
State Preservation: Claude instances maintained across operations
Push to branch: git push origin feature/amazing-feature
Open Pull Request
Development Guidelines
Use TypeScript for type safety
Follow Vue 3 Composition API patterns
Add proper error handling
Test in all layout modes
Update documentation for new features
Available Scripts
# Development
npm run electron:compile. # Compile Electron app
npm run electron:dev # Start Electron app in dev mode
npm run dev # Start Nuxt dev server only
# Building
npm run build # Build Nuxt application
npm run electron:build # Build Electron distributables
npm run dist # Complete build pipeline
# Code Quality
npm run typecheck # TypeScript type checking
npm run lint # ESLint checking
npm run lint:fix # Auto-fix linting issues
🐛 Troubleshooting
Common Issues
Claude not starting
Verify Claude Code CLI is installed
Check terminal for error messages
Ensure proper permissions
Knowledge base not loading
Check .claude/knowledge/ directory exists
Verify file permissions
Restart the application
MCP connection failed
Verify server URL/command
Check firewall settings
Review server logs
Search not working
Install ripgrep: brew install ripgrep (macOS)
Falls back to Node.js search if unavailable
Minimum 3 characters required to search
Worktree issues
Ensure Git repository is initialized
Check Git version (2.17+ required for worktrees)
Verify branch names don't contain spaces
Remove locks with force option if needed
📈 Performance Tips
Close unused Claude instances
Use checkpoint system for long sessions
Enable context optimization
Limit file watchers in large projects
Use specific personalities for tasks
🔒 Security
All data stored locally
No external API calls (except MCP)
Secure IPC communication
Sandboxed file operations
Contributing
We welcome contributions! Please see CONTRIBUTING.md for guidelines.
