Vibe Coding Template · React + Tailwind · Claude Code, Cursor, Lovable
AI Wrapper App
A production-ready AI wrapper app template for Cursor, Claude Code, and Lovable. Build a custom UI on top of Flux, DALL-E, Stable Diffusion, or any LLM API. Includes the main generation studio, prompt history, image gallery, batch generation queue, model configuration, image detail view, usage account, and onboarding flow.
Preview (main screen)
Copy the full multi-file code. Files are separated by // === filename === headers so Cursor and Claude Code split them automatically. Next.js 14+ App Router, Tailwind CSS v3+, Switzer font.
Vibe code the whole app with a prompt
Paste the prompt into your AI coding tool and it builds the entire AI Wrapper App in a single conversation. Each version is written specifically for that tool.
Build a complete Next.js 14 App Router AI image generation wrapper app called Lumina in this repository. Design system: white background (#FFFFFF), black text, grey (#F5F5F5, #EBEBEB) secondary surfaces, brand blue #2B65F6 reserved for primary CTA buttons only, sans-serif font, font-medium max weight, 12-14px body copy, rounded-xl / rounded-2xl cards, no all-caps text, no em-dashes. Create these routes under app/(lumina)/: /studio (main generation studio with left prompt panel 260px, 2x2 image grid center, right settings panel 220px showing seed/steps/guidance/sampler), /history (searchable list of past generations with thumbnail, prompt text, model badge, date, Regenerate/Save/Delete actions), /gallery (4-column masonry grid of saved images with filter bar and hover overlay), /batch (job queue form and list with status badges, progress bar, thumbnail strip on completion), /models (tabbed per-model settings: API key, quality, steps, guidance, negative prompt, style presets), /image/[id] (full-bleed image left, metadata and actions right, variation strip), /account (profile, monthly usage stats, credit balance, billing plan, API key), and app/onboarding (3-step wizard: connect models, choose default style, confirmation). Add a shared left sidebar nav (56px icon sidebar) and top bar with credits counter. Use Replicate API for Flux and SDXL, OpenAI API for DALL-E 3, Supabase for auth and image storage. Wrap all API calls behind server actions in app/actions/. Tailwind only for styling, no CSS files, no motion libraries. Run npx tsc --noEmit when done.
How to use this AI Wrapper App as a prompt
- Paste the prompt into Claude Code, Cursor, or Lovable to build a complete Next.js AI wrapper app with all 8 screens wired together, from the generation studio to the image gallery and batch queue.
- Best for indie developers building custom Flux, DALL-E, or Stable Diffusion frontends and for AI startups wrapping Replicate or OpenAI APIs in a polished creative tool.
- Ask Claude Code or Cursor to swap the image model (Flux, DALL-E, Stable Diffusion XL), the auth provider (Supabase, Clerk), or the storage layer (Supabase Storage, Cloudflare R2, AWS S3) without rebuilding the UI.
How to use this AI Wrapper App as code
- Copy the full multi-file code and paste into a fresh Next.js 14 project. Claude Code and Cursor detect the // === filename === headers and split the paste into the correct files automatically.
- Built on Next.js 14 App Router, Tailwind CSS v3, Replicate API (Flux, SDXL), OpenAI API (DALL-E 3), and Supabase for auth and image storage. No motion libraries needed.
- Compatible with Supabase, Clerk, or Auth.js for authentication and with Supabase Storage, Cloudflare R2, or AWS S3 for storing generated images. Deploys on Vercel in one command.
Sections inside the AI Wrapper App
Each section is its own page with a live preview, section-only code, and vibe coding prompts for Claude Code, Cursor, Codex, Lovable, Replit, and Google Stitch.
Prompt History Section
AI wrapper app prompt history section for Claude Code and Cursor: searchable list of past generations with thumbnail, model badge, date, and action buttons.
Image Detail Section
AI wrapper app image detail section for Claude Code and Cursor: full-bleed image view with prompt, model metadata, download, variations, and share.
Model Settings Section
AI wrapper app model settings section for Claude Code and Cursor: per-model API key, quality, steps, guidance, negative prompt, and style preset configuration.
Image Gallery Section
AI wrapper app gallery section for Claude Code and Cursor: 4-column masonry grid of saved AI generations with category filters, sort, and hover overlay.
Batch Generate Section
AI wrapper app batch generation section for Claude Code and Cursor: job queue form, status badges, progress bar, and thumbnail strip for completed jobs.
Account Section
AI wrapper app account section for Claude Code and Cursor: profile, monthly usage stats, credit balance, billing plan, and API key management.
Onboarding Section
AI wrapper app onboarding section for Claude Code and Cursor: 3-step premium setup wizard to connect models, choose defaults, and start generating.
Vibe coding guides
FAQ
How do I build an AI image generator app with Lovable?+
Open the AI Wrapper App template, copy the family-level prompt, and paste it into Lovable. The prompt covers all 8 screens: generation studio, prompt history, gallery, batch queue, model settings, image detail, account, and onboarding. Lovable generates a working Next.js app with Supabase auth and image storage. From there, wire the Generate button to the Replicate API (Flux Pro) or OpenAI API (DALL-E 3) using a server action.
Can I wrap the Flux API in a Next.js app using this template?+
Yes. The template includes a reference server action (app/actions/generate.ts) that calls the Replicate API with the Flux Pro model ID (black-forest-labs/flux-pro). Install the Replicate Node SDK, add your REPLICATE_API_TOKEN to .env.local, and the Generate button in the Studio is immediately functional. SDXL uses the same pattern with a different model ID.
How do I add image history and a gallery to an AI wrapper app?+
The template ships both screens. Every successful generation writes a row to a Supabase generated_images table (prompt, model, seed, output_urls, created_at). The /history page fetches and displays these rows. The /gallery page fetches rows where saved = true. Both pages include search, filter, and sort — no extra setup required.
What is the difference between an AI wrapper app and a full AI model?+
An AI wrapper app is a custom frontend and backend that calls a third-party AI model API (Replicate for Flux, OpenAI for DALL-E) rather than running a model itself. The wrapper adds your UI, auth, credits system, image storage, and business logic. This template is the wrapper layer: it gives you all the screens and API integration patterns without requiring GPU infrastructure.
How do I add a credits system to an AI image generation app?+
Create a user_credits table in Supabase (user_id, credits_used, credits_total, reset_date). In your generate server action, check credits_remaining before calling the API, decrement credits_used after a successful generation, and return a 402 if credits are exhausted. The Account screen in this template visualizes the credit balance with a progress bar and reset date.
Can I build an AI wrapper app with Claude Code?+
Yes. Copy the Claude Code prompt from this page and run it in your terminal with Claude Code. It generates all 8 screens in the correct Next.js App Router file structure, installs the Replicate and OpenAI SDKs, sets up Supabase client helpers, and runs a TypeScript type check at the end. Claude Code is the recommended tool for this template because it handles multi-file generation and imports better than single-turn tools.
Does this template support DALL-E 3, Flux Pro, and Stable Diffusion XL at the same time?+
Yes. The model settings page has tabs for each model with separate API key storage and default settings. The Studio prompt panel has a model selector dropdown. The generate server action routes the request to the correct API based on the selected model: Replicate for Flux and SDXL, OpenAI for DALL-E 3.
How do I deploy an AI wrapper app built with this template to Vercel?+
Run npx vercel --prod after confirming the build passes with npm run build. Add your environment variables (NEXT_PUBLIC_SUPABASE_URL, SUPABASE_ANON_KEY, REPLICATE_API_TOKEN, OPENAI_API_KEY) to Vercel via the dashboard or vercel env add. The app is serverless: each API call runs as a Vercel Function with no long-running process to manage.