How to Clone Lovable

Create a full-stack prompt-to-app builder called Vibesmith using Next.js (App Router), Tailwind CSS, Prisma and SQLite (easy to swap to Postgres later).

## What to build
Users type a description of a small-business website; the server generates a structured 'site spec' JSON (via LLM API if a key is provided, otherwise a deterministic mock generator), renders it live in a preview panel, and supports iterative edits via chat. Credits meter every generation. Niche: booking-style sites for service businesses.

## Key screens
- Landing: hero prompt input that creates a project and jumps straight into the builder, examples gallery, pricing (Free 5 credits/day, Pro 150/mo)
- Builder: split view - chat thread left (messages, AI change summaries, input with credit hint), live preview right rendering the spec through a SiteRenderer component inside a device frame with desktop/mobile toggle; top bar with project name, version undo, Publish
- Dashboard: project cards (thumbnail, name, status, last edited), create/duplicate/delete
- Templates: 8 starters that prefill the spec, 'Start from this'
- Publish modal: pick subdomain, validate availability, success state with copyable URL /sites/[subdomain] rendering the published spec publicly
- Billing: credit balance, usage table, Stripe test-mode upgrade

## Schema (Prisma)
User (id, name, email, plan, credits, creditsResetAt), Project (id, userId, name, status, subdomain, spec Json, updatedAt), Version (id, projectId, spec Json, createdAt), Message (id, projectId, role, content, creditsCost, createdAt), UsageEvent (id, userId, projectId, credits, kind, createdAt)

## The site spec (core abstraction)
A typed JSON document: { theme: { primaryColor, font, radius }, pages: [ { slug, sections: [ hero | services | pricing | testimonials | gallery | hours | contactForm | bookingForm ] } ] } with typed props per section. SiteRenderer maps spec → React components. The 'AI' only ever outputs this spec, validated with Zod - invalid output falls back to the last valid version.

## Logic that must work
- POST /api/generate: takes prompt + current spec, returns updated spec + a one-line change summary; decrement credits atomically, reject at zero with 402 and an upsell payload
- Each accepted change appends a Version; undo pops to the previous one
- Subdomains: unique, lowercase, validated; published specs are publicly viewable, drafts are owner-only
- Daily credit reset for free users (check creditsResetAt on each request)
- The chat thread persists per project; reopening a project restores the full conversation and current spec

## Nice to have if time permits
- Streaming the AI change summary into the chat for a live feel (or simulate with a typing effect in mock mode)
- Thumbnail snapshots of the rendered spec for dashboard cards (a simple DOM-to-image of the preview is fine)
- A 'view spec' developer toggle in the builder showing the underlying JSON read-only

## Style
Dark AI-tool aesthetic: #0A0A0F background, white text, violet-to-cyan gradient (#8B5CF6 → #22D3EE) on primary buttons and the credit indicator, glass panels with subtle borders, Inter font. Preview area stays white. Responsive: builder becomes tabbed chat/preview on mobile.

Seed a demo user (12 credits), 4 projects with realistic specs (salon, tutor, gym, photographer), 2 published at sample subdomains, version chains and 20 usage events so every screen has data on first run.

You are building a production-quality prompt-to-app builder (Lovable model, vertical niche: booking sites for service businesses). Work iteratively: scaffold, then implement feature by feature, running the app after each step.

## Stack
- Next.js 14 App Router, TypeScript, Tailwind CSS, shadcn/ui
- PostgreSQL via Prisma; NextAuth (email + Google); Stripe Billing for subscriptions + credit metering
- Claude API (claude-sonnet) for generation with structured tool-use; Zod schemas shared between the AI contract and the renderer
- Vercel AI SDK for streaming chat responses

