Library
Voice AI · Chapter 10 of 10
Chapter 10

Final Capstone —
ReceptionistAI SaaS

Build a production-ready AI voice receptionist SaaS end-to-end: landing, auth, dashboard, Twilio, ElevenLabs, Claude, Google Calendar, Stripe, deployment, launch and marketing.

CapstoneSaaSStripeTwilioProduction
A Handbook For Builders
Final Capstone —
ReceptionistAI SaaS
Chapter 10
The Claude Code Handbook

One capstone to bind everything. ReceptionistAI is a real SaaS: a small business signs up, buys a plan, uploads their FAQ, clones a voice, and gets a live phone number that books appointments 24/7. Everything you've learned across nine chapters comes together here — and by the end you can charge for it.

Section 1

1. Project Brief

  • Landing → sign up → connect Twilio number → upload FAQ → clone voice → go live.
  • Owner sees call logs, transcripts, bookings, and analytics.
  • Stripe subscriptions ($99 / $299 / $999 tiers).
  • Google Calendar 2-way sync.
Section 2

2. Architecture

textclaude-code
Browser (TanStack Start dashboard)
       │
       ▼
 App backend (server functions)  ──▶  Supabase (Postgres + Auth + Storage)
       ├──▶ Twilio (voice + numbers)
       ├──▶ ElevenLabs (TTS + cloning)
       ├──▶ Claude (reasoning)
       ├──▶ Deepgram (streaming STT)
       ├──▶ Google Calendar
       └──▶ Stripe (billing)
Section 3

3. Data Model

sqlclaude-code
create table tenants (
  id uuid primary key default gen_random_uuid(),
  name text, plan text check (plan in ('starter','growth','scale')),
  stripe_customer_id text, created_at timestamptz default now()
);
create table calls (
  id uuid primary key default gen_random_uuid(),
  tenant uuid references tenants, from_e164 text, duration_s int,
  transcript jsonb, intent text, outcome text, cost_usd numeric
);
create table bookings (
  id uuid primary key default gen_random_uuid(),
  tenant uuid references tenants, customer_name text, phone text,
  slot timestamptz, gcal_event_id text, status text
);
Section 4

4. Landing Page

  • Hero: "Never miss a call again. $99/mo."
  • 60-second demo call widget.
  • 3-tier pricing, testimonials, FAQ, big CTA.
Claude Code — Terminal
Screenshot placeholder
Landing page hero with the demo-call widget accepting a phone number.
Figure — Landing page hero with the demo-call widget accepting a phone number.
Section 5

5. Authentication

Supabase Auth (email + Google). RLS on every table keyed by tenant. Roles in a separate user_roles table.

Section 6

6. Dashboard

  • KPI row: calls today, bookings today, avg duration, resolution rate.
  • Live call feed with expandable transcripts.
Section 7

7. Voice Settings

Persona picker, sliders for stability/similarity/style, preview button that hits ElevenLabs live.

Section 8

8. Call Logs

Paginated table + transcript viewer + audio playback.

Section 9

9. Lightweight CRM

Callers dedup'd by phone number. Timeline of every call + booking + note per contact.

Section 10

10. Appointment Booking

tsclaude-code
tools: [{
  name: "bookAppointment",
  input_schema: { type: "object",
    properties: { customer_name:{type:"string"}, phone:{type:"string"},
      slot_iso:{type:"string",format:"date-time"} },
    required:["customer_name","phone","slot_iso"] },
}]
Section 11

11. Google Calendar Integration

OAuth per tenant. Store refresh token. Insert events on booking; delete on cancel.

Section 12

12. Twilio Calling

  1. Sub-account per tenant.
  2. Buy a number in the tenant's area code.
  3. Point voice webhook at /api/public/twilio/incoming.
Section 13

13. ElevenLabs Integration

Stream with eleven_turbo_v2_5. Store voice_id per tenant.

Section 14

14. Claude Brain

System prompt composed from tenant name + business hours + FAQ chunks + persona tone. Max 200 tokens per reply.

Section 15

15. Knowledge Base & FAQs

  • Upload PDFs/URLs → chunk → embed → store in pgvector.
  • Every turn: select top 5 chunks by cosine, splice into system prompt.
Section 16

16. Voice Cloning (IVC)

In-app recorder → 90-second script → upload to ElevenLabs IVC.

Section 17

17. Analytics

  • Calls/day, resolution %, booking rate, avg cost/call.
  • Intent breakdown pie chart.
  • Latency histogram (goal p95 < 1.8s).
Section 18

18. Billing — Stripe

tsclaude-code
const session = await stripe.checkout.sessions.create({
  mode: "subscription",
  line_items: [{ price: PRICE_IDS[plan], quantity: 1 }],
});
Section 19

19. Deployment & Monitoring

  • Dashboard → Cloudflare/Vercel.
  • Voice agent → Railway with 2 always-warm instances.
  • Sentry + BetterStack + Grafana.
Section 20

20. Launch Checklist

  1. Terms + privacy + call-recording disclosure.
  2. 10 successful synthetic calls.
  3. Stripe live-mode swap.
  4. Status page + onboarding email + Loom.
Section 21

21. Marketing Checklist

  • Landing SEO — 5 pages per vertical.
  • Cold outbound to 100 salons + 100 clinics.
  • Product Hunt launch on a Tuesday.
  • YouTube demo + weekly changelog.