🎨 AI Creative Studio

Generate on-brand ad creatives & visual assets with AI — in seconds.

A creative workspace that turns a brand profile and a short brief into production-ready marketing visuals, powered by Google Gemini.

🚧 Under active development — features and APIs may change between updates. Feedback and contributions are welcome.

The workspace — write a brief on the left, watch on-brand creatives fill the gallery on the right.

AI Creative Studio is an AI-powered design assistant for marketing teams, founders, and creators. You define a brand profile once — name, guidelines, logo — and the studio generates polished, on-brand visuals that respect your look and feel. No design tools, no prompt-engineering expertise required.

Upload a few product shots, describe the campaign, pick an aspect ratio, and generate a full set of ad creatives ready to ship to social, web, or print.

• Social ad campaigns — batch-generate scroll-stopping creatives for Instagram, Facebook, and TikTok.
• Product marketing — turn plain product photos into styled lifestyle and hero shots.
• Brand-consistent content — keep every asset aligned to one set of brand guidelines.
• Rapid concepting — explore visual directions in minutes instead of days.
• Creative editing — iterate on existing assets without reopening a design tool.

Visual Assets — upload product shots & style inspiration, pick from 10 aspect ratios.	Brand Profiles — define name, guidelines, and logo once.
Asset Gen — generate visuals from a composition brief.	Editor — refine any image with natural-language instructions.

• Frontend: React 18 · TypeScript · Vite 6
• AI: Google Gemini (@google/genai)
• Backend (local): Express 5 · Prisma 7 · SQLite
• Backend (cloud): Supabase (PostgreSQL + Storage)

• Node.js 20.19+, 22.12+, or 24+ (22 LTS recommended). Prisma 7 and the Vite React plugin will not run on Node 18, and 20.11 is not enough either.
• npm or yarn
• Gemini API Key with billing enabled — Get one here
• Supabase Account (optional — only for cloud mode) — Sign up free

⚠️ About the Gemini API key: This app generates images using gemini-3-pro-image (Nano Banana Pro), which is a Pro tier model. A free-tier key from AI Studio will not work for image generation — free tier only covers Flash models. You'll need a key on a billing-enabled GCP project. Enable billing → Image generation is billed per image, and a batch of 10 costs 10 images' worth, so check current pricing before running large batches.

🔑 Where your key ends up: the app calls Gemini from the browser, so npm run build compiles GEMINI_API_KEY into the JavaScript it ships. Anyone who can load a deployed build can read it. Keep deployments private, or run locally, until generation moves behind a server.

There are two ways to run AI Creative Studio. Pick the one that matches your situation:

👉 Recommended: start with Local Setup to validate it works for you. Moving to Production later is a .env.local change only: set APP_ENV=production and add your Supabase credentials. Authentication switches on automatically. No source files to edit.

The fastest path — an interactive setup script that handles everything: prompts for your Gemini key, installs dependencies, runs migrations, creates the storage folder, and starts the dev server. Re-running is safe — already-done steps are skipped.

git clone https://github.com/Arcady-Inc/ai-creative-studio.git
cd ai-creative-studio
bash setup.sh

git clone https://github.com/Arcady-Inc/ai-creative-studio.git
cd ai-creative-studio
powershell -ExecutionPolicy Bypass -File setup.ps1

👉 New here? Just run the script. It defaults to local mode (SQLite + filesystem) so no Supabase or Google OAuth needed to try it out. It also tells you what each value is for — including the Gemini billing requirement — before asking.

When it's done it starts the dev server. Open http://localhost:3000.

git clone https://github.com/Arcady-Inc/ai-creative-studio.git
cd ai-creative-studio
npm install
cp .env.example .env.local
# Add your GEMINI_API_KEY to .env.local
# (Supabase keys are optional, only needed for cloud mode)
npx prisma migrate deploy   # creates dev.db
npx prisma generate         # required: the server imports the generated client
npm run dev

git clone https://github.com/Arcady-Inc/ai-creative-studio.git
cd ai-creative-studio
npm install
Copy-Item .env.example .env.local
# Add your GEMINI_API_KEY to .env.local
npx prisma migrate deploy
npx prisma generate
npm run dev

Use this path when you want your whole agency/team to share brand profiles, gallery assets, and sign in with their work Google account.

You'll wire up three things (~20 min total):

1. 🗄️ Supabase project — hosts the Postgres DB and the asset storage bucket. → Follow the Supabase Setup section below (create project, run SQL, create the creatives bucket).

2. 🔐 Google OAuth via Supabase — so only your team's email domain can sign in. → Follow GOOGLE_AUTH_SETUP.md (10-min walkthrough with screenshots).

3. 🚀 Production-mode toggle — switch the app from "bypass auth, local DB" to "require Google, cloud DB":

   • In .env.local: set APP_ENV=production and fill in SUPABASE_URL + SUPABASE_ANON_KEY
   • In .env.local: optionally set ALLOWED_DOMAIN to your team's email domain
   • Run npm run dev:prod (or deploy the built app to any host — Vercel, Render, etc.)

