A powerful, modern IDE specifically designed for developers using Claude Code CLI. This IDE provides a comprehensive graphical interface around the Claude Code CLI tool, solving context loss issues in long coding sessions through intelligent features like persistent knowledge base, multi-instance support, visual task management, and context optimization.
- Run multiple Claude instances simultaneously
- Each instance maintains independent context
- 9 specialized personalities (Frontend, Backend, Architect, etc.)
- Instance-specific working directories
- Visual status indicators
- Create and maintain project-specific documentation
- Full-text search with Lunr.js
- Markdown editor with YAML frontmatter
- Auto-complete for tags and cross-references
- Seamless integration with Claude's context
- Visual Kanban board with drag-and-drop
- Automatic sync with TASKS.md
- Claude can read and update tasks
- Task context preservation
- Project-specific task persistence
- Visual MCP server management
- Quick-add popular servers
- Custom server configuration
- Real-time connection status
- 47+ pre-configured popular servers
- Automate actions based on Claude's activities
- Pre/Post tool use hooks
- Notification and stop event handlers
- Visual hook manager with testing
- Instance-aware hook execution
- Visual editor for custom Claude commands
- Browse project and personal commands
- Template with placeholders support
- Tool permission management
- Live preview and testing
- Build and manage complex prompts with templates
- Template library
- Sub-agent designer
- Resource management
- Visual context meter and optimization
- Smart checkpointing system
- Lightweight context injection
- Memory management (CLAUDE.md)
- Context-aware file operations
- Isolated Development Branches: Create separate working directories for features
- Session Management: Track work contexts with metadata and tags
- Quick Switching: One-click switch between worktrees
- Session Comparison: Compare changes across different sessions
- Automatic Setup: Claude configuration copied to each worktree
- Checkpoint Integration: Link worktrees with checkpoints
- Full IDE Mode: Complete development environment
- Kanban + Claude Mode: Task-focused with AI assistance
- Resizable panels with persistence
- Multi-monitor friendly
- Nuxt 3 - Vue framework with excellent DX
- Vue 3 - Reactive UI with Composition API
- Electron - Cross-platform desktop application
- TypeScript - Type safety throughout
- Node.js 22.x LTS - Runtime environment
- CodeMirror 6 - Advanced code editing
- XTerm.js - Terminal emulation
- Splitpanes - Flexible layouts
- Pinia - State management
- gray-matter - Frontmatter parsing
- Node-PTY - Pseudo terminal for Claude
- Ripgrep - Fast file searching
- Lunr.js - Client-side search
- File System Watchers - Real-time updates
- JSON-RPC - MCP protocol communication
- Simple-git - Git worktree management
Complete development environment with all tools integrated:
- Multi-instance Claude terminals
- File explorer and editor
- Knowledge base and task management
- MCP connections and hooks
Perfect for project management with AI assistance:
- Large Kanban board for task tracking
- Claude terminal for AI-powered insights
- Clean, focused interface
- Node.js 22+ (LTS recommended)
- Claude Code CLI installed and configured
- Git for cloning the repository
- Ripgrep (optional, for faster search)
-
Clone the repository
git clone https://github.com/haidar-ali/clode-studio.git cd clode-studio -
Install dependencies
npm install
-
Compile Electron TypeScript files
npm run electron:compile
-
Start the application
npm run electron:dev
-
Build for production
npm run dist
Ensure Claude Code CLI is installed:
# Install Claude Code CLI
npm install -g claude-code
# Verify installation
claude --version- Launch the application
- Select workspace using the folder button
- Choose layout mode (Full IDE or Kanban+Claude)
- Start coding with Claude assistance!
- Click + to create new instance
- Name your instance (e.g., "Frontend", "API")
- Select personality from dropdown
- Each instance maintains separate context
- 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
- Open Commands tab
- Browse existing commands
- Create new with visual editor
- Test commands before saving
- Use in any Claude instance
- Open Prompt Studio tab
- Build complex prompts with templates
- Design sub-agents for specialized tasks
- Manage prompt resources
- Save to template library
- Press Cmd/Ctrl + Shift + H for Hook Manager
- Add hooks for tool events
- Test with simulated events
- Enable/disable as needed
- Click MCP tab
- Browse popular servers
- Quick-add with one click
- Configure custom servers
- Monitor connection status
-
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
-
Managing Sessions
- Each worktree creates an associated session
- Sessions track when created, last accessed
- Add metadata like task descriptions and tags
- Compare sessions to see differences
-
Switching Worktrees
- Click on any worktree card to switch
- All IDE features update to new context
- Claude instances restart in new directory
- File explorer refreshes automatically
-
Session Comparison
- Click compare button to see differences
- View files added/removed/modified
- See commit divergence from main branch
- Useful for reviewing changes before merge
- 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
- Visual context usage meter
- Checkpoint creation and restoration
- Smart file inclusion
- Context pruning suggestions
- Memory file integration
- Automatic TASKS.md synchronization
- Drag-and-drop between columns
- Claude can read/update tasks
- Visual progress tracking
- Markdown-based persistence
- Global project search
- Regex support
- Multi-file replace
- Search history
- Ripgrep integration
- Minimum 3-character search requirement
- 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
- Cleanup Tools: Prune old worktrees when done
Comprehensive guides available in /docs:
- Fork the repository
- Create feature branch:
git checkout -b feature/amazing-feature - Commit changes:
git commit -m 'Add amazing feature' - Push to branch:
git push origin feature/amazing-feature - Open Pull Request
- 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
# 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 issuesClaude 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
- Close unused Claude instances
- Use checkpoint system for long sessions
- Enable context optimization
- Limit file watchers in large projects
- Use specific personalities for tasks
- All data stored locally
- No external API calls (except MCP)
- Secure IPC communication
- Sandboxed file operations
We welcome contributions! Please see CONTRIBUTING.md for guidelines.
MIT License - see LICENSE file for details.
- Anthropic for Claude and Claude Code CLI
- Vue.js Team for the amazing framework
- Electron Team for desktop capabilities
- CodeMirror for the editor component
- MCP Community for server ecosystem
- All Contributors who improve this project
- Plugin system for extensions
- Collaborative features
- Cloud sync for settings
- Mobile companion app
- Voice commands
- AI-powered code review
- Integrated debugging
- Performance profiling
Built with ❤️ for the Claude Code community
For questions, issues, or contributions, please visit our GitHub repository.