AI Website Builder (v0 / Lovable Clone)

An AI-powered website builder that allows users to generate, preview, and edit React/Next.js applications using natural language. Built with a modern full-stack TypeScript architecture, this platform leverages background agents to write code, spin up secure sandboxes, and stream results back to an IDE-like interface.

✨ Features

• Conversational UI: Chat interface to prompt the AI for UI creation and modifications.
• Live Preview: Real-time iframe rendering of the generated application.
• Integrated Code Editor: Built-in Monaco Editor (VS Code engine) with syntax highlighting for reviewing generated files.
• File System Explorer: Navigate and download the code generated by the AI.
• Persistent History: Come back to projects later; the agent rehydrates the sandbox with your previous files to maintain context.
• Asynchronous AI Agents: Long-running LLM tasks are handled safely in the background, preventing timeout errors.
• Secure Sandboxing: Code is executed and hosted in isolated, ephemeral cloud environments.

🛠️ Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS & shadcn/ui
• API Layer: tRPC & React Query
• Database: PostgreSQL with Prisma ORM
• AI Orchestration: Inngest & @inngest/agent-kit
• LLM: Google Gemini (via gemini-2.5-flash)
• Code Execution: E2B Code Interpreter
• Code Editor: @monaco-editor/react

🏗️ Architecture Overview

1. User Prompt: The user submits a prompt via the Next.js frontend.
2. State Management: tRPC saves the message to PostgreSQL via Prisma.
3. Background Job: tRPC triggers an Inngest event (write-code) and returns a success response to the client immediately.
4. Agentic Loop: Inngest spins up an AI Agent equipped with tools. The agent reads the prompt, spins up an E2B Sandbox, writes the necessary Next.js/React code to the virtual filesystem, and starts a dev server.
5. Polling: The frontend polls the database to check if the AI has finished.
6. Delivery: Once complete, the E2B sandbox URL and generated file tree are sent to the frontend, rendering the preview and populating the Monaco editor.

🚀 Getting Started

Prerequisites

• Node.js 18+
• PostgreSQL database (local or cloud like Supabase/Neon)
• Inngest CLI installed globally or via npx
• API Keys for E2B and Google Gemini

1. Clone & Install

git clone <your-repo-url>
cd website-builder
npm install

2. Environment Variables

Create a .env file in the root directory and add the following keys:

# Database
DATABASE_URL="postgresql://user:password@localhost:5432/your_db"

# E2B Sandbox
E2B_API_KEY="your_e2b_api_key_here"

# AI Model
GEMINI_API_KEY="your_gemini_api_key_here"

3. Database Setup

Push the Prisma schema to your PostgreSQL database:

npx prisma db push
# or npx prisma migrate dev

4. Run the Development Servers

This project requires two servers to run simultaneously: the Next.js app and the Inngest background worker system.

Terminal 1: Start Inngest Dev Server

npx inngest-cli@latest dev

Terminal 2: Start Next.js App

npm run dev

Open http://localhost:3000 in your browser to start building!

📁 Project Structure

src/
├── app/
│   ├── (dashboard)/            # Route group for the IDE layout
│   │   ├── layout.tsx          # Sidebar layout
│   │   └── projects/
│   │       └── [projectId]/    # Main Workspace (Chat, Preview, Editor)
│   ├── globals.css
│   ├── layout.tsx              # Root layout (tRPC Providers, Toaster)
│   └── page.tsx                # Landing page
├── components/                 # UI components (shadcn)
├── inngest/                    # Background jobs and AI Agents
│   ├── client.ts               # Inngest instance
│   └── functions.ts            # Core agent logic and E2B integration
├── lib/
│   └── db.ts                   # Prisma client
└── trpc/                       # API routes
    ├── init.ts                 # tRPC configuration
    ├── routers/                # Procedures (projects, messages)
    └── client.tsx              # React Query provider

📝 License

MIT