## Architecture requirements
- The product's core abstraction is a SiteSpec: a Zod-validated JSON document (theme + pages + typed sections: hero, services, pricing, testimonials, gallery, hours, bookingForm, contactForm). The LLM NEVER returns freeform code - it returns spec mutations. This is what makes generation reliable enough to sell
- Two-phase AI contract: (1) plan - model returns a short summary of intended changes; (2) apply - model returns a JSON Patch (RFC 6902) against the current spec, validated and applied transactionally. On validation failure, auto-retry once with the Zod errors fed back, then surface a graceful failure without burning extra credits
- SiteRenderer: pure component mapping SiteSpec → React, used in three places - builder preview (iframe via /preview/[projectId] with postMessage refresh), published site at /s/[subdomain], and OG-image thumbnail generation
- Credits: atomic decrement in a Postgres transaction with a CHECK (credits >= 0); usage_events as an append-only ledger so balance is auditable; Stripe webhook resets allowances on renewal
- Versioning: append-only versions table; undo/redo are pointer moves, never deletes

## Data model
users, projects, versions, messages, usage_events, subscriptions. Indexes on projects(user_id, updated_at desc), versions(project_id, created_at desc), usage_events(user_id, created_at). Unique index on projects(subdomain) where published.

## Implementation order
1. Scaffold + Prisma schema + auth + a hand-written sample SiteSpec rendered by SiteRenderer (prove the renderer before any AI)
2. Builder workspace UI: chat panel (streaming), preview iframe, version timeline with undo
3. AI pipeline: system prompt encoding the spec schema + vertical constraints, plan/apply phases, JSON Patch application, retry-on-invalid loop; log raw model output for debugging
4. Projects dashboard + templates (8 seeded specs for salon/tutor/gym/photographer/etc., remix = copy spec)
5. Credits + Stripe: free daily allowance, Pro subscription, atomic metering, out-of-credits UX
6. Publishing: subdomain claim, public rendering at /s/[subdomain], generateMetadata from spec, sitemap of published sites
7. Thumbnails via @vercel/og from the spec; dashboard cards use them
8. Hardening: rate limits per user on /api/generate, prompt-injection guards (model can only emit patches), content moderation pass on published specs

## Quality bar
- Unit tests: spec Zod schema, JSON Patch application, credit ledger math; one integration test of the full generate → version → undo loop with a mocked model
- Streaming UX: change summary streams token-by-token; preview refreshes only after the patch validates
- Never trust the model: every output validated, every failure recoverable to the last good version
- Seed: demo user, 4 projects with version history, 2 published sites

Start with step 1. After each step, tell me what to verify in the browser before moving on.

Design the complete UI for an AI prompt-to-app builder called Vibesmith. React + Tailwind, shadcn/ui components, lucide-react icons. Confident dark AI-product aesthetic: near-black #0A0A0F canvas, white text, iridescent violet-to-cyan gradient (#8B5CF6 → #22D3EE) on primary CTAs and accents, glassmorphic panels with subtle 1px white/10 borders, Inter font, soft glows on focus states. The app preview area stays white so generated sites pop against the dark chrome.

## Screens to generate

### 1. Landing page
- Minimal nav: logo, Templates, Pricing, Sign in, gradient 'Start building' button
- Hero: huge centered headline ('Describe it. It exists.'), oversized prompt textarea with glowing gradient border and a placeholder that cycles example prompts, small 'no credit card' caption, floating example-app thumbnails tilted behind the input
- How-it-works: 3 numbered steps (Describe → Preview → Publish) with icons
- Gallery: masonry grid of generated-site screenshots in browser-chrome frames with niche labels (Salon, Gym, Tutor)
- Pricing: Free vs Pro cards, Pro with gradient border and 'Most popular' badge

### 2. Builder workspace (hero screen - make it stunning)
- Top bar: back arrow + editable project name, version chip ('v12') with undo/redo icon buttons, credits pill showing a tiny gradient progress ring + '23 left', gradient Publish button
- Left panel (38%): chat thread - user bubbles right-aligned in slate, AI replies left with a small gradient avatar and a 'Changed: added pricing section' summary chip; a thinking state with animated gradient shimmer; input box at bottom with attach and send icons and a '1 credit' hint
- Right panel (62%): white preview canvas inside a browser-chrome frame with traffic-light dots and a URL bar, device toggle (desktop/tablet/mobile icons) floating top-right, subtle scale animation when the preview refreshes

### 3. Projects dashboard
- Header: 'Your apps', search input, gradient New Project button
- Card grid: site thumbnail in a mini browser frame, name, last-edited relative time, status badge (Draft slate / Published gradient), hover kebab menu (open, duplicate, delete)
- Empty state: dashed-border card with a sparkle icon and 'Describe your first app'

