🐾 AI Pet Portrait Generator

June 29, 2026 · View on GitHub

Transform pet photos into stunning oil paintings, royal portraits, cartoons, and art masterpieces in seconds. A production-ready, self-hostable Next.js SaaS boilerplate built for pet lovers, custom portrait businesses, and DTC apps — replaces $30–$80 custom pet portrait services. A free open-source alternative to Portrait My Pet, PetPainting AI, and Paint Your Pet — powered by the MuAPI AI engine.

Tech stack: Next.js 14 (App Router) · Prisma · PostgreSQL · NextAuth (Google OAuth) · Stripe · Tailwind CSS · MuAPI nano-banana-2-edit · Webhook-backed async delivery Use cases: Custom pet portrait shops · Print-on-demand pet gifts · Pet lover communities · Dog & cat art generators · Pet brand marketing · Etsy-style digital pet art · Animal shelter fundraisers · Pet influencer content

AI Pet Portrait Generator Interface Screenshot

Awesome Generative AI Apps

🎨 Explore 50+ more open-source AI apps →

https://github.com/user-attachments/assets/c366dedb-986f-4826-82b3-42c0257d00f6

🌐 Project Details

GitHub Repository: github.com/SamurAIGPT/ai-pet-portrait

Live Demo Preview: ai-pet-portrait-two.vercel.app

AI Pet Portrait Generator is a production-ready, highly-optimized AI web application. Out of the box, it seamlessly manages User Authentication, Credits & Billing, Image Persistence, and asynchronous pet art generation using a sleek Next.js (App Router) architecture. It empowers users to upload up to 5 photos of their pets and apply custom prompt styling to render beautiful pet portraits.

Why use AI Pet Portrait Generator?

  • Production-Ready SaaS — Complete with Google OAuth and Stripe Checkout workflows built-in.
  • Multi-Image Upload Studio — Upload up to 5 pet photos, write custom prompts, and see results instantly.
  • Webhook-Backed AI Delivery — MuAPI async webhook delivers results directly into the database (/api/webhook/muapi), keeping API routes non-blocking and preventing request timeouts.
  • Personal Showroom Gallery — All generated portraits are saved to PostgreSQL. Users can review, download, and delete their designs from /gallery.
  • Responsive Screen-Fitting — Designed with a fluid layout that fits perfectly on all screens (mobile, tablet, desktop) using stacked adaptive grids on mobile and viewport-locked scrolling on desktop.

✨ Core Features

🐾 AI Pet Art Studio (Main Page /)

  • Multi-image uploads via file picker or drag-and-drop: upload up to 5 photos of your pet for high-accuracy results.
  • Customizable prompt styling to specify style (e.g. oil painting, royal robes, space astronaut) and details.
  • Cost: 12 credits per AI Pet Portrait simulation.
  • Visual card grid of all generated pet portraits.
  • Cards show a thumbnail, creation date, and options to review, download, or delete.
  • Full-screen viewer modal with a grid overlay of the original input photos for reference, along with Download HD and Delete Result actions.

💳 Stripe Credit Billing (/pricing)

  • Four credit packs based on a $1 = 200 credits conversion rate:
    • Basic Pack ($5 / 1,000 credits)
    • Standard Pack ($10 / 2,000 credits)
    • Professional Pack ($20 / 4,000 credits — Most Popular)
    • Business Pack ($50 / 10,000 credits)
  • No recurring subscriptions — pay once, use at your own pace.
  • Credit balance is automatically topped up via Stripe webhook on checkout completion.

🔐 Google Auth + Credit Persistence

  • NextAuth Google provider with Prisma adapter — user sessions, credit balances, and galleries are all persisted per account.
  • Credits displayed live in the Navbar with a pulsing coin icon.

⚡ Deployment: Vercel & Production

This architecture is engineered explicitly for Vercel serverless environments.

One-Click Deploy

Deploy with Vercel

Live App: ai-pet-portrait-two.vercel.app

🔑 Required Environment Variables

To successfully deploy and run, you must populate the following environment variables in your Vercel project settings:

