# How to Configure awesome-gpt-image-2 Project Settings: Complete Setup Guide

> Configure awesome-gpt-image-2 settings easily. Copy .env.example, add Supabase and Ciyuan API keys, and push migrations. Get started with this complete setup guide.

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: how-to-guide
- Published: 2026-08-27

---

**Configure awesome-gpt-image-2 by copying `.env.example` to `.env`, setting your Supabase credentials, Ciyuan API key, and optional payment provider secrets, then running `supabase db push` to apply migrations.**

The **awesome-gpt-image-2** repository is a full-stack, prompt-as-code platform featuring a public gallery site, API proxy, and Supabase-backed authentication with credit-based billing. Proper configuration of environment variables and database schema is essential for both local development and production deployment. This guide walks through every setting using the actual source structure from `freestylefly/awesome-gpt-image-2`.

## Understanding the Configuration Architecture

All runtime behavior in awesome-gpt-image-2 is driven by **environment variables** and **Supabase migrations**. The project separates concerns cleanly between client-side and server-side configuration.

| Configuration Layer | Controls | Prefix / Location |
|---|---|---|
| **Vite client** | Front-end Supabase client, analytics ID | `VITE_*` variables |
| **Vercel functions** | Server-side auth, billing, image generation | Plain env variables |
| **Supabase schema** | Credits, memberships, payments, favorites | `supabase/migrations/*.sql` |

