An AI-powered website generator that turns natural language prompts into production-ready, live-previewed web applications in seconds — powered by Gemini 2.5 Flash and WebContainers.
✨ Features · 🛠️ Tech Stack · 📦 Project Structure · 🚀 Getting Started · 💻 Usage · 🤝 Contributing
- 🤖 AI-Powered Code Generation — Generates complete, production-ready React or Node.js projects from plain English descriptions using Google's Gemini 2.5 Flash model.
- 🌐 In-Browser Execution — Runs a full Node.js dev environment entirely inside the browser via WebContainers — zero backend servers, zero cloud VMs.
- 👁️ Instant Live Preview — Preview your generated website in a real embedded iframe with a live dev server — see it the moment it's built.
- 📝 Integrated Code Editor — View and inspect generated source code in a Monaco Editor (the engine behind VS Code) with full syntax highlighting.
- 📂 Interactive File Explorer — Navigate the generated project's file tree with collapsible folders, language-aware icons, and one-click file selection.
- 💬 Iterative Refinement via Chat — Don't like something? Send follow-up prompts to tweak, extend, or restyle your website conversationally.
- 📥 One-Click Export — Download the entire generated project as a bundled file, ready to run locally or deploy to any host.
- 🎨 Premium Glassmorphism UI — Stunning dark-mode interface with floating orbs, gradient effects, animated transitions, and micro-interactions throughout.
- ⚡ Smart Template Detection — AI automatically decides whether to scaffold a React or Node.js project based on the user's intent.
- 🔒 Secure by Default — COOP/COEP headers pre-configured for WebContainer compatibility across all deployment targets.
| Layer | Technology | Purpose |
|---|---|---|
| Framework | Next.js 16 | App Router, Server Actions, Turbopack |
| Language | TypeScript 5 | End-to-end type safety |
| UI Library | React 19 | Component rendering |
| AI Model | Gemini 2.5 Flash | Code generation & prompt analysis |
| Browser Runtime | WebContainers API | In-browser Node.js environment |
| Code Editor | Monaco Editor | Syntax-highlighted code viewer |
| UI Components | shadcn/ui + Radix UI | Accessible, composable primitives |
| Styling | Tailwind CSS 4 | Utility-first CSS |
| Icons | Lucide React | Beautiful open-source icons |
| HTTP Client | Axios | API requests |
| Containerization | Docker | Multi-stage Alpine-based builds |
BlinkBuild/
│
├── app/ # Next.js App Router
│ ├── page.tsx # Landing page — hero + prompt form
│ ├── layout.tsx # Root layout (Geist fonts, metadata)
│ ├── actions.ts # Server Action — redirect to /generate
│ ├── globals.css # Global styles & CSS variables
│ │
│ ├── generate/ # Generation workspace
│ │ ├── page.tsx # Suspense wrapper
│ │ └── generation-content.tsx # Core UI: steps, editor, preview, chat
│ │
│ ├── api/ # API Routes
│ │ ├── template/route.ts # POST — AI selects React vs Node scaffold
│ │ ├── chat/route.ts # POST — Gemini multi-turn code generation
│ │ └── gemini/route.ts # POST — Streaming Gemini endpoint (Edge)
│ │
│ └── lib/ # Shared logic
│ ├── prompt.ts # System prompts & instruction templates
│ ├── steps.ts # boltArtifact XML → Step[] parser
│ ├── constants.ts # WORK_DIR, allowed HTML elements
│ ├── stripindents.ts # Template literal dedent utility
│ └── defaults/
│ ├── react.ts # React + Vite starter scaffold
│ └── node.ts # Node.js starter scaffold
│
├── components/ # React components
│ ├── CodeEditor.tsx # Monaco Editor wrapper (read-only)
│ ├── FileExplorer.tsx # Recursive file tree browser
│ ├── PreviewFrame.tsx # WebContainer → iframe live preview
│ └── ui/ # shadcn/ui primitives
│ ├── badge.tsx
│ ├── button.tsx
│ ├── card.tsx
│ ├── label.tsx
│ ├── progress.tsx
│ ├── scroll-area.tsx
│ ├── tabs.tsx
│ └── textarea.tsx
│
├── hooks/
│ └── useWebcontainers.ts # Singleton WebContainer boot hook
│
├── lib/
│ └── utils.ts # cn() — clsx + tailwind-merge helper
│
├── public/ # Static assets (SVGs, favicon)
├── DockerFile # Multi-stage production build
├── docker-compose.yml # Compose config (1 CPU, 1 GB RAM limit)
├── vercel.json # COOP/COEP headers for WebContainers
├── next.config.ts # Standalone output + security headers
├── tailwind.config.js # Tailwind configuration
├── tsconfig.json # TypeScript config
├── components.json # shadcn/ui configuration
└── package.json # Dependencies & scripts
| Tool | Version | Notes |
|---|---|---|
| Node.js | ≥ 20.x | Download |
| npm | ≥ 9.x | Bundled with Node.js |
| Gemini API Key | — | Get a free key |
| Docker (optional) | ≥ 24.x | Only for containerized deployment |
git clone https://github.com/SinghalSahab/BlinkBuild.git
cd BlinkBuildnpm installCreate a .env.local file in the project root:
# .env.local
# ─────────────────────────────────────────────
# Required: Google Gemini API key
API_KEY=your_gemini_api_key_hereTip
You can get a free Gemini API key at aistudio.google.com/apikey.
npm run devOpen http://localhost:3000 in your browser. 🎉
Important
WebContainers require these HTTP headers to function. They are already configured in next.config.ts and vercel.json:
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
# Start with Turbopack (fast HMR)
npm run dev
# Lint the codebase
npm run lint# Create an optimized production build
npm run build
# Start the production server
npm run start# Build and run with Docker Compose
docker compose up -d --build
# Or build and run manually
docker build -t blinkbuild .
docker run -p 3000:3000 -e API_KEY=your_gemini_api_key blinkbuildThe Dockerfile uses a 3-stage build (deps → builder → runner) with Next.js standalone output for a minimal image size (~150 MB).
# Or deploy via CLI
npx vercel --prodSet API_KEY in your Vercel project's Settings → Environment Variables.
sequenceDiagram
participant User
participant Landing as Landing Page
participant Template as /api/template
participant Chat as /api/chat
participant Gemini as Gemini 2.5 Flash
participant WC as WebContainer
User->>Landing: Types a prompt
Landing->>Template: POST { prompt }
Template->>Gemini: "React or Node?"
Gemini-->>Template: "react"
Template-->>Landing: Base prompts + UI scaffold
Landing->>Chat: POST { messages }
Chat->>Gemini: Generate full project
Gemini-->>Chat: boltArtifact XML response
Chat-->>Landing: Parsed steps & file tree
Landing->>WC: Mount files to in-browser FS
WC->>WC: npm install && npm run dev
WC-->>User: Live preview in iframe ✨
Contributions, issues, and feature requests are warmly welcome!
- Fork the repository
- Create your feature branch
git checkout -b feature/your-amazing-feature
- Commit your changes with a descriptive message
git commit -m "feat: add your amazing feature" - Push to your branch
git push origin feature/your-amazing-feature
- Open a Pull Request against
main
- Follow existing code style and conventions
- Write meaningful commit messages (Conventional Commits preferred)
- Test your changes locally before submitting
- Keep PRs focused — one feature or fix per PR
Note
Not sure where to start? Check out the open issues or suggest a new feature!
This project is licensed under the MIT License. See the LICENSE file for details.
MIT License — Copyright (c) 2025 Prakhar Singhal
Bolt.new — Inspiration for AI-powered dev workflows · StackBlitz — WebContainers technology · Vercel — Next.js & hosting · Google AI — Gemini models
Built with ⚡ by Prakhar Singhal
If this project helped you, consider giving it a ⭐ — it means a lot!