Skip to content
BuildBase

Add usage credits to a Bolt app (Vite, BuildBase sign-in)

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

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

Each workspace gets a credit balance, a Buy credits button that opens the credit store, and a spend that runs in a function on your host, so a person cannot skip it from the browser. This page assumes the app already signs people in with @buildbase/sdk, as the Bolt 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

Bolt's help center documents no link that opens Bolt with a prompt filled in, so copy this into your project's chat.

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-bolt-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: add api/credits/spend.ts as a function file like the guide's api/auth files, answered in the preview by the same Vite middleware. It calls bbFor(request).credits.consume(workspaceId, { amount, description, idempotencyKey }) from 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 Bolt 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. BUILDBASE_CLIENT_SECRET stays where the guide put it: in .env while you build, with .env listed in .gitignore, and in your host's environment variables for the live site (Bolt's Secrets page if Bolt hosts the functions). Never give it a VITE_ prefix. Your Stripe keys go into the BuildBase console, not into Bolt.

The Bolt trap

The preview answers /api/credits/spend through the Vite dev server in your tab; the live site answers it only where your functions run. A spend that works in the preview and returns the app's HTML after publishing means the host has no function for it. Open the address on the live site: it should answer JSON, even an error.

Make the change in Bolt, not in GitHub: Bolt's docs say that when the two conflict, Bolt keeps its version and overwrites GitHub's.

Full guides