How to Build a Production-Ready SaaS MVP with Bolt.new and Claude 3.5 Sonnet

The 48-Hour SaaS MVP Blueprint: Bolt.new + Claude 3.5 Sonnet

Building a Software-as-a-Service (SaaS) Minimum Viable Product used to require two to three months of foundational plumbing: setting up bundlers, configuring Tailwind, wiring authentication, defining Prisma schemas, and writing boilerplate CRUD routes. Today, modern coding platforms allow solo founders to ship complete, revenue-generating SaaS applications in a weekend.

The most effective modern stack pairs [Bolt.new](/tools/bolt-new) with [Claude 3.5 Sonnet](/tools/claude).

While Bolt.new runs on Claude 3.5 Sonnet under the hood, relying solely on Bolt's default prompt window for an entire application often leads to context exhaustion, circular styling bugs, and bloated code. To build a robust MVP that will not crumble under production traffic, you must separate architectural system design from rapid in-browser runtime execution.

If you are uncertain whether this dual-tool workflow matches your application's technical scope, use the Interactive AI Match Wizard to benchmark stacks based on your target cloud infrastructure.

High-Level Architecture: How the Pipeline Operates

To maximize efficiency, assign each tool to its core mechanical strength:

1. Claude 3.5 Sonnet (Architect & Database Engineer): Operates inside Claude Projects with a 200,000-token context window. Used to define system architecture, PostgreSQL schemas with Row-Level Security (RLS), Stripe billing state machines, and Edge API specifications.
2. Bolt.new (Full-Stack Constructor & Runtime): Operates on StackBlitz's WebContainer engine. Bolt provisions a live virtual Node.js container inside your browser, installs npm dependencies, renders UI components using Vite, and wires up API clients in real time.
3. [Cursor](/tools/cursor) + GitHub (Production Hardening): Once Bolt outputs a functional prototype, export the repository to GitHub for final linting, environment variable isolation, and automated CI/CD deployments.

[System Spec & DB Schema]  -->  [Live In-Browser Assembly]  -->  [Hardening & Deploy]
  Claude 3.5 Sonnet               Bolt.new (WebContainers)          [Cursor](/tools/cursor) + Vercel
 (Prisma / Supabase RLS)          (Vite + React + Tailwind)       (Production Launch)

Step 1: Design the Core Architecture with Claude 3.5 Sonnet

Do not start in Bolt.new with an open-ended prompt like "Build me a B2B SaaS for feedback management." Generic prompts consume your token budget on speculative components that require immediate refactoring.

Open Claude 3.5 Sonnet and build your technical specification document (SPEC.md).

The Claude Prompt for System Architecture

I am building an MVP for a B2B SaaS: a customer feedback triage engine with AI sentiment categorization.
Target Stack:
- Framework: Next.js (App Router) or Vite + React with TypeScript
- Database & Auth: Supabase (PostgreSQL with RLS)
- Payments: Stripe Subscriptions
- Styling: Tailwind CSS + Lucide Icons + Shadcn UI patterns

Generate:
1. Complete PostgreSQL schema with Supabase RLS policies (Profiles, Organizations, FeedbackItems, Subscriptions).
2. Strict TypeScript interfaces for all database models.
3. API Route specifications for webhooks and core business logic.
4. A concise, sequential prompt plan for Bolt.new to construct this UI and state incrementally.

Claude outputs a deterministic database schema. For example, your Supabase migration should enforce strict tenancy isolation:

