AI-Powered Browser IDE

A professional, full-featured coding environment powered by AI, running entirely in your browser.

✨ Features

🤖 AI Assistant

• Natural Language Code Generation: Describe what you want in plain English
• Context-Aware Suggestions: AI understands your entire codebase
• Real-time Streaming: See responses as they're generated
• Smart Explanations: Get instant code explanations and debugging help

💻 Professional Code Editor

• Monaco Editor: The same editor that powers VS Code
• Syntax Highlighting: Support for HTML, CSS, JavaScript, Python, and more
• IntelliSense: Smart autocomplete and code suggestions
• Error Detection: Real-time linting and error highlighting
• Multi-file Support: Work on multiple files simultaneously

👁️ Live Preview

• Real-time Updates: See changes instantly as you type
• Sandboxed Environment: Safe execution of your code
• Auto-refresh: Automatic updates on file changes
• Error Boundaries: Graceful handling of runtime errors

🎨 Modern UI/UX

• Dark & Light Themes: Toggle between themes with animated transitions
• RGB Fluid Borders: Stunning animated border effects
• Responsive Design: Works on desktop, tablet, and mobile
• Distraction-free: Clean, modern interface inspired by Bolt.new and Lovable.dev

📁 File Management

• Virtual File System: All files stored in your browser
• File Explorer: Easy navigation with file icons
• Multi-file Editing: Switch between files seamlessly
• Auto-save: Your work is automatically saved

🚀 Quick Start

Try it Now

Visit the live demo and start coding immediately!

Local Development

# Clone the repository
git clone <YOUR_GIT_URL>
cd <YOUR_PROJECT_NAME>

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:8080 in your browser.

📖 How to Use

1. AI Assistant (Left Panel)

• Type your request in natural language
• Ask for code generation, explanations, or debugging help
• Example: "Create a todo list component with React"

2. File Explorer (Middle-Left)

• Click on files to open them in the editor
• Toggle visibility with the "Hide Files" button
• Files auto-save as you type

3. Code Editor (Center)

• Full Monaco Editor with syntax highlighting
• Use Ctrl+Space for autocomplete
• Format code with Alt+Shift+F

4. Live Preview (Right)

• See your HTML/CSS/JS rendered in real-time
• Toggle preview with "Editor Only" button
• Preview automatically updates on file changes

5. Theme Toggle (Top Right)

• Switch between dark and light themes
• Preference saved automatically
• Animated RGB borders in both themes

🛠️ Technology Stack

• Frontend: React 18, TypeScript, Tailwind CSS
• Editor: Monaco Editor (@monaco-editor/react)
• AI: Lovable AI Gateway (Google Gemini 2.5 Flash)
• Backend: Supabase Edge Functions
• Routing: React Router v6
• UI Components: shadcn/ui
• State: React Context API

📂 Project Structure

├── src/
│   ├── components/
│   │   ├── ide/
│   │   │   ├── PromptPanel.tsx      # AI chat interface
│   │   │   ├── FileExplorer.tsx     # File navigation
│   │   │   ├── MonacoEditor.tsx     # Code editor
│   │   │   ├── LivePreview.tsx      # Preview window
│   │   │   └── OnboardingModal.tsx  # Welcome screen
│   │   └── ui/                      # UI components
│   ├── contexts/
│   │   ├── ThemeContext.tsx         # Theme state
│   │   └── FileSystemContext.tsx    # File state
│   ├── hooks/
│   │   └── useChat.ts               # AI streaming
│   └── pages/
│       └── Index.tsx                # Main IDE page
├── supabase/
│   └── functions/
│       └── chat/                    # AI backend
└── DEPLOYMENT.md                    # Deployment guide

🎯 Key Features Explained

Monaco Editor Integration

The IDE uses Monaco Editor, the same technology that powers Visual Studio Code:

• Full TypeScript support
• Rich IntelliSense
• Code folding
• Find and replace
• Multi-cursor editing

AI-Powered Code Generation

Leverages Google's Gemini 2.5 Flash model:

• Fast response times
• Context-aware suggestions
• Multi-language support
• Free during promotional period

Virtual File System

Files are stored in browser memory:

• Instant file switching
• No server uploads needed
• Privacy-first design
• localStorage persistence

Live Preview Engine

Real-time rendering with:

• Automatic CSS/JS injection
• Sandboxed execution
• Error recovery
• Hot reload

🔒 Security & Privacy

• Client-side Storage: All files stay in your browser
• Sandboxed Preview: Code runs in isolated iframe
• No External Tracking: Privacy-first design
• Secure AI Gateway: Backend API key management

♿ Accessibility

• Full keyboard navigation
• ARIA labels on all controls
• Screen reader support
• High contrast themes
• Focus management

🌐 Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Opera 76+

📝 Examples

Generate a React Component

Prompt: "Create a button component with hover effects"
AI generates: Complete React component with styling

Create a Landing Page

Prompt: "Build a modern landing page with hero section"
AI generates: HTML + CSS + responsive design

Debug Code

Prompt: "Why isn't my click handler working?"
AI explains: Event binding and common mistakes

🚀 Deployment

Lovable (One-click)

1. Click "Share" → "Publish"
2. Done! Your IDE is live

Vercel

vercel --prod

Netlify

netlify deploy --prod

See DEPLOYMENT.md for detailed instructions.

🤝 Contributing

This is a template project - fork it and make it your own!

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

📄 License

MIT License - see LICENSE file for details

🙏 Acknowledgments

• Monaco Editor by Microsoft
• shadcn/ui for beautiful components
• Lovable for the AI gateway
• React team for the framework

📞 Support

• Documentation: docs.lovable.dev
• Discord: Join our community
• Issues: Report bugs on GitHub

---

Built with ❤️ using Lovable, React, Monaco Editor, and AI

Live Demo | Documentation | Community