Project Summary
Built a production-ready AI chatbot template. The chatbot's role is to be a digital assistant for Area 51, a family entertainment venue chain in Queensland, Australia. The chatbot serves as "Gizmo," who helps customers with venue information, booking inquiries, party planning, and general questions across four locations. The system combines modern AI capabilities with robust security measures and a polished user interface.
Project Goals and Challenges
Primary Goals
- Create an intelligent assistant that can handle simple customer inquiries without human intervention
- Provide accurate, location-specific information for four different venues
- Integrate seamlessly with existing booking systems
- Maintain brand voice and family-friendly tone
Key Challenges
- Managing location-specific data while avoiding confusion between venues
- Implementing effective rate limiting to prevent abuse
- Creating custom button interactions that integrate with AI
- Balancing AI capabilities with clear escalation paths to human support
- Handling AI loading and error states proficiently to enhance user experience
Tech Stack Overview
Frontend
- Next.js 14 with TypeScript
- Next.js custom hooks for state management
- Framer Motion for slight animations
- Tailwind CSS for responsive styling
AI Integration
- Vercel AI SDK
@ai-sdk/react - Google's Gemini 2.5 Flash Lite model
- Custom system prompt engineering for brand-specific responses
Backend & Infrastructure
- Next.js API routes
- Arcjet for rate limiting and bot prevention
Security
- Custom rate limiting with sliding window algorithm
- CSRF protection via referer checking
Core Features
AI Trained Assistant
The chatbot is trained with comprehensive knowledge about Area 51's four locations, including:
- Venue-specific operating hours, sizes, and menu
- Detailed age group mappings (Astrotots, Mini Rovers, Universe, Cosmos)
- Party packages, pricing guidelines, and booking procedures
- Contact information and escalation protocols
- Safety policies and terms of service
Custom prompt engineering ensures responses are concise, family-friendly, and maintain the space-themed brand voice while providing accurate information.
Interactive Chatbot
- Custom markdown parser extracts
{{choice:Option}}and{{link:URL|Label}}syntax - Conversation buttons for guided interactions (venue selection, service options)
- Link buttons for external actions (booking pages, contact forms)
- Buttons respect rate limiting and provide visual feedback
Security and Rate Limiting
- Rate Limiting: 8 requests per 30 seconds using Arcjet with sliding window
- Bot Detection: Bot prevention using Arcjet
- Content Validation: Message length limits, spam pattern detection, URL blocking
- CSRF Protection: Referer validation to prevent cross-origin abuse
User Experience
- Visual feedback during rate limiting with disabled states
- Clear error messages without exposing system details
- Automatic cooldown periods when rate limited
- Responsive design for mobile and desktop
Key Takeaways
In summary, the showcase project was a fun build that allowed me to explore Vercel's AI SDK and its wide range of functionality. Implementing custom extensions on the chatbot (conversation buttons, rate limiting, security) allowed me to created a smooth and safe user experience. The AI can be further trained on more specific details and scenarios to provide better information and links. Further enhancements include AI analytics that can help the business to understand FAQs, common enquiries, and customer behavior. While Vercel's AI SDK has an experimental telemetry feature, a custom system can also be added to logs anonymized chat inputs and outputs.