How to Build a SaaS with AI Features and Subscription Billing

The "AI SaaS with monthly subscription" shape is the default 2026 product: someone signs up, gets a few free uses of the AI feature, then pays $19 to $99 a month to keep using it. Most non-technical founders stall in the same spot. The marketing site is easy. The login flow is easy. Wiring AI calls to a Stripe subscription so free users hit a wall and paying users don't is where it falls apart.

This guide walks through the whole thing in plain English. You don't need to write code. You just need to know what to ask the AI builder for, and in what order. We'll use Webtwizz because it has all four pieces (auth, database, AI, payments) wired in as integrations. Lovable, Bolt, and Cursor work too with more setup.

The four pieces every AI SaaS needs

Before you prompt anything, get the shape clear in your head. There are four moving parts:

• Accounts. People sign up and log in. You know who they are.
• The AI feature. The thing your product actually does. The user gives input, the AI generates output.
• Subscriptions. A Free tier (limited), a Pro tier ($19-ish per month), maybe a Team tier ($79-ish).
• Limits. Free users only get N AI uses per month. Paid users get more. The product knows the difference and stops free users when they hit the limit.

The first three pieces are well-trodden. The fourth is where most side projects break, because "limit free users" sounds easy but involves a few moving parts that have to agree with each other. We'll handle it.

Step 1: Describe the app

Open Webtwizz and prompt something like this:

Build a SaaS called [your name].

Marketing landing page with a hero, three feature cards, pricing
(Free, Pro $19/mo, Team $79/mo), and an FAQ.

A signup page with email and password.
A dashboard logged-in users land on after signup.
A "generate" page where users type a prompt and see AI-generated output.

Use Supabase for accounts and the database. Use Anthropic for the AI.
Use Stripe for subscriptions.

Webtwizz outputs the marketing site, signup, dashboard shell, and generate page on the first prompt. The pricing page already shows your three tiers with "Upgrade" buttons. None of this needs you to write a single line. Use the visual editor for small fixes (move the hero, change the headline, swap colors) so you don't burn credits on layout tweaks.

Step 2: Plug in Supabase

Click the Supabase integration. Paste your access token. Pick a project. The connection is done. Signup, login, password reset, the whole login flow works.

Then ask the AI:

Set up the database tables I need:

- A profiles table with each user's plan (free / pro / team) and their
  Stripe customer ID
- A usage table that counts how many AI calls each user has made
  this billing period
- A history table that stores past AI generations so users can see them

Make sure a profile is automatically created when someone signs up.

Webtwizz writes the schema and the auto-create rule. You don't need to know SQL. The whole step takes about two minutes.

Step 3: Wire the AI feature

Click the OpenAI or Anthropic integration. Paste your API key. (You get one free at console.anthropic.com or platform.openai.com. Add $5 of credit; that lasts most early-stage products a long time.)

OpenAI vs Anthropic: for most text tasks, both are fine. Anthropic's Claude tends to be stronger at long, structured output and following instructions. OpenAI tends to be cheaper at the small-model end. Pick one and ship; you can swap later.

Then prompt:

On the /generate page, when the user submits a prompt:

- Send it to Claude (claude-sonnet-4-6, max 1024 tokens)
- Stream the response back live as it's typed
- Save the result to the history table
- Only allow logged-in users to use it

Step 4: Connect Stripe

Click the Stripe integration. Click "Connect with Stripe" and OAuth into your account. The connection is done.

In the Stripe dashboard, set up your products: Pro at $19/month, Team at $79/month. Stripe gives each one a "price ID" that looks like price_1Abc.... Copy them.

Back in Webtwizz, prompt:

Wire up subscription billing:

- Pricing page "Upgrade" buttons send users to Stripe Checkout
- Pro price ID: price_xxx
- Team price ID: price_yyy
- When someone successfully subscribes, update their plan in the
  profiles table
- When someone cancels, downgrade them at the end of the billing
  period (not immediately)
- Add a "Manage subscription" link in the dashboard that opens
  the Stripe customer portal

Stripe handles the actual checkout page, card entry, and security. Your job is to listen for "this person upgraded" and "this person cancelled" and update your database accordingly. Webtwizz writes that listener.

