Bundle AI SaaS: Claude + Supabase + Vercel

TL;DR

• Stack: Claude API + Supabase + Vercel + Next.js 15. Bundle hemat untuk launch AI SaaS dalam 2-4 minggu.
• Cost: Rp 800rb - 2 juta/bulan untuk MVP, Rp 3-8 juta/bulan untuk scale 5K user.
• Verdict: Recommended untuk SaaS dengan AI feature (chatbot, summarization, embeddings, RAG).

Konteks

Saya pakai bundle ini di 3 project klien Jakarta sejak Oktober 2025:

1. SaaS legal assistant (Q4 2025): RAG untuk dokumen kontrak. Claude Sonnet + pgvector Supabase. 400 user, Rp 5.2 juta/bulan revenue, Rp 1.8 juta/bulan infra cost.
2. Chatbot customer support klinik dental (Q1 2026): Claude Haiku + knowledge base Supabase. 80 chat session/hari, Rp 600rb/bulan infra cost.
3. AI summarizer untuk content creator Tangerang (Q2 2026): Claude Sonnet + Vercel Edge Function. 1200 user, Rp 1.4 juta/bulan infra cost.

Total experience: 8 bulan production, 0 downtime > 1 jam, scaling smooth dari 0 ke 1200 user.

Pricing (Juni 2026)

Claude API

• Sonnet 4 (default): $3/M input, $15/M output. Dengan prompt caching: $0.30/M cached input (90% discount).
• Haiku 4: $0.80/M input, $4/M output. Cocok untuk chatbot ringan.
• Opus 4: $15/M input, $75/M output. Untuk task complex reasoning.

Estimated untuk SaaS 500 user (5 query/user/hari, 2K input + 500 output per query):

• Tanpa caching: $50-80/bulan = Rp 800rb - 1.3 juta
• Dengan caching: $15-25/bulan = Rp 240rb - 400rb

Supabase

• Free: 500MB DB, 1GB storage, 2GB egress, 50K MAU.
• Pro: $25/bulan = Rp 400rb. 8GB DB, 100GB storage, 250GB egress, 100K MAU.
• Team: $599/bulan = Rp 9.6 juta. Untuk scale enterprise.

Vercel

• Hobby: free. 100GB bandwidth, 100GB-hours function.
• Pro: $20/user/bulan = Rp 320rb.
• Enterprise: custom pricing.

Next.js 15

Gratis (open-source).

Total untuk MVP (100-500 user): Rp 800rb - 2 juta/bulan.

Total untuk scale (5K user): Rp 3-8 juta/bulan tergantung query volume.

Architecture

User browser
    ↓
Vercel CDN (Next.js 15)
    ↓
Vercel Serverless Function (API route)
    ↓ (call)
Claude API (Anthropic)
    ↓ (data lookup)
Supabase Postgres + pgvector
    ↓ (file storage)
Supabase Storage

Hari-1 setup: 2-4 jam untuk full stack working (auth, DB, deploy).

Setup recipe (8 jam total untuk MVP)

Hour 1-2: Init project

bunx create-next-app@latest ai-saas --typescript --tailwind --app
cd ai-saas
bun add @anthropic-ai/sdk @supabase/supabase-js @supabase/ssr
bun add -D @tailwindcss/postcss

Setup Supabase project (dashboard.supabase.com → New project → pilih Singapore region untuk latency Indonesia).

Hour 3-4: Auth + DB schema

Supabase auth dengan email/password atau OAuth (Google, GitHub).

Schema DB minimal:

-- profiles
create table profiles (
  id uuid primary key references auth.users on delete cascade,
  email text not null,
  full_name text,
  created_at timestamp default now()
);

-- conversations (AI chat history)
create table conversations (
  id uuid primary key default gen_random_uuid(),
  user_id uuid references profiles(id),
  title text,
  created_at timestamp default now()
);

-- messages
create table messages (
  id uuid primary key default gen_random_uuid(),
  conversation_id uuid references conversations(id),
  role text not null,
  content text not null,
  tokens_used int,
  created_at timestamp default now()
);

-- vector embeddings (untuk RAG)
create extension if not exists vector;

create table documents (
  id uuid primary key default gen_random_uuid(),
  user_id uuid references profiles(id),
  content text,
  embedding vector(1536),
  created_at timestamp default now()
);

Hour 5-6: Claude API integration

app/api/chat/route.ts:

import Anthropic from '@anthropic-ai/sdk';
import { createClient } from '@/lib/supabase/server';

const anthropic = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY });

export async function POST(req: Request) {
  const supabase = createClient();
  const { data: { user } } = await supabase.auth.getUser();
  if (!user) return new Response('Unauthorized', { status: 401 });

  const { messages } = await req.json();

  const response = await anthropic.messages.create({
    model: 'claude-sonnet-4-5',
    max_tokens: 1024,
    messages,
    system: [{
      type: 'text',
      text: 'You are a helpful AI assistant for Indonesian SMB.',
      cache_control: { type: 'ephemeral' }
    }],
  });

  // Log to DB
  await supabase.from('messages').insert({
    conversation_id: req.headers.get('x-convo-id'),
    role: 'assistant',
    content: response.content[0].text,
    tokens_used: response.usage.output_tokens,
  });

  return Response.json(response);
}

