Next.js · Claude · FAL AI · BigCommerce · Shopify

BigCommerce · Shopify

Ecom AI

A SaaS dashboard that connects to a BigCommerce or Shopify store and uses AI to generate product images, social media posts, SEO blog content, and brand-consistent copy, all from the live product catalog.

RoleSole Engineer
StackNext.js · Claude · FAL AI · Supabase
StatusIn Development
Products / [id] · AI Generation
Ergonomic Office Chair Pro $299.00 · In stock · 42 variants
synced
AI Generation
Product Images FLUX Pro Kontext · 8 prompts suggested
Social Posts Instagram · Facebook · 5 tones
Blog & SEO Content Rewrite · Meta · Keywords · Tags
Suggested image prompts
1 Minimalist studio shot on white seamless, 35mm lens, soft side lighting from left, chair angled 30° toward camera, clean shadow below frame…
2 Lifestyle scene in bright modern office, natural window light from right, MacBook and plant visible in background, shallow depth of field…
Scroll
ecom-ai.app / products
Products page
Content.tsx · SEO Rewriter
Blog Posts
Pages
BigCommerce · Shopify
10 Home Office Upgrades That Actually Work May 12
Meta Description 157 chars

Upgrade your home office with 10 editor-tested picks: ergonomic chairs, monitor arms, and desk accessories that improve focus and reduce fatigue. Free shipping on orders over $75.

Keywords
home office ergonomic chair monitor arm desk accessories office upgrade remote work productivity +3 more
Blog Tags
home-office ergonomics productivity desk-setup wfh
Rewrite body
Generate all
01
Blog & SEO · Claude · Prompt Caching

Rewrite content
without touching markup.

Live blog posts and pages pull from the store, with no copy-pasting. Claude generates metadata and tags for each piece of content individually or all at once.

The body rewriter improves heading hierarchy, injects keywords naturally, strengthens CTAs, and eliminates passive voice, without touching a single tag, link, or table in the HTML.

Claude Anthropic Claude Sonnet 4.6 as primary. System prompts marked with ephemeral cache: 10% input cost on repeats within 5 minutes.
HTML preservation Regex extracts text nodes only before sending to the model. The model never sees raw tags and can't accidentally break markup.
BigCommerce · Shopify Blog posts and pages pulled from BC V3 or Shopify Admin API, with no copy-pasting. Source is always the live store version regardless of platform.
Multi-provider Provider abstracted in lib/ai.ts, falling back to GPT-4o-mini or Grok if Anthropic is unavailable. Resolved from env at runtime.
02
FAL AI · FLUX Pro · Supabase Functions

Photography briefs,
not generic prompts.

Claude generates 8 prompt suggestions written as commercial photographer briefs: lighting setup, lens choice, camera angle, props, and composition in 40–65 words each. Prompts are saved to the database and persist across page navigation.

Image and video generation run through different pipeline shapes, one synchronous and one queue-based, because their latency profiles are completely different.

FLUX Pro Kontext FAL AI FLUX Pro Kontext for both single img2img and multi-image scene modes. Aspect ratios: 1:1, 4:5, 9:16, 16:9, 3:2.
Edge Function Image jobs run in a Supabase Edge Function (Deno). The Next.js route awaits the call directly. No worker process or queue. Video jobs flow through Upstash QStash for durability and retries.
Prompt context Prompts incorporate brand voice, active mood board, and per-product AI notes, so each suggestion is tailored to the specific product and brand identity.
Image gallery All generated images stored with status tracking (pending → processing → completed). Searchable gallery with filtering and direct download.
ecom-ai.app / products / [id] / images
Image prompts
ImageGenerator.tsx flux-pro-kontext
Aspect ratio
1:1 4:5 9:16 16:9 3:2
8 suggested prompts Claude · brand + mood context
1

Minimalist studio shot on white seamless backdrop, 35mm prime lens, soft butterfly lighting from above-front, chair angled 30° toward camera, clean drop shadow below frame, medium crop showing full chair.

Selected
2

