Modern AI chat app (Vercel AI SDK pattern) icon

Modern AI chat app (Vercel AI SDK pattern)

Stack

The reference stack from Vercel's AI SDK templates: streaming responses from Claude or GPT, served from Next.js, with auth, payments, and chat history wired up.

Stack

What this is

The reference stack codified by Vercel’s AI SDK templates and used by a wave of 2025, 2026 AI products, Perplexity-style answer engines, AI-first coding assistants, vertical chatbots, AI tutors. The combination is so common that Vercel ships starter templates with most of these pieces pre-wired.

When to pick this stack

  • You’re building an AI product where the conversation is the product (not just an “AI feature” inside a CRUD app)
  • You want sub-second time-to-first-token streaming from the model
  • You expect to need vector search / RAG within the first month
  • You’re going to need usage-based billing, not flat-fee SaaS pricing

What we’d swap

  • Claude → ChatGPT or Gemini: pick the strongest model for your domain. The Vercel AI SDK keeps the call site the same; you change a single provider line.
  • Supabase → Convex: if you want optimistic-update real-time UI more than relational queries, Convex’s reactive model is purpose-built for AI chat UIs.
  • Stripe → Paddle / Lemon Squeezy: if you’re a solo founder and don’t want to deal with global VAT/sales tax compliance yourself. Stripe handles tax via Stripe Tax (paid add-on); Paddle/LemonSqueezy fold it into the merchant-of-record fee.

What this won’t cover

The AI SDK gives you streaming, tool calling, structured outputs, and provider abstraction, but you still own the prompt engineering, the evaluation harness, the cost-monitoring dashboard, and the moderation / abuse-prevention story. Budget time for those even if your stack is right.

Tags

In this stack

10 tools
Vercel

Frontend-first hosting with the best Next.js developer experience. Vercel handles deployment and hosting, often with a global edge network and zero-config CI/CD.

Used here for: Edge runtime is the natural fit for streaming token responses with low TTFT. Vercel's AI SDK is built around this.

Claude

Anthropic's coding-focused LLM with up to 1M token context, strong on code generation and long-document analysis.

Used here for: Anthropic's Claude API is the default model in many serious 2026 AI products. Sonnet for the everyday path, Opus for hard reasoning.

ChatGPT optional

OpenAI's flagship LLM with multimodal capabilities, 400K to 1M context windows, and Codex coding agents.

Used here for: OpenAI's API as a fallback or A/B model. The Vercel AI SDK abstracts both behind one interface, so swap is a one-line change.

Supabase

PostgreSQL backend with auth, real-time, edge functions, and auto-generated APIs. Supabase provides the storage, APIs, and runtime that web and mobile apps rely on, removing significant amounts of glue code.

Used here for: Postgres + Auth + Realtime + pgvector. Pgvector handles embeddings/RAG; Realtime can sync chat state across tabs and devices.

Clerk optional

Modern auth with pre-built UI components and organization/multi-tenancy support. Clerk handles user identity, sign-in flows, sessions, organisations, and account management.

Used here for: Drop-in alternative to Supabase Auth when you need organisations, social SSO, MFA, and a polished hosted UI from day one.

Stripe

Developer-first payments with Billing, Connect, and Radar. Stripe handles online payments, checkout, subscriptions, billing, and compliance.

Used here for: Metered billing for AI usage. Stripe's billing primitives map cleanly to per-token or per-message pricing models that AI products tend to land on.

Resend

Developer-first transactional email with React Email integration. Resend handles transactional or marketing email, sending, deliverability, templates, and reputation.

Used here for: Welcome emails, plan-change receipts, usage alerts. Resend's clean API and React Email templates fit nicely with a Next.js codebase.

Sentry

Application error tracking and performance monitoring.

Used here for: Error monitoring on streaming endpoints. Failures in token streams need different handling than regular request errors.

GitHub

Industry-standard Git hosting with Copilot, Actions CI/CD, and the largest dev community. GitHub handles version control and team collaboration, branches, pull requests, code review, CI/CD, and project knowledge.

Used here for: Source control, branch protection, Vercel preview-deploy hook. Standard.

PostHog optional

All-in-one product analytics, session replay, feature flags, and A/B testing. PostHog covers product, marketing, or business analytics, collecting events, modelling users, and surfacing insights.

Used here for: Product analytics + session replay. Useful for catching prompt-template regressions and seeing where users drop out of conversations.

Related