# Add usage credits to a v0 app (Next.js App Router, BuildBase sign-in)

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

v0 can also connect to BuildBase itself while it builds: [Use BuildBase in v0](/console/ai-agents/v0).

Each workspace gets a credit balance, a **Buy credits** button that opens the credit store, and a spend that runs in a route handler, so a person cannot skip it from the browser. This page assumes the app already signs people in with @buildbase/sdk, as the [v0 guide](https://www.buildbase.app/guides/add-sign-in-teams-and-paid-plans-to-a-v0-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

v0's docs document no link that opens v0 with a prompt filled in, so copy this into your project's chat.

```text
This app signs people in with BuildBase (@buildbase/sdk), set up as https://www.buildbase.app/guides/add-sign-in-teams-and-paid-plans-to-a-v0-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, a client component shows 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 app/api/credits/spend/route.ts, call bb().credits.consume(workspaceId, { amount, description, idempotencyKey }) from lib/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 my database.
```

## 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 the Vercel project's environment variables (**Project menu** > **Settings** > **Environment Variables** in v0), with no `NEXT_PUBLIC_` prefix. Your Stripe keys go into the BuildBase console, not into Vercel.

## The v0 trap

If the build on Vercel fails with "orgId is required", v0 created `BuildBase(...)` at the top of `lib/buildbase.ts` instead of inside `bb()`. At build time the environment variables are not there yet. Ask v0 to create the client inside the function on first use, as the Next.js guide shows.

v0 works on a branch and deploys it as a preview with its own `vercel.app` address. Sign-in on a preview loops unless that exact address is registered on the auth client, so test the spend on production.

## Full guides

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