🎤 Rap Battle for My Future

Inspiration

I wanted to solve the "boredom trap" of traditional career counseling. Students today face immense pressure to choose a career path, yet they lack a real "professional twitch"—they don't know what the day-to-day actually feels like, and career fairs are often dull and unengaging. Inspired by the competitive and authentic nature of rap battles, I built this app to replace boring pamphlets with high-energy lyrical debates where two AI agents argue the value of their careers in a raw, unfiltered comparison.

What it does

Rap Battle for My Future is an interactive web application where:

1. Users Select Fighters: You choose two professions (e.g., Data Scientist vs. Surgeon) to battle it out.
2. AI Rap Battle: Two AI agents engage in a lyrical rap battle. They roast each other's career downsides while highlighting their own benefits, all set to a procedural hip-hop beat generated in real-time.
3. Live Mentor Interview: After the battle, you pick a winner. The winning AI agent transforms into a helpful career mentor. You can speak to them directly via microphone, and they respond with voice while dynamically updating a visual dashboard with real-time data on universities, salaries, and resources, ect.. using Google Search Grounding.

This has multilingual support, so users can enjoy it and interview in their native language.

How I built it

I built this application using Google Al Studios, interactivity, and the latest Google AI capabilities.

The AI Pipeline (Gemini 3 & 2.5)

I leveraged a specific combination of Gemini models to optimize for speed and quality:

• gemini-3-pro-preview (The Brains & Speed):
  • Rap Logic: I used Gemini 3 Flash for the core battle logic. Its ultra-low latency allows it to generate and stream creative, rhyming lyrics token-by-token in real-time without pausing the beat.
  • Dashboard Intelligence: I also utilized this model for the "function calling" data extraction. When a user asks about universities, Gemini 3 Flash performs a Google Search, scrapes the results, and formats them into strict JSON to update the UI instantly.
• gemini-2.5-flash-native-audio-preview-12-2025 (The Live Voice):
  • Real-Time Mentor: For the post-battle interview, I used the native audio capability of Gemini Live. It handles the bidirectional voice stream via WebSocket, allowing for natural, interruptible conversations and driving the app's navigation through tool calling.
• gemini-3-pro-image-preview (The Visuals):
  • Character Design: This model generates the custom 3D Pixar-style avatars for each profession on the fly, giving every battle a unique visual identity.
• gemini-2.5-pro-preview-tts (The Voice):
  • Battle Audio: I used the high-quality Text-to-Speech model to render the generated rap lyrics into clear, expressive audio clips for the battle sequence.

The Frontend & Audio

• Frontend: React 19 with TypeScript and Tailwind CSS.
• Procedural Audio: Instead of using pre-recorded MP3s, I wrote a custom BeatPlayer engine using the native Web Audio API. It synthesizes drums (kicks, snares, hi-hats) and crowd reactions procedurally using oscillators and noise buffers.
• 3D Scene: I implemented a Three.js landing scene with animated 3D rappers and a reacting crowd.

Challenges I ran into

Rate Limits: Managing the API calls for avatar generation, lyric streaming, and TTS simultaneously often hit the 429 Too Many Requests limit. I implemented a robust exponential backoff retry system with jitter to handle this gracefully.

Accomplishments that I'm proud of

• Procedural Audio Engine: I'm really proud of the BeatPlayer. It generates a unique hip-hop beat every time without loading a single external audio file.
• Seamless Multimodality: The transition from text-based rapping to a full voice-interactive interview feels magical. The way the AI "controls" the dashboard tabs in real-time based on the user's voice command is a highlight.
• Zero Hallucinations: By using Gemini 3 Flash with Google Search Grounding for the dashboard data, I ensured that the universities and companies listed are real and up-to-date, solving a common problem with generative AI.

What I learned

I learned deeply about the Gemini Live API and the power of multimodal interactions. I discovered that "function calling" isn't just about data—it's about controlling the UI. I also gained a much stronger understanding of the Web Audio API and how to schedule precise audio events in the browser.

What's next for RAP BATTLE FOR MY FUTURE

• Expanded Career Data: Integrating with LinkedIn or Indeed APIs to show live job listings directly in the dashboard.

Built With

• gemini3-apis
• google-ai-studios