💡 The setup script also handles Production mode. If your Supabase credentials are missing, setup.sh / setup.ps1 offers to collect them and sets APP_ENV=production for you. If you decline and APP_ENV is already production, the script leaves it alone and tells you what is still missing.

📦 Hosting is not documented yet, on purpose. npm run build produces a static bundle with your Gemini API key compiled into it, so we are not going to tell you to upload that to a public host. Generation is being moved behind a server; deployment guides (Docker, Vercel, and a one-click option) land with it. Until then, run it locally, or host it somewhere only your team can reach.

The design for that work, including support for OpenAI, FLUX and OpenRouter alongside Gemini, is in docs/design/multi-provider-image-models.md.

💡 The setup script writes this file for you. This section is here for reference — read it if you want to know what each variable does or edit .env.local by hand.

1. Copy the template file:

   cp .env.example .env.local

2. Edit .env.local with your credentials:

   # Gemini API Key (Required)
   GEMINI_API_KEY=your_actual_gemini_api_key
   
   # Supabase Credentials (Required for cloud features)
   SUPABASE_URL=https://your-project-id.supabase.co
   SUPABASE_ANON_KEY=your_supabase_anon_key

⚠️ Important: Never commit .env.local to version control!

The app supports Google Sign-In via Supabase, with a one-flag bypass for local development.

APP_ENV=development     # sign-in skipped
APP_ENV=production      # Google sign-in required

ALLOWED_DOMAIN=yourcompany.com   # optional: only @yourcompany.com can sign in

ALLOWED_DOMAIN is optional. Set it to example.com to accept only @example.com accounts; leave it empty to accept any Google account that signs in.

⚠️ This is a client-side check. It controls what the UI renders, not what the database allows. A user outside your domain still holds a valid Supabase token after signing in, so enforce the real restriction in your RLS policies too.

To make APP_ENV=production sign-in actually work, you need to wire up Google OAuth in both Supabase and Google Cloud. Follow the step-by-step guide:

It covers: grabbing the Supabase callback URL, creating the Google Cloud OAuth app, where to paste the Authorized redirect URI, restricting access to your Workspace org, and troubleshooting.

Only needed for Production / Org-wide setup. For Local Setup, the app uses SQLite and local file storage out of the box — see DEVELOPMENT.md.

1. Go to supabase.com and sign in
2. Click "New Project"
3. Fill in:
   • Name: creative-studio (or any name)
   • Database Password: Create a strong password (save it!)
   • Region: Choose closest to your users
4. Click "Create new project"
5. Wait for project to initialize (1-2 minutes)

1. In your Supabase dashboard, go to Project Settings (gear icon)
2. Click API in the left sidebar
3. Copy these values to your .env.local:
   • Project URL → SUPABASE_URL
   • anon/public key → SUPABASE_ANON_KEY

Example:

SUPABASE_URL=https://abcdefghijklmnop.supabase.co
SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

1. In Supabase dashboard, go to Storage (left sidebar)
2. Click "New bucket"
3. Enter:
   • Name: creatives
   • Public bucket: ✅ Enable (toggle ON)
4. Click "Create bucket"

💡 The bucket name must be exactly creatives to match the app code.

1. In Supabase dashboard, go to SQL Editor (left sidebar)
2. Click "New query"
3. Copy and paste the ENTIRE SQL script below
4. Click "Run" (or press Ctrl/Cmd + Enter)

-- ===========================================
-- AI CREATIVE STUDIO - DATABASE SETUP
-- ===========================================
-- Run this entire script in Supabase SQL Editor
-- This will create all tables, policies, and storage setup

-- ===========================================
-- STEP 1: CREATE TABLES
-- ===========================================

-- Brand Profiles Table
CREATE TABLE IF NOT EXISTS brand_profiles (
  id TEXT PRIMARY KEY,
  name TEXT,
  guidelines TEXT,
  logo_preview TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc'::TEXT, NOW())
);

-- Generated Assets Table
CREATE TABLE IF NOT EXISTS generated_assets (
  id TEXT PRIMARY KEY,
  profile_id TEXT NOT NULL,
  url TEXT NOT NULL,
  prompt_used TEXT,
  aspect_ratio TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc'::TEXT, NOW())
);

-- ===========================================
-- STEP 2: ENABLE ROW LEVEL SECURITY (RLS)
-- ===========================================

-- Enable RLS on brand_profiles
ALTER TABLE brand_profiles ENABLE ROW LEVEL SECURITY;

-- Enable RLS on generated_assets
ALTER TABLE generated_assets ENABLE ROW LEVEL SECURITY;

-- ===========================================
-- STEP 3: CREATE ACCESS POLICIES
-- ===========================================
-- These grant access to SIGNED-IN users only.
--
-- Do not use `USING (true)` without a TO clause here. Postgres defaults such a
-- policy to TO PUBLIC, which includes the `anon` role, and the anon key is
-- readable by anyone who loads the app. That combination lets an unauthenticated
-- caller read, modify and delete every brand profile and asset straight through
-- the REST API, bypassing the login screen entirely.

