enhanced human
The PulseThe Shortcut
Sign InSign Up
Lesson 2 of 5 · 18 min

Lesson 2: Your AI-Powered Tech Stack

Course: Ship Your First AI App

Estimated time: 30 minutes

Difficulty: Beginner Builder

Every builder eventually develops strong opinions about their stack. The problem is that most of those opinions were formed before AI coding tools existed. The calculus has changed. What used to be a "power user" stack that took weeks to set up now takes an afternoon with the right AI tooling.

This lesson isn't a comparison essay. It's a decision made: here's the stack, here's why, and here's how to get it running.

The Stack

Next.js + Supabase + Clerk + Vercel + Stripe

That's it. These five tools cover 95% of what a typical AI-powered app needs. Let's walk through each one and why it's in the stack.

Next.js: Your App Framework

Next.js is the default choice for new web apps right now, and for good reason. It handles both the frontend and the backend API routes in one project. You can build the UI and the server logic without switching between separate repos or deployment configs.

For AI apps specifically, Next.js has a few things that matter:

  • Streaming responses. When you're calling an AI API and streaming the response to the user (so they see text appearing like ChatGPT), Next.js handles this natively with minimal setup.
  • API routes. Your calls to OpenAI, Anthropic, or any other AI API should live on the server side, not in your frontend code. API keys exposed in the browser is a real security problem. Next.js API routes keep secrets on the server.
  • File-based routing. You add a new page by adding a file. This is genuinely fast to work with, and AI coding tools generate correct Next.js page code without much coaxing.

The App Router (introduced in Next.js 13) is what you want. Some older tutorials use the Pages Router. When you're searching for help or prompting your AI editor, specify "Next.js App Router" to get the current patterns.

What you get: A full-stack framework where your AI coding assistant knows every pattern cold.

Supabase: Your Database and Auth (Mostly)

Supabase is Postgres with a REST API, real-time subscriptions, and a storage layer, all in one. The free tier is generous. The hosted version means you're not running database infrastructure on day one.

For most AI apps you'll build, you need:

  • A place to store user data and app data
  • Row-level security so users only see their own data
  • An auth system (though we'll use Clerk for this)

Supabase handles all of that. The TypeScript SDK is well-documented and AI coding tools generate correct Supabase queries reliably.

One thing to know upfront: Supabase has its own auth system, but we're using Clerk for auth instead. That's a deliberate choice covered in the next section. You'll still use Supabase for everything else.

What you get: A managed Postgres database with a clean API, real-time capability, and storage - without DevOps overhead.

Clerk: Authentication You Don't Have to Build

Authentication is the part of every app that looks simple and is actually complicated. Password resets, session management, OAuth providers, magic links, multi-factor auth - building this yourself is a week of work and a month of security regrets.

Clerk is auth as a service. You add their SDK, drop in their pre-built components, and you have working login/signup in an hour. They handle:

  • Email/password login
  • Google, GitHub, and other OAuth providers
  • Magic link / passwordless login
  • User management dashboard
  • Session tokens that work with your Next.js API routes

The reason to use Clerk over Supabase Auth is the developer experience. Clerk's React components are significantly more polished, and their integration with Next.js App Router is cleaner. When you're moving fast, that polish matters.

What you get: Full authentication system in about an hour, no security debt.

Vercel: Deployment Without Configuration

Vercel is the company that makes Next.js. Deploying a Next.js app to Vercel is, genuinely, three clicks after you connect your GitHub repo. Push to main, it deploys. Preview deployments on every PR. Edge functions available if you need them.

For a first app, the free tier covers you. When you need more, the pricing is predictable.

The reason not to start with Render, Railway, Fly, or anything else isn't that those are bad options. They're fine. But Vercel + Next.js is the combination where every tutorial, every Stack Overflow answer, and every AI-generated suggestion is going to be correct. You spend less time debugging deployment quirks and more time building.

What you get: Zero-config deployment that stays out of your way.

Stripe: Payments That Work

If your app charges money, use Stripe. The documentation is the best in the industry. The API is the most well-documented payments API in existence, which matters because your AI coding assistant was trained on a lot of Stripe code.

For most apps, you want one of two Stripe setups:

Simple one-time payments: Stripe Payment Links. No code required. You create a link in the Stripe dashboard and send people to it. Upgrade to a full Stripe Checkout integration when you need more control.

Subscriptions: Stripe Billing. A bit more setup, but the patterns are well-established and your AI editor will generate correct code for the standard subscription flows (subscribe, cancel, upgrade, webhook handling).

One critical thing: handle Stripe webhooks. When a payment succeeds or a subscription renews, Stripe sends an event to your server. Your app needs to listen for that event and update the user's account accordingly. This is the part most first-timers miss. We'll cover it in Lesson 3.

What you get: Payments that work without building a payment system.

How AI Coding Tools Change the Stack Equation

Before AI editors, choosing a stack meant weighing your existing expertise heavily. Unfamiliar technology meant time spent reading docs and debugging basic setup. You defaulted to what you knew.

That calculus is different now. When you're working with Claude Code or Cursor, the AI knows these frameworks deeply. It can set up a Supabase client, generate a Next.js API route with proper error handling, write a Clerk middleware config, and create a Stripe webhook handler - and do all of it correctly.

This means:

  • Unfamiliar tech is cheaper. The AI fills in the gaps you'd normally have to read docs to fill.
  • The "I don't know this framework" tax is much smaller. You still need to understand what the code is doing, but you don't need to memorize the APIs.
  • Stack decisions can lean harder on fit-for-purpose. You're not picking Next.js because you know it inside out. You're picking it because it's the right tool, and your AI editor knows it inside out.

The flip side: if you're working with unusual tech (something obscure, something very new, something your AI editor hasn't seen much training data for), you'll hit a wall. The AI will hallucinate APIs that don't exist. It will get import paths wrong. You'll spend more time debugging AI mistakes than you'd save in generation.

