Connect your storefront

After creating your store in Brainerce, connect a storefront before you start designing, because it's the order that saves you the most rework.

You've created a store in Brainerce. Before you reach for Cursor, Lovable, or any AI builder, connect your storefront first. Designing first and connecting later is the single most expensive mistake we see, because it forces you to rewrite logic to match the real SDK.

What "connect" actually means

Brainerce is the backend: products, inventory, orders, checkout, payments, customers. Your storefront is the customer-facing UI you build in an AI tool. The two talk to each other through the Brainerce SDK, scoped to a specific sales channel identified by a vc_* Connection ID.

Connecting a storefront means:

You've created a sales channel in Brainerce (the source of the Connection ID).
The storefront code has that ID in its .env and imports the SDK.
The catalog, cart, and checkout you see in the storefront are real Brainerce data, not mocks.

The recommended order

Create store → Connect storefront → Design. Not: Create store → Design storefront → Connect.

Why this order matters

When you start in Cursor or Claude Code with "build me a storefront", the AI invents data shapes: a Product type with whatever fields feel natural, mock addToCart calls, a fake checkout() function. That code looks great until you swap in the real SDK and discover:

Your Product doesn't match the SDK's product (no variants, no modifier groups, no localized fields).
Your cart state model doesn't match useCart() from the SDK.
Checkout was hand-rolled, but Brainerce's checkout is a hosted flow with its own redirect.
Inventory, pricing logic, and discount application were all reinvented.

You then spend a day or two rewriting components against the real types, exactly the time you thought you saved by starting with design.

If instead you connect first, the AI writes against the real SDK from prompt one. Every component it generates lines up with the data that actually exists.

Two paths to connect

Pick by which builder you're using:

Your builder	Path
Cursor, Claude Code, GitHub Copilot, Codex CLI, Bolt.new, Replit Agent, anything with a terminal	Connect with the CLI scaffolder: copy the one-liner from Build with AI and paste in your terminal.
Lovable (and other browser-only builders without a terminal)	Connect from Lovable: MCP server + AI prompt, template remix, or scaffold-then-import.
Migrating off Shopify or WooCommerce	Neither is a connected channel. The Migration Tool imports your catalog into Brainerce once, read-only, then you connect a vibe-coded storefront from one of the paths above. See Import from another platform.

Both paths start from the same place: the Build with AI modal on your channel's page. It hands you a ready-to-paste CLI command, a ready-to-paste AI prompt, and the URL of the Brainerce MCP server (which lets any AI tool query our live docs while it builds). Pick the block your builder needs and copy.

Before you can connect: a sales channel

Both paths need a sales channel from Brainerce: that's the vc_* Connection ID the storefront authenticates with, and the source of the Build with AI shortcuts. If you haven't created one yet:

Read What are sales channels to understand the concept and the multi-brand capability.
Follow Create a sales channel to make one, which takes about a minute.

Once you have it, return here and pick the connection path above.

What's next?

What are sales channels covers the concept, plus how to run multiple brands from one Brainerce dashboard.
Create a sales channel is the how-to.
Connect with the CLI scaffolder covers Cursor, Claude Code, Copilot, Codex, Bolt and Replit.
Connect from Lovable covers template remix or GitHub sync.
A feature you turned on is not showing on your website is the one to read once you are connected and a setting does not appear on the shop.