Credits: How WZRD Studio Meters AI Generation Usage

// Using the useCredits hook inside any React component
import { useCredits } from '@/hooks/useCredits';

const { availableCredits } = useCredits();
console.log(`Available: ${availableCredits} credits`);

{
  "code": "insufficient_credits",
  "required": 20,
  "available": 3,
  "top_up_url": "https://..."
}

import { InsufficientCreditsError } from '@/services/unifiedGenerationService';

try {
  const result = await unifiedGenerationService.generate(input);
} catch (error) {
  if (error instanceof InsufficientCreditsError) {
    console.log(`Need ${error.required} credits, have ${error.available}`);
    // The service automatically routes to the billing top-up page
  }
}

# Start a Stripe checkout for a credit pack
curl -X POST https://<project>.supabase.co/functions/v1/billing-checkout \
  -H "Authorization: Bearer <supabase-jwt>" \
  -H "Content-Type: application/json" \
  -d '{ "checkout_mode": "pack", "pack_code": "pack_100" }'

# Response
{ "checkout_url": "https://checkout.stripe.com/..." }

# Start a Stripe checkout for a subscription plan
curl -X POST https://<project>.supabase.co/functions/v1/billing-checkout \
  -H "Authorization: Bearer <supabase-jwt>" \
  -H "Content-Type: application/json" \
  -d '{ "checkout_mode": "subscription", "plan_code": "pro" }'

# Response
{ "checkout_url": "https://checkout.stripe.com/..." }

# Retrieve plan status and credit balance
curl https://<project>.supabase.co/functions/v1/billing-catalog \
  -H "Authorization: Bearer <supabase-jwt>"

# Response (abbreviated)
{ "subscription": { ... }, "wallet": { "available_total": 97 }, "plans": [...], "credit_packs": [...] }

import {
  getModelCredits,
  formatModelLabel,
  formatModelLabelById,
  getShotImageCredits,
  getShotVideoCredits,
  DIRECTORS_CUT_CREDITS,
  IMAGE_CREDITS,
  VIDEO_CREDITS,
} from '@/lib/constants/credits';

// Look up a model's credit cost by ID
getModelCredits('fal-ai/flux/schnell');          // → 3
getModelCredits('fal-ai/kling-video/o3/standard/text-to-video'); // → 20

// Format for display in a dropdown
formatModelLabelById('fal-ai/flux/schnell');     // → "FLUX Schnell (3 credits)"

// Shot-level helpers (fall back to catalog defaults when no model selected)
getShotImageCredits('fal-ai/nano-banana-2');     // → 4
getShotVideoCredits();                           // → 20 (default video model)

// Director's Cut cost
console.log(DIRECTORS_CUT_CREDITS);             // → 12

// Pre-built lookup maps (model ID → credits)
console.log(IMAGE_CREDITS['fal-ai/flux/schnell']); // → 3