Stick to the well-trodden stack. The one with abundant training data. Next.js, Supabase, Clerk, Vercel, Stripe - these all have millions of code examples in the training data. Your AI editor is most reliable here.

The AI API Layer

The stack above handles your app infrastructure. For the actual AI features, you need an AI API.

OpenAI: The default. GPT-4o is the model most builders reach for first. Well-documented, reliable, good at most tasks.

Anthropic (Claude): Better than GPT-4 at long-context tasks and following complex instructions. Claude 3.5 Sonnet is where most of the cost/quality tradeoffs land well.

Vercel AI SDK: This is worth knowing about. It's a library that wraps multiple AI APIs (OpenAI, Anthropic, and others) in a single consistent interface. Switch between providers without rewriting your integration code. Handles streaming well. Start here instead of the raw API clients.


// With Vercel AI SDK, switching providers is one line change
import { anthropic } from '@ai-sdk/anthropic';
// or
import { openai } from '@ai-sdk/openai';

// The rest of your code stays the same
const result = await streamText({
  model: anthropic('claude-3-5-sonnet-20241022'),
  prompt: userMessage,
});

Exercise: Full Stack Setup in Under 30 Minutes

Open your terminal. You're going to have a working skeleton running before you close this tab.

Step 1: Create the Next.js app (2 minutes)


npx create-next-app@latest my-ai-app --typescript --tailwind --eslint --app
cd my-ai-app

Step 2: Set up Supabase (5 minutes)

  • Go to supabase.com, create a free account and new project
  • Copy your project URL and anon key from Project Settings > API
  • Install the SDK: npm install @supabase/supabase-js
  • Create .env.local with your keys

Step 3: Set up Clerk (8 minutes)

  • Go to clerk.com, create a free account and new application
  • Choose "Next.js" as your framework
  • Follow their quickstart (it's 4 steps, they're clear)
  • Install: npm install @clerk/nextjs

Step 4: Add the Vercel AI SDK (2 minutes)


npm install ai @ai-sdk/openai @ai-sdk/anthropic
  • Add your OpenAI or Anthropic API key to .env.local

Step 5: Deploy to Vercel (5 minutes)

  • Push your project to a new GitHub repo
  • Go to vercel.com, connect GitHub, import the repo
  • Add your environment variables in the Vercel dashboard
  • Deploy

At this point you have a running Next.js app with auth, a database, and an AI API connection, deployed to production. That's the foundation every app in this course builds on.

If you get stuck: Open Cursor or Claude Code, paste your error, and ask it to fix it. This is exactly the kind of setup problem AI editors solve well.

Key Takeaway

Your stack isn't about personal preference - it's about the fastest path from idea to shipped. Next.js + Supabase + Clerk + Vercel + Stripe is that path right now, because your AI coding tools know these tools cold.

What's Next

Stack is running. Now Lesson 3 covers the hardest part of shipping fast: deciding exactly what goes in the MVP, writing specs your AI editor can actually execute, and building a working feature in two hours.

PreviousNext