Skip to main content

Deploy to Vercel

Vercel is the recommended deployment platform for SmarterAvatar.

Prerequisites​

  • GitHub/GitLab/Bitbucket repository with SmarterAvatar code
  • Vercel account (vercel.com)
  • PostgreSQL database (Supabase recommended)
  • All API keys configured

Step-by-Step Guide​

1. Prepare Repository​

Ensure your repository has:

├── .env.example          # Environment template
├── package.json          # With build script
├── next.config.js        # Next.js configuration
└── prisma/schema.prisma  # Database schema

2. Connect to Vercel​

  1. Go to vercel.com/new
  2. Import your repository
  3. Select the repository
  4. Configure project settings

3. Configure Build Settings​

Vercel typically auto-detects Next.js. Verify:

SettingValue
Framework PresetNext.js
Build Commandpnpm build
Output Directory.next
Install Commandpnpm install

4. Add Environment Variables​

In Vercel project settings, add all required environment variables:

# Database
DATABASE_URL=postgresql://...

# LLM
LLM_PROVIDER=gemini
GEMINI_API_KEY=AIza...

# STT
STT_PROVIDER=whisper
OPENAI_API_KEY=sk-...

# Avatar
LIVEAVATAR_API_KEY=...
NEXT_PUBLIC_AVATAR_ID=...
NEXT_PUBLIC_VOICE_ID=...

# Public URL (set after first deploy)
NEXT_PUBLIC_BASE_API_URL=https://your-project.vercel.app

5. Deploy​

Click Deploy and wait for the build to complete.

6. Run Database Migrations​

After deploy, run migrations:

# Using Vercel CLI
vercel env pull .env.local
npx prisma migrate deploy

Or use the Vercel Postgres integration for automatic migrations.

7. Verify Deployment​

Visit your deployed URL and check:

  • ✅ Home page loads
  • ✅ Avatar session starts
  • ✅ Chat responses work
  • ✅ Admin panel accessible

Custom Domain​

  1. Go to Project Settings → Domains
  2. Add your custom domain
  3. Configure DNS as instructed
  4. Update NEXT_PUBLIC_BASE_API_URL environment variable

Production Checklist​

Before going live:

  • All environment variables set
  • Database migrations run
  • API keys are production keys (not test)
  • Custom domain configured
  • SSL certificate active
  • Error tracking configured (optional)
  • Analytics enabled (optional)

Troubleshooting​

Build Fails​

Check the build logs for specific errors. Common issues:

  • Missing environment variables
  • TypeScript errors
  • Dependency conflicts

Database Connection Fails​

  • Verify DATABASE_URL is correct
  • Check database is accessible from Vercel's IP ranges
  • Ensure SSL is enabled if required

Avatar Not Loading​

  • Verify HeyGen API key is valid
  • Check NEXT_PUBLIC_ variables are set
  • Review browser console for errors