Step 5: Limit free users

Decide your limits. A reasonable starting point:

• Free: 10 AI uses per month
• Pro: 500 AI uses per month
• Team: unlimited

Then prompt:

Before any AI call, check the user's plan and how many uses they've
had this month:

- Free: 10/month, Pro: 500/month, Team: unlimited
- If they're at the limit, return a friendly "you've hit your monthly
  limit, upgrade to keep going" message with an upgrade button
- Otherwise, run the AI call and increment the counter
- Hide the Generate button on the dashboard if they're at limit, with
  the same upgrade prompt visible

The check has to happen on the backend, not the frontend. If you only hide the button, anyone curious can still hit your AI directly and burn your money. Webtwizz puts the check in the right place. Worth knowing this so you can sanity-check what was built.

Step 6: Don't let AI costs eat you alive

Every AI call costs you real money. A Pro user making 500 calls a month, each averaging a thousand or two words of output, runs you somewhere between $6 and $8 in token spend. If you charge $19 you net $11 to $13. If you charge $9 you lose money the moment a heavy user shows up.

Two early habits that save you:

• Cap the output length on every call. A thousand words of output is enough for almost any product. Tell the AI to set max_tokens to 1024. Cost-per-call becomes predictable.
• Track tokens per user. Each AI response includes a "tokens used" number. Have the AI store it alongside each generation. You can answer "what does this user actually cost me?" any time.

Rule of thumb for pricing: take your worst-case user (max-quota, biggest prompts) and price the tier at 2.5x to 3x what they cost you. You'll thank yourself in month four when one heavy user shows up and doesn't break the math.

Step 7: Test it end to end

Before you announce, walk through the whole flow yourself with a fake user:

• Sign up with a new email. Confirm it lands in your profiles table as a free user.
• Use the AI feature 10 times. Confirm the 11th gets blocked with the upgrade message.
• Click upgrade. Pay with Stripe's test card (4242 4242 4242 4242). Confirm your plan flips to Pro.
• Use the AI again. Confirm it works.
• Open the customer portal. Cancel. Confirm you can still use it until the end of the period (don't downgrade them the second they cancel; they paid for the month).

If any of those break, screenshot the moment and prompt: "this didn't work as expected, here's what happened, fix it." That's the loop.

Common things that go wrong

Trusting the frontend to enforce limits

Hiding the "Generate" button when someone is at limit is a courtesy. It's not protection. The actual block has to happen on the backend before the AI gets called. Webtwizz scaffolds it correctly, but if you hand-edit, don't move the check to the frontend.

Forgetting to listen for cancellations

Plenty of half-built billing systems update plans on signup and never again. Then a user cancels, keeps using the product forever, and you eat the AI cost. Make sure the listener handles upgrades AND cancellations AND plan changes.

No grace period after cancel

If a paying user cancels on day 3 of a 30-day period, they paid through day 30. Don't downgrade them on day 3. Stripe sends a "scheduled to cancel" event first, then a "now cancelled" event at the period end. Use the second one.

Hardcoding price IDs in your code

Stripe gives you separate price IDs for test mode and live mode. If you paste the test ID into your code, when you go live nothing works. Put price IDs in environment variables. Tell the AI to do this from the start.

No customer portal

Stripe's customer portal lets users cancel, change plans, and update their card without emailing you. It's free. Skipping it means you eat support tickets that don't need to exist. Make sure the dashboard has a "Manage subscription" link.

Bottom line

A SaaS with AI features and monthly billing is seven steps: scaffold, accounts, AI, Stripe, limits, cost tracking, end-to-end test. None of them require you to write code. They require you to understand the shape so you can prompt the AI builder clearly and sanity-check what it produces. Two to three hours from blank page to a real product you can charge for. A weekend if you're learning the integrations as you go.

For more on the full-stack picture, see Build a SaaS with AI. For a head-to-head on which builder fits this kind of project, see Can AI Actually Build a Real App?. Or jump straight in: 120 free Webtwizz credits, no card required.

Last updated: May 3, 2026