ServiceVariableDescription & Source
DatabaseDATABASE_URLPostgreSQL connection string (Supabase or Neon)
NextAuth / GoogleNEXTAUTH_SECRETSecure random string generated via openssl rand -base64 32
NEXTAUTH_URLYour production domain (e.g. https://my-app.vercel.app)
WEBHOOK_URLPublic URL for MuAPI async callbacks (same as NEXTAUTH_URL in production)
GOOGLE_CLIENT_IDGet from Google Cloud Console
GOOGLE_CLIENT_SECRETGet from Google Cloud Console
Stripe BillingSTRIPE_SECRET_KEYGet from Stripe Dashboard
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEYGet from Stripe Dashboard
STRIPE_WEBHOOK_SECRETWebhook secret for resolving credit purchases
AI GenerationMUAPIAPP_API_KEYCreate an account and get key from muapi.ai

🚀 Launching on Vercel: Step-by-Step

  1. Database Provisioning: Create a new Postgres database (via Supabase or Neon). Retrieve the connection string (DATABASE_URL).
  2. Project Creation: Import your GitHub fork into the Vercel dashboard.
  3. Configure Environment Variables: Copy the variables above into the Vercel project settings environment tab.
  4. Deploy: Hit "Deploy". Vercel will automatically run the build steps (npm run build).
  5. Database Push: Run npx prisma db push to synchronize database models before launching.
  6. Integrations Setup:
    • Establish a Google Cloud OAuth app, enabling the callback URL: https://your-app.vercel.app/api/auth/callback/google
    • Setup a Stripe Webhook, pointing to https://your-app.vercel.app/api/stripe/webhook and selecting the checkout.session.completed event.
    • Register a MuAPI Webhook pointing to https://your-app.vercel.app/api/webhook/muapi to receive async generation results.

🛠️ Local Development

Ready to iterate locally? Setup is straightforward.

Prerequisites

  • Node.js (v18 or higher)
  • A local PostgreSQL instance or a free cloud Database URL.
  • ngrok (optional, for local MuAPI webhook testing)

Setup

# 1. Clone the repository
git clone https://github.com/SamurAIGPT/ai-pet-portrait
cd ai-pet-portrait

# 2. Install dependencies
npm install

# 3. Setup Environment
cp .env.example .env
# Open .env and insert your specific keys.

# 4. Initialize Database Schema
# Note: Because the database is shared, see the Safety Warning below!
npx prisma generate
npx prisma db push

# 5. Start the Development Server
npm run dev

The console should now be active on http://localhost:3000.

Webhook Tip: For local MuAPI webhook testing, run ngrok http 3000 and set WEBHOOK_URL to the generated HTTPS URL in your .env.

⚠️ Database Safety Warning (Shared Pool)

The database workspace is shared with other applications. Running npx prisma db push on a clean, empty schema will drop tables belonging to other applications. Always follow this sequence to perform safe schema synchronization:

  1. Run npx prisma db pull to fetch all database tables.
  2. Declare your PetPortraitCreation table and update the relations on the User model.
  3. Run npx prisma db push --accept-data-loss to add your changes safely.
  4. Clean up schema.prisma to keep only NextAuth models, PetPortraitCreation, and the updated User relations.
  5. Run npx prisma generate to rebuild the type-safe client.

🏗️ Technical Architecture

ai-pet-portrait/
├── prisma/
│   ├── prisma.config.ts        # Dynamic datasource settings for Prisma
│   └── schema.prisma           # Postgres schema (User, Account, Session, PetPortraitCreation)
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── page.js             # Main Pet Portrait Studio Workspace
│   │   ├── gallery/            # Dedicated showroom gallery view grid
│   │   ├── pricing/            # 4-Plan credit pricing grid (\$1 = 200 credits)
│   │   └── api/
│   │       ├── auth/           # NextAuth handler
│   │       ├── upload/         # MuAPI file upload proxy
│   │       ├── generation/     # Credit deduction + MuAPI trigger endpoint
│   │       ├── creations/      # GET / DELETE creations history (with webhook bypass sync)
│   │       ├── webhook/muapi/  # MuAPI async webhook callback handler
│   │       └── stripe/         # Stripe checkout creation + checkout webhook
│   ├── components/
│   │   ├── Providers.jsx       # NextAuth SessionProvider wrapper
│   │   └── layout/Navbar.jsx   # Sticky header with Hamburger, Vercel Deploy & credit balance
│   └── lib/
│       ├── auth.js             # NextAuth config with Prisma adapter
│       ├── config.js           # Central config mapping Google, Stripe, MuAPI keys
│       ├── prisma.js           # Cached Prisma client singleton
│       ├── stripe.js           # Stripe instance initializer
│       └── services/
│           ├── user.js         # Credit management service (12 credits per run)
│           └── billing.js      # Stripe checkout and payment webhook parser
└── next.config.mjs             # Next.js configuration

📄 License

MIT Licensed.

AI Pet Portrait Generator: A premium, high-contrast, fully responsive pet portrait studio built with the Inter font family.