An AI-driven, fully in-browser development environment that lets users generate, edit, run, debug, and export React applications — without any backend execution or cloud VMs.
Inspired by tools like Bolt and Lovable, this project demonstrates how far modern browsers can be pushed using WebContainers, LLMs, and careful system design.
- Generate full React applications from natural language prompts
- Edit project files directly in a VS Code–like editor
- See live previews via a Vite dev server running inside the browser
- Detect build errors and automatically ask the AI to fix them
- Browse and edit a real virtual filesystem
- Export the entire project as a downloadable ZIP
- Runs fully client-side, deployed on Vercel
No servers. No Docker. No VMs.
Everything runs inside the browser.
- Uses StackBlitz WebContainers to emulate a Node.js environment
- Supports
npm install,npm run dev, andnpm run build - Real filesystem with read/write access
- User prompts are first enhanced into a structured specification
- AI generates full application code (
src/App.jsx) - Build failures are captured and sent back to the AI for auto-fixing
- Supports iterative self-healing code generation
- File tree with nested directories
- Monaco Editor (VS Code engine) for editing
- Tabbed files, autosave, and keyboard shortcuts
- Terminal output and live preview iframe
- Download the complete project as a ZIP
- Option to export only build output or specific files
- Client-side ZIP generation (no backend required)
- Correct handling of COOP/COEP headers
- Ensures
SharedArrayBuffersupport for WebContainers - Fully compatible with modern browser security requirements
Frontend
- React + TypeScript
- Vite
- Tailwind CSS
- Monaco Editor
- JSZip
Runtime
- StackBlitz WebContainer API
AI
- Large Language Model (via Groq API)
- Prompt enhancement + code generation
- Error-aware feedback loop
Deployment
- Vercel (with COOP/COEP headers enabled)'
- Render (for backend)
- User enters a natural language prompt
- Prompt is enhanced into a detailed application specification
- AI generates React code inside
src/App.jsx - Code is written into the WebContainer filesystem
npm run buildvalidates the app- If errors occur:
- Build output is captured
- Sent back to the AI
- AI returns a fixed version of the file
- Live preview updates via Vite HMR
- User can manually edit files or export the project
This project relies on SharedArrayBuffer, which requires cross-origin isolation.
The following headers are mandatory in production:
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
These headers are explicitly configured during deployment (e.g. via vercel.json).
This is not just an AI demo.
It demonstrates:
- Deep understanding of browser internals
- Real-world use of WebContainers
- Careful handling of browser security constraints
- AI integration beyond “just calling an API”
- System-level thinking applied to frontend engineering
This is effectively a mini cloud IDE — running entirely in the browser.
- Diff view before applying AI fixes
- Undo / rollback AI changes
- Multi-file AI edits
- Command palette (Cmd+K)
- Direct deploy to Netlify / Vercel
- Shareable project links
Built by Gopal Jadhav
If you’re interested in browser-based runtimes, AI-assisted development, or pushing the limits of frontend engineering — feel free to reach out.