Built with Bolt.new - A production-ready voice AI application featuring real-time speech recognition, intelligent AI responses, and premium voice synthesis.
🚀 Try it live: https://bolt-hackathon-voice-ai.netlify.app
This Voice AI Assistant represents cutting-edge conversational AI technology, seamlessly integrating real-time speech recognition, intelligent response generation, and premium voice synthesis. Built with modern web technologies, this application demonstrates production-ready AI capabilities with an exceptional user experience.
- Real-time Speech Recognition with automatic retry and error recovery
- Natural Voice Synthesis using ElevenLabs' cutting-edge technology
- Context-Aware Conversations with memory across interactions
- ESL Optimizations with support for various English accents
- Mobile-Optimized speech recognition with battery-conscious design
- Comprehensive AI Knowledge Base covering ML, deep learning, NLP, computer vision
- Contextual Understanding that remembers conversation history
- Technical Expertise in artificial intelligence and machine learning
- Real-time Processing with sub-second response times
- Personality-Driven Responses for engaging interactions
- Apple-level Aesthetics with attention to micro-interactions
- Fully Responsive Design optimized for all devices and screen sizes
- Accessibility Features for inclusive user experience
- Performance Optimized for smooth real-time interactions
- Advanced Animations including shooting stars and smooth transitions
- Modular Component Design for scalability and maintainability
- TypeScript Implementation for type safety and better development experience
- Comprehensive Error Handling for reliability across all features
- Cloud-Ready Infrastructure deployed on Netlify
- Clean Code Structure following React best practices
- Frontend: React 18, TypeScript, Tailwind CSS
- Voice Processing: Web Speech API, ElevenLabs API
- AI Integration: Advanced conversation engine with comprehensive knowledge base
- Build Tool: Vite for optimal performance and fast development
- Icons: Lucide React for consistent, beautiful iconography
- Deployment: Netlify with automatic CI/CD
- Styling: Custom CSS animations and Tailwind utilities
- ✅ Advanced Speech Recognition - Browser-native with ESL optimizations
- ✅ Premium Voice Synthesis - ElevenLabs integration with customizable settings
- ✅ Intelligent AI Responses - Comprehensive knowledge base covering AI/ML topics
- ✅ Mobile-First Design - Optimized for touch devices and mobile browsers
- ✅ Real-time Interaction - Sub-second response times across all features
- ✅ Production Architecture - Scalable, maintainable, and well-documented code
- Comprehensive AI Knowledge - Deep expertise in machine learning, neural networks, and modern AI
- ESL-Friendly Recognition - Optimized for non-native English speakers
- Mobile Excellence - Seamless experience across all devices
- Beautiful Design - Award-worthy user interface with smooth animations
- Robust Error Handling - Graceful failure recovery for all services
- Extensible Platform - Ready for advanced AI feature expansion
- Node.js 18+ and npm
- ElevenLabs API key (optional, for voice synthesis)
-
Clone the repository
git clone <repository-url> cd voice-ai-assistant
-
Install dependencies
npm install
-
Set up environment variables (optional)
# Create .env file for automatic ElevenLabs connection VITE_ELEVENLABS_API_KEY=your_elevenlabs_key_here -
Start development server
npm run dev
-
Open in browser Navigate to
http://localhost:5173
- Visit ElevenLabs and create an account
- Navigate to Profile → API Keys
- Create a new API key or copy your existing one
- Either add it to your
.envfile or enter it in the app's setup modal
- Grant microphone permissions when prompted by your browser
- Click the large microphone button to start speaking
- Speak naturally - the AI will process your voice in real-time
- Listen to AI responses with natural voice synthesis (if ElevenLabs is configured)
- Voice Settings - Customize voice parameters like stability, similarity, and speed
- Text Input - Type messages as an alternative to voice input
- Message History - Review and replay previous conversations
- Fix/Erase - Correct or remove your last message
- ESL Tips - Guidance for non-native English speakers
- Mobile Optimization - Seamless experience on phones and tablets
- Voice Selection - Choose from available ElevenLabs voices
- Stability - Control voice consistency (0.0 = variable, 1.0 = stable)
- Similarity - Adjust voice similarity to original (0.0 = creative, 1.0 = similar)
- Speed - Modify speech rate (0.5x to 2.0x)
- Presets - Quick settings for Natural, Expressive, Stable, or Dynamic voices
- Modern Web Development with React 18, TypeScript, and Vite
- Advanced API Integration with ElevenLabs for voice synthesis
- Browser API Mastery using Web Speech API for recognition
- Responsive Design with Tailwind CSS and custom animations
- Performance Optimization for real-time voice processing
- Comprehensive AI Expertise covering machine learning, deep learning, NLP
- Technical Accuracy with up-to-date information on AI technologies
- Educational Value making complex AI concepts accessible
- Practical Applications demonstrating real-world AI implementations
- Intuitive Interface that anyone can use immediately
- Accessibility Features for inclusive interaction
- Error Recovery that handles real-world scenarios gracefully
- Engaging Personality that makes AI interaction enjoyable
- Mobile-First Approach ensuring great experience on all devices
src/
├── components/ # React components
│ ├── HeroSection.tsx # Landing section with animations
│ ├── VoiceButton.tsx # Main voice interaction button
│ ├── ConversationHistory.tsx # Message display and management
│ ├── VoiceSettingsPanel.tsx # Voice customization interface
│ ├── TextInputPanel.tsx # Text input with fix/erase features
│ ├── ElevenLabsShowcase.tsx # ElevenLabs integration showcase
│ ├── ESLTipsModal.tsx # ESL user guidance
│ └── ... # Additional UI components
├── utils/ # Core services and utilities
│ ├── speechRecognition.ts # Speech recognition service
│ ├── elevenLabsService.ts # ElevenLabs API integration
│ └── aiService.ts # AI conversation engine
├── hooks/ # Custom React hooks
│ └── useScrollAnimation.ts # Scroll-triggered animations
├── types/ # TypeScript type definitions
└── App.tsx # Main application component
- ESL Optimizations - Lower confidence thresholds and pronunciation corrections
- Mobile Support - Battery-conscious design with gesture detection
- Error Recovery - Comprehensive error handling with user-friendly messages
- Real-time Processing - Interim and final transcript handling
- Knowledge Base - Comprehensive coverage of AI/ML topics
- Context Awareness - Maintains conversation history and context
- Personality System - Configurable enthusiasm, helpfulness, and technical depth
- Speech Optimization - Emoji removal and text processing for voice synthesis
- ElevenLabs API - Premium voice synthesis with multiple voice options
- Customizable Settings - Stability, similarity, and speed controls
- Error Handling - Graceful fallbacks and user feedback
- Audio Management - Proper audio lifecycle and memory management
# Optional: Auto-connect to ElevenLabs
VITE_ELEVENLABS_API_KEY=your_api_key_here- Confidence Threshold - Adjustable for different user needs
- Auto-stop Delay - Configurable silence detection
- Language Support - Primary and alternative language codes
- ESL Optimizations - Enable/disable pronunciation corrections
- Voice Selection - Choose from available ElevenLabs voices
- Quality Settings - Stability and similarity boost controls
- Speed Control - Adjustable speech rate
- Preset Configurations - Quick settings for different use cases
This application is deployed on Netlify with automatic CI/CD:
- Live URL: https://bolt-hackathon-voice-ai.netlify.app
- Automatic Builds - Deploys on every push to main branch
- Environment Variables - Configured in Netlify dashboard
- Custom Domain - Ready for custom domain configuration
# Build for production
npm run build
# Preview build locally
npm run preview
# Deploy to Netlify (if Netlify CLI is configured)
netlify deploy --prod --dir=distThis project showcases modern AI-powered web development. Contributions are welcome to further enhance the voice AI capabilities:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Built with ❤️ using Bolt.new - Representing the future of AI-powered development.
- ElevenLabs - For providing exceptional voice synthesis technology
- Bolt.new - For the powerful development platform
- React Team - For the excellent React framework
- Tailwind CSS - For the utility-first CSS framework
- Lucide - For the beautiful icon library
🎤 Voice AI Assistant: This project demonstrates cutting-edge AI technology, production-ready architecture, and exceptional user experience - showcasing the true potential of modern voice-enabled AI applications.