create-brainerce-store

Scaffold a production-ready e-commerce storefront connected to Brainerce — cart, checkout, variants, coupons, auth, SEO, and i18n wired out of the box.

npm create brainerce-store@latest my-store -- --connection-id vc_xxxxxxxx
# or
pnpm create brainerce-store my-store --connection-id vc_xxxxxxxx

Run it with no flags for a fully interactive setup. The CLI fetches your store's name, currency, language, and locales from the connection ID (vc_*, from your Brainerce dashboard), so the generated store matches the real channel from the first dev run.

The design

Every scaffold ships Atelier — a complete, AI-built storefront look (not just a color theme): warm editorial gallery with soft washes + glass surfaces, a floating hero collage, near-full-bleed product grid, styled popover dropdowns, a mini-cart drawer that opens on add-to-cart, and an RTL-safe fly-to-cart micro-interaction. Fully de-branded — driven by your store's name, catalog and dashboard content.

It's a starting point, not a lock-in: the entire look lives in src/ui/ + globals.css and is designed to be rewritten (see below). The shipped texts are example content (a boutique voice, like any template's sample copy) — your catalog replaces the imagery automatically, and the copy lives in messages/ ready to be rewritten by you or an AI session. On a brand-new store with no products yet, the homepage hero shows a designed placeholder that swaps for your first published products.

Blank-canvas mode

npm create brainerce-store@latest my-store -- --connection-id vc_xxx --canvas

--canvas ships src/ui/ as bare, semantic, essentially-unstyled skeletons (DESIGN ME markers included) with zero aesthetic opinion — commerce stays fully wired. It's the starting point for designing a storefront from scratch with an AI session, and the authoring substrate for new gallery designs. Canvas mode skips the design pack entirely.

AI-first by default

Every scaffolded store is ready to be redesigned by an AI coding session:

• CLAUDE.md — auto-loaded by Claude Code; teaches the session the one rule (core/ is the platform's, ui/ is yours) before it touches anything.
• AGENTS.md — the same context for other agentic tools.
• /design <your art-direction brief> — a ready-made slash command that walks the full redesign: concept → implementation in ui/ → verification (tsc, real browser, screenshots, RTL checks).
• AI-GUIDE.md — the design contract: file map, per-page hook contracts, verification loop, and hard-won RTL/i18n gotchas from real agency builds.

Architecture (core/ui)

• src/core/ — platform-owned commerce: client, auth, providers, and data/behavior hooks that return state + handlers, never JSX. Don't modify.
• src/ui/ — 100% replaceable presentation. Delete-and-rebuild is encouraged; the store keeps working.
• src/app/ — thin routes composing the two (~10 lines each).
• An ESLint boundary rule enforces the split in both directions.

Full details: TEMPLATE-ARCHITECTURE.md.

Flags

| Flag | Description | Default | | --- | --- | --- | | --connection-id <id> | Brainerce vibe-coded connection ID (vc_*) | prompted | | --canvas | Bare unstyled src/ui/ skeletons for AI-driven design | off | | --language <lang> | Store language (en, he) | fetched from store | | --pkg-manager <pm> | npm, pnpm, yarn, bun | auto-detected | | --framework <fw> | nextjs (Vite/Remix coming) | nextjs | | --api-url <url> | Brainerce API base URL (or BRAINERCE_API_URL env) | auto-discovered | | --no-git | Skip git initialization | git on | | --no-install | Skip dependency installation | install on |

Pass . as the project name to scaffold into the current directory.

Requirements

Node ^20.19.0 || ^22.13.0 || >=24.0.0.

After scaffolding

cd my-store
pnpm dev          # store at http://localhost:3000

Want a unique look? Open the folder in Claude Code and run /design <your art-direction brief>.