Agent skill · software engineering · aradotso
gpt-image-playground
AI coding agent skill for GPT Image Playground — a React/TypeScript web app for OpenAI image generation and editing using gpt-image-1 and related APIs.
Why this skill is useful
Provides specific integration patterns and commands for deploying a React/TypeScript web app with OpenAI's image generation APIs that the AI wouldn't reliably generate on its own.
What it needs
Requires docker, node, npm installed locally. Requires openai account access. About 7k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
GPT Image Playground Skill by ara.so — Daily 2026 Skills collection. A React 19 + TypeScript + Vite web application for generating and editing images via OpenAI's Images API (/v1/images) or Responses API (/v1/responses). Features a responsive UI with waterfall task cards, IndexedDB local storage, PWA support, bulk selection, history management, and ZIP export/import. --- What It Does Text-to-image: Generate images from prompts via images/generations or responses with imagegeneration tool Reference image editing: Upload up to 16 reference images, call images/edits or multimodal Responses API Smart size selector: Auto-calculates resolutions for 1K/2K/4K at common aspect ratios; custom sizes auto-snapped to 16px multiples, max 3840px, max ratio 3:1, pixel range 655360–8294400 Parameter control: Quality (low/medium/high), format (PNG/JPEG/WebP), compression, moderation level History: IndexedDB storage with SHA-256 image deduplication, bulk ops, favorites, search/filter Data portability: ZIP export/import with raw image files + manifest.json --- Tech Stack Layer Technology ------- ----------- Framework React 19 + TypeScript Build Vite Styling Tailwind CSS 3 State Zustand Storage Browser IndexedDB API --- Installation & Setup Prerequisites Node.js 18+ npm Clone and Run Locally Environment Variables Create .env.local in the project root: Build for Production Docker Update to latest: --- Vercel One-Click Deploy Add environment variable in Settings → Environment Variables: --- API Configuration In-App Settings Open settings (top-right gear icon) and configure: Field Images API Responses API ------- ----------- --------------- Endpoint /v1/images/generations, /v1/images/edits /v1/responses Model example gpt-image-1 gpt-4o, gpt-5.5 URL Query Parameters (Deep-link Config) Pre-fill settings via URL — useful for bookmarks or sharing: Parameters: apiUrl — API base URL apiKey — OpenAI API key --- Local Development Proxy (CORS Bypass) When your API endpoint doesn't allow browser COR …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/gpt-image-playground