Connect a front end to the backend
I built a front end (Lovable, v0, Bolt, Cursor, or by hand) — how do I give it a real backend?
Point your site at the API, prove the connection, and start reading and writing real business data — auth, contacts, orders, payments — without writing or hosting a backend.
Typical effort: 10 minutes
The recipe — paste this to your AI
# Task prompt — "Connect this site to my Genesis backend" Copy the block below into your AI assistant **together with this repo** once you have your Genesis credentials. It wires the site to the platform and proves the connection end to end. (Background: [`../quickstart.md`](../quickstart.md) steps 3–6; how the API works: [`../api.md`](../api.md).) --- > This is the Genesis frontend-template. Connect it to my Genesis backend and prove it works: > > - My Genesis API base URL: **___** > - My public site URL: **___** (or "not deployed yet") > > Do exactly this: > 1. Copy `.env.example` to `.env.local`; set `GENESIS_API_ORIGIN` (server-only — the API base > the `/api/v1` proxy forwards to) and `NEXT_PUBLIC_SITE_URL`, and leave `NEXT_PUBLIC_API_URL` > blank so the browser uses the same-origin proxy (keeps login cookies working cross-domain). > Never put a secret, client_secret, or database URL in any `NEXT_PUBLIC_*` variable or > anywhere in this repo. > 2. Run `npm run dev`. Confirm the marketing pages render, then log in at `/login` with the > credentials I use for Genesis (the API sets the `genesis_session` cookie — the template > never stores a password). > 3. Walk one real read path: open `/dashboard` and one module page (e.g. `/orders`), and > confirm live data renders through the typed client — loading state, then data (or a > correct empty state for a fresh account). If a page shows an error state, read the error > `code` (see `docs/api.md` §4) and tell me what it means **before** changing anything. > 4. Do not "fix" a failing call by switching to raw `fetch`, changing URLs by guesswork, or > mocking data — a wrong mount or missing endpoint is a platform-side question for Genesis > (`docs/api.md` §9). > 5. Prove it: `pnpm verify` green, `npm run build` green, and give me a one-paragraph report: > which pages you saw live data on, and any endpoints that errored with their `code` + > `requestId`. > > Notes you'll need: all money values are strings (never parse to float); ids in URLs are > opaque (`lead_…`, `ord_…`); the session cookie rides every call automatically > (`credentials: 'include'`) — you never add auth headers in a page. --- Building a **server-to-server integration or agent** instead of a browser site? That's OAuth 2.1 client-credentials (`Authorization: Bearer …`, no API-key header) — ask Genesis for machine-auth credentials and the agent quickstart; it's deliberately not part of this front-end template.
Source of truth
This recipe ships inside the template as docs/prompts/connect-to-genesis.md — this page renders that exact file. The repository is always the newest version: https://github.com/srisenmay/bringthefront-template. Clone the template and you get every recipe locally, versioned with the release you are on.