Welcome to the Vapi Voice AI Workshop! In this hands-on session, you'll build a modern AI-powered study assistant using React, Vite, and Tailwind CSS that students can talk to via phone or web.
An AI Study Buddy with professional voice AI features:
- 🎙️ Real-time voice conversations with AI
- 💬 Full conversation history display
- 🔇 Mute/unmute functionality
- 📊 Live volume level indicators
- 💡 Preset message shortcuts
- 🎯 Custom message injection
- ⏰ Pomodoro study sessions
- 📚 Academic Q&A capabilities
- React - Modern UI framework
- Vite - Lightning-fast build tool
- Tailwind CSS - Utility-first CSS framework
- Vapi SDK - Voice AI integration
- Environment Variables - Secure API key management
- Basic JavaScript/React knowledge
- Node.js installed (v16+)
- A Vapi account (we'll create one together)
- A phone for testing (optional)
- Chrome or Edge browser (recommended)
# Clone the repository
git clone [your-repo-url]
cd vapi-workshop
# Install dependencies
npm install
# Copy environment variables
cp env.example .env
# Add your Vapi API key to .env
# VITE_VAPI_PUBLIC_KEY=your_key_here
# Start development server
npm run dev- Natural Conversations: Sub-600ms response times
- Smart Interruption Handling: Natural turn-taking
- Auto-end Phrases: Say "goodbye" to end the call
- Silence Detection: 30-second timeout
- Max Duration: 10-minute sessions
- Split View Layout: Controls on left, conversation on right
- Real-time Status: See when AI is listening/speaking
- Volume Visualization: Live audio level display
- Message History: Full conversation transcript
- Preset Commands: Quick access to common requests
- Custom Messages: Make the AI say anything
- Responsive Design: Works on all screen sizes
- What is Vapi?
- Voice AI use cases
- Demo of the complete application
- Understanding Vapi events
- Setting up voice configuration
- Testing with the web interface
- State management for voice AI
- Event handling patterns
- Real-time UI updates
- Message history implementation
- Mute functionality
- Custom say commands
- Building for production
- Deployment options
- Hackathon project ideas
- Multi-language Support: Add language selection
- Voice Commands: Add custom voice-triggered actions
- Study Analytics: Track study session data
- Collaborative Study: Multi-user study rooms
- AI Tutoring: Subject-specific AI tutors
- Voice Notes: Transcribe and save study notes
vapi-workshop/
├── src/
│ ├── App.jsx # Main React component with all features
│ ├── main.jsx # React entry point
│ └── index.css # Tailwind CSS imports
├── .env # Your API keys (create this!)
├── .gitignore # Git ignore file
├── index.html # Root HTML file
├── vite.config.js # Vite configuration
├── tailwind.config.js # Tailwind configuration
├── postcss.config.js # PostCSS configuration
└── package.json # Project dependencies
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
- Start a Conversation: Click the start button to connect
- Allow Microphone: Grant permission when prompted
- Speak Naturally: The AI will respond in real-time
- Try Presets: Use quick command buttons
- Mute When Needed: Toggle microphone on/off
- Custom Messages: Type and send custom AI responses
- End Call: Say "goodbye" or click end button
| Issue | Solution |
|---|---|
| "Please add your Vapi API key" | Create .env file with your key |
| No audio/microphone | Check browser permissions |
| Connection failed | Verify API key and internet |
| Messages not showing | Check browser console for errors |
- Vapi Documentation
- Vapi Discord Community
- React Documentation
- Vite Documentation
- Tailwind CSS Documentation
- Official Vapi Examples
- During workshop: Raise your hand!
- After workshop: Join our Discord channel #vapi-workshop
- Email: [email protected]
Happy Building! 🚀 Let's create something amazing together!