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.
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.
2. Architecture
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)3. Data Model
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
);4. Landing Page
- Hero: "Never miss a call again. $99/mo."
- 60-second demo call widget.
- 3-tier pricing, testimonials, FAQ, big CTA.
5. Authentication
Supabase Auth (email + Google). RLS on every table keyed by tenant. Roles in a separate user_roles table.
6. Dashboard
- KPI row: calls today, bookings today, avg duration, resolution rate.
- Live call feed with expandable transcripts.
7. Voice Settings
Persona picker, sliders for stability/similarity/style, preview button that hits ElevenLabs live.
8. Call Logs
Paginated table + transcript viewer + audio playback.
9. Lightweight CRM
Callers dedup'd by phone number. Timeline of every call + booking + note per contact.
10. Appointment Booking
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"] },
}]11. Google Calendar Integration
OAuth per tenant. Store refresh token. Insert events on booking; delete on cancel.
12. Twilio Calling
- Sub-account per tenant.
- Buy a number in the tenant's area code.
- Point voice webhook at /api/public/twilio/incoming.
13. ElevenLabs Integration
Stream with eleven_turbo_v2_5. Store voice_id per tenant.
14. Claude Brain
System prompt composed from tenant name + business hours + FAQ chunks + persona tone. Max 200 tokens per reply.
15. Knowledge Base & FAQs
- Upload PDFs/URLs → chunk → embed → store in pgvector.
- Every turn: select top 5 chunks by cosine, splice into system prompt.
16. Voice Cloning (IVC)
In-app recorder → 90-second script → upload to ElevenLabs IVC.
17. Analytics
- Calls/day, resolution %, booking rate, avg cost/call.
- Intent breakdown pie chart.
- Latency histogram (goal p95 < 1.8s).
18. Billing — Stripe
const session = await stripe.checkout.sessions.create({
mode: "subscription",
line_items: [{ price: PRICE_IDS[plan], quantity: 1 }],
});19. Deployment & Monitoring
- Dashboard → Cloudflare/Vercel.
- Voice agent → Railway with 2 always-warm instances.
- Sentry + BetterStack + Grafana.
20. Launch Checklist
- Terms + privacy + call-recording disclosure.
- 10 successful synthetic calls.
- Stripe live-mode swap.
- Status page + onboarding email + Loom.
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.