How to add credit-based billing to your Claude Code app

Credit-based pricing lets customers prepay for a bundle of credits and redeem them as they use your product. To add it to a Claude Code app, connect Credyt's MCP server with one claude mcp add command, then run three billing skills (pricing-strategy, billing-setup, billing-integration). They define a credit asset with an exchange rate, wire credit redemption into your app, and add a portal link where users buy credit packs. End-to-end setup runs in one afternoon with no backend code written by hand.

This article shows how to ship the kind of credit-based pricing vibe coders keep hitting walls on inside a Claude Code app. The setup gives you four things: a credit balance in the UI, a "Manage billing" link to a branded portal, a check before every paid call, and a real-time debit when each call completes. OpenAI prices its API on a credit balance. Cursor's Pro tier runs on the same primitives. Anthropic's own API works the same way.

You will not write Stripe webhook code. You will not write customer-ID mapping. You will not write end-of-month invoicing logic.

Credyt's MCP server connects to Claude Code in one command. Three billing skills walk through the rest as a prompt conversation. You paste two prompts, approve the diffs, and ship. If you'd rather price in dollars than credits, the USD-wallet version of this same setup covers the per-unit pricing variant.

Are you a developer who wants the API path? This guide is the no-code MCP path. If you're going to write the integration code yourself, head straight to the Credyt Quickstart for the REST and webhook walkthrough.

What we're going to build

When you finish this article, your Claude Code app will have:

A credit-balance display in the UI ("80 task credits left" or "26 tasks remaining").
A "Manage billing" link that opens Credyt's branded billing portal in a new tab. The portal handles credit packs (Stripe Checkout under the hood), auto top-up settings, usage history, and customer self-service. Credyt-hosted with your logo on top.
A balance check before any billable agent task. If the user's credits don't cover the task, your app halts the run and the UI prompts them to top up.
A real-time debit when each task completes. The balance updates the moment the agent run finishes.
A dashboard for you showing every customer's balance, every charge, every top-up.

We'll wire it up in 6 steps.

Minimum theory: billing vs Stripe

Stripe is great. Stripe moves money between cards and bank accounts and stays in the loop here. The Credyt top-up flow runs Stripe Checkout under the hood.

The gap is this. Stripe Billing was built for end-of-month invoicing of SaaS subscriptions. Your app's agent tasks cost you real money the moment the user clicks "run."

Several LLM API calls fire, your card gets debited by Anthropic, OpenAI, or whichever providers your agent uses. If the customer's card declines at the end of the month, you have already paid the providers from your own pocket. The invoice arrives weeks after the cost.

Credyt sits between Stripe (which moves dollars) and your Claude Code app (which spends dollars per LLM call). Stripe handles dollars. Credyt handles balances.

When a user runs an agent task, your app calls Credyt's balance endpoint and reads the current credit balance. Your app decides whether to proceed: if the balance covers the task cost in credits, the agent runs and Credyt debits the credits the moment your app submits the usage event. If not, your app surfaces a top-up prompt.

The decision lives in your app code. Credyt provides the real-time balance state and the atomic debit that make the decision possible.

The credit-asset piece is the part that makes this credit-based pricing instead of plain dollar pricing. The customer never sees "$0.10 per task." They see "1 task credit per task" and "$5 = 100 credits." The exchange rate stays in your hands. For the longer treatment of why this matters, see billing AI products in custom units instead of dollars.

For the deeper reason Stripe Billing breaks on per-call AI workloads, see why Stripe metered billing breaks for AI products.

Step 1. Registration and API key

Two things to do before you touch Claude Code:

Sign up at app.credyt.ai. The free tier covers your first 10 active wallets every month, no card required. See the Credyt Quickstart for the full walk-through.
Copy your API key. Credyt auto-generates a test key (key_test_...) and a live key (key_live_...) the moment you sign up. Open Developers in the dashboard sidebar, copy the test key, and keep it out of git. You'll paste it into the MCP install command in the next step.

That's it. No payment method, no time pressure.

Step 2. Connecting the MCP server

Credyt ships an MCP server at mcp.credyt.ai. Claude Code connects to it with one command. From your project directory:

claude mcp add --transport http credyt https://mcp.credyt.ai \
  --header "Authorization: Bearer key_test_..." \
  --scope project

A few notes:

Replace key_test_... with the test key you copied in Step 1.
The --scope project flag matters. Without it, Claude Code stores the MCP config globally on your machine. With it, the config lives in .mcp.json inside the project, so the integration travels with the repo when you push it.
Once the command succeeds, the Credyt MCP server is connected to Claude Code in this project.

