Live demo: chat as a customer on a (fictional) business website — and watch the owner's back office on the other half of the screen, where your conversation turns into a scored, qualified lead and lands in the inbox. Both sides, live, at once.
Most visitors leave a website without a word. This one doesn't let them.
| 🗣️ Answers like a great receptionist | Short, warm, human replies — grounded in the business's own info (services, prices, hours, insurance, policies) and only that. |
| 🤚 Honest when it doesn't know | Off-script questions get a polite "let me have the team confirm" — and it asks for contact info instead of inventing a price or confirming a slot it can't see. |
| 🎯 Qualifies, not just chats | One natural question at a time: what they need → how soon → name → phone/email. Emergencies jump the queue. |
| 📨 Delivers a scored lead | Name, contact, service, timing, urgency, notes — scored hot / warm / cold and delivered to email (demo) or Slack / SMS / CRM via n8n, Make, Zapier or a webhook (production). |
Three demo businesses are built in — a dental clinic, a family-law firm, and a 24/7 plumbing & heating company. Switching swaps the website, the knowledge base and the receptionist in one click: same engine, any business.
Most chatbot demos show you the chat. Clients don't buy the chat — they buy what lands in their inbox. So the page shows both at once:
┌────────────────────────────┐ ┌────────────────────────────┐
│ 01 · what your VISITOR sees│ → │ 02 · what YOU receive │
│ a normal business website │ live │ lead card filling itself in│
│ + one little chat bubble │ │ hot/warm/cold · activity │
│ │ │ feed · email notification │
└────────────────────────────┘ └────────────────────────────┘
Every captured field fires an event across the divider — name, contact, urgency lighting up on the owner's side the moment the visitor types it. When the lead is reachable, the front-desk bell rings (literally — synthesized WebAudio, mute button included).
One Groq call per turn (llama-3.3-70b-versatile, JSON mode) returns the reply and the re-extracted lead together — no second extraction pass, no agent framework:
visitor message ──► /api/concierge
├─ system prompt = receptionist persona + business KB + qualification playbook
├─ one JSON-mode completion → { reply, lead, score, done }
└─ server diffs lead vs previous state → capture events for the live feed
The lead state is round-tripped through the client — the server stores nothing. Adding a business is adding one object to lib/businesses.ts (branding + knowledge + seed leads); the website, widget and back office all render from it.
npm install
cp .env.example .env.local # add GROQ_API_KEY (free at console.groq.com)
npm run devDeploys on Vercel with that single env var.
This demo keeps leads in the browser; a paid build wires the same capture events to the real world — email + Slack ping for hot leads, rows in a CRM (HubSpot, Airtable, Sheets), SMS via Twilio — usually through n8n / Make / Zapier or a small webhook, so the business keeps owning its data. Calendar-aware booking (the bot only offers slots that exist) is the natural next step.
Stats on the landing page are industry estimates: ~62% of calls to small businesses go unanswered (Numa missed-call study), and customers overwhelmingly buy from the vendor that responds first (Lead Connect / HBR lead response research).
Built by Harry Zhou — full-stack & ML engineer, Vancouver. More live demos: Ask Your Docs (document Q&A with citations) · Inbox Autopilot (AI email triage) · URL → Spreadsheet (scraping + AI extraction).