Penting: pakai cache_control untuk prompt caching. Saving 50-80% cost.

Hour 7: Embedding + RAG (jika butuh)

// Generate embedding via Claude/OpenAI/Voyage
import { OpenAI } from 'openai';
const openai = new OpenAI();

async function embed(text: string) {
  const res = await openai.embeddings.create({
    model: 'text-embedding-3-small',
    input: text,
  });
  return res.data[0].embedding;
}

// Store
await supabase.from('documents').insert({
  user_id: userId,
  content: text,
  embedding: await embed(text),
});

// Query (vector search)
const { data: relevant } = await supabase.rpc('match_documents', {
  query_embedding: await embed(question),
  match_threshold: 0.7,
  match_count: 5,
});

Hour 8: Deploy Vercel

bun add -g vercel
vercel

Set env vars di Vercel dashboard:

• ANTHROPIC_API_KEY
• NEXT_PUBLIC_SUPABASE_URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY
• SUPABASE_SERVICE_ROLE_KEY

Production live dalam 8 jam total.

Performance untuk Indonesia

Latency measure dari Jakarta:

Endpoint	Median latency
Vercel CDN (static)	85ms
Vercel Serverless (cold)	600-1200ms
Vercel Serverless (warm)	120-180ms
Supabase query (Singapore)	25-45ms
Claude API (US region)	800-1500ms (streaming)

Total round-trip untuk chat: 1.5-3s response start (streaming), 3-8s untuk full response.

Untuk Indonesia: pakai Vercel region sin1 (Singapore) untuk Function. Atau pakai Vercel Edge runtime untuk latency lebih rendah.

Cost optimization tactic

1. Prompt caching (Claude)

Cache system prompt + context dengan cache_control: { type: 'ephemeral' }. 90% discount untuk cached input. Saving 50-80% total cost.

2. Model tiering

• Haiku untuk classification + simple Q&A
• Sonnet untuk reasoning + structured output
• Opus hanya untuk task critical

Saving 80%+ vs always Opus.

3. Streaming + early termination

User cancel → stop stream → save token. Saving 10-20% per session.

4. Supabase RLS instead of API gateway

Pakai Row Level Security Postgres native — no extra service. Saving Rp 200-500rb/bulan vs Kong/API gateway.

5. Vercel Edge for static-heavy route

Edge runtime cheaper dari Node serverless untuk request ringan.

Trade-off

Pro bundle ini

• Time-to-MVP cepat (1-2 minggu untuk solo dev)
• Ekosistem matang — banyak example, AI tool integration (Cursor/Claude Code) excellent
• Vendor diversification — Anthropic + Supabase + Vercel, no single point of failure
• Scaling smooth — same stack handle 100 user hingga 50K user

Con bundle ini

• Vendor lock-in moderate (3 vendor + Next.js framework)
• Claude API: pay-per-token bisa scale unpredictable jika tidak monitor
• Vercel bill bisa mahal di scale (alternative: migrate ke Cloudflare)
• Supabase free tier limit cepat hit untuk app aktif

Konteks Indonesia

Klien legal assistant Jakarta: launch Oktober 2025, MAU 400, ARR Rp 60 juta. Infra cost Rp 1.8 juta/bulan = 3.6% revenue. Healthy margin.

Klien klinik dental chatbot: launch Januari 2026, 80 chat/hari, infra cost Rp 600rb/bulan. ROI dari saving 1 staff customer service Rp 4 juta/bulan = 6x return.

Klien content summarizer Tangerang: launch Maret 2026, 1200 user, freemium ($5/mo Pro), infra cost Rp 1.4 juta/bulan, revenue Rp 8 juta/bulan.

Verdict

Recommended untuk SaaS Indonesia 2026 dengan AI feature.

Pakai bundle ini jika:

• Launch AI SaaS atau add AI feature ke product existing
• Tim 1-3 dev, perlu time-to-MVP cepat
• Budget infra Rp 1-3 juta/bulan untuk MVP
• Pakai React/Next.js stack (familiar)

Skip jika:

• AI feature opsional (gunakan stack non-AI lebih murah)
• Butuh on-premise atau strict data residency (Supabase cloud-only, Claude US-region)
• Vendor lock-in concern strong — pertimbangkan self-host alternative (Ollama + Postgres self-host)

Variasi murah: ganti Vercel dengan Cloudflare Pages untuk saving 60-80%. Trade-off: ISR + advanced Next.js feature tidak native.

Untuk workflow AI development: AI Workflow Claude Code Pair Programming.