ai-cro ·

Vibe coding an AI workflow to learn patterns from growing Shopify stores

Demo by GemLabs — vibe coding an AI workflow to learn patterns from growing Shopify stores. Code, screenshots, disclaimer included.

A supplement store homepage with a data panel automatically composited by this workflow
Final output of the workflow — homepage plus data panel composited automatically. Demo by GemLabs. — Demo by GemLabs
Subscribers only — subscribe to read in full

🧪 A GemLabs lab. This is a GemLabs build journal — a weekend experiment in building real workflows with AI coding agents like Claude Code and Codex, written up as a hands-on tutorial. If you’re a merchant or Shopify seller, the takeaway isn’t this one tool: it’s that you can describe a daily selling chore in plain language and have an agent build it for you. Steal the pattern.

Evening of May 19, 2026. Saigon office, team gone for the day. I opened Claude Code to try a small idea: in one afternoon, build an AI workflow that automatically researches patterns trending across the Shopify ecosystem and renders the result as an HTML dashboard I can open over the weekend.

This post is the step-by-step. Real code, real screenshots, plus a disclaimer I want to surface before the tutorial.

Disclaimer up front. This workflow is designed for learning patterns and market research — not for cloning merchants. When sharing the output publicly, prefer category-level pattern language over brand-level call-outs: surface cloning doesn’t create growth, because the real growth driver is infrastructure (supply chain, ad account history, creative team, supplier relationships, founder intuition for the niche) — none of which appears in a screenshot.

What vibe coding is, and why this workflow fits

Andrej Karpathy coined “vibe coding” to describe the way of building software where you describe intent in plain language and let the LLM write the code. You don’t need to know the Playwright API or OAuth flow in detail — you need to know what output you want and where the source data lives.

Ecom research fits vibe coding for four reasons.

  1. Clear goal: a weekly dashboard listing notable patterns.
  2. Data source is exposed via MCP server: Brandsearch shipped its MCP with 32 tools on May 19, 2026 — the same day I built this.
  3. Short pipeline: research → write JSON → screenshot → render HTML.
  4. No runtime user input: one command runs it; no UI form needed.

About three hours later I had: a /weekly-products slash command for Claude Code, an Express server with a weekly cron for headless runs, and a dashboard where each entry is a card with a screenshot and a pattern note. The whole codebase is roughly 450 lines, half of which is HTML template.

What you need

Everything, with the reason for each.

Accounts and tools:

  • Claude Code (CLI or desktop) — runs the slash command and Agent SDK
  • Anthropic API key — only needed for headless Railway runs; locally Claude Code uses your subscription
  • Brandsearch.co plan with MCP access (or any equivalent ecom-data MCP server)
  • Railway account — optional, for deploying the weekly cron and screenshot service
  • Node.js 20+ locally

Minimum skills:

  • npm install and cd into a folder
  • Read JSON
  • Know what .env is

You do not need to know Playwright, OAuth, the MCP protocol, or how to write slash commands. Claude writes all of it.

Three decisions to make before opening Claude Code:

  1. Output format: HTML dashboard, CSV, or Notion page? I picked HTML — sharing a link is enough, no tool dependency.
  2. Cadence: daily is noise (ecom patterns don’t rotate in a day), monthly is too late. I chose Monday 9 AM UTC.
  3. Filter: specific niche or all-sweep? I default to all, with a min-visits 50k floor to cut noise.

Subscribe to read the rest of this post.

#vibe-coding #ai-agent #claude-code #mcp #shopify #case-study #cro