To verify, open a fresh Claude Code conversation and ask:

What MCP servers are connected?

Claude Code should respond with credyt in the list.

For the canonical install syntax and the full list of tools the MCP server exposes, see the Credyt MCP server reference. For host-side configuration questions, see Anthropic's Claude Code MCP guide.

Step 3. Loading the Credyt skills

Once the MCP server is connected, install the Credyt billing skills:

npx skills add credyt/ai-tools

Claude Code now has three billing skills:

pricing-strategy. Helps you decide what to charge for and how to price it.
billing-setup. Discovers your pricing model, configures products, assets, and pricing via MCP, and verifies the full billing cycle with a test customer. Does not touch your application code.
billing-integration. Wires Credyt into your application code: sends usage events and adds the balance display and portal link to your UI.

To confirm Claude Code can see all three, run:

List the credyt skills.

For details on each skill, see the AI skills reference.

Step 4. Configuration through dialog

This is where everything gets built.

We'll walk through the canonical credit-based scenario: an AI agent task runner. Each agent task fans out to a model and a few tools and costs you real money in LLM API fees. You want users to prepay for credits and redeem them as they run tasks. If your app is different (image generation per image, transcription per minute, document Q&A per question), swap the noun; the flow is the same.

Open Claude Code in your project and paste:

Setup Credyt to bill users for running agent tasks. I want a credit-based
pricing model, not USD per task.

What pricing-strategy does first. Claude Code asks 3 to 4 clarifying questions to lock in the pricing model. Examples:

