The real-time voice agent for every drive-thru.

An AI-powered drive-thru ordering system that lets customers place orders by speaking naturally. Built for Hack Canada 2026 using ElevenLabs' realtime voice agents SDK. The demo is configured as a McDonald's store, but the platform works for any restaurant.

• Real-time voice ordering — ElevenLabs WebRTC voice agent handles the full conversation
• 6 AI client tools — display products, manage cart, place orders, show customizations, switch language
• Bilingual — auto-detects French and switches the entire UI to French in real time
• Live kitchen dashboard — orders appear instantly via Firebase Firestore onSnapshot
• Order customization — toppings, sauces, and sizes handled by voice
• Auth0 protected dashboard — sign in required to access admin views
• Flying food animation — item animates from product card to cart on add
• Confetti on order placed — celebration effect with 4-digit order number

git clone https://github.com/vivekvt/VoiceThruAI.git
cd VoiceThruAI
npm install

Create a .env file in the root:

# ElevenLabs
ELEVENLABS_API_KEY=       # Your ElevenLabs API key
ELEVENLABS_AGENT_ID=      # Your ElevenLabs agent ID

# Auth0
APP_BASE_URL=http://localhost:3000
AUTH0_DOMAIN=             # e.g. your-tenant.us.auth0.com
AUTH0_CLIENT_ID=
AUTH0_CLIENT_SECRET=
AUTH0_SECRET=             # Run: openssl rand -hex 32

Firebase credentials are hardcoded in lib/firebase.ts for hackathon convenience.

In your Auth0 application settings:

• Allowed Callback URLs: http://localhost:3000/auth/callback
• Allowed Logout URLs: http://localhost:3000
• Application Type: Regular Web Application

1. Create a new agent in ElevenLabs
2. Copy the contents of agents/instruction.md into the agent's system prompt
3. Copy the contents of agents/tools.json into the agent's client tools
4. Set dynamic variables: menu and restaurant_name

npm run dev

Open http://localhost:3000

app/
  page.tsx                  — Landing page
  order/page.tsx            — Customer voice ordering page
  dashboard/                — Admin dashboard (Auth0 protected)
    orders/page.tsx         — Live order management
    products/page.tsx       — Product catalog viewer
    settings/page.tsx       — Settings
  api/elevenlabs/signed-url — ElevenLabs WebRTC token endpoint

components/order/
  voice-agent.tsx           — ElevenLabs SDK + 6 client tools
  product-card.tsx          — Product card with highlight effect
  cart-panel.tsx            — Cart sidebar
  mobile-cart-sheet.tsx     — Mobile cart bottom sheet
  flying-food.tsx           — Cart add animation

lib/
  menu.js                   — Static menu data (21 products)
  cart-context.tsx          — Cart state (React Context + useReducer)
  i18n.ts                   — EN/FR translations
  language-context.tsx      — Language provider + useLanguage hook
  firebase.ts               — Firebase init
  orders-db.ts              — Firestore order CRUD
  auth0.ts                  — Auth0 client instance

agents/
  instruction.md            — Agent system prompt
  tools.json                — Client tool definitions

21 products across 4 categories:

• 7 Burgers — Big Mac, Cheeseburger, McCrispy, Spicy McCrispy, Quarter Pounder, McDouble, Filet-O-Fish
• 3 Fries & Sides — Fries, Poutine, Apple Pie
• 6 Drinks — Coca-Cola, Coke Zero, Fuze Iced Tea, Blueberry Sprite, 2 Smoothies
• 6 Sweets — 2 McFlurries, 3 Milkshakes, Ice Cream Cone

npm run dev          # Start dev server (turbopack)
npm run build        # Production build
npm run lint         # ESLint
npm run typecheck    # TypeScript check

Built at Hack Canada 2026 — Waterloo, ON.

Targeting:

• MLH × ElevenLabs — Best Use of ElevenLabs
• Most Technically Complex Agentic AI Hack
• SPUR Founder Track

Built with ElevenLabs · Firebase · Next.js · Auth0