A sleek, dark-themed development environment with advanced AI capabilities
The Grok IDE is a cutting-edge development environment inspired by the interfaces of Metal Gear Solid. Built with a sleek black aesthetic and white highlights, this IDE combines traditional coding capabilities with powerful AI assistance from xAI's Grok.
- Dark Metal Gear Solid-inspired theme with white accents
- Resizable panels for customizable workspace layout
- Advanced file explorer with context menu operations
- Multi-tab editor with syntax highlighting indicators
- Real-time status monitoring with system status bar
- Multi-mode AI assistant (Code, Image, Chat)
- Code generation and analysis with insertion capabilities
- Image generation using xAI's image models
- Context-aware assistance with file content integration
- Advanced code formatting with markdown support
- Native file system access using File System API
- Create files and folders directly from the interface
- Auto-save functionality with modification tracking
- Batch save operations for multiple files
- Real-time file tree updates
- AI-generated code insertion directly into editor
- File creation from AI code blocks with proper extensions
- Copy and insert operations for generated content
- Syntax-aware file icons for better organization
- Node.js (v14 or higher)
- NPM (Node Package Manager)
- xAI API Key for Grok integration
Use our automated setup script that handles common installation issues:
# macOS/Linux
chmod +x setup.sh
./setup.sh
# Windows
setup.bat- Clone the repository:
git clone <repository-url>
cd grok-ide- Install dependencies:
npm installHaving installation issues? See INSTALL.md for comprehensive troubleshooting.
Common fix for npm cache errors:
npm cache clean --force
npm install- Configure environment:
Create a
.envfile in the root directory:
XAI_API_KEY=your_xai_api_key_here
PORT=3000- Start the server:
npm start-
Access the interface: Open your browser and navigate to
http://localhost:3000 -
Begin operations:
- Click "OPEN FOLDER" to load your project
- Use the AI assistant for code generation and analysis
- Create and edit files with the editor
- CTRL/CMD + S: Save current file
- CTRL/CMD + SHIFT + S: Save all files
- Right-click in explorer: Context menu for file/folder creation
- CTRL/CMD + Enter: Send AI request
- Mode switching: Toggle between Code, Image, and Chat modes
- Context inclusion: Include current file content in AI requests
- Tab management: Click tabs to switch files, × to close
- Auto-save: Automatic saving with modification indicators
- Code insertion: Direct insertion from AI-generated code blocks
grok-ide/
├── public/
│ └── GrokIDE.html # Main interface
├── server.js # Server with AI endpoints
├── package.json # Dependencies
├── .env # Configuration
└── README.md # Documentation
POST /api/completion- Grok chat completionsPOST /api/generate-image- AI image generationPOST /api/analyze-code- Code analysis and reviewPOST /api/analyze-project- Project structure analysis
GET /api/health- System status checkGET /- Main interfaceGET /legacy- Legacy interface access
The interface uses a carefully crafted color scheme:
- Primary Black:
#0a0a0a- Main background - Secondary Black:
#111111- Panel backgrounds - Tertiary Black:
#1a1a1a- Component backgrounds - White Highlights:
#ffffff- Accents and borders - Turquoise Text:
#40e0d0- Subtle status text
- Environment variable protection for API keys
- Request validation and sanitization
- Error handling with system feedback
- Secure file system operations
npm Install Errors (EEXIST, EACCES, cache issues):
If you encounter errors like:
npm error code EEXIST
npm error errno EACCES
npm error Invalid response body while trying to fetch...
Quick Fix:
# Clear npm cache
npm cache clean --force
# Remove old files
rm -rf node_modules package-lock.json
# Fresh install
npm installOr use the automated setup script:
# macOS/Linux
./setup.sh
# Windows
setup.batFor comprehensive troubleshooting: See INSTALL.md for detailed solutions to all installation issues.
AI Features Not Working:
- Verify XAI_API_KEY is set in .env file
- Check API key validity and permissions
- Ensure internet connection for AI requests
File System Access Denied:
- Use a modern browser supporting File System API
- Grant necessary permissions when prompted
- Ensure HTTPS in production environments
Performance Issues:
- Close unused tabs to free memory
- Limit AI context size for large files
- Use browser developer tools to monitor performance
- Dark theme implementation
- Multi-mode AI assistant integration
- Advanced file operations
- Code generation and insertion
- Image generation capabilities
- Resizable interface panels
- Context menu operations
- Real-time status monitoring
We're embarking on a comprehensive upgrade journey to transform Grok IDE into a production-ready, enterprise-grade development environment!
📋 View the Complete 5-Phase Upgrade Plan
Completed: November 21, 2025 | Status: Production-Ready Architecture
Phase 1 has successfully transformed Grok IDE from a monolithic application into a modern, modular, enterprise-ready codebase:
🏗️ Architecture Achievements:
- ✅ Modular structure: 1 file (1860 lines) → 15+ focused modules (~150 lines avg)
- ✅ Clean MVC pattern with separation of concerns
- ✅ Dependency injection and service layer architecture
- ✅ Centralized configuration management
🔒 Security Enhancements:
- ✅ 7 layers of security protection
- ✅ Rate limiting (100 req/15min general, 20 req/min AI endpoints)
- ✅ Helmet security headers (CSP, HSTS, XSS Protection)
- ✅ Input sanitization and XSS prevention
- ✅ CORS and request validation
📝 Error Handling & Logging:
- ✅ Winston structured logging with file rotation
- ✅ Custom error classes with status codes
- ✅ Global error handler with environment-aware responses
- ✅ Separate logs for errors, exceptions, and rejections
🧪 Testing Infrastructure:
- ✅ Jest testing framework configured
- ✅ Unit and integration test suites
- ✅ Code coverage reporting
- ✅ Mock setup for services
📚 Documentation:
- ✅ Comprehensive architecture documentation (src/README.md)
- ✅ Environment configuration template (.env.example)
- ✅ Inline code documentation
- ✅ Testing documentation
Getting Started with Phase 1:
# Install new dependencies
npm install
# Start refactored server
npm start
# Run tests
npm test
# Development mode with auto-reload
npm run devCompleted: November 21, 2025 | Status: Production-Ready Modern UI
Phase 2 has successfully transformed Grok IDE with a stunning modern UI, comprehensive design system, and world-class user experience:
🎨 Design System:
- ✅ Comprehensive design tokens (colors, spacing, typography, transitions)
- ✅ 6 Beautiful themes: Metal Gear, Cyberpunk, Matrix, Light, Nord, Dracula
- ✅ Modular CSS architecture with 6 specialized stylesheets
- ✅ Smooth animations and micro-interactions
- ✅ Loading skeletons instead of spinners
⌨️ Advanced UI Components:
- ✅ Command Palette (Ctrl+K) - Quick access to all commands
- ✅ Toast Notification System with 4 types (success, error, warning, info)
- ✅ Comprehensive Settings Panel with theme customization
- ✅ Keyboard Shortcut Manager with 20+ shortcuts
- ✅ Breadcrumb navigation
- ✅ Zen/distraction-free mode (F11)
♿ Accessibility (WCAG 2.1 AA):
- ✅ Keyboard navigation for all features
- ✅ Screen reader support with ARIA labels
- ✅ Skip links for quick navigation
- ✅ High contrast mode support
- ✅ Reduced motion preferences
- ✅ Focus indicators and management
🔧 Technical Improvements:
- ✅ Modular JavaScript architecture (6 ES6 modules)
- ✅ Settings persistence with localStorage
- ✅ Theme hot-swapping without page reload
- ✅ Extensible component system
- ✅ Responsive design patterns
Access Phase 2:
- Main:
http://localhost:3000(now serves v2) - Direct:
http://localhost:3000/v2 - Legacy Phase 1:
http://localhost:3000/v1
Completed: November 21, 2025 | Status: Production-Ready Advanced IDE
Phase 3 has successfully transformed Grok IDE into a fully-featured development environment with Monaco Editor, streaming AI, Git integration, and advanced file management:
💻 Monaco Editor Integration:
- ✅ Full Monaco Editor (VS Code's editor engine)
- ✅ IntelliSense with intelligent code completion
- ✅ Multi-cursor editing and bracket pair colorization
- ✅ Code folding, outlining, and minimap
- ✅ Find & Replace with regex support
- ✅ Format document capability
- ✅ Language detection and syntax highlighting for 20+ languages
🤖 Enhanced AI Features:
- ✅ Real-time streaming AI responses (no more waiting!)
- ✅ Conversation history with search and export
- ✅ AI context management (token counting)
- ✅ Multiple AI modes: Code, Chat, Image, Review
- ✅ Multi-file context support
- ✅ AI model selection (grok-beta, grok-vision-beta)
- ✅ Code insertion directly into editor
📁 Advanced File Management:
- ✅ Drag-and-drop file support
- ✅ Recent files list (last 10 files)
- ✅ Favorites system
- ✅ File templates (HTML, React, Express, etc.)
- ✅ File icons by type
🔍 Global Search:
- ✅ Search across all files in project
- ✅ Regex and case-sensitive search options
- ✅ Search results panel with preview
- ✅ Quick file switcher (Ctrl+P)
🔀 Git Integration:
- ✅ Git status with changed files
- ✅ Stage and commit operations
- ✅ Branch management (create, switch, list)
- ✅ Commit history viewer
- ✅ Push/pull operations
- ✅ Visual git indicators in UI
Access Phase 3:
- Main:
http://localhost:3000(now serves v4) - Direct:
http://localhost:3000/v3 - Phase 2:
http://localhost:3000/v2 - Phase 1:
http://localhost:3000/v1
Completed: November 21, 2025 | Status: Production-Ready Complete IDE
Phase 4 has successfully transformed Grok IDE into a fully-featured, professional development environment with advanced tools and ecosystem integration:
💻 Integrated Terminal:
- ✅ Full xterm.js terminal emulator
- ✅ Multiple terminal instances with tabs
- ✅ Terminal themes matching IDE theme
- ✅ Command history and shell customization
- ✅ Built-in commands (help, clear, echo, date, cowsay, etc.)
📝 Markdown & Documentation:
- ✅ Live Markdown preview with marked.js
- ✅ Auto-refresh on edit
- ✅ Side-by-side editing and preview
- ✅ GitHub Flavored Markdown support
- ✅ Syntax highlighting in code blocks
🔧 Developer Tools:
- ✅ JSON/XML formatter and validator
- ✅ Code snippets library (JavaScript, React, HTML, CSS, etc.)
- ✅ Developer console with log filtering
- ✅ REST API testing tool
- ✅ Request/response inspection
📋 Project Management:
- ✅ Task/TODO management system
- ✅ Priority levels (High, Medium, Low)
- ✅ Task persistence with localStorage
- ✅ Completion tracking and filtering
📦 Project Templates:
- ✅ HTML5 Basic template
- ✅ React Component template
- ✅ Express API template
- ✅ Python Script template
- ✅ TypeScript Node template
- ✅ One-click project scaffolding
⌨️ Enhanced Keyboard Shortcuts:
- ✅ Ctrl+` - Toggle Terminal
- ✅ Ctrl+Shift+C - Toggle Developer Console
- ✅ Ctrl+Shift+T - Open Task Manager
- ✅ Ctrl+Shift+M - Toggle Markdown Preview
- ✅ Ctrl+Shift+J - JSON Formatter
- ✅ Ctrl+Shift+S - Code Snippets
- ✅ Ctrl+Shift+A - API Tester
- ✅ Ctrl+Shift+P - Project Templates
🎨 UI Enhancements:
- ✅ Resizable bottom panel for terminal/console
- ✅ Tools dropdown menu in navbar
- ✅ Task count badge
- ✅ Tab-based panel switching
- ✅ Integrated tool access
Technical Implementation:
- ✅ 9 new JavaScript modules (80KB total)
- ✅ Phase 4 components CSS (15KB)
- ✅ xterm.js integration with fit and web-links addons
- ✅ marked.js for markdown rendering
- ✅ Modular architecture with manager classes
- ✅ LocalStorage persistence for tasks and snippets
- ✅ Event-driven panel management
Access Phase 4:
- Main:
http://localhost:3000(now serves v4) - Direct:
http://localhost:3000/v4 - Phase 3:
http://localhost:3000/v3 - Phase 2:
http://localhost:3000/v2 - Phase 1:
http://localhost:3000/v1
Completed: November 21, 2025 | Status: Production-Ready Enterprise IDE
Phase 5 has successfully transformed Grok IDE into a production-ready, enterprise-grade development environment with comprehensive deployment infrastructure, performance optimization, and world-class documentation:
🚀 Progressive Web App (PWA):
- ✅ Service worker with intelligent caching strategies
- ✅ Offline support for core functionality
- ✅ App manifest for installable experience
- ✅ PWA manager with update notifications
- ✅ Background sync capabilities
- ✅ Push notification support (foundation)
🐳 Docker & Deployment:
- ✅ Multi-stage Dockerfile for optimized builds
- ✅ Docker Compose configuration
- ✅ Health checks and monitoring
- ✅ Non-root user security
- ✅ Production-ready image (<200MB)
- ✅ Container orchestration ready
⚙️ CI/CD Pipeline:
- ✅ GitHub Actions workflow
- ✅ Automated testing (unit, integration, E2E)
- ✅ Security scanning (npm audit, Snyk)
- ✅ Docker image building and publishing
- ✅ Lighthouse performance testing
- ✅ Automated deployment to staging/production
- ✅ Multi-browser testing support
🧪 End-to-End Testing:
- ✅ Playwright test framework configured
- ✅ 25+ E2E test scenarios
- ✅ Cross-browser testing (Chrome, Firefox, Safari)
- ✅ Mobile viewport testing
- ✅ Accessibility testing
- ✅ Performance regression testing
- ✅ Visual regression testing foundation
🔒 Security Enhancements:
- ✅ Comprehensive CSP headers (already in Phase 1)
- ✅ HSTS with preload
- ✅ XSS protection and input sanitization
- ✅ Rate limiting (general + AI-specific)
- ✅ Dependency vulnerability scanning
- ✅ Security audit workflow
- ✅ API key validation and rotation support
📊 Performance Optimization:
- ✅ Performance monitoring system
- ✅ Web Vitals tracking (LCP, FID, CLS)
- ✅ Memory usage monitoring
- ✅ Resource loading optimization
- ✅ Performance scoring and recommendations
- ✅ Lazy loading support
- ✅ Compression middleware
📚 Comprehensive Documentation:
- ✅ 500+ line User Guide (USERGUIDE.md)
- ✅ Complete keyboard shortcuts reference
- ✅ API documentation
- ✅ Deployment guides (Docker, standard)
- ✅ Troubleshooting section
- ✅ Architecture documentation (from Phase 1)
- ✅ Contributing guidelines
🛠️ Developer Experience:
- ✅ Updated package.json (v5.0.0)
- ✅ npm scripts for all operations
- ✅ Husky for git hooks
- ✅ Lighthouse integration
- ✅ Performance benchmarking tools
- ✅ Development and production modes
Key Deliverables:
- Service worker (250+ lines)
- PWA manifest with shortcuts
- Dockerfile with multi-stage build
- Docker Compose configuration
- GitHub Actions CI/CD pipeline (300+ lines)
- Playwright E2E test suite
- Performance monitor module
- Comprehensive user guide
- Updated documentation
Metrics:
- Bundle Size: Optimized with compression
- Performance Score: Monitoring and recommendations implemented
- Security: Multiple layers of protection
- Test Coverage: E2E scenarios covering all major features
- Documentation: 100% feature coverage
Deployment Options:
# Standard deployment
npm install && npm start
# Docker deployment
docker-compose up -d
# Run all tests
npm run test:all
# Performance audit
npm run lighthouse
# Security audit
npm run security:auditOur major upgrade plan includes 5 comprehensive phases covering:
-
Phase 1: Foundation & Architecture Modernization ✅ COMPLETE
- ✅ Code refactoring and modular architecture
- ✅ Security hardening and authentication
- ✅ Testing infrastructure
- ✅ Performance optimization foundation
-
Phase 2: UI/UX Enhancement & Design System ✅ COMPLETE
- ✅ Comprehensive design system implementation
- ✅ 6 theme support with hot-swapping
- ✅ Advanced animations and micro-interactions
- ✅ Full WCAG 2.1 AA accessibility compliance
- ✅ Command palette and keyboard shortcuts
- ✅ Notification system and settings panel
-
Phase 3: Core Features Enhancement ✅ COMPLETE
- ✅ Monaco Editor integration with IntelliSense
- ✅ Streaming AI responses and conversation history
- ✅ Git integration with visual operations
- ✅ Advanced search and navigation
- ✅ Drag-and-drop file management
- ✅ Recent files and favorites
-
Phase 4: Advanced Features & Ecosystem ✅ COMPLETE
- ✅ Integrated terminal with xterm.js
- ✅ Markdown preview with live reload
- ✅ JSON/XML formatter and validator
- ✅ Code snippets library
- ✅ Developer console integration
- ✅ REST API testing tool
- ✅ Task/TODO management system
- ✅ Project templates and scaffolding
-
Phase 5: Polish, Production & Deployment ✅ COMPLETE
- ✅ Performance optimization and PWA features
- ✅ Security audit and hardening
- ✅ Comprehensive documentation
- ✅ CI/CD pipeline and deployment automation
- ✅ Docker containerization
- ✅ E2E testing with Playwright
- ✅ Performance monitoring
Progress: ALL 5 PHASES COMPLETE! (100%) | Status: Production-Ready | Achievement: Enterprise-grade IDE with AI integration
See tasks.md for the complete roadmap with detailed tasks and success metrics.
For support and feature requests:
- Check the troubleshooting section
- Review the API documentation
- Submit reports via issues
This project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by Metal Gear Solid interfaces
- Powered by xAI's Grok AI technology
- Built with modern web technologies
- Designed for professional development operations
╔══════════════════════════════════════════════════════════════╗
║ MISSION COMPLETE ║
║ READY FOR DEPLOYMENT ║
╚══════════════════════════════════════════════════════════════╝