Best AI SaaS Boilerplates 2026 (Claude/OpenAI)

TL;DR

Most mainstream SaaS boilerplates don't include AI features — you add them yourself. The ones that do (Open SaaS, Shipped.club AI tier, some indie starters) give you Vercel AI SDK integration, streaming chat UI, and basic token tracking. For serious AI products: build AI features on top of ShipFast or T3, using the Vercel AI SDK as the layer. The patterns are well-established: streamText for streaming, generateObject for structured output, credit system for billing, rate limiting for abuse prevention.

Key Takeaways

• Vercel AI SDK (ai): 4.5M downloads/week — the standard for AI features in Next.js
• Boilerplates with AI: Open SaaS (Wasp, free), Shipped.club (paid, AI tier), some indie starters
• What to build yourself: streaming chat UI + token tracking + credits + rate limiting
• Credit system: ~500 lines of Drizzle/Prisma + Stripe + AI SDK code
• Models supported: OpenAI, Anthropic Claude, Google Gemini via single ai package
• Streaming: works with Server Actions and API routes; use useChat hook on client

---

Vercel AI SDK: The Foundation

npm install ai @ai-sdk/openai @ai-sdk/anthropic

// app/api/chat/route.ts — streaming chat endpoint:
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
import { anthropic } from '@ai-sdk/anthropic';
import { auth } from '@/lib/auth';
import { checkAndDeductCredits } from '@/lib/credits';

export async function POST(req: Request) {
  const session = await auth();
  if (!session?.user) return new Response('Unauthorized', { status: 401 });
  
  const { messages } = await req.json();
  
  // Check user credits before running:
  const hasCredits = await checkAndDeductCredits(session.user.id, {
    estimatedTokens: 1000,
    model: 'gpt-4o-mini',
  });
  
  if (!hasCredits) {
    return new Response('Insufficient credits', { status: 402 });
  }
  
  const result = streamText({
    // Swap model easily — same API for OpenAI, Anthropic, etc.:
    model: openai('gpt-4o-mini'),
    // model: anthropic('claude-3-5-haiku-20241022'),
    
    system: 'You are a helpful assistant. Be concise and accurate.',
    messages,
    
    maxTokens: 2048,
    temperature: 0.7,
    
    // Track actual token usage after completion:
    onFinish: async ({ usage, finishReason }) => {
      await recordTokenUsage(session.user.id, {
        promptTokens: usage.promptTokens,
        completionTokens: usage.completionTokens,
        model: 'gpt-4o-mini',
      });
    },
  });
  
  return result.toDataStreamResponse();
}

// Client chat component with streaming:
'use client';
import { useChat } from 'ai/react';

export function ChatInterface() {
  const { messages, input, handleInputChange, handleSubmit, isLoading, error } = useChat({
    api: '/api/chat',
    onError: (err) => {
      if (err.message.includes('402')) {
        alert('Out of credits — please upgrade your plan');
      }
    },
  });

  return (
    <div className="flex flex-col h-full">
      <div className="flex-1 overflow-auto p-4 space-y-4">
        {messages.map((msg) => (
          <div key={msg.id} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
            <div className={`rounded-lg p-3 max-w-[80%] ${msg.role === 'user' ? 'bg-blue-500 text-white' : 'bg-gray-100'}`}>
              {msg.content}
            </div>
          </div>
        ))}
        {isLoading && <div className="text-gray-400">AI is thinking...</div>}
      </div>
      
      <form onSubmit={handleSubmit} className="p-4 border-t">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Ask anything..."
          className="w-full p-3 border rounded-lg"
          disabled={isLoading}
        />
      </form>
    </div>
  );
}

---

Credit System Implementation

The standard pattern for AI SaaS billing:

// lib/credits.ts — full credit system:
import { db } from './db';
import { users, creditTransactions } from './db/schema';
import { eq } from 'drizzle-orm';

// Model pricing (per 1K tokens):
const MODEL_COSTS = {
  'gpt-4o': { input: 0.005, output: 0.015 },
  'gpt-4o-mini': { input: 0.00015, output: 0.0006 },
  'claude-3-5-haiku-20241022': { input: 0.0008, output: 0.004 },
  'claude-3-5-sonnet-20241022': { input: 0.003, output: 0.015 },
} as const;

// Credits: 1 credit = $0.001 USD
const CREDITS_PER_DOLLAR = 1000;

