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: the Build with AI instruction (with the optional reference MCP server), or scaffold locally and import the repo.
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 storefront from one of the paths above. See Import from another platform.

Both paths start from the same place: the Build with AI window on your channel's page. It hands you a one-line instruction to paste into an AI coding agent (with tabs for New store and Existing project), and under Other ways to connect a ready-to-paste CLI command and the address of the admin MCP server. Pick what your builder needs and copy.

Just signed up? The first-run screens already do this for you. After you pick I want to build a new store or I have a designed store and enter your store name, country and currency, the last screen gives you the MCP address and Your instruction to paste into your AI tool, and shows a live status until your site's first request arrives. See Create your store. Everything on this page also applies to a channel created that way.

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 the Build with AI instruction and the scaffold-then-import route.
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.