Lifestyle scene in a bright modern home office, natural window light from right, blurred MacBook and trailing plant visible in background, shallow depth of field f/2.2.

3

Overhead flat-lay on warm concrete texture, chair disassembled components arranged symmetrically, dramatic hard shadow at 45°, product packaging in corner…

completed
processing
2 queued
Generate with prompt 1
03
Instagram · Facebook · 5 tones

Platform-specific
copy, not one-size-fits-all.

Instagram and Facebook posts use separate prompts and separate logic. Instagram is short, emoji-forward, and CTA-driven. Facebook is conversational and question-led. Neither looks like the other.

Before a single word is written, the model receives the brand's example captions, target audience, and product-specific selling points as context, so output is consistent with the actual brand voice, not a template.

Per-platform logic Separate prompts for Instagram vs Facebook: different structure, hashtag count, emoji density, and CTA style for each platform.
5 tones Professional, casual, enthusiastic, informative, playful. Tone selection changes the register of every sentence, not just word choice.
Brand context Brand voice config, example captions, and per-product notes are injected as context. Every post is consistent with the brand's actual style.
Draft workflow Generated posts saved as drafts in Supabase with platform, tone, and hashtags. Edit inline before marking as published.
ProductSync.tsx · Catalog
BigCommerce
Shopify
Active products
Recent 250
Best sellers 250
Modified 90d
Modified 1y
Modified 2y
Status Active
Inventory ≥ 1
Modified after Jan 1 2025
Last sync: 2 hours ago 847 products
Sync now
ecom-ai.app / settings / brand
Style settings
04
BigCommerce V3 · Shopify API · Supabase

Catalog sync
and brand context.

The catalog syncs from BigCommerce V3 or the Shopify Admin API and upserts to Supabase: products, variants, images, and inventory. Switch platforms later without losing brand config.

Every generation is grounded in three layers of brand context: a global voice config, mood boards that define a visual aesthetic, and per-product notes for specific selling points. The more context configured, the less generic the output.

Sync presets Six filter presets on both BigCommerce V3 and Shopify Admin API: active products, recent additions, best sellers, or anything modified in the last 90 days to 2 years.
Mood boards Named visual reference boards with images and descriptions. Active mood is injected into image prompts, so each shoot has a defined aesthetic.
Product AI notes Per-product override table for voice notes, key selling points, and custom descriptions. Merged into context at generation time: global brand first, product-specific on top.
Supabase PostgreSQL + Supabase Auth + Storage. RLS on all tables. Sync jobs logged with full audit trail: what synced, when, and how many records were affected.
05
Technical decisions

What required
real design decisions.

A lot of AI tooling is just a thin prompt wrapper. Making this actually useful for a production store required solving problems that don't appear until you're working with real product catalogs.

HTML you can't break

Blog content in BigCommerce stores is HTML with embedded links, images, tables, and custom formatting. Sending raw HTML to the model and asking it to improve the writing is a reliable way to get mangled markup back. Instead, a regex pass extracts only text nodes before the model ever sees the content. The model rewrites text, and the original HTML structure is reassembled around it. No markup is ever at risk.

Two pipeline shapes for two latency profiles

Image and video generation have completely different timing constraints. Image renders complete in seconds: the route inserts a pending row, awaits a Supabase Edge Function call directly, and FAL writes the result back before the response returns. No queue needed. Video renders take 1–5 minutes and blow past the serverless timeout, so those jobs flow through Upstash QStash: QStash delivers the job durably to a worker route, which submits to fal's async queue, and an ED25519-verified webhook fires on completion. The same principle (don't queue what's fast, don't block on what's slow), but two different implementations.

Context that travels with the product

Generic AI output looks generic because the model has no real brand context. The tool solves this at multiple layers: a global brand voice config, mood boards that define a visual aesthetic, and per-product notes for specific selling points or voice tweaks. Every generation call merges these three layers before building the prompt, so output is consistent with the actual brand and specific to the actual product, not a template filled in with product names.

ecom-ai.app / products / images
Ecom AI Tool image gallery Ecom AI Tool image generator Ecom AI Tool video generation