Variables without the `VITE_` prefix are **never exposed to the browser**. This security boundary is enforced in [`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js) and across all API routes in `api/*`.

## Step 1: Initialize Your Environment File

Create your local configuration by copying the example file:

```bash
cp .env.example .env

```

The `.env.example` file in the repository root serves as the authoritative reference. Edit `.env` with values for every service you plan to use:

```dotenv

# ── Ciyuan Image Generation (Required) ─────────────────

CIYUAN_API_KEY=your-ciyuan-api-key
CIYUAN_BASE_URL=https://ciyuan.today

# ── Supabase Client-Side (Required) ────────────────────

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key

# ── Supabase Server-Side (Required) ────────────────────

SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

# ── Application & Admin (Required) ─────────────────────

APP_URL=http://localhost:5173
SUPER_ADMIN_EMAILS=you@example.com

# ── Stripe Billing (Optional) ──────────────────────────

STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

# ── Alipay Payments (Optional) ─────────────────────────

ALIPAY_APP_ID=your-app-id
ALIPAY_PRIVATE_KEY=-----BEGIN RSA PRIVATE KEY-----
...
ALIPAY_PUBLIC_KEY=-----BEGIN PUBLIC KEY-----
...
ALIPAY_SELLER_ID=your-seller-id
ALIPAY_GATEWAY=https://openapi.alipay.com/gateway.do
ALIPAY_NOTIFY_URL=https://your-domain.com/api/community/alipay/notify
ALIPAY_NOTIFY_ENABLED=true

# ── Paid Community Toggle (Optional) ───────────────────

COMMUNITY_PAYMENT_ENABLED=false

# ── Google Analytics 4 (Optional) ──────────────────────

VITE_GA_MEASUREMENT_ID=G-XXXXXXXXXX
GA4_PROPERTY_ID=123456789
GOOGLE_ANALYTICS_CLIENT_ID=oauth-client-id
GOOGLE_ANALYTICS_CLIENT_SECRET=oauth-client-secret
GOOGLE_ANALYTICS_REFRESH_TOKEN=refresh-token-from-oauth-flow

```

The `isSupabaseConfigured` guard in [`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js) checks for `VITE_SUPABASE_URL` and `VITE_SUPABASE_ANON_KEY`. If either is missing, authentication and generation features disable gracefully:

```javascript
// src/supabaseClient.js
export const isSupabaseConfigured = Boolean(supabaseUrl && supabaseAnonKey);

```

## Step 2: Apply Supabase Database Migrations

The schema is defined in versioned SQL files under `supabase/migrations/`. Apply them in order:

| Migration File | Purpose |
|---|---|
| [`202605090001_user_credits.sql`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/202605090001_user_credits.sql) | User credits table and `adjust_user_credits()` RPC |
| [`20260509090000_membership_billing.sql`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/20260509090000_membership_billing.sql) | Membership plans, credit packs, Stripe orders |
| [`20260721090000_alipay_webpay.sql`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/20260721090000_alipay_webpay.sql) | Alipay payment tables and webhook handling |
| [`20260722090000_paid_community.sql`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/20260722090000_paid_community.sql) | Community orders and QR-code generation |
| [`20260512090000_google_account_center.sql`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/20260512090000_google_account_center.sql) | Admin usage summaries |
| [`20260512143000_pricing_admin_metrics.sql`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/20260512143000_pricing_admin_metrics.sql) | Pricing catalog and metrics |
| [`20260515090000_case_favorites.sql`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/20260515090000_case_favorites.sql) | Per-user case favorites |

Run migrations using the Supabase CLI:

```bash
supabase db reset      # Optional: clear existing data

supabase db push       # Apply all pending migrations

```

The `adjust_user_credits` RPC defined in [`202605090001_user_credits.sql`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/202605090001_user_credits.sql) is called from [`api/_lib/supabase.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/_lib/supabase.js) to atomically increment or decrement user balances:

```javascript
// api/_lib/supabase.js
export async function adjustUserCredits(userId, delta) {
  const { data, error } = await supabase.rpc('adjust_user_credits', {
    uid: userId,
    delta,
  });
  if (error) throw error;
  return data;
}

```

## Step 3: Configure Vercel Deployment

For production on Vercel, replicate your `.env` settings in the dashboard with one critical distinction:

- **Environment Variables** → Add all server-side secrets (`SUPABASE_SERVICE_ROLE_KEY`, `STRIPE_SECRET_KEY`, `ALIPAY_PRIVATE_KEY`, etc.)
- **VITE_ variables** → These are automatically injected into the client bundle; store them in Vercel only if needed for preview deployments

Required Vercel configuration steps:

1. **Supabase Auth Redirect URLs**: Add your production domain and `http://127.0.0.1:5173` for local testing
2. **Stripe Webhook Endpoint**: Register `https://<your-domain>/api/billing/webhook` and subscribe to:
   - `checkout.session.completed`
   - `invoice.payment_succeeded`
   - `customer.subscription.updated`
   - `customer.subscription.deleted`

The webhook handlers in [`api/billing/webhook.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/billing/webhook.js) verify signatures using `STRIPE_WEBHOOK_SECRET` before updating membership records.

## Step 4: Set Up Google Analytics (Optional)

To enable server-side GA4 reporting in [`api/_lib/ga4.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/_lib/ga4.js):

```bash
npm run ga4:oauth

```

This opens an OAuth flow. After authorization, paste the callback URL to receive a refresh token. Add this to your `.env` as `GOOGLE_ANALYTICS_REFRESH_TOKEN`. The measurement ID (`VITE_GA_MEASUREMENT_ID`) triggers front-end page views via standard gtag injection.

## Step 5: Verify Local Development

Start the Vite development server:

```bash
npm install
npm run dev

```

Confirm these behaviors at `http://localhost:5173`:

- **Sign-in button appears** → Supabase client initialized correctly
- **Google OAuth succeeds** → Redirect URLs configured
- **Image generation works** → Ciyuan API key valid and credits available

The image generation endpoint at [`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js) validates the session, checks credits via `adjustUserCredits`, and proxies requests to `CIYUAN_BASE_URL`:

```javascript
// api/generate-image.js (structure)
import { supabase } from './_lib/supabase.js';

export default async function handler(req, res) {
  const { data: { user } } = await supabase.auth.getUser(req.headers.authorization);
  // Credit check, Ciyuan API call, response streaming
}

```

## Step 6: Production Deployment Checklist

Before enabling paid features, verify every item:

- [ ] All environment variables populated in Vercel dashboard
- [ ] Supabase migrations applied in production project
- [ ] Stripe webhook URL registered with correct events
- [ ] Alipay keys and `ALIPAY_NOTIFY_URL` point to production domain
- [ ] `COMMUNITY_PAYMENT_ENABLED` remains `false` until payment testing completes
- [ ] `SUPER_ADMIN_EMAILS` includes at least one accessible address
- [ ] `APP_URL` matches deployed domain exactly (no trailing slash)
- [ ] Supabase Auth redirect URLs include production origin

Set `COMMUNITY_PAYMENT_ENABLED=true` only after successfully testing end-to-end checkout flows with Stripe test mode or Alipay sandbox.

## Summary

- **Copy `.env.example`** as your configuration template; all variables are documented there
- **Prefix client variables with `VITE_`** so Vite exposes them to `import.meta.env`
- **Apply migrations with `supabase db push`** before starting the application
- **Protect server secrets**—never prefix Stripe, Alipay, or service-role keys with `VITE_`
- **Test payment flows** before enabling `COMMUNITY_PAYMENT_ENABLED` in production

## Frequently Asked Questions

### What happens if I skip the Supabase migrations?

The application runs but authentication and credit features fail silently. The `isSupabaseConfigured` check in [`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js) only validates environment variables, not schema existence. You'll see console warnings and disabled UI elements without database tables for `user_credits`, `membership_plans`, and billing records.

### Can I use awesome-gpt-image-2 without Stripe or Alipay?

Yes. Set `COMMUNITY_PAYMENT_ENABLED=false` and omit all payment-related variables. The platform functions as a free, credit-based image generator with manual credit allocation via the `adjust_user_credits` RPC or direct database edits for admin users.

### Why does the server need a separate Supabase key?

The `SUPABASE_SERVICE_ROLE_KEY` bypasses Row Level Security (RLS) policies, allowing the Vercel functions in `api/*` to modify credits and billing records on behalf of users. The `VITE_SUPABASE_ANON_KEY` respects RLS and is safe to expose in the browser. This separation follows Supabase security best practices for full-stack applications.

### How do I rotate leaked credentials?

Update the value in your `.env` file, redeploy to Vercel with the new secret, and revoke the old key in the respective service dashboard (Supabase, Stripe, Alipay, or Google Cloud). For Supabase service-role keys, generate a new one in Project Settings → API. Stripe and Alipay require generating new API credentials from their merchant consoles.