Skip to content
BuildBase

Add usage credits to a Lovable app (TanStack Start, BuildBase sign-in)

One prompt that gives each workspace in a Lovable app a credit balance, a Buy credits button and a server-side spend, plus where the secret lives.

Lovable can also connect to BuildBase itself while it builds: Use BuildBase in Lovable.

Each workspace gets a credit balance, a Buy credits button that opens the credit store, and a spend that runs on the server, so a person cannot skip it from the browser. This page assumes the app already signs people in with @buildbase/sdk, as the Lovable guide sets up. If it signs people in with something else, such as Supabase or Clerk, read keep your existing sign-in first.

Before you start

Stripe connected and a credit package on sale in the console, under Billing > Credit packages (Credits and usage).

The prompt

Open in Lovable

The link opens a new Lovable project with the prompt filled in and not sent. For the app you already have, paste the prompt into that project's chat instead.

This app signs people in with BuildBase (@buildbase/sdk), set up as https://www.buildbase.app/guides/add-login-teams-and-paid-plans-to-a-lovable-app shows. If it does not, stop and tell me.
Read https://docs.buildbase.app/credits/overview.md first and do not invent endpoints.
Add usage credits per workspace:
- In the header, show useCreditBalance(currentWorkspace._id).balance?.available, with currentWorkspace from useSaaSWorkspaces(), and a Buy credits button that calls openCreditStore() from useSaaSAuth().
- Spend on the server only: in a TanStack Start server route, call bb().credits.consume(workspaceId, { amount, description, idempotencyKey }) from src/server/buildbase.ts before the paid work runs. On the error code INSUFFICIENT_CREDITS answer 402, and open the credit store in the page.
Do not store balances in Lovable Cloud or Supabase.

Where the secrets go

This job adds no new secret. The spend uses the signed-in person's session cookie, bb-session-id, and BUILDBASE_CLIENT_SECRET stays where the guide put it: More > Settings > Secrets, never in .env and never with a VITE_ prefix. Your Stripe keys go into the BuildBase console, not into Lovable.

The Lovable trap

TanStack Start refuses to send a value it cannot serialise out of a server function, and the SDK's objects carry free-form fields. If the build fails on a type error around the spend, ask Lovable to return plain fields, such as { available }, rather than the whole result.

If /api/... returns the app's HTML instead of JSON, Lovable wrote a createServerFn where a file route belongs: ask for a createFileRoute with server.handlers, as the guide shows.

Full guides