Next.js
React
TypeScript
MySQL
Tailwind CSS
AI / Web Application
Four AI
A full-stack platform for AI voice generation, text-to-speech, voice changing and image generation — React and Vite frontend, serverless API and PostgreSQL.
- React
- Vite
- Hugging Face
- Neon PostgreSQL
- +1
Vite
Hugging Face
Neon PostgreSQLView Case Study
Case Study / AI / SaaS / Multi-Tenant
FrontDesk AI / 10 weeks
Embeddable AI Chat & Voice-Call Widget for Business Websites
A multi-tenant SaaS that lets any business configure an AI agent, feed it knowledge, and embed a chat + voice-call widget on their website — capturing leads, transcripts and bookings in one dashboard.
- 1 line To install the widget. A single script tag puts chat and voice on any customer website.
- 2 Channels per agent. Text chat and browser voice calls served by the same configured agent.
- 5 Application tables. User, Business, Contact, Conversation and Call carry the whole product.
- Next.js
- React
- TypeScript
- Prisma
- MySQL
- Retell AI
- Tailwind CSS
Overview
Client Overview
An internal SaaS product idea: give agencies and small businesses an AI front desk they can install in minutes. The team wanted one deployable backend serving many business tenants, a zero-dependency widget any site could host, and an admin panel that made agent configuration, knowledge management and lead review approachable for non-technical operators.
Services provided
- Full-Stack Development
- AI Integration
- Security Hardening
Challenge
Business Challenge
The situation before the engagement, in the client's terms.
Businesses want an AI front desk on their website, but wiring up an LLM provider, voice agent, transcript storage and lead flow is weeks of work nobody wants to repeat per customer.
- 01
Integration overhead
Every business would need its own chat UI, voice plumbing and storage built from scratch.
- 02
Public endpoint risk
A browser-facing widget exposes APIs to the open internet — spoofed origins and abuse had to be designed against.
- 03
Multi-tenant isolation
Many businesses on one backend, each with private agents, knowledge, leads and transcripts.
- 04
Voice is hard
Call lifecycle, recordings, transcripts and summaries arrive asynchronously from the provider via webhooks.
Objectives
Engagement Objectives
What the build needed to achieve before implementation began.
Let a non-technical business install an AI agent on its website in minutes
Keep every tenant's agents, knowledge, leads and transcripts isolated
Treat the public widget API as hostile territory: keys, origins and rate limits
Capture every interaction as a lead with a complete, reviewable transcript
Convert conversations into meetings by syncing Calendly into the same pipeline
Solution Design
How We Solved It
The approach that addressed each challenge above.
One deployable Next.js API serving a zero-dependency embed script, a separate React admin panel, and a five-table data model — with security controls baked into every public route.
- 01
Single-origin architecture
API and static widget.js share one origin; the admin panel proxies /api in dev and behind a reverse proxy in prod.
- 02
Defence-in-depth public API
Widget key plus Origin allowlist checks, dynamic CORS limited to allowed origins, and rate limits of 60/min config, 20/min chat and 3/hour calls.
- 03
Deliberately small data model
Business as the tenant root; chat history serialised atomically per conversation; calls enriched by webhook keyed on provider call ID.
- 04
Hardened sessions & webhooks
httpOnly cookies holding SHA-256 token hashes, instant revocation, and timing-safe HMAC verification with a replay window.
Capabilities
Key Features
What FrontDesk AI does in day-to-day use.
One-line embed
A single script tag renders the chat/call bubble on any website, gated by widget key and origin allowlist.
Configurable AI agent
Each business tunes its agent's name, tone, language and instructions — no code, from the dashboard.
Knowledge base
Inline text and uploaded PDFs become retrievable knowledge, budgeted per response so answers stay grounded.
Browser voice calls
Visitors talk to a voice agent via Retell web calls; results stream back through a signed webhook.
Lead capture
Emails and phones are extracted from conversations, deduplicated per visitor, and stored as contacts.
Booking pipeline
Calendly events sync into the same pipeline, stitched to the contacts that scheduled them.
Technology Stack
Technology Stack
- Next.js 15 App Router route handlers
- Prisma ORM
- MySQL
- TypeScript
- React 19 + Vite SPA
- Redux Toolkit
- React Router
- Formik + Yup
- Retell AI chat agents
- Retell web calls (create-web-call)
- HMAC-SHA256 signed webhooks
- Dynamic conversation variables
- Zero-dependency vanilla JS embed script
- Calendly REST API sync
- PDF knowledge ingestion (pdf-parse)
- Per-origin CORS reflection
Outcome
Results & Outcome
What changed for the business after launch.
1 line
To install the widget
A single script tag puts chat and voice on any customer website.
2
Channels per agent
Text chat and browser voice calls served by the same configured agent.
5
Application tables
User, Business, Contact, Conversation and Call carry the whole product.
3 layers
Of widget security
Widget key, origin allowlist and per-endpoint rate limiting on every public route.
Interface
A Closer Look
Screens from the delivered system.
Dashboard — key metrics at a glance: 6 leads, 4 conversations, 2 calls this period. Agent configuration — name, tone, language and instructions per tenant. Conversations — every chat thread with visitor details and transcript access. Calls — voice call records with duration, transcript and recording URL once populated. Knowledge base — feed the agent inline text or upload PDFs for retrieval. Contacts — captured leads deduplicated by visitor token with email and phone. Bookings — Calendly events stitched to the contacts that scheduled them. Widget — copy the one-line script tag and configure allowed origins and theme.
Conclusion
The Result
The MVP delivers the full loop — embed, converse, capture, review, book — with production-minded controls: signature-verified webhooks, origin pinning, per-endpoint rate limits and hashed session tokens. The surface stays small enough for a two-person team to operate while every tenant's data remains isolated behind role-guarded, business-scoped queries.
- 1 line To install the widget: A single script tag puts chat and voice on any customer website.
- 2 Channels per agent: Text chat and browser voice calls served by the same configured agent.
- 5 Application tables: User, Business, Contact, Conversation and Call carry the whole product.
More work
Related Projects
Other systems built on similar foundations.
AI / Automation
Vigilon
Vigilon workforce operations command center for physical security agencies showing field telemetry, workforce dispatch, attendance verification, patrol compliance, and financial governance
- React
- TypeScript
- Vite
- Tailwind CSS
- +3
View Case Study
Next step
Want a System Like This?
Tell us what your business needs to automate and we'll map out a practical build.
hello@thedevrox.comWe reply to every enquiry within one business day.