### 4. Templates gallery
- Filter chips (Salon, Gym, Tutor, Photographer, Restaurant, More), template cards with screenshot, name, one-line description, 'Start from this' ghost button with gradient hover

### 5. Publish flow (modal sequence)
- Step 1: subdomain input with live availability check (green check / red x), '.vibesmith.app' suffix label
- Step 2: success state - confetti burst, the live URL in a copyable field, social share buttons, 'View live site' gradient CTA

### 6. Billing
- Credits card with a large gradient progress ring, resets-in countdown, plan comparison (Free 5/day vs Pro 150/mo), usage history table (message excerpt, credits, date)
- Out-of-credits state: the builder input disabled with a frosted overlay card - 'You're out of credits' headline, reset countdown, gradient Upgrade button

### 7. Shared details
- Toasts for publish/copy/delete; confirm dialog on destructive actions; skeleton states for the dashboard grid and chat history
- Consistent gradient treatment: only one gradient element per view so it stays premium, never carnival

Fully responsive: on mobile the builder becomes two swipeable tabs (Chat / Preview) with a floating credits pill. Use realistic placeholder data - believable prompts ('a booking site for my barbershop with prices and a contact form'), version numbers, timestamps minutes ago.

Build an AI prompt-to-app builder (Lovable model) called Vibesmith, focused on one niche: simple websites for local service businesses.

## Entities
- Project: name, status (draft/published), subdomain (unique text), spec (json - structured site definition with theme, pages and sections), thumbnailUrl, owner (user reference), updatedAt
- Version: project reference, specSnapshot (json), summary (text), createdAt
- Message: project reference, role (user/assistant), content (text), creditsCost (number), createdAt
- UsageEvent: user, project reference, credits (number), kind (generate/edit/publish), createdAt
- Template: name, niche (select: salon/gym/tutor/photographer/restaurant/barber/yoga/cleaning), description, spec (json), screenshot (image)

## Roles & permissions
- Users see and edit only their own projects, messages and usage; published sites are publicly viewable read-only
- User plan field (free/pro): free = 5 credits per day, pro = 150 per month; creditsRemaining and creditsResetAt on the user
- Admin: view all users with credit consumption, total projects, published-site count, and an MRR dashboard by plan; can unpublish any site

## Pages
1. Landing: hero prompt input that signs the user in and creates a project, example gallery, pricing section
2. Builder: chat panel on the left (conversation history, input with credit cost), live preview on the right rendering the project's spec as a real website (hero, services, pricing, testimonials, hours, contact/booking form sections), top bar with project name, undo-to-previous-version and Publish
3. Projects dashboard: my projects as cards with thumbnail, status badge and last edited; create, duplicate, delete
4. Templates: 8 niche starters; 'Start from this' copies the template spec into a new project
5. Published site page: public route per subdomain rendering the spec, with a tiny 'Made with Vibesmith' badge linking back (growth loop)
6. Billing: credits remaining with reset date, upgrade to Pro, usage history
7. Admin: users table, credits consumed chart, published sites list with unpublish

## Rules
- Creating a project from a prompt costs 3 credits; each follow-up edit message costs 1; publishing is free
- At zero credits the chat input disables and shows an upgrade prompt; free credits reset daily, pro monthly
- Every AI edit stores a Version with a one-line summary; undo restores the previous snapshot
- The AI only fills the structured spec (sections with typed fields) - never arbitrary code - so every generated site renders correctly
- Subdomains must be unique and lowercase; drafts are private to the owner
- If no AI integration is available, simulate generation: pick the closest niche template and apply the user's business name, colors and copy from their prompt

## Look & feel
Dark, confident AI-tool style: near-black background, white text, violet-to-cyan gradient on primary buttons and the credits indicator, glass-effect panels, clean sans-serif. The site preview area stays white. Mobile responsive - builder collapses to chat/preview tabs.

Seed with 8 templates, one demo user on the free plan with 12 credits, 4 projects (2 published with subdomains), version history per project and 20 usage events so every page has data.