EasyApp integrates the Flux text-to-image capability through the Replicate platform.

For any AI feature, make sure the API token is stored on the server to avoid the risk of client-side interception.

The Supabase Edge Function guide explains how to store API tokens with Supabase Edge Functions and send requests to large language models.

We recommend building and validating everything in the local development environment first, then deploying to production once all functionality is confirmed.

For details on using the local environment, see the instructions in SupabaseEdgeFuncton.

Configure the Replicate API Token

Within the EasyAppSupabase project, set REPLICATE_API_TOKEN in supabase/.env.local:

REPLICATE_API_TOKEN=your_replicate_api_token

Create a new token on the Replicate API token page.

After setting REPLICATE_API_TOKEN, start the local development environment. The EasyAppSupabase project already ships with common scripts:

  "scripts": {
    "deploy": "./deploy.sh",
    "migrate": "supabase db push",
    "functions:deploy": "supabase functions deploy",
    "functions:logs": "supabase functions logs",
    "start": "supabase start",
    "stop": "supabase stop",
    "reset": "supabase db reset",
    "status": "supabase status",
    "dev": "./dev.sh",
    "dev:functions.env.local": "supabase functions serve --env-file ./supabase/.env.local",
    "dev:functions": "supabase functions serve",
    "dev:migration": "supabase migration up"
  },

For development, simply run npm run dev.

The dev.sh script handles all prerequisites for you:

# Start Supabase
echo "Starting Supabase..."
supabase start

# Apply migrations to local database
echo "Applying migrations to local database..."
supabase migration up

# if you want to reset the database, uncomment the following line
# supabase db reset

# Run the function locally
echo "Running the function locally..."
# supabase functions serve --env-file ./supabase/.env.local
supabase functions serve

Cloud Functions Overview

The Flux text-to-image flow relies on the following cloud functions:

image-generation
image-generation-history
image-generation-status

image-generation is the primary function that creates images.

image-generation-history returns the generation history.

image-generation-status reports the current status. The client polls this function to retrieve real-time task updates.

With image-generation-status, the client gains task-state management that stays in sync with the database. Even after leaving and re-entering the app, the latest task status remains accessible.