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. Two clean alternatives, pick by where you're starting.

Quick decision

Both 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 window gives you a one-line instruction for your AI that already carries your Connection ID. The line points the AI at brainerce.com/skill.md, the public spec it reads to build against the real SDK, and optionally you also register the Brainerce reference MCP server, so the AI can query our live docs, type definitions, and required-feature checklist on demand.

The spec the line points at tells the AI to run the scaffolder command. Lovable gives you no terminal of your own, so if its AI cannot fetch the spec or run that command, use Option B below instead.

Steps

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

2. Pick the tab: New store if the Lovable project is empty, Existing project if you already have a design there you want connected.

3. Click Copy on the line under the tabs. It already includes your Connection ID.

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

5. Optional: register the reference MCP server in the project's MCP settings so Lovable can look things up while it builds. The window no longer shows this address; it is:

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

   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, get-integration-guide, search-docs, get-store-info, get-store-config, get-product-shape and list-store-products. The last three read your own store's real catalog and configuration, so they need your Connection ID and work only against a Test mode channel; a Live channel refuses them. A legacy https://mcp-docs.brainerce.com/sse address also still answers if your tool only speaks SSE.

6. Lovable builds the storefront against the real Brainerce SDK. 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: 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 command from Build with AI → Other ways to connect → No agent, just the terminal 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).
• 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.

One thing an empty Domain box does not cover: "Sign in with Google". The catalog, cart and checkout work from the preview with nothing recorded; a Google sign-in can only return to an address recorded on the channel, so the storefront hides the Google button on the preview until you add https://your-preview.lovable.app to the Domains box. Password sign-in works meanwhile. See Sign in with Google fails on a Test channel with no domain.

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.

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 B 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.