# Add usage credits to a Replit app (React and Express, BuildBase sign-in)

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

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

Each workspace gets a credit balance, a **Buy credits** button that opens the credit store, and a spend that runs in an Express route, so a person cannot skip it from the browser. This page assumes the app already signs people in with @buildbase/sdk, as the [Replit guide](https://www.buildbase.app/guides/add-login-teams-and-paid-plans-to-a-replit-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 Replit](https://replit.com/?stack=Build&prompt=CoCwlgzgBAhgDnKEwHMB204FMD2cA2WUYaUA7mAC4hQBCArmPgCa0wREAUAAgEaMte7LAHoIzANYBKADRIslKPUTsoISpTgQAXCJFkDAOn5NmQjofhwRKRsywQRMZswC0+HChKvKWGAFsIVxg0NzgYMDD8EKDKHGDXACcsAipghCQQHDIIQygASQAzYkVmHAcoNBxKOQg4lVCoX3x8KH8sQwAoACU-ZjUNLV0RMoBjXJNBYUsEEVHk5ipHHAA3LESVsCwyQ39+wrBEuthGssrq4jQ1tEUsULgcEkpczoBBFyUIGBQieaxF55QbCJcg4RISCDhUZYbSdVwFUjUIggPrrWpZMifLAAYQWVDY0TQ0M4o3oiWSNwA6mCIVCOgB9SJSYwwQnQgD8lhWEWivEIcgo1CgpPJd0o1PBkJg0KghUSOH8WIAyjAYEqJbTpQ5OLITv0YHR6ABPYV4wH8DQ4REgGCKUas-DQPB3XH-KhKuLJHWy+WK+gcFVq170ag6rrwpXYRpWpoo+QbdZQK34I3aWAfAAKAHklcAoE44GA5mbHJC7v04rGiABRAAecGSEGgHATiTk-hw9Bu-ygvCwhTBRCRUAAalQiP5IsxCGQYMk9ScTfbKKMQMEWlB5SGOgU7Q7oLxeAAxMGcZIAR2ZfwBuVGVog9HanDINKl0PyzDkAG9YB2uzUoHsCB5jAOBKDAK05EiLB-AeXwiSNABpLATQAXykH0FXjNZEhESYzGmc1+0HKsgQifoX3BTcu1yKAs2tIh1nlEE73sAoADklQAVSPI98mxfJq3Y4B6WxbpqwAEXyYAlROCAyETAAWAAGAAmOQQn6Z0GNNN1FDqEiSFI8Ifi6CScHOfTPSIIQ2QqIzelSRQJNtGBzA6IA&referrer=docs.buildbase.app)

The link opens Replit Agent with the prompt filled in, for a new app; you still send it yourself. For the app you already have, paste the prompt into Agent's chat in that project 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-replit-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 POST /api/credits/spend to the Express server, mounted before the Vite middleware and any catch-all route. It calls bbFor(req).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 Replit 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, twice: in the Secrets tool (**Tools** > **Secrets**), and under **Publishing** > **Adjust settings** > **Production app secrets** for the published app. Never give it a `VITE_` prefix. Your Stripe keys go into the BuildBase console, not into Replit.

## The Replit trap

A route mounted after the Vite middleware or Agent's catch-all never runs: `/api/credits/spend` answers the app's HTML instead of JSON. Move the route above them in `server/index.ts`, where the guide mounts the sign-in routes.

Agent reads `replit.md` before every request. If the guide's two lines about BuildBase are missing from it, add them back, or a later request may keep balances in Replit Database.

## Full guides

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