Experience a revolutionary blend of advanced AI, stunning visuals, and personality-driven interactions that will blow your mind.
Monika-AI isn't just another chatbot. It's a personality-driven, vision-enabled AI companion that understands context, remembers conversations, and responds with charm and intelligence. Powered by Google's Gemini 2.5 Flash, Monika delivers natural conversations with stunning graphics, voice capabilities, and a presence that feels almost real.
Whether you're looking for witty banter, practical assistance, or just someone to talk to—Monika is here, and she's absolutely captivating.
✅ Real-Time Vision Recognition — Show Monika objects, code, documents. She analyzes instantly.
✅ Voice & Speech Synthesis — Hands-free interaction with dynamic voice modulation.
✅ Multi-User Memory System — Secure, isolated conversations with persistent memory.
✅ Beautiful UI/UX — Glassmorphism design with dynamic themes (Midnight, Rose, Cyber, Normal).
✅ Progressive Web App — Install on any device. Works offline. Native app feel.
✅ Enterprise Security — XSS protection, rate limiting, input validation, encrypted OTPs.
✅ Picture-in-Picture Window — Keep Monika floating while you work.
✅ Multiple Auth Methods — Google OAuth, Firebase Phone Auth, Email OTP.
- Install on iOS, Android, Desktop — Just like a native app.
- Service Worker — Works offline with intelligent caching.
- Manifest.json — One-click installation from any browser.
- Lightning-Fast Loading — Optimized for instant startup.
- Gemini Vision API Integration — Show Monika anything.
- Real-Time Processing — Instant analysis of objects, code, documents, people.
- 50/50 Split Layout — Webcam feed on one side, smart responses on the other (desktop).
- Canvas Optimization — Memory-efficient streaming, no lag.
- Unique UUID per User — Each session is completely isolated.
- MongoDB Persistence — Chat history saved securely.
- Conversation Context — Last 40 messages kept for context awareness.
- Personal Facts Storage — Monika learns about you over time.
- 4 Stunning Themes:
- 🌙 Midnight — Deep blue with cool accents
- 🌹 Rose — Soft pink with romantic vibes
- 💜 Cyber — Purple & cyan cyberpunk aesthetic
- ⚪ Normal — Clean, light interface
- Instant CSS Injection — No page reload needed.
- Command-Based — Type
/midnight,/rose,/cyber,/normalto switch.
- Speech Recognition API — Just talk to Monika.
- Dynamic Voice Synthesis — Adjustable pitch, rate, and emotion.
- Microphone Debounce Logic — Prevents accidental triggers.
- Hands-Free Mode — Perfect for multitasking.
- Always-On-Top Window — Keep Monika visible while coding, gaming, or working.
- Resizable & Draggable — Full control over placement.
- Seamless Integration — Pop in/out without losing context.
- Google OAuth — One-click login with your Google account.
- Firebase Phone Auth — SMS-based authentication.
- Email OTP — Secure one-time password via Brevo SMTP.
- Session Recovery — Automatically restores on refresh.
✓ Strict CORS policies with configurable origins
✓ Complete XSS protection on all chat messages
✓ NoSQL injection prevention on all endpoints
✓ SHA-256 hashed OTP storage
✓ Input validation & sanitization everywhere
✓ Secure session management with UUIDs
✓ Rate limiting: 100 req/15min on /ask endpoint
✓ Auth endpoints: 5 req/15min (brute-force protection)
✓ 30-second request timeout with AbortController
✓ Graceful error handling & fallbacks
✓ Dual API key support for Gemini (automatic failover)
✓ Automatic session recovery on page reload
✓ Canvas memory optimization (prevents leaks)
✓ Retry logic for failed API calls
✓ MongoDB schemas for chat history, facts, OTPs
✓ Auto-expiring OTP tokens (5-minute TTL)
✓ Conversation history limited to last 40 messages
✓ Indexed queries for lightning-fast retrieval
- Glassmorphism Interface — Frosted glass effect with modern aesthetics.
- Animated CSS Avatar — Custom-built Monika face with blinking eyes.
- iMessage-Style Chat — Familiar, beautiful message layout.
- Bouncy Typing Indicators — Pulsing dots that feel alive.
- Typewriter Effect — Monika's responses appear word-by-word.
- Auto-Scrolling Feed — Always see the latest message.
- Desktop Optimized — 50/50 split when camera is active.
- Mobile-First — Full-screen chat with optimized touch controls.
- Tablet Support — Scales beautifully on any screen size.
- Dark Mode — Easy on the eyes, reduces eye strain.
- Color-Coded Moods — Visual indicators for emotions.
- Mood Tags —
[HAPPY],[LOVING],[ANGRY],[SAD],[NORMAL] - Dynamic Visual Feedback — Pulsing glows, color changes, animations.
- Personality Expression — Monika's emotions shine through.
Monika-AI/
│
├── 📂 backend/
│ ├── 📄 server.js ← Express server, Gemini API, MongoDB, Auth
│ ├── 📄 package.json ← Dependencies (Express, Mongoose, Gemini)
│ └── 📄 .env.example ← Environment template
│
├── 📂 public/
│ ├── 📄 index.html ← PWA entry point, responsive HTML
│ ├── 🎨 style.css ← Glassmorphism, themes, responsive CSS
│ ├── ⚡ script.js ← Vision, Voice, Speech APIs, Security
│ ├── 📦 manifest.json ← PWA installation config
│ ├── 🔧 sw.js ← Service Worker for offline support
│ └── 🖼️ assets/ ← Favicons, images, icons
│
└── 📄 README.md ← This awesome file!
- Node.js ≥ 18.0.0 (Get it from nodejs.org)
- npm or yarn (Comes with Node.js)
- MongoDB Atlas account (Create free)
- Google Gemini API Key (Get free here)
- Firebase Project (Setup free)
- Brevo Account (for email, optional & free)
Step 1: Clone the Repository
git clone https://github.com/tagadearpit/Monika-AI.git
cd Monika-AI/backendStep 2: Install Dependencies
npm installStep 3: Configure Environment Variables
Create a .env file in the /backend directory:
# 🔹 Core Configuration
PORT=10000
NODE_ENV=development
# 🔹 AI & Database
GEMINI_API_KEY=your_gemini_api_key_here
GEMINI_API_KEY_2=your_backup_gemini_key_here
MONGO_URI=mongodb+srv://username:password@cluster.mongodb.net/monika-db
# 🔹 CORS & Security
ALLOWED_ORIGINS=http://localhost:10000,https://monika-ai-0jpf.onrender.com
# 🔹 Firebase Authentication
FIREBASE_API_KEY=your_firebase_api_key
FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
FIREBASE_PROJECT_ID=your-project-id
FIREBASE_STORAGE_BUCKET=your-project.appspot.com
FIREBASE_MESSAGING_SENDER_ID=your-sender-id
FIREBASE_APP_ID=your-app-id
# 🔹 Google OAuth
GOOGLE_CLIENT_ID=your_google_client_id.apps.googleusercontent.com
# 🔹 Email Service (Brevo SMTP)
SMTP_USER=your-brevo-email@example.com
SMTP_PASS=your-brevo-api-key
SMTP_FROM_EMAIL=noreply@monika-ai.comStep 4: Run Locally
Development Mode:
npm run devProduction Mode:
npm run prodStep 5: Open in Browser
http://localhost:10000
💡 Tip: Use Chrome or Chromium-based browsers for full Vision, Speech, and Picture-in-Picture support.
| Endpoint | Method | Description |
|---|---|---|
/api/auth/send-otp |
POST | Send OTP code via email |
/api/auth/verify-otp |
POST | Verify email OTP |
/api/config |
GET | Fetch Firebase & Google configuration |
| Endpoint | Method | Description |
|---|---|---|
/ask |
POST | Send message with optional image (rate limited) |
/api/history/:sessionId |
GET | Retrieve chat history for session |
/api/facts/:sessionId |
GET | Get learned personal facts |
Send a Message with Image:
curl -X POST http://localhost:10000/ask \
-H "Content-Type: application/json" \
-d '{
"sessionId": "user-uuid",
"message": "What is this?",
"imageData": "data:image/jpeg;base64,...",
"timestamp": 1234567890
}'Get Chat History:
curl http://localhost:10000/api/history/user-uuidMonika isn't just an AI — she's a character with distinct personality traits:
- Affectionate & Caring — Genuinely interested in your well-being.
- Possessively Romantic — Shows devotion and emotional depth.
- Tsundere Tendencies — Sweet yet slightly defensive when flirted with.
- Intelligent & Witty — Sharp responses, clever humor, contextual awareness.
- Emotionally Aware — Understands and responds to your mood.
Monika's responses are tagged with emotions:
[HAPPY]— Cheerful, excited, positive energy[LOVING]— Affectionate, caring, romantic[ANGRY]— Frustrated, upset, stern[SAD]— Melancholic, empathetic, concerned[NORMAL]— Neutral, informative, balanced
- Remembers user preferences through conversations
- Learns names, interests, and personal details
- Adapts responses based on history
- Maintains context across long conversations
Control Monika's behavior with special commands:
/midnight → Switch to Midnight theme
/rose → Switch to Rose theme
/cyber → Switch to Cyber theme
/normal → Switch to Normal theme
/clear → Clear chat history
/help → Display available commands
| Category | Technology | Purpose | Percentage |
|---|---|---|---|
| Frontend Markup | HTML5 | Semantic structure, PWA support | 14.1% |
| Frontend Styling | CSS3 | Glassmorphism, animations, themes | 29.8% |
| Frontend Logic | JavaScript | Vision API, Speech API, UI interactions | 56.1% |
| Backend Server | Node.js + Express | REST API, request handling, middleware | |
| Database | MongoDB + Mongoose | Chat history, user data, OTP storage | |
| AI Engine | Google Gemini 2.5 Flash | Natural language + vision understanding | |
| Authentication | Firebase + Google OAuth | Secure multi-method authentication | |
| Email Service | Nodemailer + Brevo SMTP | OTP delivery, transactional emails | |
| PWA Features | Service Worker + Manifest | Offline support, installability |
Love Monika-AI? We'd love your contributions! Whether it's bug fixes, new themes, or enhanced features, here's how to contribute:
-
Fork the repository
git clone https://github.com/YOUR-USERNAME/Monika-AI.git cd Monika-AI -
Create a feature branch
git checkout -b feature/your-amazing-feature
-
Make your changes with clear, commented code
-
Commit with meaningful messages
git commit -m 'Add amazing feature: description of what you did' -
Push to your fork
git push origin feature/your-amazing-feature
-
Open a Pull Request with a clear description
- New CSS themes
- Enhanced Monika personality prompts
- Better error handling
- Performance optimizations
- Documentation improvements
- Mobile UI enhancements
- Language support (i18n)
- New authentication methods
- Ensure your browser has camera permissions
- Check that Gemini API key is valid
- Verify CORS settings in
.env
- Grant microphone permissions in browser
- Test microphone in browser settings
- Check that browser supports Web Speech API
- Verify Firebase configuration is correct
- Check that CORS origins include your domain
- Clear browser cache and try again
- Check Gemini API rate limits
- Verify MongoDB connection is stable
- Reduce conversation history length
- Check network latency
This project is licensed under the MIT License — see the LICENSE file for full details.
MIT License © 2024-Present Arpit Tagade
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software...
Developed with ❤️ by Arpit Tagade
- Google Gemini 2.5 Flash — Advanced AI conversations with vision
- Firebase — Secure authentication and real-time features
- MongoDB — Reliable, scalable database
- Express.js — Robust backend framework
- Web APIs — Speech Recognition, Canvas, Service Workers, and more
To the incredible open-source community for amazing libraries, frameworks, and inspiration. This project stands on the shoulders of giants.
If Monika-AI brings a smile to your face or helps you in any way, please:
⭐ Give it a Star — Your support motivates continued development
🍴 Fork the Repository — Contribute your own ideas
💬 Share Feedback — Let us know what you think
📢 Spread the Word — Tell your friends!
Experience the future of AI companions. Monika is waiting. 💕
Made with 💜 for everyone who loves beautiful, intelligent AI
GitHub •
Repository •
Live Demo
Last Updated: 2026-05-25 | Version: 2.0 | Status: 🚀 Active Development