export async function checkAndDeductCredits(
  userId: string,
  { estimatedTokens, model }: { estimatedTokens: number; model: keyof typeof MODEL_COSTS }
): Promise<boolean> {
  const costs = MODEL_COSTS[model];
  const estimatedCostUsd = (estimatedTokens / 1000) * costs.output;
  const estimatedCredits = Math.ceil(estimatedCostUsd * CREDITS_PER_DOLLAR);
  
  // Atomic deduction — prevents race conditions:
  const result = await db.transaction(async (tx) => {
    const [user] = await tx.select({ credits: users.credits })
      .from(users)
      .where(eq(users.id, userId))
      .for('update');  // Lock row during transaction
    
    if (!user || user.credits < estimatedCredits) return false;
    
    await tx.update(users)
      .set({ credits: user.credits - estimatedCredits })
      .where(eq(users.id, userId));
    
    await tx.insert(creditTransactions).values({
      userId,
      amount: -estimatedCredits,
      type: 'usage',
      description: `Estimated usage for ${model}`,
    });
    
    return true;
  });
  
  return result;
}

export async function recordTokenUsage(
  userId: string,
  { promptTokens, completionTokens, model }: {
    promptTokens: number;
    completionTokens: number;
    model: keyof typeof MODEL_COSTS;
  }
) {
  const costs = MODEL_COSTS[model];
  const actualCostUsd = 
    (promptTokens / 1000) * costs.input +
    (completionTokens / 1000) * costs.output;
  const actualCredits = Math.ceil(actualCostUsd * CREDITS_PER_DOLLAR);
  
  // Reconcile estimated vs actual (refund or charge difference):
  await db.insert(creditTransactions).values({
    userId,
    amount: -actualCredits,  // Negative = used credits
    type: 'usage_actual',
    description: `${model}: ${promptTokens}+${completionTokens} tokens`,
    metadata: { promptTokens, completionTokens, model, costUsd: actualCostUsd },
  });
}

// lib/db/schema.ts additions for credits:
import { integer, jsonb } from 'drizzle-orm/pg-core';

// Add to users table:
export const users = pgTable('users', {
  // ... existing fields
  credits: integer('credits').notNull().default(100),  // Start with 100 free credits
  creditsUsedTotal: integer('credits_used_total').notNull().default(0),
});

export const creditTransactions = pgTable('credit_transactions', {
  id: text('id').primaryKey().$defaultFn(() => crypto.randomUUID()),
  userId: text('user_id').notNull().references(() => users.id),
  amount: integer('amount').notNull(),  // Positive = added, negative = used
  type: text('type', { enum: ['purchase', 'usage', 'usage_actual', 'refund', 'bonus'] }).notNull(),
  description: text('description').notNull(),
  metadata: jsonb('metadata'),
  createdAt: timestamp('created_at').defaultNow().notNull(),
});

---

Structured Output for AI Features

// app/api/analyze/route.ts — structured AI response:
import { generateObject } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

const analysisSchema = z.object({
  sentiment: z.enum(['positive', 'negative', 'neutral']),
  score: z.number().min(0).max(1),
  keywords: z.array(z.string()).max(5),
  summary: z.string().max(200),
  actionItems: z.array(z.object({
    action: z.string(),
    priority: z.enum(['high', 'medium', 'low']),
  })).optional(),
});

export async function POST(req: Request) {
  const { text } = await req.json();
  
  const { object } = await generateObject({
    model: openai('gpt-4o-mini'),
    schema: analysisSchema,
    prompt: `Analyze the following customer feedback:\n\n${text}`,
  });
  
  // object is typed as z.infer<typeof analysisSchema>
  return Response.json(object);
}

---

Open SaaS: Best Free AI Boilerplate

The Open SaaS project (Wasp-powered) includes an AI demo feature as a reference implementation:

Open SaaS AI features:
  ├── /ai-generated-cover-letter — demo AI feature
  ├── GPT-4 via OpenAI SDK
  ├── Credits system (basic)
  ├── Token tracking
  └── Error handling for API failures

This gives you a working reference for the full flow, even if you replace the specific use case.

---

Boilerplates with AI Features

Boilerplate	AI Features	Price	Notes
Open SaaS	Basic chat demo	Free	Wasp framework, reference only
Shipped.club AI	Full AI chat + credits	$199+	Vercel AI SDK, production-ready
ShipFast	None built-in	$299	Add yourself (1-2 hours)
T3 Stack	None built-in	Free	Add yourself with AI SDK
Supastarter	None built-in	$299	Add yourself

For most teams: start with ShipFast or T3, add the credit system + streamText pattern from this article. 4-8 hours of work to have a production AI feature.

Building your own AI SaaS feature checklist:
  ✅ Install: ai, @ai-sdk/openai (or @ai-sdk/anthropic)
  ✅ Route: /api/chat with streamText
  ✅ Client: useChat hook with streaming UI
  ✅ Credits: check before + record after with onFinish
  ✅ Rate limiting: per-user per-minute limits
  ✅ Error handling: model failures, credit exhaustion
  ✅ Cost tracking: token usage → dollar cost → credits
  ✅ Plan limits: free tier caps, pro tier upgrades

