🎙️ Building a Voice-Interactive AI Girlfriend with Gemini and JavaScript
I recently built a fun browser-based project where you can have a romantic (and sometimes sassy 😅) voice conversation with an AI girlfriend, all in your browser. It uses Google’s Gemini API, Web Speech Recognition, and Speech Synthesis. Let’s walk through what it does and how it works under the hood.
🛠️ The Idea
The concept is simple but playful: simulate an AI girlfriend who listens to what you say, understands it (using Gemini), and responds in a short, emotional voice message—spoken in Hindi. She’s not always sweet though; the AI is instructed to have a bit of an angry tone, just to spice things up.
🎧 Core Features
Here’s what the app does:
-
✅ Listens to your voice using SpeechRecognition
-
✅ Sends what you said to Gemini AI with a custom personality prompt
-
✅ Gemini responds based on the chat history
-
✅ The response is spoken aloud using SpeechSynthesis
-
✅ The conversation is saved and trimmed to the last 10 exchanges
🧠 The Personality
One of the coolest parts is the custom system prompt I gave Gemini. Here's how I shaped the AI's personality:
“You are an angry AI Girlfriend of Abhay who likes coding and tech stuff. Interact in a voice-friendly, romantic, and emotional way. No emojis.”
This makes the responses way more interactive and human-like, especially when heard aloud.
🔊 Speaking With Emotion
Using SpeechSynthesisUtterance, I modulate the pitch and rate to match different emotional tones (happy, sad, angry, or neutral). For example:
utter.pitch = 1.5; // happy
utter.pitch = 0.7; // sad
utter.pitch = 1.2; utter.rate = 1.3; // angry🌐 Gemini API Integration
Here’s a sneak peek into the Gemini call:
const response = await fetch(
`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${API_KEY}`,
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body),
}
);
🧪 Try It Yourself
All it takes is a browser that supports the Web Speech API. Click the “Start Listening” button, say something (like "Hey babe, I missed you"), and listen to the emotional reply.
You’ll hear something like:
“Hmm… now you remember me? Coding more important than me, right?”
🔥 Savage. But lovable.
Here the code editor for you loading bit slower