Chameleon

Deploy to Vercel

Complete guide to deploying Chameleon on Vercel

Deploy to Vercel

Vercel is the recommended hosting platform for Chameleon, offering seamless Next.js deployment and Postgres database.

Prerequisites

  • GitHub account
  • Vercel account (sign up at vercel.com)
  • Chameleon repository pushed to GitHub

Quick Deployment

Step 1: Import Project

  1. Go to vercel.com/new
  2. Click Import Project
  3. Select your GitHub repository
  4. Click Import

Step 2: Configure Project

Vercel will auto-detect Next.js settings. Keep defaults:

  • Framework Preset: Next.js
  • Root Directory: ./
  • Build Command: pnpm build
  • Output Directory: .next
  • Install Command: pnpm install

Click Deploy (will fail without environment variables, that's OK).

Step 3: Add Vercel Postgres

  1. In your Vercel project, go to Storage tab
  2. Click Create Database
  3. Select Postgres
  4. Choose a name (e.g., "chameleon-db")
  5. Select region (choose closest to your users)
  6. Click Create

Vercel automatically creates these environment variables:

  • POSTGRES_URL
  • POSTGRES_PRISMA_URL
  • POSTGRES_URL_NON_POOLING

Step 4: Set DATABASE_URL

  1. Go to Settings > Environment Variables
  2. Click Add New
  3. Add: 
    Name: DATABASE_URL
Value: ${POSTGRES_URL}
  4. Select environments: Production, Preview, Development
  5. Click Save

Using ${POSTGRES_URL} references the auto-created variable.

Step 5: Add Required Environment Variables

Add these variables one by one:

# Authentication
NEXTAUTH_SECRET="your-random-secret-32-chars"
AUTH_SECRET="your-random-secret-32-chars"
NEXTAUTH_URL="https://your-domain.vercel.app"

# Base URL
NEXT_PUBLIC_WEB_URL="https://your-domain.vercel.app"

# Admin
ADMIN_EMAILS="your-email@example.com"

Generate secrets:

# On Mac/Linux
openssl rand -base64 32

# On Windows (PowerShell)
-join ((48..57) + (65..90) + (97..122) | Get-Random -Count 32 | % {[char]$_})

Step 6: Add OAuth Providers (Optional)

Google OAuth:

AUTH_GOOGLE_ID="xxx.apps.googleusercontent.com"
AUTH_GOOGLE_SECRET="GOCSPX-xxx"

GitHub OAuth:

AUTH_GITHUB_ID="xxx"
AUTH_GITHUB_SECRET="xxx"

Setup OAuth:

  1. Add callback URL: https://your-domain.vercel.app/api/auth/callback/google
  2. Same for GitHub

Step 7: Add Stripe Keys (Optional)

STRIPE_PRIVATE_KEY="sk_test_xxx"  # Use sk_live for production
STRIPE_PUBLISHABLE_KEY="pk_test_xxx"  # Use pk_live for production
STRIPE_WEBHOOK_SECRET="whsec_xxx"

Webhook URL:

https://your-domain.vercel.app/api/pay/notify/stripe

Step 8: Add AI Provider Keys (Optional)

# Can be configured in UI at /admin/ai-config
OPENAI_API_KEY="sk-proj-xxx"
KLING_ACCESS_KEY="xxx"
SEEDANCE_API_KEY="xxx"
DEEPSEEK_API_KEY="sk-xxx"
REPLICATE_API_TOKEN="r8_xxx"
OPENROUTER_API_KEY="sk-or-xxx"
SILICONFLOW_API_KEY="sk-xxx"

AI keys can be configured in the admin panel after deployment. Environment variables are a fallback.

Step 9: Redeploy

  1. Go to Deployments tab
  2. Click Redeploy on the latest deployment
  3. Or push a new commit to trigger auto-deploy

Step 10: Run Database Setup

Option A: Vercel CLI (Recommended)

# Install Vercel CLI
npm install -g vercel

# Login
vercel login

# Link project
vercel link

# Pull environment variables
vercel env pull .env.local

# Run database setup (includes automatic initialization)
pnpm db:setup

Option B: Local with Connection String

# Get DATABASE_URL from Vercel dashboard
# Add to .env.local
DATABASE_URL="postgresql://xxx"

# Run database setup (includes automatic initialization)
pnpm db:setup

This command will:

  • Create all database tables
  • Automatically initialize the credit system
  • Insert initial AI provider configurations (if environment variables are set)
  • Set up price tier configurations

New Feature: The pnpm db:setup command automatically handles database initialization. No manual SQL scripts needed!

Step 11: Configure Admin System (Required)

Critical: Admin System configuration is required for the application to function properly. Without proper admin configuration, many features will not work.

11.1: Access Admin Panel

  1. Visit your deployed site: https://your-project.vercel.app
  2. Sign in with an email listed in ADMIN_EMAILS
  3. Visit /admin - you should see the admin dashboard

11.2: Configure AI Providers (Required)

You MUST configure at least one AI provider to use AI generation features:

  1. Go to /admin/ai-config
  2. Click on a provider (e.g., OpenAI, Kling, Seedance)
  3. Enter the API key from your environment variables
  4. Toggle Enabled to ON
  5. Click Save

Recommended providers to start with:

  • OpenAI - For text and image generation (most versatile)
  • Seedance - For video generation (high quality)
  • Kling - For image and video generation (good alternative)

Important: Without AI providers configured, the AI Generator will not work, even if you have API keys in environment variables. The Admin System configuration takes priority.

11.3: Verify Credit System

  1. Check that credit rules are properly initialized
  2. Verify price tier configurations are set up
  3. Test that users receive initial credits

Step 12: Verify Complete Deployment

Visit your deployed site:

https://your-project.vercel.app

Essential Checks:

  • ✅ Homepage loads
  • ✅ Sign in works
  • ✅ Database connected
  • ✅ Admin access works (/admin)
  • ✅ AI providers configured (/admin/ai-config)
  • ✅ AI Generator works (/ai-generator)
  • ✅ Credit system functioning

Custom Domain

Add Custom Domain

  1. Go to Settings > Domains
  2. Enter your domain: your-domain.com
  3. Click Add
  4. Follow DNS configuration instructions

DNS Records (example for Cloudflare):

Type: A
Name: @
Content: 76.76.21.21

Type: CNAME
Name: www
Content: cname.vercel-dns.com

Update Environment Variables

After adding custom domain, update:

NEXTAUTH_URL="https://your-domain.com"
NEXT_PUBLIC_WEB_URL="https://your-domain.com"

Update OAuth Callbacks

Update callback URLs in:

  • Google Cloud Console
  • GitHub OAuth settings
  • Any other OAuth providers

New callback format:

https://your-domain.com/api/auth/callback/google
https://your-domain.com/api/auth/callback/github

Update Stripe Webhook

Update webhook URL in Stripe Dashboard:

https://your-domain.com/api/pay/notify/stripe

Environment Variables Checklist

Use this checklist to ensure all variables are set:

Required ✅

  • DATABASE_URL
  • NEXTAUTH_SECRET
  • AUTH_SECRET
  • NEXTAUTH_URL
  • NEXT_PUBLIC_WEB_URL
  • ADMIN_EMAILS

OAuth (Optional)

  • AUTH_GOOGLE_ID
  • AUTH_GOOGLE_SECRET
  • AUTH_GITHUB_ID
  • AUTH_GITHUB_SECRET

Payment (Optional)

  • STRIPE_PRIVATE_KEY
  • STRIPE_PUBLISHABLE_KEY
  • STRIPE_WEBHOOK_SECRET

AI Providers (Optional)

  • OPENAI_API_KEY
  • KLING_ACCESS_KEY
  • SEEDANCE_API_KEY
  • DEEPSEEK_API_KEY
  • REPLICATE_API_TOKEN
  • OPENROUTER_API_KEY
  • SILICONFLOW_API_KEY

Other (Optional)

  • RESEND_API_KEY
  • NEXT_PUBLIC_OPENPANEL_CLIENT_ID
  • NEXT_PUBLIC_OPENPANEL_CLIENT_SECRET

Production Checklist

Before going live:

Security

  • Use strong NEXTAUTH_SECRET (32+ characters)
  • Switch to Stripe live keys (sk_live_...)
  • Enable HTTPS only (automatic on Vercel)
  • Set secure headers in next.config.mjs
  • Review environment variable visibility

Performance

  • Enable Vercel Analytics
  • Configure caching headers
  • Optimize images (automatic on Vercel)
  • Monitor function execution times

Database

  • Upgrade Vercel Postgres plan if needed
  • Enable automatic backups
  • Set up monitoring and alerts
  • Review connection limits

Testing

  • Test sign-in flow
  • Test payment (use test card, then refund)
  • Test AI generation
  • Test mobile responsiveness
  • Test different browsers

Monitoring

  • Set up error tracking (Sentry, etc.)
  • Configure uptime monitoring
  • Set up Stripe Dashboard monitoring
  • Review Vercel logs regularly

Common Issues

Build Failed

Error: "Module not found"

Solution:

# Clean local build
rm -rf .next node_modules
pnpm install
pnpm build

# If works locally, check Vercel build logs

Database Connection Error

Error: "Can't reach database server"

Solution:

  1. Check DATABASE_URL is set correctly
  2. Ensure Postgres database is created
  3. Use ${POSTGRES_URL} reference, not hardcoded value
  4. Check database region matches your Vercel region

Environment Variable Not Working

Problem: Variable shows as undefined

Solution:

  1. Verify variable name (case-sensitive)
  2. Check variable is set for correct environment
  3. Redeploy after adding variables
  4. Check for typos or extra spaces

Stripe Webhook Failing

Error: "No signatures found matching the expected signature"

Solution:

  1. Get webhook secret from Stripe Dashboard
  2. Update STRIPE_WEBHOOK_SECRET in Vercel
  3. Ensure webhook URL is correct
  4. Redeploy

Function Timeout

Error: "Function execution timeout"

Solution:

  • Upgrade to Vercel Pro (10s → 60s timeout)
  • Optimize AI generation to use background jobs
  • Use Edge Functions for faster response

AI Generator Not Working After Deployment

Symptoms: AI Generator shows no providers or generation fails

Solutions:

  1. Configure AI Providers: Visit /admin/ai-config and ensure at least one provider is configured and enabled
  2. Check Environment Variables: Verify AI provider API keys are set in Vercel environment variables
  3. Admin Access: Make sure you can access /admin with an email from ADMIN_EMAILS
  4. Database Priority: Admin System configuration takes priority over environment variables

Admin Panel Access Issues

Symptoms: Can't access /admin or see "No access" message

Solutions:

  1. Check ADMIN_EMAILS: Make sure your email is in the ADMIN_EMAILS environment variable in Vercel
  2. Redeploy: Redeploy after adding ADMIN_EMAILS
  3. Email Match: Ensure the email you sign in with exactly matches the one in ADMIN_EMAILS
  4. Sign Out/In: Sign out and sign back in after admin configuration

Vercel Features

Automatic Deployments

  • Every push to master triggers deployment
  • Preview deployments for pull requests
  • Instant rollback to previous deployments

Environment Variables Per Branch

  • Production: master branch
  • Preview: Pull requests and other branches
  • Development: Local development

Analytics

Enable Vercel Analytics:

  1. Go to Analytics tab
  2. Click Enable
  3. View real-time traffic and performance

Logs

View logs in real-time:

  1. Go to Deployments
  2. Click on a deployment
  3. View Function Logs
  4. Filter by severity (Error, Warning, Info)

Cost Optimization

Free Tier

Vercel Free includes:

  • 100 GB bandwidth
  • 1000 serverless function invocations per day
  • 100 GB-hours function execution
  • Vercel Postgres: 256 MB storage, 60 hours compute

When to Upgrade

Consider Vercel Pro if:

  • Traffic exceeds free tier limits
  • Need longer function timeouts (video generation)
  • Want automatic backups
  • Need team collaboration

Alternative: Self-Hosted Database

Use external database instead of Vercel Postgres:

  1. Choose provider:

    • PlanetScale (MySQL)
    • Supabase (PostgreSQL)
    • Railway (Both)
    • AWS RDS

  2. Get connection string

  3. Set in Vercel:

    DATABASE_URL="postgresql://user:pass@host:5432/db"

  4. Run migration (from local)

Next Steps

Support