Best Boilerplates for Vibe Coding a SaaS 2026

Q: Where to Add Features?

main.wasp: Define new pages, operations, jobs src/client/: React frontend components src/server/: Node.js backend operations (queries, actions) src/shared/: Shared types and utilities

Vibe coding — describing features in natural language and letting AI write the implementation — went from experiment to legitimate development workflow in 2025. By 2026, AI coding agents like Cursor, Windsurf, and Claude Code handle first drafts of features, database schemas, and API routes competently, provided the codebase is structured in a way they can navigate.

Not all boilerplates are equal for AI-assisted development. A boilerplate with explicit TypeScript types, clean module boundaries, minimal magic, and AI configuration files (.cursorrules, .windsurfrules, CLAUDE.md) dramatically improves the quality of AI-generated code compared to a loosely-typed, convention-heavy starter.

Here's what to look for — and the best boilerplates optimized for AI-assisted SaaS development.

What Makes a Boilerplate "AI-Ready"

The difference between an AI writing good code and bad code in your codebase comes down to how much context the AI has:

1. Explicit TypeScript types everywhere

AI tools read your types to understand your data model. Loose types (any, unknown, implicit object) force the AI to guess.

// Bad for AI: implicit types, magic strings
const user = await getUser(id); // What shape is user?
const plan = user.metadata?.plan; // Is this typed?
await stripe.subscriptions.create({ ... }); // What params are required?

// Good for AI: explicit types everywhere
const user: User = await getUser(id);
const plan: SubscriptionPlan = user.subscriptionPlan;
const session: Stripe.Checkout.Session = await createCheckoutSession({
  userId: user.id,
  priceId: PLANS.pro.stripePriceId,
}); // AI can autocomplete correctly with the types

2. Small, focused functions with clear names

AI tools work better with functions that do one thing. A 400-line API route handler is harder to extend correctly than four 100-line functions with clear names.

3. .cursorrules and .windsurfrules configuration

These files tell AI tools how your project is structured, what conventions to follow, and what to avoid:

# Example .cursorrules
You are working on a Next.js 15 SaaS application.

Project structure:
- /app: Next.js App Router pages and layouts
- /components: React components (ui/ for shadcn, custom/ for app-specific)
- /lib: Server utilities, database client, auth helpers
- /convex: Convex backend functions and schema

Conventions:
- Use server actions for form submissions, not API routes
- All database queries go through /lib/db, not raw Prisma/Convex calls
- Auth check via requireUser() from /lib/auth/require-user
- Use Zod schemas for all external input validation
- Error handling via the Result type in /lib/result

Do NOT:
- Add console.log statements
- Use 'any' TypeScript type
- Write client-side data fetching without React Query
- Bypass auth middleware

4. AGENTS.md for Claude Code

Claude Code specifically looks for AGENTS.md in the project root. Some modern starters ship this:

# AGENTS.md — Claude Code Project Guide

## Architecture Overview
This is a Next.js 15 SaaS with Convex backend and Clerk auth.

## Key Directories
- /app/(auth): Login, signup, forgot password
- /app/(dashboard): Protected user dashboard
- /convex: All backend logic — queries, mutations, actions

## Common Tasks
### Adding a new feature:
1. Define schema in convex/schema.ts
2. Write query/mutation in convex/[feature].ts
3. Create page in app/(dashboard)/[feature]/page.tsx
4. Use useQuery/useMutation hooks in components

### Auth checks:
Use: const { userId } = await requireAuth(ctx) in Convex functions
Never access ctx.db without first calling requireAuth

Quick Comparison

Boilerplate	.cursorrules	.windsurfrules	AGENTS.md	TypeScript strictness	Clean architecture
Supastarter	✅	✅	❌	✅ Strict	✅
Open SaaS	❌	❌	✅	✅	✅
MakerKit	✅	✅	✅	✅ Strict	✅✅
Shipfast	✅	❌	❌	✅	⚠️
v1.run	❌	❌	❌	✅ Strict	✅

1. Supastarter — Best for Cursor + Windsurf Vibe Coding

Price: $149 | Stack: Next.js 15 + Better Auth + Drizzle + Stripe/Polar

Supastarter was one of the first commercial starters to ship with both .cursorrules and .windsurfrules pre-configured. Their AI configuration files encode the project's conventions so Cursor and Windsurf generate code that follows the same patterns as the boilerplate.

The Supastarter team published a blog post on "vibe coding a SaaS with Supastarter" — they actively optimize for AI-assisted development workflows and update the AI config files as the project evolves.

Supastarter's .cursorrules excerpt:

# Supastarter .cursorrules

## Stack
- Next.js 15 App Router
- Better Auth for authentication
- Drizzle ORM with PostgreSQL
- Stripe and Polar for billing
- shadcn/ui + Tailwind CSS

## Authentication
Always use `getSession()` from `@/lib/auth/server` for server components.
Use `useSession()` from `@/lib/auth/client` for client components.
Never access the database directly from client components.

