Try a generator

AI SaaS Starter

A subscription SaaS with an AI feature at its core: Next.js, Supabase, Stripe and a model API, with the data model and build order laid out.

Intermediate ~3-5 days build AppCodely Team

Next.js 15 Supabase Stripe Anthropic API

How to use this blueprint

A blueprint is a build plan you follow with your AI coding tool. There is nothing to download here; you work through the page from top to bottom.

  1. Read the plan below. It tells you what to build, with which tools, and in what order.
  2. Generate your project documents. The free PRD generator and CLAUDE.md generator turn this plan into files for your project.
  3. Build step by step. Follow the idea-to-production workflow, giving your AI tool one build phase at a time.

Build it with AI: your kickoff prompt

Paste this into Claude Code, Cursor or any AI coding tool and it will drive the build from this blueprint. No programming knowledge needed to start.

kickoff-prompt.txt 
I want to build this project with you, step by step.

Project: AI SaaS Starter
Stack: Next.js 15, Supabase, Stripe, Anthropic API
What it is: A subscription SaaS with an AI feature at its core: Next.js, Supabase, Stripe and a model API, with the data model and build order laid out.
Full build plan: https://appcodely.com/blueprints/ai-saas-starter

Rules for this collaboration:
- Follow the build plan phase by phase; one phase per session.
- Before writing code, draft a short PRD and a CLAUDE.md with me.
- Work in small steps and run the tests after every change.
- Tell me when a decision is mine to make instead of guessing.

Start by asking me the three most important questions about this project, then propose the plan for phase 1.

This blueprint takes you from empty repository to a subscription SaaS with an AI feature at its core: authentication, billing, a protected dashboard and a model-backed endpoint. It is trimmed to the parts every subscription SaaS needs, nothing more.

What you are building

A web application where users sign up, pick a paid plan and use an AI-powered feature (chat, generation or analysis, your choice) within usage limits. Admin views, webhooks and environment separation included. No placeholder pages; every route earns its place.

Stack and why

  • Next.js 15 (App Router): server components by default keep the client bundle small, and one framework covers pages and API routes.
  • Supabase: Postgres with row-level security, plus authentication that works out of the box. You own the database and can leave managed hosting later without a rewrite.
  • Stripe: subscriptions, customer portal and webhooks. Do not build billing yourself.
  • Anthropic API: the AI feature itself. The pattern is identical for any model provider.

Architecture

Three rules keep this codebase healthy as it grows:

  1. All model calls go through one server module. Client components never touch the AI provider; they call your API route, which applies auth, rate limits and usage metering in one place.
  2. Billing state lives in your database, mirrored from Stripe by webhook. The app reads entitlements from Postgres, never from Stripe at request time.
  3. Row-level security on every table. Policies enforce tenancy at the database layer, so a leaked query cannot cross accounts.

Data model

TablePurposeKey columns
profilesUser data beyond authid (auth ref), display_name
subscriptionsMirrored billing stateuser_id, stripe_customer_id, plan, status, current_period_end
usage_eventsMetering for limitsuser_id, feature, tokens, created_at
ai_requestsAudit and debugginguser_id, prompt_hash, model, status, latency_ms

Build order

  1. Skeleton: Next.js app, Supabase project, auth flow, one protected page. Deploy on day one so the pipeline exists.
  2. Billing: Stripe products, checkout, customer portal, webhook handler writing to the subscriptions table. Test with the Stripe CLI before any UI polish.
  3. AI feature: the server module, one endpoint, streaming to the client. Add usage metering in the same commit as the feature, not later.
  4. Limits and admin: enforce plan limits from usage_events, add an admin view over requests and subscriptions.
  5. Hardening: rate limiting on public endpoints, error states in the UI, alerts on webhook failures.

Pitfalls to plan around

  • Webhooks arrive out of order. Write handlers that upsert on the latest Stripe state rather than assuming event sequence.
  • Streaming responses and serverless timeouts interact badly. Check your platform limits before choosing long-form generation features.
  • Meter usage on the server response, not the client. Closed tabs still consume tokens.

Working with an AI agent on this build

This blueprint pairs well with agent-driven development: each build phase above is one delegable task. Start your session with a proper CLAUDE.md, follow the idea-to-production workflow, and if you are new to the tooling, read the Claude Code guide first. Write the PRD before the first prompt; the PRD generator gets you a solid draft in minutes.

FAQ

Can I swap Supabase for another Postgres host?
Yes. The schema is plain Postgres and the auth layer is the only Supabase-specific piece. Budget half a day to replace auth if you move to raw Postgres with a separate auth provider.
Why mirror Stripe state instead of querying Stripe directly?
Latency and reliability. Reading entitlements from your own database keeps request paths fast and keeps the app working during a Stripe outage. The webhook mirror costs one table and one handler.
Does the blueprint include the AI feature implementation?
It defines the server module pattern, the endpoint shape and the metering hooks. The feature itself is intentionally open: chat, generation and analysis all fit the same skeleton.

Sources

  1. Next.js documentation, Vercel
  2. Supabase documentation, Supabase
  3. Stripe billing documentation, Stripe