# 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](/console/ai-agents/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](https://www.buildbase.app/guides/add-login-teams-and-paid-plans-to-a-lovable-app) sets up. If it signs people in with something else, such as Supabase or Clerk, read [keep your existing sign-in](/sign-in-setup/keep-your-sign-in) first.

> **Note:**
  Stripe connected and a credit package on sale in the console, under
  **Billing** > **Credit packages** ([Credits and usage](/credits/overview)).

## The prompt

[Open in Lovable](https://lovable.dev/#prompt=This%20app%20signs%20people%20in%20with%20BuildBase%20%28%40buildbase%2Fsdk%29%2C%20set%20up%20as%20https%3A%2F%2Fwww.buildbase.app%2Fguides%2Fadd-login-teams-and-paid-plans-to-a-lovable-app%20shows.%20If%20it%20does%20not%2C%20stop%20and%20tell%20me.%0ARead%20https%3A%2F%2Fdocs.buildbase.app%2Fcredits%2Foverview.md%20first%20and%20do%20not%20invent%20endpoints.%0AAdd%20usage%20credits%20per%20workspace%3A%0A-%20In%20the%20header%2C%20show%20useCreditBalance%28currentWorkspace._id%29.balance%3F.available%2C%20with%20currentWorkspace%20from%20useSaaSWorkspaces%28%29%2C%20and%20a%20Buy%20credits%20button%20that%20calls%20openCreditStore%28%29%20from%20useSaaSAuth%28%29.%0A-%20Spend%20on%20the%20server%20only%3A%20in%20a%20TanStack%20Start%20server%20route%2C%20call%20bb%28%29.credits.consume%28workspaceId%2C%20%7B%20amount%2C%20description%2C%20idempotencyKey%20%7D%29%20from%20src%2Fserver%2Fbuildbase.ts%20before%20the%20paid%20work%20runs.%20On%20the%20error%20code%20INSUFFICIENT_CREDITS%20answer%20402%2C%20and%20open%20the%20credit%20store%20in%20the%20page.%0ADo%20not%20store%20balances%20in%20Lovable%20Cloud%20or%20Supabase.)

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.

```text
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

- [Add login, teams and paid plans to a Lovable app](https://www.buildbase.app/guides/add-login-teams-and-paid-plans-to-a-lovable-app)
- [Credits and usage](/credits/overview): reserve and settle, auto top-up, a person's own wallet
- [Add BuildBase to Lovable's instructions or skills](/ai-builders/lovable-import)