Skip to main content

​
Overview

Cabina uses environment variables for configuration across different services. This guide covers all required and optional variables.

​
Frontend Variables

​
Supabase Connection

Note: In the current codebase (src/lib/supabaseClient.ts), Supabase credentials are hardcoded for the production instance. If you’re forking this project for your own use, you’ll need to update those values directly in the source file or refactor to use environment variables.
​
VITE_SUPABASE_URL
string
Your Supabase project URL (if using env vars)Example: https://elesttjfwfhvzdvldytn.supabase.coWhere to find: Supabase Dashboard → Settings → API → Project URLCurrent setup: Hardcoded in src/lib/supabaseClient.ts:3
​
VITE_SUPABASE_ANON_KEY
string
Supabase anonymous/public API key (if using env vars)Example: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...Where to find: Supabase Dashboard → Settings → API → anon public keyCurrent setup: Hardcoded in src/lib/supabaseClient.ts:4
This key is safe to expose in client-side code due to RLS policies

​
AI Integration

​
GEMINI_API_KEY
string
required
Google Gemini API key for AI featuresExample: AIzaSyD...Where to find: Google AI Studio
Used for vision analysis and content generation features

​
Edge Function Variables

These variables are configured in Supabase Dashboard → Edge Functions → Settings.

​
Supabase Service

​
SUPABASE_URL
string
required
Supabase project URL (server-side)Example: https://elesttjfwfhvzdvldytn.supabase.coAuto-injected: Yes (available by default in Edge Functions)
​
SUPABASE_SERVICE_ROLE_KEY
string
required
Supabase service role key with elevated permissionsExample: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...Where to find: Supabase Dashboard → Settings → API → service_role key
Keep this secret! Never expose in client-side code. Bypasses RLS.

​
Payment Integration

​
MP_ACCESS_TOKEN
string
required
Mercado Pago access token for payment processingExample: APP_USR-1234567890123456-123456-abcdef1234567890...Where to find:
  1. Go to Mercado Pago Developers
  2. Navigate to Your integrations → Credentials
  3. Copy the Production or Test access token
Use test credentials during development

​
AI Model Integration

​
BANANA_API_KEY
string
required
Kie.ai (Banana) API key for image generationExample: e12c19f419743e747757b4f164d55e87Where to find: Kie.ai Dashboard → API KeysUsed by: cabina-vision edge function

​
Local Development Setup

​
.env.local Template

Create this file in your project root:
.env.local
# Supabase
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key-here

# AI Integration
GEMINI_API_KEY=your-gemini-api-key

​
Supabase Edge Functions Secrets

Set secrets using the Supabase CLI: 
# Payment integration
supabase secrets set MP_ACCESS_TOKEN=your-mercadopago-token

# AI model
supabase secrets set BANANA_API_KEY=your-kie-ai-key
Or via the Supabase Dashboard:
  1. Go to Edge Functions → Settings
  2. Click “Add new secret”
  3. Enter the variable name and value

​
Vite Build Configuration

Vite injects environment variables at build time. Variables must be prefixed with VITE_ to be exposed to client code.
vite.config.ts
define: {
  'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
  'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
}
The GEMINI_API_KEY is aliased as both process.env.API_KEY and process.env.GEMINI_API_KEY for compatibility.

​
Production Deployment

​
Vercel / Netlify

Add environment variables in your hosting platform: 
# Via Vercel Dashboard
Project Settings → Environment Variables

# Or via CLI
vercel env add VITE_SUPABASE_URL
vercel env add VITE_SUPABASE_ANON_KEY
vercel env add GEMINI_API_KEY

​
Docker Deployment

Use a .env file or pass variables:
Dockerfile
# Build with ARG
ARG VITE_SUPABASE_URL
ARG VITE_SUPABASE_ANON_KEY
ARG GEMINI_API_KEY

RUN npm run build

docker build \
  --build-arg VITE_SUPABASE_URL=$VITE_SUPABASE_URL \
  --build-arg VITE_SUPABASE_ANON_KEY=$VITE_SUPABASE_ANON_KEY \
  --build-arg GEMINI_API_KEY=$GEMINI_API_KEY \
  -t cabina .

​
Security Best Practices

Never commit sensitive keys to version control!Ensure .env.local, .env, and .env.production are in your .gitignore.

Use different keys per environment

Production, staging, and development should have separate API keys

Rotate keys regularly

Change API keys periodically, especially after team member changes

Monitor usage

Track API usage in Supabase, Mercado Pago, and Kie.ai dashboards

Implement rate limiting

Use Supabase RLS and edge function rate limits

​
Environment Variable Checklist

  • VITE_SUPABASE_URL configured
  • VITE_SUPABASE_ANON_KEY configured
  • GEMINI_API_KEY configured
  • SUPABASE_SERVICE_ROLE_KEY set in Edge Functions
  • MP_ACCESS_TOKEN set in Edge Functions
  • BANANA_API_KEY set in Edge Functions
  • All secrets added to .gitignore
  • Production values different from development
  • Team members have access to secrets vault

​
Troubleshooting

Vite variables:
  • Ensure they start with VITE_
  • Restart dev server after changing .env.local
Edge Function variables:
  • Check they’re set in Supabase Dashboard → Edge Functions → Settings
  • Redeploy the edge function after adding secrets
Check that:
  • VITE_SUPABASE_URL matches your actual project URL
  • VITE_SUPABASE_ANON_KEY is the correct public key
  • Your domain is allowed in Supabase Auth settings
Ensure:
  • MP_ACCESS_TOKEN is set correctly
  • Edge function is deployed and accessible
  • Mercado Pago webhook URL is configured correctly

​
Next Steps

Deployment Guide

Deploy your configured app to production

Supabase Integration

Learn more about Supabase setup

Build docs developers (and LLMs) love

Get started for freeTalk to us