-- Create tables with multi-tenant workspace isolation
CREATE TABLE workspaces (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

CREATE TABLE feedback_items (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  workspace_id UUID REFERENCES workspaces(id) ON DELETE CASCADE NOT NULL,
  title TEXT NOT NULL,
  content TEXT NOT NULL,
  sentiment TEXT CHECK (sentiment IN ('positive', 'neutral', 'negative')),
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Enable Row Level Security
ALTER TABLE feedback_items ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users can view feedback within their active workspace" 
ON feedback_items FOR SELECT 
USING (workspace_id IN (
  SELECT workspace_id FROM workspace_members WHERE user_id = auth.uid()
));

Keep this schema active in your Claude session. You will feed generated interface files directly into Bolt.new.

Step 2: Full-Stack Scaffolding with Bolt.new

Navigate to Bolt.new. Bolt leverages WebContainers to run a complete Linux-like runtime directly within modern Chromium browsers. It can boot a development server, execute terminal commands, and hot-reload changes without cloud compute latency.

Formulate the Master Scaffold Prompt

Paste the initial project parameters into Bolt.new. Keep your prompt structured and imperative:

Create a modern multi-tenant SaaS frontend using Vite, React 18, TypeScript, and Tailwind CSS.

Requirements:
1. Integrate Shadcn/ui-inspired primitives (Dialog, Dropdown, Button, Card, Table).
2. Setup Zustand for state management with optimistic UI updates.
3. Implement 3 primary application views:
   - /dashboard: Metric cards (Total Feedback, Sentiment Distribution, MRR) and recent activity stream.
   - /feedback: Sortable, filterable data table with server-style pagination controls.
   - /settings: Billing management cards and team invitation forms.
4. Use Mock Service Worker (MSW) or in-memory mock stores mirroring this TypeScript schema:
   [PASTE TYPESCRIPT INTERFACES FROM CLAUDE]
5. Visual style: Dark mode default, crisp typography (Inter), neutral slate palettes.

Within 90 seconds, Bolt creates the directory tree, installs packages (lucide-react, clsx, tailwind-merge, zustand), and starts the Vite dev server inside the in-browser preview tab.

Step 3: Wire Supabase Authentication & State Management

Once the static shell renders cleanly, link your persistent backend. While Bolt supports direct Supabase project creation through its UI integration, controlling your credentials manually provides greater stability.

1. Create a project at Supabase and paste the schema generated by Claude 3.5 Sonnet into the Supabase SQL Editor.
2. In Bolt.new, provide the target integration prompt:

Install @supabase/supabase-js.
Create a singleton client in `src/lib/supabase.ts` reading from Vite environment variables: 
VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY.

Implement an AuthContext with Supabase Auth supporting:
1. Magic Link authentication.
2. Session persistence with onAuthStateChange listener.
3. Protected route wrapper component (<ProtectedRoute />) redirecting unauthenticated users to /login.
4. Replace the Zustand mock feedback store with real-time Supabase subscriptions querying the 'feedback_items' table.

Add your credentials to the .env tab in Bolt.new. The WebContainer will reload the application, transitioning your prototype from static mocks to a dynamic database-backed system.

Step 4: Implement Stripe Billing Logic

Handling Stripe subscriptions directly inside an in-browser WebContainer requires care because server-side secrets (STRIPE_SECRET_KEY) must never leak into client bundles.

Have Claude 3.5 Sonnet generate a serverless Edge Function (compatible with Supabase Edge Functions or Netlify Functions) that initiates checkout sessions:

// supabase/functions/create-checkout/index.ts
import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
import Stripe from "https://esm.sh/stripe@12.0.0?target=deno";

const stripe = new Stripe(Deno.env.get("STRIPE_SECRET_KEY") as string, {
  apiVersion: "2023-10-16",
  httpClient: Stripe.createFetchHttpClient(),
});

serve(async (req) => {
  const { priceId, customerId } = await req.json();

  const session = await stripe.checkout.sessions.create({
    payment_method_types: ["card"],
    customer: customerId,
    line_items: [{ price: priceId, quantity: 1 }],
    mode: "subscription",
    success_url: `${req.headers.get("origin")}/dashboard?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${req.headers.get("origin")}/settings`,
  });

  return new Response(JSON.stringify({ url: session.url }), {
    headers: { "Content-Type": "application/json" },
  });
});

Return to Bolt.new and prompt:

Create a Stripe checkout helper in `src/services/stripe.ts` that triggers our Supabase Edge function.
Attach the checkout trigger to the "Upgrade to Pro" button in `/settings`.
Display loading skeletons while waiting for the checkout URL response.

If you want to review alternative full-stack templates across other frameworks, run through the AI Decision Wizard.

Step 5: Exporting from Bolt.new to Cursor for Final Polish

While Bolt.new is exceptional for 0-to-1 scaffolding, browser environments encounter performance limitations once your project scales beyond dozens of dependencies.

When your MVP features auth, UI screens, and core data models, export the code:

1. Click the GitHub button in the top right corner of Bolt.new.
2. Commit and push the branch to a new repository.
3. Clone the repository locally and open it in [Cursor](/tools/cursor).

The Local Hardening Checklist

Run these steps in Cursor before going live:

• Environment Variable Audit: Ensure all secrets (STRIPE_SECRET_KEY, SUPABASE_SERVICE_ROLE_KEY) reside exclusively in server-side configurations or cloud vaults.
• Error Boundary Enforcement: Prompt Cursor with Claude 3.5 Sonnet to add React Error Boundaries around complex visual nodes:

  Review src/components/Dashboard.tsx. Wrap high-frequency rendering components in dynamic React Error Boundaries that present clean fallback UI on parse errors.

• Production Bundling: Run npm run build locally to confirm TypeScript compiles without errors. In-browser Vite servers often tolerate loose types that cause strict CI pipelines to fail.

Concrete Pricing & Resource Budget

Building an MVP using this modern workflow costs significantly less than traditional freelance development or boilerplate templates:

Summary Recommendation

Do not try to build an entire SaaS within a single unstructured chat prompt. Use Claude 3.5 Sonnet to architect data relationships, define strict TypeScript interfaces, and validate security boundaries. Pipe those instructions systematically into Bolt.new to generate a functional, styled, in-browser full-stack application within minutes.

Once the core loop works, export the project to Git, harden the code in Cursor, and launch your MVP before your competitors finish their design documents.