Connect from Lovable

Lovable runs the project in a browser sandbox without a user-facing terminal, so npx create-brainerce-store can't be run there directly. Three clean alternatives, pick by where you're starting.

Quick decision

All three end up in the same place: a Lovable project, wired to your sales channel, ready to redesign.

Option A: Build with AI (MCP server + AI prompt)

This is the recommended path for a custom Lovable build. The Brainerce Build with AI modal gives you (a) a ready-made AI prompt that tells your AI exactly which Brainerce capabilities to use, and (b) the URL of the Brainerce MCP server, so the AI can query our live docs, type definitions, and required-feature checklist on demand.

Steps

1. In Brainerce: Sales Channels → your channel → Build with AI.

2. In Lovable, add the MCP server. From the MCP Server block of the modal, copy the URL:

   https://mcp-docs.brainerce.com/sse

   In Lovable, open the project's MCP settings and register that URL. Lovable will discover the Brainerce tools: get-store-capabilities, get-critical-rules, get-required-features, get-business-flows, get-sdk-docs, get-type-definitions, get-code-example.

3. Copy the AI Prompt block from the Brainerce modal. It already includes your Connection ID and store name, and it instructs the AI to consult those MCP tools while building.

4. Paste the prompt into Lovable as the first message.

5. Lovable builds the storefront against the real Brainerce SDK, consulting the MCP server for current capabilities. From here, prompt normally to redesign, add pages, etc.

When to pick this

• You want a custom storefront, not based on a template.
• You're staying inside Lovable (no GitHub round-trip).
• You want the AI to always have up-to-date Brainerce docs and capabilities while building, without you copying context into prompts.

Option B: Remix a Brainerce template

This is the no-CLI, no-prompt-engineering path. You stay in your browser the whole time.

Steps

1. Open the Brainerce templates gallery.
2. Pick a template that fits your vertical. Click Remix.
3. Lovable opens a fresh copy of the project in your Lovable workspace.
4. In the new project's .env.local, set NEXT_PUBLIC_BRAINERCE_SALES_CHANNEL_ID to your channel's vc_* Connection ID, taken from Sales Channels → your channel → General in the Brainerce dashboard. (NEXT_PUBLIC_BRAINERCE_CONNECTION_ID is accepted as a deprecated alias; prefer the first name.)
5. The Lovable preview reloads with your catalog. From here, prompt Lovable to redesign anything.

When to pick this

• One of our templates is in your vertical or close enough that redesigning is faster than starting blank.
• You don't want to think about MCP setup or AI prompting: just remix and go.
• You're comfortable being on whatever SDK version the template was published with.

Limits

• Template SDK versions can lag the latest scaffolder. For most stores this doesn't matter; if you need a recent SDK feature, use Option A or C.

Option C: Scaffold locally, then import into Lovable

For when you want a freshly-scaffolded project on the latest SDK, but still design it in Lovable.

Steps

1. In a local terminal (or in Cursor / VS Code on your machine), grab the one-liner from Build with AI → Quick Start and run it:

   npx create-brainerce-store@latest --connection-id vc_…

   Full walkthrough: Connect with the CLI scaffolder.

2. Initialize git and push to a new GitHub repo:

   cd my-shop
   git init
   git add .
   git commit -m "initial scaffold"
   git branch -M main
   git remote add origin https://github.com/<you>/my-shop.git
   git push -u origin main

3. In Lovable: Create new project → Import from GitHub → pick the repo.

4. Lovable syncs the codebase, runs install + dev, and shows the preview. Your storefront now lives in Lovable, so keep iterating from there.

When to pick this

• You want a freshly-scaffolded project (always the latest SDK version).
• No template fits and you'd rather skip the prompt-engineering of Option A.
• You want the option to flip back to a local IDE later; the GitHub repo is yours.

After connecting: the same rule

Once Lovable's preview is showing your real catalog, redesign anything you want. Lovable will be writing against the real Brainerce SDK from the first prompt, so nothing has to be reworked when you go live.

Tip: keep the channel in Test mode while you design. Lovable previews run on *.lovable.app (or similar), not your production domain. A Test mode channel with an empty Domain box accepts any host; Live mode locks the channel to your registered domain and will reject Lovable's preview. Careful with the middle case: a Test channel that does have a Domain recorded checks addresses just like a Live one, so it will reject the preview too. Leave Domain empty while you design. Only flip to Live when you're publishing to your real domain. Details: Test mode vs Live mode.

Already Live and still want to iterate in Lovable? You don't have to flip back and take the shop down. Add your Lovable preview URL as an extra chip in the Domains box on the channel's General tab and it can use the Live channel alongside your real domain. Note it does not turn on social sign-in from the preview, because "Sign in with Google" always returns through your registered domain. See Keep building after you go Live.

Setting your shop's web address

Whichever option you picked, the project has no web address written into it, and that's deliberate: it starts life on *.lovable.app and later moves to your own domain, and nothing at setup time can know which. The storefront works out the address it is being served on from each request, so previews and your live shop both behave correctly with nothing set.

Once you have a real domain, tell it explicitly. Add this to the project's environment variables:

SITE_URL=https://your-shop.com

That fixes your Google listings, sitemap.xml and social share links to one address instead of whatever address each request arrived on, so preview links stop competing with your real shop in search results.

Do not put it in .env.local if you want it to reach your live shop. That file is excluded from GitHub by design, so a value written there stays wherever you typed it.

Remixed an older template (Option B)? Check .env.local for a line reading NEXT_PUBLIC_SITE_URL=http://localhost:3000. That address only exists on the machine that created the project. If it is still there, your sitemap and Google listings point somewhere no one else can reach. Delete the line and set SITE_URL in your environment variables instead. The old name still works if you'd rather not rename it.

Setting the address is only half of going live: a channel in Live mode answers only requests coming from the address recorded on the channel itself, and that check happens on Brainerce's side, so no setting inside the project can satisfy it. So put your domain in SITE_URL and in Sales Channels → your channel → Domain.

Troubleshooting

What's next?

• Add a product to fill the catalog the storefront will display.
• A feature you turned on is not showing on your website is worth reading early on this path. A storefront built in Lovable starts from a design rather than from our starter kit, so multi-currency prices, contact forms, newsletter signup, order bumps, bundle offers, saved cards and the customer address book are all features Brainerce has and your site will not show until you ask Lovable for them by name.
• Connect with the CLI scaffolder is for Cursor, Claude Code, Copilot, Codex, Bolt and Replit.
• What are sales channels is a refresher on the multi-brand model.
• Already built the storefront in Lovable with mock data, and moved the project to a local terminal (via Option C or a GitHub export)? In Cursor, Claude Code, or Gemini CLI, run /brainerce:connect-storefront instead of starting over: it wires your Connection ID into the existing components without rewriting the design. It needs a terminal, so it does not run inside Lovable's own browser sandbox; for that, Option A above is still the way to go.