How much does each agent task cost you in LLM API fees? ($0.10 to $0.30 across a model plus a few tool calls is a fair starting range.)
What unit do you want users to see in your app? (Task credits. Short task costs 1 credit; long task costs 3 credits.)
What's the exchange rate between dollars and credits? ($0.05 per credit. So a $5 top-up converts to 100 credits, enough for 100 short tasks or about 33 long tasks.)
Anything free on signup? (50 task credits as a one-time grant. That covers the user's first 50 short tasks.)

Answer each one. The skill records your choices for the rest of the configuration.

What billing-setup does next. Three steps, executed automatically:

Creates a Credyt product. A product called "Agent task" appears in your dashboard with two prices wired against a complexity attribute: 1 credit for short, 3 credits for long. See the products docs.
Sets up the credit asset and pricing. Pricing is wired against a custom asset called "Task credits" at $0.05 per credit. When a customer tops up $5, Credyt converts the payment to 100 task credits at the moment of payment and credits the wallet. A 50-credit grant fires on every new customer, so their first 50 short tasks are free. See the credit grants docs.
Runs a verification loop. The skill creates a test customer and simulates a $5 top-up plus the 50-credit signup grant. It then submits three sample usage events (two short, one long) and confirms the balance drops from 150 to 145. You see the full billing cycle work end-to-end before you touch your app's code.

billing-setup does not modify your application code. Its only job is to get the product side right.

Next, integrate Credyt into your app. With the product configured, run:

Now integrate Credyt into my app.

This kicks off billing-integration, which wires up the balance check, the credit display, and the portal link:

Balance check before each agent task. Before the agent fans out to the model and tools, your app queries Credyt's balance check endpoint to decide whether to proceed. If the credit balance covers the task cost, the run proceeds; afterwards your app POSTs to the usage-event endpoint with the complexity attribute set, and Credyt debits the right number of credits in real time.
A credit-balance display lands in the user header ("80 task credits left").
A "Manage billing" link appears next to the balance. The link opens Credyt's branded billing portal in a new tab. The portal handles credit packs (Stripe Checkout under the hood), auto top-up controls, usage history, and customer self-service.

Claude Code shows a diff covering 6 to 10 changed files: the route that orchestrates the agent run, a new BalanceBadge component, env vars for the Credyt API key, and a small server function that proxies the balance and usage calls. Approve the diffs the same way you do any other Claude Code edit.

You now have working credit-based billing.

Step 5. Test on dev

Five steps to verify. Run your app locally first.

Sign up as a fresh user. Confirm the 50-credit signup grant appears in the user's balance.
Run a short agent task. Watch the balance tick down by 1 credit. Confirm the usage event lands in your Credyt dashboard.
Run a long task. Balance drops by 3. Confirm the complexity attribute is recorded on the event.
Exhaust the grant. Burn through enough tasks to land at zero. The next request should block and prompt the user to top up.
Click "Manage billing". The Credyt portal opens. Top up $5 with Stripe test card 4242 4242 4242 4242 (any future expiry, any CVC). Return to your app. The balance reflects 100 task credits at the $0.05 rate. Run another task. It works.

If any step fails, the Credyt dashboard's event log is the first place to look. Every balance check result and every usage event lands there with a timestamp and a result code.

Step 6. Pre-production checklist

Five checks before you ship. None of them take more than a minute.

Switch the API key. Replace key_test_... with key_live_... in your env vars. Update the secret in your hosting provider (Vercel, Render, Fly, Railway, Cloudflare Workers).
Verify webhooks have signing. If you're consuming Credyt's webhooks, confirm your endpoint verifies the Credyt-Signature header on every request. See the webhooks docs for the verification code.
Upload your logo. Drop your logo into the Credyt dashboard. The billing portal users land on will carry your brand on top of Credyt's UI.
Wire a balance webhook (optional). If you want your own notifications when a customer's balance crosses a threshold, configure a webhook destination in the dashboard and have your app send the email or in-app message through whatever provider you already use.
Test the live flow once. Use a real card with a real $5 top-up on a staging URL. Refund yourself afterward. This catches any production-only config issues.

What else can Credyt do: more prompts to try

The integration you just shipped covers the basics: credit balance, authorization, real-time debit, and a portal link for credit packs. Everything else Credyt does is one prompt away. Paste any of these into Claude Code with the MCP server connected.

1. Customer-controlled auto top-up

Make sure auto top-up is available in the billing portal so my users can
enable it themselves.

Auto top-up is customer-initiated: each user turns it on in the Credyt portal, picks their threshold and refill amount, and saves a card. The platform exposes the control; it does not turn it on for the customer. Once a user has it on, they rarely see a "you're out" screen — Credyt charges the saved card the moment the balance hits the threshold and credits the wallet immediately, so the next balance check the app performs already shows funds. The auto top-up docs cover the full portal flow.

2. Different prices per agent depth

Charge 5 credits for deep agent tasks (multi-tool, multi-step) and 1 credit
for quick tasks (single-tool). Make depth a toggle in the UI.

Same product, two prices, picked based on the complexity attribute you wired in Step 4. Adding a third tier just adds a third value to the same attribute, and Credyt routes the event to the correct price automatically. The dimensional pricing docs cover the attribute model in full.

3. Change the exchange rate

Update the exchange rate from $0.05 per credit to $0.04 per credit. Apply
to new top-ups only.

Useful when you want to run a promotion or rebalance margins. Existing credit balances stay valued at the rate they were purchased; only future top-ups convert at the new rate. See the custom assets docs.

4. Credit packs as named bundles

Add a Starter Pack: $10 = 250 credits (25% bonus over the $0.05 base rate).
Add a Power Pack: $50 = 1,500 credits (50% bonus).

Named credit packs raise the average top-up size by giving users a reason to prepay more. Credyt handles the bonus credits as a promotional grant on top of the base conversion. See the credit grants docs.

5. Pro tier subscription with included credits

Add a Pro tier: $20/month subscription, 500 task credits included monthly,
then 1 credit per short task or 3 credits per long task for overage.

This is hybrid billing in one prompt: a recurring fee bundled with a monthly credit allowance, then overage drawn from the customer's pre-funded credit balance. AI products often shift here within their first year because pure credit pricing scares heavy users and pure subscription leaves money on the table. The hybrid model docs cover the rev-rec details when you wire it up.

6. Show me unprofitable customers

Show me which customers cost me more than they paid in the last 30 days.

This is the question you can't answer with Stripe alone. Credyt tracks what each customer paid in top-ups; if you attach cost data to your usage events, Credyt also tracks what each task cost you in provider calls. Together that's a per-customer P&L.

The profitability analytics view shows net revenue and margin per customer so you can spot the power users eating your margin. It's a common first report to run after the second month live.

7. Move to dollars instead of credits

Switch from a credit asset to a USD wallet. Each task costs $0.10 short,
$0.30 long. Users see dollars in the UI, not credits.

If credits feel like overkill for your product, the same MCP path supports the USD variant: top-ups convert directly to a dollar balance and tasks debit in dollars. The USD-wallet Claude Code guide walks through that flow end-to-end.

What's next

You shipped credit-based billing. Two places to go next.

For everything else the MCP layer can do (multi-asset wallets, B2B org hierarchy, real-time profitability dashboards), see the Credyt MCP server reference.

For a wider view of how billing platforms compare across architectures, see the usage-based billing software comparison.

New to the model? See Credyt for AI products.