## Database
All database operations in /lib/db/[entity].ts files.
Use Drizzle query builder — never raw SQL unless absolutely necessary.
Always handle errors with try/catch and return typed error objects.

## API Routes
Use Next.js Route Handlers in app/api/
Validate all input with Zod before touching the database
Return consistent { data, error } response shapes

2. MakerKit — Best for Claude Code Integration

Price: $299 | Stack: Next.js or React Router v7 + Supabase + Stripe

MakerKit ships with the most comprehensive AI development support:

.cursorrules with detailed Next.js/RR7 conventions
.windsurfrules mirroring the cursor config
AGENTS.md in the project root for Claude Code
Strict TypeScript configuration (strict: true, noImplicitAny: true)
Comprehensive JSDoc comments on public APIs (helps AI understand function purposes)

MakerKit's architecture is particularly AI-friendly because it separates concerns so clearly that an AI can add a new feature without understanding the entire codebase:

Feature addition workflow with Claude Code:
1. "Add a 'notes' feature where users can create/edit text notes"

Claude Code will:
- Read AGENTS.md to understand the project structure
- Create /apps/web/app/[organization]/notes/page.tsx
- Create lib/server/notes/queries.ts (Supabase queries)
- Create lib/server/notes/mutations.ts (Supabase mutations)
- Add notes table to Supabase schema
- Follow existing patterns from similar features

Without AGENTS.md, Claude Code has to guess the patterns.
With it, generated code looks like it was written by the boilerplate author.

3. Open SaaS — Best for Claude Code (AGENTS.md)

Price: Free | Creator: Wasp | Stack: Wasp + React + Node.js

Open SaaS ships with a comprehensive AGENTS.md that the Wasp team wrote specifically for Claude Code. It explains the Wasp framework architecture, project structure, and common patterns — letting Claude Code work with Wasp's unconventional file structure correctly.

This is particularly important for Wasp, where the build system generates code and the project structure differs from standard Node.js apps. Without AGENTS.md, AI tools get confused about what's generated vs. what to edit.

Open SaaS AGENTS.md structure:

# AGENTS.md

## About This Project
This is an Open SaaS application built with Wasp, a full-stack framework
for React + Node.js. Wasp generates boilerplate from .wasp config files.

## Critical: Do Not Edit
- .wasp/out/ (generated files, overwritten on build)
- .wasp/build/ (production build output)

## Where to Add Features
- main.wasp: Define new pages, operations, jobs
- src/client/: React frontend components
- src/server/: Node.js backend operations (queries, actions)
- src/shared/: Shared types and utilities

## Adding a New Feature (Step by Step)
1. Declare the operation in main.wasp
2. Implement server logic in src/server/[feature].ts
3. Use in React via useQuery/useAction hooks

4. TypeScript-Strict Free Starters for Vibe Coding

For developers who want the absolute cleanest TypeScript setup for AI-assisted development, these free starters work well:

v1.run (Midday port):

Strict TypeScript with no implicit any
Turborepo monorepo with clear package boundaries
Convex's type system provides the cleanest data model types
No type casting (as UserType) anywhere

RSK (React Starter Kit):

Convex generates types automatically from schema
Clerk provides typed user objects
React Router v7 generates route types
Three AI-optimized systems generating types = very little manual type work

Practical Vibe Coding Workflow with Boilerplates

The workflow that works best in 2026:

1. Start with a well-typed boilerplate (Supastarter, MakerKit, or Open SaaS)

2. Write your feature description in AGENTS.md or .cursorrules:
   "We're building a project management SaaS. Users belong to organizations.
    Each organization has projects. Projects have tasks. Tasks have assignees."

3. Use Claude Code for feature scaffolding:
   > "Add a Projects feature: list, create, edit, delete projects for the
      current organization. Follow existing patterns for Organizations."

4. Review the diff — Claude Code should follow your boilerplate's patterns

5. Use Cursor for implementation details:
   > "Add drag-and-drop reordering to the task list using @dnd-kit/core"

6. Commit working features, repeat

The bottleneck shifts from writing code to reviewing code. With a well-configured boilerplate and AI tools, a solo developer can ship features that would take a small team weeks — provided they can review and verify the AI's work quickly.

The AI Coding Tool Comparison for SaaS

Tool	Best for	Cost	Boilerplate compatibility
Cursor	Most developers	$20/month	Reads .cursorrules automatically
Windsurf	Code completions	$15/month	Reads .windsurfrules
Claude Code	Multi-file features	Usage-based	Reads AGENTS.md, CLAUDE.md
Copilot	VS Code users	$10/month	No project-specific config
Aider	CLI workflows	Free (API costs)	Reads CONVENTIONS.md

For SaaS development in 2026: Cursor for daily coding, Claude Code for larger features, a well-typed boilerplate (Supastarter or MakerKit) as the foundation.

Browse all AI-optimized SaaS boilerplates at StarterPick.

Comments