VibeFast
Customizing Features

AI Image Generator

How the generator screens create AI illustrations via your backend.

This feature lets users prompt an AI engine, pick styles, and save the results across both clients. Add it with:

vf add image-generator

Frontend

  • Route: apps/native/src/app/(root)/(protected)/image-generator/index.tsx renders the create screen.
  • Hooks: apps/native/src/features/image-generator/hooks/use-image-generator.ts manages prompts, progress, and uploads.
  • Settings: use-image-generator-settings.ts exposes presets, styles, and provider preferences.
  • Components: apps/native/src/features/image-generator/components include the canvas preview, prompt history, and gallery modals.

Backend

  • packages/backend/convex/imageGeneration.ts runs the action that calls OpenAI/Gemini, stores outputs, and tracks metadata
  • packages/backend/convex/lib/ai/openaiAdapter.ts and geminiAdapter.ts wrap each provider
  • packages/backend/supabase/functions/generate-image/ Edge Function calls OpenAI/Gemini
  • packages/backend/src/services/storage.ts handles file uploads to Supabase Storage
  • Database table: generated_images with RLS policies

Environment

Set these keys in packages/backend/.env.local:

  • OPENAI_API_KEY or GEMINI_API_KEY
  • AI_PROVIDER (openai or gemini) and AI_MODEL

Also set CONVEX_URL, CONVEX_DEPLOYMENT, CONVEX_SITE_URL. Run pnpm native:setup:convex after editing.

Also set SUPABASE_URL and keys. Run pnpm secrets:push after editing.

Customization

  • Add new styles, aspect ratios, or presets by extending src/features/image-generator/models
  • Change the UI flow by swapping the PromptForm, StylePicker, and GeneratedImageList components
  • The backend adapters support retries and chunked uploads

Found an issue or bug in the docs?

Help me improve! If you spot any errors, typos, or have suggestions, please let me know.

Reach out on X/Twitter @zafarbuildzz

On this page

FrontendBackendEnvironmentCustomization