Build and Ship an AI SaaS in 48 Hours · 50 min · Anthropic Claude API · Next.js App Router

The AI Core Feature

The AI feature is the last piece wired, not the first -- by now it plugs into auth and billing that already work, instead of being retrofitted onto them.

Hiring signal: Streaming AI generation, gated by real subscription state, is the exact production pattern behind every serious AI SaaS product -- not a toy 'call the API once' example.

What you will learn

Build a streaming AI generation API route in Next.js App Router
Check subscription/usage state before generating, not after
Save generated content to Supabase and display it streaming in the UI

What You're Building

The actual product feature — but everything it needs (who's allowed to use it, how many times, what happens after) already exists from Lessons 2-3. Today is genuinely the "easy part" this course's ordering was designed to make true.

Check the gate before you generate, not after

// app/api/generate/route.ts
export async function POST(req: Request) {
  const supabase = await createClient();
  const { data: { user } } = await supabase.auth.getUser();
  if (!user) return new Response('Unauthorized', { status: 401 });

  const { data: usage } = await supabase
    .from('usage_limits')
    .select('proposals_used, subscription_status')
    .eq('user_id', user.id)
    .single();

  const isFreeAndOverLimit = usage?.subscription_status === 'free' && (usage.proposals_used ?? 0) >= 3;
  if (isFreeAndOverLimit) {
    return Response.json({ error: 'Free tier limit reached. Upgrade to continue.' }, { status: 402 });
  }

  const { clientName, projectDescription, serviceDetails } = await req.json();
  // ... generation happens below, only after this check passes
}

Notice this check happens BEFORE any call to Claude -- checking the limit after generating would mean you've already paid the API cost for a request you're about to reject, and it opens a race-condition window where a user could fire several requests before the first one's usage update lands. Gate first, generate second, always.

Unlock the full lesson

You've read the first 2 sections. The rest of this lesson covers Streaming in the App Router, What you're building today — plus a hands-on lab, quiz, and project artifact.

Create a free account to unlock Phase 0 and Phase 1 of every course — no credit card.

Key terms in this lesson

Streaming