Overview
Ai Studio includes two AI-powered assistants that handle customer orders and reservations automatically: Slice (web chat) and the WhatsApp Bot. Both use Google’s Gemini AI with custom prompts that include real-time menu data, availability, and business rules.Key Benefits
- 24/7 Automated Service: Accept orders and reservations even when closed
- Multi-Channel Support: Web interface and WhatsApp for customer convenience
- Context-Aware: AI knows menu, prices, availability, and business hours
- Intelligent Conversation: Natural language processing for Spanish interactions
- Order Validation: Enforces payment rules, availability checks, and time restrictions
- Metrics Tracking: Monitor conversations, token usage, and conversion rates
Architecture
Both assistants share core AI logic but differ in interface:- Slice (Web Chat)
- WhatsApp Bot
Interface: Modal overlay on web interface
Technology: React component + Gemini API
Features:
Technology: React component + Gemini API
Features:
- Voice input (transcription via Gemini)
- Audio file drag-and-drop
- Markdown rendering for bot responses
- Session persistence across page refreshes
components/ChatAssistantModal.tsxservices/geminiService.tsservices/sliceBotMetricsService.ts
Slice Web Assistant
Data Structures
Fromtypes.ts:246-254:
Session Tracking
Fromtypes.ts:282-289:
Metrics Tracking
Fromtypes.ts:267-274:
Core Functions
Fromservices/geminiService.ts:
geminiService.ts:352-377):
Build System Instruction
Generates comprehensive prompt including:
- Current menu with prices and descriptions
- Business hours and schedule
- Reservation settings and availability
- Real-time table occupancy
- Payment rules
- Conversation guidelines
Voice Input
Fromservices/geminiService.ts:380-402:
Action Lock Mechanism
Fromcomponents/ChatAssistantModal.tsx:28-29, 175-187:
Order/Reservation Processing
Fromcomponents/ChatAssistantModal.tsx:198-254:
When AI returns JSON:
Order JSON:
System Prompts
Fromservices/geminiService.ts:144-349:
The AI receives different instructions based on business status and conversation state:
Open for Business (Full Service)
Closed for Orders (Reservations Only)
Action-Locked (Order or Reservation in Progress)
Real-Time Data Integration
Fromservices/geminiService.ts:13-142:
AI has access to live data:
Current Menu
Business Hours
Table Availability
WhatsApp Bot
Connection Management
Fromservices/whatsappBotService.ts:
Bot Status Types
Core Functions
Connecting the Bot
Fromcomponents/admin/BotsPanel.tsx:
Initiate Deployment
Click “Conectar WhatsApp Bot”. System:
- Calls BuilderBot API to deploy
- Sets status to
initiating
Wait for QR Code
Status changes to
ready_to_scan. System:- Polls for QR code image
- Displays QR in admin panel
Sending Messages
Fromservices/whatsappBotService.ts:133-182:
Bulk Messaging
Fromservices/whatsappBotService.ts:184-232:
Metrics Tracking
Fromtypes.ts:275-280:
Conversation Flows
Order Flow Example
Customer: “Quiero pedir una pizza” Slice: “¡Perfecto! ¿Qué tipo de pizza te gustaría? Tenemos Muzzarella, Napolitana, 4 Quesos, y más.” Customer: “Una muzzarella grande” Slice: “¿Para recoger en el local o te la enviamos a domicilio?” Customer: “A domicilio” Slice: “Perfecto. ¿Cuál es tu nombre?” Customer: “Juan Pérez” Slice: “¿Y tu dirección?” Customer: “Calle Falsa 123” Slice: “¿Teléfono de contacto?” Customer: “1123456789” Slice: “Genial. Para pedidos a domicilio, el pago es por transferencia. Te paso el resumen:- 1x Pizza Muzzarella: $9200
- Total: $9200
- Entrega en: Calle Falsa 123
Reservation Flow Example
Customer: “Quiero hacer una reserva” Slice: “¡Claro! ¿Para cuántas personas?” Customer: “4 personas” Slice: “¿Qué día te gustaría reservar?” Customer: “El viernes” Slice: “¿A qué hora?” Customer: “20:00” Slice: [Checks availability] “Perfecto, tenemos disponibilidad el viernes a las 20:00. ¿Cómo es tu nombre?” Customer: “María González” Slice: “¿Teléfono?” Customer: “1198765432” Slice: “Excelente. Aquí está el resumen de tu reserva:- Nombre: María González
- Personas: 4
- Fecha: Viernes 15 de Marzo
- Hora: 20:00
Handling Unavailable Time
Customer: “Quiero reservar para 4 personas mañana a las 21:00” Slice: [Checks availability] “Un momento, déjame verificar… Parece que las 21:00 ya no está disponible. ¿Te parecería bien a las 20:30 o a las 21:30?” Customer: “20:30 está bien” Slice: “Perfecto, entonces confirmamos para mañana a las 20:30…”Metrics & Analytics
Fromservices/sliceBotMetricsService.ts:
Session Management
Metrics Calculation
Fromservices/sliceBotMetricsService.ts:
- Total conversations
- Messages sent/received
- Gemini API token usage (for cost tracking)
- Conversion rates (orders/reservations per conversation)
Configuration
Gemini API Key
Fromservices/geminiService.ts:11:
API_KEY to your Google AI Studio API key.
WhatsApp Bot Credentials
Fromservices/whatsappBotService.ts:3-5:
Best Practices
Monitor Token Usage
Gemini API charges per token. Check metrics regularly to estimate costs.
Keep Menu Updated
AI reads menu from cache. When you update products, AI immediately knows - no restart needed.
Test Conversation Flows
Regularly test both happy paths and edge cases (unavailable items, past dates, etc.).
WhatsApp Connection Monitoring
WhatsApp bot can disconnect unexpectedly. Set up monitoring and re-connect promptly.
Review Failed Orders/Reservations
Check logs when AI fails to create order/reservation. Usually due to validation or availability.
Customize Prompts for Your Brand
Edit system instructions in
geminiService.ts to match your restaurant’s tone and policies.Troubleshooting
AI Creates Order But It Doesn't Appear in Admin
AI Creates Order But It Doesn't Appear in Admin
Possible Causes:
- Firebase write failed (check network/permissions)
- Order validation failed (check console for errors)
- Check browser console for error messages
- Verify Firebase security rules allow writes
- Test with manual order creation in admin panel
WhatsApp Bot Shows 'Error' Status
WhatsApp Bot Shows 'Error' Status
Possible Causes:
- BuilderBot API credentials invalid
- Network connectivity issue
- WhatsApp phone disconnected
- Disconnect and reconnect bot
- Verify API keys in
whatsappBotService.ts - Check BuilderBot dashboard for status
AI Suggests Unavailable Reservation Time
AI Suggests Unavailable Reservation Time
Voice Input Not Working
Voice Input Not Working
Possible Causes:
- Microphone permissions denied
- Browser doesn’t support MediaRecorder API
- Network issue during transcription
- Check browser permissions for microphone
- Use Chrome/Edge (best support)
- Verify Gemini API key is valid
Related Features
- Orders - AI creates orders with
createdBy: WEB_ASSISTANT/WHATSAPP_ASSISTANT - Reservations - AI books tables using availability checking
- Menu Management - AI reads menu in real-time
- Customers - Bulk WhatsApp messaging to customer segments
API Reference
Gemini Integration
Model:gemini-2.5-flashProvider: Google AI Studio
Use Cases:
- Conversational AI for orders/reservations
- Audio transcription
- JSON structured output
- Charged per input/output token
- System instructions count toward token usage
- Monitor via
SliceBotMetrics.totalTokensUsed
BuilderBot Integration
API: BuilderBot Cloud REST APIVersion: v1 (deploy), v2 (messages)
Endpoints:
POST /api/v1/manager/deploys- Start botGET /api/v1/manager/deploys/{id}/qr- Get QR codeGET /api/v1/manager/deploys/{id}- Check statusDELETE /api/v1/manager/deploys/{id}- Stop botPOST /api/v2/{projectId}/messages- Send message
x-api-builderbot header with API key