Why Most Boilerplates Don't Include AI Features

AI features are product-specific in a way that auth, billing, and email are not. Auth has a predictable pattern: sign up, sign in, reset password. Billing has a predictable pattern: checkout, webhook, portal. AI features vary dramatically by product: a writing assistant needs streaming text generation with history. An image analysis tool needs vision models and file uploads. A code reviewer needs long context windows and structured output. A customer support bot needs RAG with a company knowledge base.

Because the AI feature shape is so product-specific, boilerplate authors face a dilemma: include a generic AI demo that's useful for learning but not production-ready, or leave AI out entirely and let developers build it from scratch. Most paid boilerplates (ShipFast, Supastarter, SaaSBold) chose the latter. Open SaaS chose the former — its AI cover letter generator is a useful reference implementation but clearly a demo, not a foundation.

The consequence for developers is that "AI SaaS boilerplate" in 2026 usually means: a standard SaaS boilerplate + the Vercel AI SDK + a credit/token system you build yourself. The patterns are well-established (streaming with streamText, structured output with generateObject, credits with Drizzle/Prisma transactions), and 4-8 hours of implementation time gets you to a production-ready starting point.

Choosing the Right Model for Your Feature

The Vercel AI SDK's provider-agnostic interface makes model selection reversible — swapping from OpenAI to Anthropic requires changing one line. But the model choice still matters for feature quality, cost, and latency.

For streaming chat and general text generation: gpt-4o-mini (OpenAI) and claude-3-5-haiku (Anthropic) are the best value options in 2026. Both have fast response times, low per-token costs, and high quality for most use cases. gpt-4o-mini has a slight edge on instruction following for structured tasks; claude-3-5-haiku has a slight edge on safety and tone control for customer-facing applications.

For complex reasoning tasks that justify higher cost: gpt-4o or claude-3-5-sonnet are appropriate. These models handle multi-step reasoning, ambiguous prompts, and complex instruction following better than the smaller models. The cost difference is roughly 10-20x compared to the mini/haiku tier — budget the credit pricing accordingly.

For vision tasks (analyzing images, screenshots, documents): gpt-4o and claude-3-5-sonnet both support vision. OpenAI's vision model has been in production longer; Anthropic's is strong on document analysis and handling complex layouts.

For long-document tasks (summarization, analysis of large codebases or PDFs): Claude models have a 200K token context window. GPT-4o supports 128K tokens. For tasks that require processing entire books, large codebases, or lengthy conversation histories, Claude's context window is the deciding factor.

Rate Limiting AI Endpoints

Every AI endpoint needs rate limiting. Without it, a single user can exhaust your monthly API budget in minutes, either accidentally or intentionally. The credit system shown above is one layer; rate limiting is an additional layer that caps request frequency independently of credits.

The simplest implementation uses a sliding window counter stored in Redis (Upstash for Vercel serverless environments). Per-user limits of 10-20 requests per minute and 100-200 requests per hour stop accidental abuse while preserving normal usage patterns. Global limits (across all users) prevent budget explosions from coordinated abuse.

For free tier users, tighter rate limits are appropriate — 5 requests per minute, 30 per hour. For paid users, looser limits. For enterprise users, per-contract limits. This tiering aligns with how you'd price AI credits at different plan levels.

Building a Production AI Feature from a Standard Boilerplate

The integration path from a standard Next.js SaaS boilerplate to an AI product follows a predictable sequence. First, add the Vercel AI SDK and your chosen provider SDK. Second, create the streaming endpoint with credit checking. Third, add the useChat client component. Fourth, add a credit display in the user dashboard showing remaining credits. Fifth, wire credit purchases to Stripe (selling credits as a one-time purchase or including credits in subscription tiers).

ShipFast provides the best foundation for this because its Drizzle ORM and simple schema make adding the credits table straightforward. The schema addition is three columns on the users table (credits, creditsUsedTotal, lastCreditRefillAt) plus a credit_transactions join table. The Drizzle query pattern for atomic credit deduction with row-level locking (FOR UPDATE) works cleanly within ShipFast's existing patterns.

T3 Stack with tRPC provides equally good foundations, with the advantage that the tRPC mutation pattern is natural for credit deduction — you can add error handling for insufficient credits using tRPC's error system and get type-safe error handling on the client automatically.

Supastarter's Supabase backend can enforce credit limits using Row Level Security and Postgres functions, which is more sophisticated but also more complex to implement correctly. For most AI SaaS products, application-level credit enforcement (in the API route or tRPC procedure) is sufficient.

Rate Limiting and Abuse Prevention at Scale

