# How to Install awesome-gpt-image-2: Complete Local Setup and Agent Skill Guide

> Learn how to install awesome-gpt-image-2 with this complete local setup guide. Follow step-by-step instructions for repository cloning, dependency installation, and running the development server.

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

---

**Clone the repository, install Node.js dependencies, configure your Supabase and API credentials in `.env.local`, apply the SQL migrations, generate the static data with `npm run generate:site-data`, and run `npm run dev` to start the Vite development server on `http://localhost:5173`.**

The **awesome-gpt-image-2** repository by freestylefly is a full-stack React application that hosts a searchable style library for GPT Image 2 prompts, backed by Supabase for authentication and credit management. Installing this project locally requires setting up a Vite frontend, configuring Supabase environment variables, and optionally deploying an Agent Skill that exposes the style data to Claude Code and Cursor. This guide walks you through the complete installation process using the exact file structure and commands defined in the source code.

## Step 1: Clone the Repository and Install Dependencies

Begin by cloning the GitHub repository and installing the Node.js dependencies defined in **[[`package.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/package.json)](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/package.json#L1-L34)**. This pulls the React frontend, Vite build tools, and API libraries required for the application.

```bash
git clone https://github.com/freestylefly/awesome-gpt-image-2.git
cd awesome-gpt-image-2
npm install

```

This command installs the complete dependency tree including React, Vite, and Supabase client libraries specified in the project configuration.

## Step 2: Configure Backend Environment Variables

Copy the example environment file to create your local configuration. The application requires several API keys to connect to Supabase, APIMart for image generation, and optionally Stripe for payment processing.

```bash
cp .env.example .env.local

```

Edit `.env.local` and populate the following required variables:

- **`VITE_SUPABASE_URL`** – Your Supabase project URL
- **`VITE_SUPABASE_ANON_KEY`** – Supabase anonymous client key
- **`SUPABASE_SERVICE_ROLE_KEY`** – Supabase service-role key (server-side only)
- **`APIMART_API_KEY`** – API key for image generation services
- **`STRIPE_SECRET_KEY`** – For payment processing (optional)
- **`STRIPE_WEBHOOK_SECRET`** – For Stripe webhook verification (optional)

All runtime secrets must remain **server-side** and must not be committed to the repository. Refer to the **Setup checklist** in the README for the complete list of environment variables.

## Step 3: Apply Supabase Database Migrations

The backend relies on Supabase for authentication, credit tracking, and billing. You must execute the SQL migration files located in **`supabase/migrations/`** to create the necessary tables, RPC functions, and billing logic.

Run these migration files in your Supabase dashboard SQL editor:

- [`202605090001_user_credits.sql`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/202605090001_user_credits.sql)
- [`20260509090000_membership_billing.sql`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/20260509090000_membership_billing.sql)
- [`20260721090000_alipay_webpay.sql`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/20260721090000_alipay_webpay.sql)
- [`20260722090000_paid_community.sql`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/20260722090000_paid_community.sql)
- [`20260512090000_google_account_center.sql`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/20260512090000_google_account_center.sql)
- [`20260512143000_pricing_admin_metrics.sql`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/20260512143000_pricing_admin_metrics.sql)
- [`20260515090000_case_favorites.sql`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/20260515090000_case_favorites.sql)
- [`20260828090000_apimart_generation_tasks.sql`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/20260828090000_apimart_generation_tasks.sql)

These migrations establish the database schema required for user credits, membership billing, Alipay web payments, and the paid community features.

## Step 4: Generate Static Data and the Agent Skill

Before running the development server, generate the static site data and the Agent Skill files. The **[`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json)** file serves as the single source of truth for both the web UI and the skill.

```bash
npm run generate:site-data && npm run generate:style-skill

```

This process synthesizes the JSON style-library containing 500+ prompt templates and generates the skill source code under **`agents/skills/gpt-image-2-style-library/`**. The **[`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js)** file uses this configuration to connect the frontend to your Supabase instance.

## Step 5: Start the Development Server

Launch the Vite development server to run the application locally. The server starts on port 5173 by default, as configured in **[`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx)**.

```bash
npm run dev

```

Access the application at `http://localhost:5173`.

Optional: To test Alipay payment integrations, use the sandbox command:

```bash
npm run dev:alipay-sandbox

```

## Step 6: Install the Agent Skill (Optional)

To query the style library from within Claude Code, Cursor, or other AI-assisted tools, install the **gpt-image-2-style-library** skill globally.

**Method 1:** Using npm:

```bash
npm install -g gpt-image-2-style-library
gpt-image-2-style-library install all

```

**Method 2:** Using the skills CLI:

```bash
npx skills add freestylefly/awesome-gpt-image-2 --skill gpt-image-2-style-library --agent claude-code codex --global --yes --copy

```

This copies the skill to your local agent directories (`~/.codex/skills`, `~/.claude/skills`, etc.), making the style data available for AI queries.

## Building for Production

When ready to deploy (e.g., to Vercel), create an optimized production build:

```bash
npm run build

```

This outputs static files to the `/dist` directory. Ensure all environment variables are configured in your hosting provider's dashboard and are excluded from version control.

## Summary

- Clone the repository and run `npm install` to establish the Node.js/React environment defined in [`package.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/package.json)
- Configure `.env.local` with Supabase URLs, APIMart keys, and optional Stripe credentials
- Execute all SQL migrations in `supabase/migrations/` to initialize the database schema
- Run `npm run generate:site-data` and `npm run generate:style-skill` to build the static assets and Agent Skill
- Use `npm run dev` to launch the local Vite server on `localhost:5173`
- Install the Agent Skill globally to access style data from Claude Code, Cursor, and other AI assistants
- Keep all service-role keys and API secrets server-side only; never commit them to the repository

## Frequently Asked Questions

### What are the required environment variables for awesome-gpt-image-2?

You must set `VITE_SUPABASE_URL`, `VITE_SUPABASE_ANON_KEY`, `SUPABASE_SERVICE_ROLE_KEY`, and `APIMART_API_KEY` in your `.env.local` file. Optional variables include `STRIPE_SECRET_KEY` and `STRIPE_WEBHOOK_SECRET` for payment processing, along with GA4 tokens for analytics tracking. These values are loaded by the configuration system and used by [`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js) to establish database connections.

### How do I install the gpt-image-2-style-library Agent Skill?

You can install it globally via `npm install -g gpt-image-2-style-library` followed by `gpt-image-2-style-library install all`, or use the skills CLI with the command `npx skills add freestylefly/awesome-gpt-image-2 --skill gpt-image-2-style-library --agent claude-code codex --global --yes --copy`. This installation copies the skill files to directories such as `~/.claude/skills` and `~/.codex/skills`, allowing AI assistants to query the style library data defined in [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json).

### Can I run awesome-gpt-image-2 without Supabase?

The website can operate in a limited capacity with only a personal APIMart key for image generation, bypassing authentication. However, full functionality—including user credit management, favorites, membership billing, and community features—requires a configured Supabase project with all migrations applied. The source code in `api/_lib/` relies on Supabase for server-side credit validation and user state management.

### How do I deploy awesome-gpt-image-2 to production?

Run `npm run build` to generate optimized static files in the `/dist` directory, then deploy these assets to Vercel or your preferred static hosting platform. Ensure all production environment variables are set in your hosting provider's dashboard, and verify that `SUPABASE_SERVICE_ROLE_KEY` and Stripe secrets remain server-side only, according to the security implementation in the repository's configuration handling.