Quickstart

Get your first AI-generated photo in under 5 minutes. This guide covers both user and developer quickstart paths.

For Users
For Developers
For Partners

Your first AI photo

Create an account

Visit the Creativa Labs Cabina app and sign up with your email or Google account.

https://app.metalab30.com

Purchase credits

Navigate to the Packs section and purchase your first credit pack.

Starter pack: 3,000 credits
Each photo generation costs 100 credits
Secure payment via Mercado Pago

New users often start with the 3,000 credit pack, which allows 30 photo generations.

Choose a style

Browse through 45+ AI styles organized by category:

Series: Breaking Bad, Peaky Blinders, John Wick
Sports: Formula 1, Football, Basketball
Art: Pixar, Anime, Comic Book
Fantasy: Superhero, Magic, Cyberpunk
Fashion: Magazine, Street Style, Haute Couture

Select your favorite style to begin.

Capture your photo

Click the camera icon to open the camera interface
Position yourself in the frame
Capture a clear, well-lit photo
Review and confirm your image

For best results, use good lighting and center your face in the frame.

Generate and download

Click Generate to process your photo with AI. The generation typically takes 30-60 seconds.Once complete:

View your generated image in high quality
Download to your device
Share directly to social media
Save to your personal gallery

Next steps

Explore more styles

Discover all 45+ available styles and categories

View your gallery

Access and manage all your generated photos

Local development setup

Clone the repository

git clone [email protected]:MetalabSA/creativa-labs-cabina.git
cd creativa-labs-cabina

Install dependencies

npm install

The project uses:

React 19 + TypeScript
Vite for build tooling
Supabase for backend
Tailwind CSS for styling

Configure environment variables

Create a .env.local file in the project root:

.env.local

# Supabase Configuration
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

# AI API (Kie.ai)
VITE_KIE_API_KEY=your_kie_api_key

# Mercado Pago (Optional for testing)
VITE_MERCADOPAGO_PUBLIC_KEY=your_mp_public_key

Never commit API keys to version control. Keep .env.local in your .gitignore.

See Environment Variables for complete configuration.

Start development server

npm run dev

The app will start at https://localhost:3000 (note: HTTPS is enabled by default for camera access).

The development server uses a self-signed SSL certificate. Your browser may show a security warning - this is normal for local development.

Make your first API call

Test the AI generation API by capturing a photo and selecting a style.The generation flow:

User captures photo → Base64 encoded
Frontend calls Supabase Edge Function: cabina-vision
Edge function calls Kie.ai with prompt + image
Generated image uploaded to Supabase Storage
Record saved to generations table
User credits decremented atomically

See the implementation in src/App.tsx:handleSubmit().

Project structure

creativa-labs-cabina/
├── src/
│   ├── App.tsx                 # Main application component
│   ├── components/
│   │   ├── dashboards/         # Master, Partner, Client dashboards
│   │   ├── kiosk/              # Guest experience components
│   │   └── shared/             # Reusable components
│   ├── lib/
│   │   ├── supabaseClient.ts   # Supabase initialization
│   │   └── constants.ts        # Styles, categories, packs
│   └── types.ts                # TypeScript definitions
├── supabase/
│   ├── functions/
│   │   ├── cabina-vision/      # AI generation edge function
│   │   └── mercadopago-payment/ # Payment webhook
│   └── migrations/             # Database schema
└── vite.config.ts              # Build configuration

Next steps for developers

Database Schema

Understand the data model and relationships

API Reference

Explore Supabase Edge Functions

Deployment Guide

Deploy to production

Architecture

Deep dive into system design

Need help?

User Guides

Step-by-step tutorials for end users

Technical Docs

Developer documentation and API reference

Core Concepts

Understand how the platform works

Get Started

Core Concepts

Your first AI photo

Next steps

Explore more styles

View your gallery

Local development setup

Project structure

Next steps for developers

Database Schema

API Reference

Deployment Guide

Architecture

Setting up your first event

Partner resources

Creating Events

Credit Management

Need help?

User Guides

Technical Docs

Core Concepts

Build docs developers (and LLMs) love

Get Started

Core Concepts

​Your first AI photo

​Next steps

Explore more styles

View your gallery

​Local development setup

​Project structure

​Next steps for developers

Database Schema

API Reference

Deployment Guide

Architecture

​Setting up your first event

​Partner resources

Creating Events

Credit Management

​Need help?

User Guides

Technical Docs

Core Concepts

Build docs developers (and LLMs) love

Your first AI photo

Next steps

Local development setup

Project structure

Next steps for developers

Setting up your first event

Partner resources

Need help?