Beyond per-user rate limits, AI endpoints need abuse detection. Common abuse patterns: credential sharing (multiple users sharing one account), prompt injection attempts (users trying to extract system prompts or manipulate the model), and token padding (crafting prompts to maximize response length and exhaust credits faster).

Credential sharing is detectable by tracking concurrent sessions per account and flagging accounts with unusual IP diversity. Prompt injection attempts are harder to detect programmatically — using Anthropic's Claude models, which have stronger built-in resistance to prompt injection, reduces the attack surface. Token padding can be mitigated by setting maxTokens on the response to prevent excessively long generations.

For consumer AI products expecting high traffic, evaluate Cloudflare's AI Gateway as a caching and rate limiting layer in front of your AI endpoints. It can cache identical prompts (reducing API costs for common queries), enforce rate limits at the edge (before requests reach your Next.js server), and provide usage analytics without additional instrumentation.

AI SaaS Products That Are Working in 2026

The AI SaaS market in 2026 has separated into categories. AI wrappers (products that add a UI on top of GPT-4 or Claude without significant differentiation) face commoditization as OpenAI and Anthropic improve their default interfaces. Products with genuine differentiation — proprietary training data, workflow integration, domain-specific fine-tuning, or superior UX — are growing.

The categories with the strongest early economics: AI for legal document review and drafting (high value per action, low tolerance for errors that drives premium pricing), AI for software development (GitHub Copilot established the market, but niche tools for specific languages and frameworks continue to grow), AI for customer support automation (replacing first-tier support tickets with high accuracy), and AI for document processing (extracting structured data from unstructured inputs like invoices, forms, and contracts).

If you're choosing a boilerplate to build an AI product in these categories, the boilerplate's AI feature surface matters less than its auth, billing, and team management features. You'll build the AI layer yourself in any case — choose the boilerplate with the strongest foundation for the business logic your specific product needs.

Choosing Between OpenAI and Anthropic for Your Product

The Vercel AI SDK abstracts away the provider switch, but the underlying model capabilities differ and can affect user experience measurably. In 2026, both OpenAI and Anthropic offer strong models at multiple price tiers, but they have meaningful differences in specific areas.

OpenAI's models have broader web knowledge as of their training cutoff, stronger coding capability, and more extensive third-party tool integrations. The OpenAI function calling API (now called tool use) is mature and well-documented. If your AI feature involves code generation, structured data extraction from text, or web-browsing capability, OpenAI's ecosystem has more available tooling.

Anthropic's Claude models score higher on safety benchmarks, have stronger performance on long-document analysis (200K token context vs OpenAI's 128K for the respective flagship models), and tend to follow nuanced instructions more reliably when prompt engineering requires fine-grained instruction-following. For customer-facing AI features where users might attempt misuse, Claude's constitutional AI approach provides additional resistance to jailbreaks and prompt injection.

The practical advice: the difference between GPT-4o-mini and claude-3-5-haiku for most SaaS use cases is smaller than the difference between prompt engineering approaches. Start with whichever model is most familiar, and switch providers only when you have a specific use case where one model measurably outperforms the other.

Free AI Credits as a Conversion Tool

A proven monetization pattern for AI SaaS products: give new users 50-100 free credits on signup, let them experience the AI feature, and convert them to paid plans when credits run out. The credit depletion creates a natural conversion moment — the user is engaged enough to have used all free credits, which indicates genuine product-market fit with that user.

The credit grant on signup is simple to implement: seed the credits field when creating the user record after OAuth or email verification. The conversion prompt when credits hit zero is where most products lose users — make it specific (show what they'll get for $X/month) rather than generic (show a pricing page). Users who have already used the product know the value; they need pricing clarity, not feature discovery.

Track credit-to-paid conversion rates by acquisition channel. Users from organic search who arrive at an AI product often have higher intent than users from broad awareness campaigns. This segmentation helps optimize which channels to invest in and which credit amounts convert at the highest rate.

The credit-to-paid conversion pattern also surfaces a useful signal about model cost efficiency. When users consistently exhaust their free credits within the first week, the free tier is either too generous or the model cost per interaction is higher than expected. Track average credits-consumed-per-session alongside the credit-to-paid conversion rate to understand whether you need to adjust credit pricing, optimize prompts to reduce token usage, or switch to a cheaper model for common interactions while reserving more capable models for premium operations.

See StarterPick's AI SaaS boilerplate category for the current filter of boilerplates with AI features, and the adding AI features to a SaaS boilerplate guide for a complete implementation walkthrough. For comparisons with OpenAI-specific starters, the LangChain starter vs Vercel AI starter comparison covers the two main AI SDK approaches.

Find AI SaaS boilerplates and compare features at StarterPick.

For a complete view of the boilerplate market beyond AI-focused starters, our best SaaS boilerplates guide covers every category including billing-heavy, multi-tenant, and open-source options.