Ash AI — The Story Behind ROBYY

Inspiration

I've always been fascinated by the rapid evolution of AI technology — the idea that a machine can understand human language, analyze complex documents, and respond intelligently in real time feels nothing short of magical. That fascination became the spark for Ash AI. I wanted to go beyond just using AI tools — I wanted to build one. One that was meaningful, practical, and accessible to students like me who are navigating an overwhelming amount of information every day. The question I asked myself was simple:

"What if every student had access to a brilliant, always-available AI companion?"

That question became ROBYY.

How I Built It

Ash AI was built using a modern, full-stack web technology approach:

React + Vite — for a fast, responsive, and component-driven frontend TypeScript — for type-safe, reliable code Google Gemini AI (gemini-2.0-flash) — as the core intelligence behind ROBYY Firebase Hosting — for seamless, scalable deployment Firebase Authentication — for secure Google sign-in Web Speech API — for voice command and speech-to-text functionality

The architecture follows a clean separation of concerns:

geminiService.ts handles all AI API communication useVoice.ts manages voice recognition firebase.ts handles authentication and backend services

What I Learned

Building Ash AI was a crash course in real-world development. Here's what I picked up along the way:

Firebase & Hosting — how to configure, deploy, and manage a live web application on Firebase Hosting, including setting up authorized domains for authentication Gemini AI Integration — how to structure multi-turn conversations, handle document context, and pass inline data like PDFs to a generative AI model Voice Recognition — how to implement real-time speech-to-text using the Web Speech API and handle browser compatibility React & Vite — how to build a scalable component architecture and configure environment variables correctly for production builds API Security — the importance of securing API keys and the real-world consequences of exposing them in public repositories

Challenges I Faced

No project comes without its battles. Here are the toughest ones:

  1. API Key Security Early on, GitHub's secret scanning flagged my Google API key as exposed in the repository. This was my first real lesson in API security — I had to learn about environment variables, .gitignore, and key rotation on the fly.
  2. Deployment Differences My app ran perfectly in Google AI Studio but showed a blank page on GitHub Pages and later on Firebase Hosting. The root cause? Environment variables work differently in Vite (import.meta.env) vs Node.js (process.env), and GitHub Pages can't handle single-page app routing without extra configuration.
  3. API Quota Exhaustion During testing and deployment, I hit quota limits on the Gemini API free tier across multiple projects. This taught me how to manage API keys effectively and plan for rate limiting in production apps.
  4. Firebase Authentication Domain Issues After switching to a new hosting URL, Google sign-in stopped working because the new domain wasn't added to Firebase's authorized domains list — a subtle but critical configuration step.

What's Next

Secure API key management using Firebase Functions as a backend proxy Mobile-responsive design improvements Custom domain deployment Memory and personalization features for returning users Usage tracking and premium tier support

Built with curiosity, persistence, and a lot of debugging. — Ashish Kumar Rai

Built With

  • cmd
  • css-frameworks-&-libraries-react
  • firebase-authentication
  • github
  • google-cloud-platform-database-cloud-firestore-apis-google-gemini-ai-api
  • html
  • languages-typescript
  • node.js
  • vite-cloud-services-&-platforms-firebase-hosting
  • web-speech-api-other-tools-git
Share this project:

Updates