-- Drop old permissive policies if a previous version of this script ran
DROP POLICY IF EXISTS "Public Profiles Access" ON brand_profiles;
DROP POLICY IF EXISTS "Public Assets Access" ON generated_assets;
DROP POLICY IF EXISTS "Authenticated Profiles Access" ON brand_profiles;
DROP POLICY IF EXISTS "Authenticated Assets Access" ON generated_assets;

-- Signed-in users can read and write brand profiles
CREATE POLICY "Authenticated Profiles Access" ON brand_profiles
  FOR ALL
  TO authenticated
  USING (true)
  WITH CHECK (true);

-- Signed-in users can read and write generated assets
CREATE POLICY "Authenticated Assets Access" ON generated_assets
  FOR ALL
  TO authenticated
  USING (true)
  WITH CHECK (true);

-- OPTIONAL: restrict to one Google Workspace domain, enforced in the database
-- rather than the browser. Replace both policies above with these, substituting
-- your domain. This is the enforcement that ALLOWED_DOMAIN in the UI cannot provide.
--
-- DROP POLICY IF EXISTS "Authenticated Profiles Access" ON brand_profiles;
-- CREATE POLICY "Domain Profiles Access" ON brand_profiles
--   FOR ALL TO authenticated
--   USING      ((auth.jwt() ->> 'email') LIKE '%@yourcompany.com')
--   WITH CHECK ((auth.jwt() ->> 'email') LIKE '%@yourcompany.com');
--
-- DROP POLICY IF EXISTS "Authenticated Assets Access" ON generated_assets;
-- CREATE POLICY "Domain Assets Access" ON generated_assets
--   FOR ALL TO authenticated
--   USING      ((auth.jwt() ->> 'email') LIKE '%@yourcompany.com')
--   WITH CHECK ((auth.jwt() ->> 'email') LIKE '%@yourcompany.com');

-- ===========================================
-- STEP 4: SETUP STORAGE BUCKET
-- ===========================================

-- Create the 'creatives' bucket if it doesn't exist
INSERT INTO storage.buckets (id, name, public)
VALUES ('creatives', 'creatives', true)
ON CONFLICT (id) DO NOTHING;

-- ===========================================
-- STEP 5: STORAGE POLICIES
-- ===========================================

-- Drop existing storage policies if they exist
DROP POLICY IF EXISTS "Public Uploads" ON storage.objects;
DROP POLICY IF EXISTS "Public Reads" ON storage.objects;
DROP POLICY IF EXISTS "Public Deletes" ON storage.objects;
DROP POLICY IF EXISTS "Authenticated Uploads" ON storage.objects;
DROP POLICY IF EXISTS "Authenticated Deletes" ON storage.objects;

-- Only signed-in users can upload
CREATE POLICY "Authenticated Uploads" ON storage.objects
  FOR INSERT
  TO authenticated
  WITH CHECK (bucket_id = 'creatives');

-- Only signed-in users can delete
CREATE POLICY "Authenticated Deletes" ON storage.objects
  FOR DELETE
  TO authenticated
  USING (bucket_id = 'creatives');

-- Reads stay public because the app displays images via getPublicUrl().
--
-- Know what this means: every generated creative is readable by anyone with the
-- URL, forever, with no login. For client work under NDA that is usually not
-- acceptable. Making the bucket private requires switching
-- services/db/supabase.ts from getPublicUrl() to createSignedUrl(); that change
-- is tracked with the server-side generation work.
CREATE POLICY "Public Reads" ON storage.objects
  FOR SELECT
  USING (bucket_id = 'creatives');

-- ===========================================
-- ✅ SETUP COMPLETE!
-- ===========================================
-- Your database is now ready for AI Creative Studio

npm run dev

Opens at http://localhost:3000

npm run build
npm run preview

For the full local development guide (dual environments, scripts, database management, API endpoints), see DEVELOPMENT.md.

• Check that SUPABASE_URL and SUPABASE_ANON_KEY are set correctly in .env.local
• Restart the dev server after changing environment variables

• Make sure you ran the complete SQL setup script
• Check that RLS policies were created successfully in Supabase Dashboard > Authentication > Policies

• Verify the creatives storage bucket exists and is public
• Check storage policies in Supabase Dashboard > Storage > Policies

• Ensure APP_ENV=production in .env.local, and that ALLOWED_DOMAIN (if set) matches your team's email domain
• Follow the full step-by-step in GOOGLE_AUTH_SETUP.md — it covers Supabase + Google Cloud config and the most common redirect_uri_mismatch fix

If you see errors about process not being found, run:

npm install

These are dev-time warnings and won't affect runtime.

Released under the MIT License — free to use, modify, and distribute. Just keep the copyright notice.

Owner: Arcady Media Inc.
Developer: Ritik

• Gemini API Keys: https://aistudio.google.com/app/apikey
• Supabase: https://supabase.com
• Development Guide: DEVELOPMENT.md