Master any language through intelligent, real-time conversations with AI
LinguaLive is a cutting-edge language learning platform that pairs you with an intelligent AI tutor for real-time, conversational practice. Powered by Google's Gemini API, it provides immersive language learning experiences with:
- 🎤 Real-time voice conversations with natural language processing
- 🌐 7+ supported languages including English, Spanish, French, Japanese, German, Italian, and Mandarin
- 🚀 Zero latency interactions with streaming AI responses
- 📊 Interactive transcript tracking your language journey
- 🎯 Adaptive learning that responds to your proficiency level
- 🔐 Privacy-first architecture with client-side audio handling
Speak naturally and get instant feedback from your AI language partner. No typing required—just pure conversation.
Practice any of these languages:
- 🇬🇧 English
- 🇪🇸 Spanish
- 🇫🇷 French
- 🇯🇵 Japanese
- 🇩🇪 German
- 🇮🇹 Italian
- 🇨🇳 Mandarin Chinese
Every exchange is logged in an interactive transcript, helping you review and learn from the conversation.
Leverages Google's state-of-the-art Generative AI for natural, contextual conversations.
Built with Tailwind CSS and Motion for smooth animations and a delightful user experience across all devices.
| Layer | Technology |
|---|---|
| Framework | Next.js 15 |
| UI Library | React 19 |
| Language | TypeScript 5.9 |
| Styling | Tailwind CSS 4.1 |
| Animations | Motion |
| Icons | Lucide React |
| AI Engine | Google Generative AI |
| Audio | Web Audio API |
| Forms | React Hook Form |
| Development | ESLint, Autoprefixer |
- Node.js 18+
- npm or yarn
- Google Gemini API Key (Get one free)
-
Clone the repository
git clone https://github.com/hardikrathod777/lingualive-ai-language-coach.git cd lingualive-ai-language-coach -
Install dependencies
npm install
-
Set up environment variables
cp .env.example .env.local
Edit
.env.localand add your API key:NEXT_PUBLIC_GEMINI_API_KEY=your_api_key_here -
Start the development server
npm run dev
-
Open in browser Navigate to http://localhost:3000 and start practicing!
-
Select Your Language 🌐
- Click the language selector in the top bar
- Choose your target language from 7 options
-
Connect to AI Partner 🎤
- Click the Connect button to initialize the session
- Grant microphone permissions when prompted
-
Start Speaking 💬
- Speak naturally in your chosen language
- The AI will listen, understand, and respond
- Your transcript updates in real-time
-
Review & Learn 📚
- Check the conversation transcript
- See how the AI responded to your input
- Toggle audio playback with the speaker controls
| Control | Action |
|---|---|
| Mic Icon | Start/stop recording |
| Speaker Icon | Play/mute AI responses |
| Language Dropdown | Switch target language |
| Connect Button | Initialize new session |
lingualive/
├── app/ # Next.js app directory
│ ├── layout.tsx # Root layout with metadata
│ ├── page.tsx # Home page
│ └── globals.css # Global styles
├── components/
│ └── LanguagePartner.tsx # Main interactive component
├── hooks/
│ └── use-mobile.ts # Mobile detection hook
├── lib/
│ ├── audio-utils.ts # Audio recording & playback
│ └── utils.ts # Helper utilities
├── public/ # Static assets
├── .env.example # Environment template
├── next.config.ts # Next.js configuration
├── tsconfig.json # TypeScript configuration
├── tailwind.config.ts # Tailwind CSS configuration
├── postcss.config.mjs # PostCSS configuration
└── package.json # Dependencies & scripts
# Development server (with hot reload)
npm run dev
# Production build
npm run build
# Start production server
npm start
# Run linting
npm run lint
# Clean build artifacts
npm run cleanCreate a .env.local file in the root directory:
# Required: Your Google Gemini API Key
NEXT_PUBLIC_GEMINI_API_KEY=sk-proj-your-api-key-here
# Optional: API endpoint configuration
# NEXT_PUBLIC_API_URL=http://localhost:3000/api
⚠️ Security Note: Never commit.env.localto version control. Add it to.gitignore.
Edit components/LanguagePartner.tsx and add to the LANGUAGES array:
const LANGUAGES = [
// ... existing languages
{ id: 'ko', name: 'Korean', flag: '🇰🇷' },
{ id: 'pt', name: 'Portuguese', flag: '🇵🇹' },
];LinguaLive uses Tailwind CSS v4. Customize by editing:
tailwind.config.ts— Color schemes, typography, spacingapp/globals.css— Global styles and animations- Component files — Inline Tailwind classes
Modify audio configuration in lib/audio-utils.ts:
const AUDIO_CONFIG = {
sampleRate: 16000,
channelCount: 1,
// ... other settings
};We welcome contributions from everyone! Whether you're fixing bugs, adding features, or improving documentation, your help is valued.
👉 Read our full Contributing Guide for detailed instructions on:
- 🌟 Ways to contribute (bugs, features, docs, tests)
- 🛠️ Development setup and local environment
- 📝 Commit message and branch naming conventions
- 🔄 Pull request workflow and review process
- 🧪 Testing guidelines and code standards
- 📚 Documentation requirements
- 🐛 How to report issues effectively
# 1. Fork the repo and clone your fork
git clone https://github.com/hardikrathod777/lingualive-ai-language-coach.git
cd lingualive-ai-language-coach
# 2. Create a feature branch
git checkout -b feature/your-feature-name
# 3. Install dependencies and start dev server
npm install
npm run dev
# 4. Make your changes, test, and commit
npm run lint # Check code style
git commit -m "feat: your amazing feature"
# 5. Push and create a Pull Request
git push origin feature/your-feature-nameFirst time contributing? Look for issues labeled good-first-issue or help-wanted — perfect for getting started! 🌱
- ✅ Ensure
.env.localcontainsNEXT_PUBLIC_GEMINI_API_KEY - ✅ Restart the dev server:
npm run dev - ✅ Check that the API key is valid and has proper permissions
- ✅ Check browser security settings
- ✅ Ensure HTTPS is used in production
- ✅ Grant microphone access when the browser prompts
- ✅ Check speaker volume
- ✅ Verify speaker icon is unmuted
- ✅ Ensure browser allows audio output
- ✅ Check browser console for errors
- ✅ Check internet connection
- ✅ Verify API quota hasn't been exceeded
- ✅ Try refreshing the page
LinguaLive is optimized for:
- ⚡ Fast initial load with Next.js 15 optimizations
- 🎯 Real-time streaming using WebSocket connections
- 📱 Mobile-first design responsive across devices
- 🔄 Efficient state management with React hooks
- 🎨 Smooth animations using GPU-accelerated Motion
This project is licensed under the MIT License — see LICENSE file for details.
- 🤖 Google Generative AI for Gemini API
- ⚛️ Next.js team for the amazing framework
- 🎨 Tailwind Labs for Tailwind CSS
- 🎬 Motion for animations
- 📧 Email: rathodhardik0914@gmail.com
- 🐛 Issues: GitHub Issues
- Speech accent analysis and feedback
- Spaced repetition vocabulary trainer
- Conversation history and learning analytics
- Custom curriculum paths
- Language-specific grammar explanations
- Peer-to-peer conversation matching
- Mobile app (iOS & Android)
- Offline mode support
Ready to master a new language? 🚀 Get Started Now
⭐ Star us on GitHub • 🐦 Follow on Twitter • 📱 Join our Community
Made with ❤️ by the Hardik Rathod