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

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#L1-L34). This pulls the React frontend, Vite build tools, and API libraries required for the application.

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.

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
• 20260509090000_membership_billing.sql
• 20260721090000_alipay_webpay.sql
• 20260722090000_paid_community.sql
• 20260512090000_google_account_center.sql
• 20260512143000_pricing_admin_metrics.sql
• 20260515090000_case_favorites.sql
• 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 file serves as the single source of truth for both the web UI and the skill.

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 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.

npm run dev

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

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

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:

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

Method 2: Using the skills CLI:

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:

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
• 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 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.

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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}