Gemini with Firebase vertex AI in React App

Editor’s Note: This blog is an edited transcript of Anubhav’s engaging talk at the GeekyAnts React Native Meetup 2025. As the co-founder of Callchim.ai, Anubhav shared his unique journey from web development to machine learning and cloud platforms, weaving together expertise in Gemini, Vertex AI, Firebase, and React. His session provided practical insights into simplifying AI integration in modern applications while sharing real-world considerations and use cases.

Good evening, everyone!

Let’s dive into something exciting: Gemini, Vertex AI, Firebase, and React—a powerful mix of technologies that are revolutionizing the way we build applications. I will walk you through what these tools offer, and how they can work together, and share some live demos to make it all crystal clear.

Before we get started, let’s address the elephant in the room: why does an AI enthusiast like me love talking about React? Well, my journey began as a web developer, long before the Bootstrap era. Web development is where my heart lies, and incorporating AI into it is my way of keeping things fresh and innovative.

For those unfamiliar, Gemini is Google’s cutting-edge large language model (LLM), designed to rival OpenAI’s GPT models and other competitors like Claude and LLaMA. What sets Gemini apart is its grounding feature, which allows the model to access real-time information before generating a response. This resolves one of the biggest limitations of traditional LLMs: their reliance on outdated training data.

Imagine asking a typical LLM for the current time—it won’t know because it wasn’t trained for real-time scenarios. With Gemini’s grounding, queries can include live context, enabling accurate, real-world responses.

Here’s another standout feature: 2 million context tokens. This means Gemini can process and analyze vast amounts of data—equivalent to 50,000 Wikipedia articles—before generating a concise, meaningful output. Whether you’re dealing with domain-specific knowledge or hours of video transcripts, Gemini’s capabilities are unparalleled.

While Gemini is the star ML model, Vertex AI is the platform that brings it to life. Originally launched as a Google Cloud Platform (GCP) service, Vertex AI offers developers a suite of tools to train, fine-tune, and deploy AI models at scale.

Here’s what makes Vertex AI special:

• Flexibility: Deploy both Google’s models, like Gemini, and third-party open-source LLMs like LLaMA or Mistel.
• Ease of Use: With one-click deployment, even complex AI models become production-ready.
• Scalability: Auto-scalable and load-balanced endpoints ensure reliability, no matter the user demand.

During the session, I demonstrated how to integrate Vertex AI with React using Firebase. This combination simplifies the traditionally complex process of initializing and authenticating AI tools, making it accessible to developers across the board.

Firebase is a versatile backend service platform that simplifies hosting, authentication, and real-time database management, making it a go-to choice for developers. Its seamless integration with tools like Vertex AI enhances its utility, enabling projects that combine AI and React to function effortlessly. Supporting diverse use cases, from real-time chat applications to data-intensive AI integrations, Firebase offers unmatched flexibility. Additionally, its robust open-source community provides abundant resources to tackle challenges. Having frequently hit the free project limits myself, I can confidently say Firebase’s capabilities are a testament to its immense value for developers.

For the demo, I showed how to build a simple app integrating Firebase, Vertex AI, and Gemini. Here’s the quick setup:

1. Create a React + TypeScript project using Vite:

2. Add Firebase and Firebase Tools:

3. Initialize Firebase and Vertex AI:

Next, I demonstrated how to configure Firebase to connect with Vertex AI. With just a few lines of code, you can initialize the generative AI model and start making API calls to Gemini.

Here is a snippet of the main integration:

The result? A dynamic app capable of generating AI responses in real time, without the hassle of managing separate API keys or SDKs.

1. Know When to Use AI: Don’t force AI into your app just because it’s trendy. Ensure it adds genuine value to the user experience.
2. Budget Wisely: Services like Vertex AI require a paid Firebase Blaze Plan for production use. Start with Google AI Studio for free development and testing before scaling up.
3. Embrace React’s Versatility: While not perfect, React remains one of the most developer-friendly frameworks, especially when paired with Firebase.

Combining Gemini, Vertex AI, Firebase, and React opens doors to endless possibilities. Whether you’re building an intelligent chatbot, a real-time recommendation system, or any AI-powered app, this tech stack simplifies the journey from idea to production.

Before I wrap up, let me leave you with this thought: AI isn’t the future—it’s the present. The question isn’t whether to adopt it, but how to use it effectively.

Thank you for your time! Feel free to explore the demo and code repo linked below. Let’s keep pushing the boundaries of what we can achieve with AI and React!