A sophisticated AI-powered concierge application designed to help users discover and explore Dubai's finest experiences. This project demonstrates advanced AI integration, real-time voice capabilities, and intelligent data retrieval systems.
Concierge is a comprehensive AI assistant that serves as your personal guide to Dubai's activities, dining, entertainment, and lifestyle experiences. Built with cutting-edge AI technologies, it provides both text and voice-based interactions to help users find the perfect experiences in Dubai.
This project was an excellent learning experience that taught me:
- Real-time AI Voice Integration: Implementing OpenAI's Realtime API for natural voice conversations
- Vector Search & Embeddings: Building intelligent search systems using vector similarity
- Advanced Database Design: Working with PostgreSQL, Drizzle ORM, and vector extensions
- Streaming Responses: Creating real-time, chunked responses for better UX
- Category Detection: Building intelligent mapping systems for user intent recognition
- Modern React Patterns: Using React 19, TypeScript, and advanced component patterns
- Edge Runtime Optimization: Leveraging Next.js Edge Runtime for performance
- AI Function Calling: Implementing custom functions for enhanced AI capabilities
- GPT-4o Integration: Advanced language model for natural conversations
- Vector Search: Semantic search using OpenAI embeddings for relevant results
- Category Detection: Intelligent mapping of user queries to specific categories
- Entity Recognition: Extracting and matching specific venue names and locations
- OpenAI Realtime API: Natural voice conversations with minimal latency
- Voice-to-Text: Real-time transcription using Whisper
- Text-to-Speech: Natural AI voice responses
- Interactive Voice UI: Beautiful audio visualization and state management
- Function Calling: Voice assistant can trigger database searches and time queries
- Text Chat: Traditional chat interface with streaming responses
- Voice Chat: Full voice conversation capabilities
- Seamless Switching: Users can switch between text and voice modes
- Comprehensive Database: 1000+ activities, restaurants, and venues
- Structured Categories: Organized by activities, dining, hotels, places, and trending spots
- Rich Metadata: Detailed information including pricing, timing, and booking details
- Vector Embeddings: Fast semantic search across all content
- Responsive Design: Works perfectly on desktop and mobile
- Dark/Light Mode: Theme switching with system preference detection
- Real-time Updates: Live streaming responses and typing indicators
- Beautiful Animations: Smooth transitions and audio visualizations
- Next.js 15: App Router with Edge Runtime
- React 19: Latest React features and patterns
- TypeScript: Full type safety throughout
- Tailwind CSS: Utility-first styling
- Radix UI: Accessible component primitives
- Lucide React: Beautiful icons
- OpenAI API: GPT-4o for text generation and embeddings
- OpenAI Realtime API: Voice conversation capabilities
- PostgreSQL: Primary database with vector extensions
- Drizzle ORM: Type-safe database operations
- Neon Database: Serverless PostgreSQL hosting
- @tanstack/react-query: Data fetching and caching
- node-cache: Server-side caching for embeddings
- zod: Runtime type validation
- ws: WebSocket connections for real-time features
- Node.js 18+
- PostgreSQL database with vector extension
- OpenAI API key with Realtime API access
DATABASE_URL=your_postgresql_connection_string
OPENAI_API_KEY=your_openai_api_keynpm install
npm run dev- messages: Chat history with user_id, content, role, timestamp
- activities: Venue data with embeddings, categories, and metadata
- Uses PostgreSQL's vector extension for similarity search
- Embeddings generated using OpenAI's text-embedding-ada-002
- Cached embeddings for performance optimization
The app organizes Dubai experiences into comprehensive categories:
- Adventure, City tours, Desert experiences, Sea activities
- Events & shows, Family activities, VIP experiences
- Gift categories for different occasions
- All-you-can-eat options, Beachfront dining, Brunch deals
- International cuisines (Arabic, Chinese, Indian, Italian, etc.)
- Casual to upscale dining experiences
- Beach clubs, Pool clubs, Rooftop bars & lounges
- Shisha spots, Indoor bars & lounges
- 3-star to 7-star accommodations
- Beach resorts, Luxury city hotels, Party hotels
- Ladies nights, Nightlife spots, Live entertainment
- Maps natural language queries to specific categories
- Handles synonyms and variations (e.g., "beach clubs" → "beach clubs to chill")
- Fuzzy matching for subcategories
- get_current_time: Provides real-time time and date information
- send_transcription: Processes voice queries through the database
- Real-time chunked responses for better user experience
- Progressive loading of search results
- Optimized for both text and voice interactions
- Vector Similarity: Semantic search using embeddings
- Entity Detection: Direct name matching for venues
- Category Filtering: Intelligent filtering based on user intent
- Combined Results: Merges multiple search strategies for best results
- VoiceAssistant: Real-time voice interaction component
- VoiceChatModal: Beautiful modal with audio visualization
- ChatMessages: Streaming message display
- UserIdentifier: Session management
- ThemeToggle: Dark/light mode switching
- Real-time audio waveform display
- State-based color coding (listening/speaking/idle)
- Smooth animations and transitions
- User session management
- API key protection
- Input validation with Zod
- SQL injection prevention
- Embedding caching (24-hour TTL)
- Vector search result caching
- Edge runtime for faster responses
- Parallel processing of embeddings and message history
- Understanding of vector embeddings and similarity search
- Real-time AI voice integration patterns
- Function calling and tool integration
- Prompt engineering for specific use cases
- Modern React patterns and hooks
- TypeScript best practices
- Database design with vector extensions
- Real-time communication protocols
- Caching strategies for AI operations
- Streaming response architectures
- Category detection algorithms
- Voice-first user experience design
- Multi-language Support: Arabic language integration
- Booking Integration: Direct booking capabilities
- Personalization: User preference learning
- Image Recognition: Visual search capabilities
- Social Features: User reviews and ratings
- Mobile App: Native iOS/Android applications
This project is for educational and demonstration purposes.
Built with ❤️ using Next.js, OpenAI, and modern web technologies