Build It — Your First Claude-Built SaaS

pnpm create next-app@latest notes-ai --typescript --tailwind --app --src-dir --import-alias "@/*"
cd notes-ai

Create a CLAUDE.md at the repo root for [your idea] — a [your archetype]. Use the Next.js + Supabase + Anthropic starter template. Include hard rules for:
- use pnpm, never npm
- every anthropic.messages.create() must check isLoadTestMode() first
- Zod safeParse on every public API route body
- RLS must be enabled for every user-owned table
- data model is [your data shape]
Keep it under 25 lines.

Install these dependencies and wire up a basic client + server setup:
- @supabase/supabase-js and @supabase/ssr for auth + DB
- @anthropic-ai/sdk for AI calls
- zod for input validation
Add .env.local.example with all needed env vars (NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY, ANTHROPIC_API_KEY). Create src/lib/supabase/{client,server}.ts singletons.

cp .env.local.example .env.local
# fill in the 4 values
pnpm dev

Create memory/MEMORY.md with an entry pointing to project_auth.md, and create memory/project_auth.md using the template from Ch 6. Fill the "Why this feature exists" and "Core invariants" sections based on these decisions: magic-link only (no passwords), 30-day session max, profiles table mirrors auth.users via a trigger.

Build magic-link auth using Supabase. Create:
- src/app/login/page.tsx — email input + "Send link" button, POSTs to /api/auth/magic-link
- src/app/auth/callback/route.ts — handles the Supabase redirect, creates a session cookie
- src/middleware.ts — redirects unauthenticated users from /app/* to /login
- src/app/api/auth/magic-link/route.ts — validates email with Zod, calls supabase.auth.signInWithOtp()

Every route handler uses Zod safeParse per our CLAUDE.md rules. Include loading/error states on /login.

pnpm dev
# visit localhost:3000/login
# enter your email, click "Send link"
# check inbox, click the link
# you should land on localhost:3000/app (or whatever protected route exists)

Create a Supabase migration for [your idea] that:
- adds public.[your_table] (id uuid pk, user_id uuid fk to auth.users, title text, body text, created_at timestamptz default now(), updated_at timestamptz default now())
- enables RLS on public.[your_table]
- adds 4 RLS policies (select, insert, update, delete) — all scoped by auth.uid() = user_id
- adds an index on user_id

Data shape: [your data shape]. Put the migration in supabase/migrations/ and run it against my local dev DB.

Build the [your_table] CRUD surface:
- src/app/api/[your_table]/route.ts (GET list, POST create) — Zod-validated, uses the logged-in user's session
- src/app/api/[your_table]/[id]/route.ts (GET, PATCH, DELETE) — RLS handles auth; return 404 on miss
- src/app/app/page.tsx — list of my [your_table] with a "New" button
- src/app/app/[your_table]/[id]/page.tsx — detail view with Edit / Delete buttons

Use server actions where appropriate. Keep the UI minimal — we'll style later.

Create:
- prompts/summarize.md — a system prompt that returns ONE paragraph (~50 words), plain language, no fluff
- src/lib/prompts.ts — a loadPrompt() helper that reads the file and validates required tokens
- src/lib/ai/helpers.ts — a cachedSystem() wrapper that wraps the prompt in cache_control: ephemeral
- src/lib/load-test.ts — an isLoadTestMode() helper that returns true when process.env.LOAD_TEST === '1'

Follow the prompt-from-file pattern from Ch 10's prompt contract.

Build POST /api/[your_table]/[id]/summarize:
- Check auth; RLS handles ownership
- If isLoadTestMode(), return a deterministic mock { summary: "LOAD TEST MOCK" }
- Otherwise: load the [your_table] row body, call anthropic.messages.create with cachedSystem(SUMMARIZE_SYSTEM)
- Log cost to a user_costs table (create migration too — simple: user_id, operation, cost_cents, created_at)
- Return { summary: string }

Export maxDuration = 30 so Vercel doesn't time out.

On the [your_table] detail page: add a "Summarise" button. On click, POST to /api/[your_table]/[id]/summarize, show a loading state, render the returned summary in a small bordered box above the main body. If the POST fails, show the error in-place.

Generate two pages for [your idea]:
- src/app/privacy/page.tsx — a plain-language privacy policy. Cover: what data we collect (email for magic-link auth, user-owned rows in our database, minimal analytics), how long we keep it, third parties (Supabase for hosting, Anthropic for AI calls, our email provider), user rights (export, delete), and a contact email.
- src/app/terms/page.tsx — terms of service. Cover: acceptable use, no warranty, liability cap, governing law placeholder (ask me to fill in my jurisdiction), termination.

Data shape is [your data shape]. Monetization is [your monetization] (adjust terms accordingly). Keep each page under 250 words. Link both from the site footer.

pnpm add @sentry/nextjs
npx @sentry/wizard -i nextjs --saas

Audit the Sentry wiring in this repo:
- Confirm sentry.client.config.ts, sentry.server.config.ts, and sentry.edge.config.ts exist
- Ensure NEXT_PUBLIC_SENTRY_DSN is in .env.local.example
- Tag every captureException with user.id (when authed) and the operation name
- For the [your idea] app specifically, wrap the AI endpoint in Sentry.startSpan so slow calls surface as performance issues

Show me the diff before applying.

Wire Plausible Analytics into src/app/layout.tsx:
- Script tag with defer, data-domain set to the prod domain (read from NEXT_PUBLIC_SITE_URL)
- Only include in production (skip on localhost)
- No cookies, no consent banner needed
- Add a /api/health endpoint that Plausible can hit for uptime

The app is [your idea] — a [your archetype]. Prefer lightweight over feature-rich.

Add SEO essentials to the [your idea] app:
- src/app/sitemap.ts (Next.js-native) listing every public route
- src/app/robots.ts allowing all, pointing at sitemap
- A Metadata export on every public route (landing, /privacy, /terms) with title, description tailored to [your idea], and an og:image reference
- A single /public/og-image.png placeholder (1200x630) — tell me what tool to generate one in
- Update src/app/layout.tsx Metadata base with the prod domain

Keep titles under 60 chars and descriptions under 160 chars.

Run /ship notes-ai. This should chain:
- /feature-check across auth, notes, and summarize
- /theme-check on the diff (if you support light mode)
- /security-audit (secrets, CORS, RLS)

Fix any blockers. Don't deploy on yellow.

Guide me through deploying to Vercel:
1. Push to a new GitHub repo
2. Import to Vercel (dashboard)
3. Set env vars: NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY, ANTHROPIC_API_KEY
4. Deploy
5. Tell me what to add to Supabase Auth → URL Configuration so magic-link redirects work on the prod domain