Announcing Gemini 2.5 in Firebase Studio: Web Architecture & Implementation Guide

Original: https://codingcat.dev/post/firebase-2025-05-announcing-gemini-25-in-firebase-studio

Announcing Gemini 2.5 in Firebase Studiomarks an important milestone for full-stack web and AI engineers building on Firebase and Google Cloud. Following the official announcement by Aja Hammerly, Ali Satter on theFirebase Blog(2025-05-07), this hands-on CodingCat.dev implementation guide breaks down how to adopt these capabilities in modern TypeScript, Next.js, SvelteKit, React, and Angular applications. Since we launched the preview of Firebase Studio a few weeks ago, many of you have already used it to create over 1.5 million workspaces. It’s amazing to see the apps that you’ve published across a wide variety of use cases, from e-commerce sites, CRM tools, and games, to interview coaches, educational tutors, and sale

Why Announcing Gemini 2.5 in Firebase Studio Matters for Full-Stack Web Developers

When evaluating every new Firebase release for our production web apps and Google Developer Expert (GDE) architecture reviews, the first question is always how it improves developer velocity, runtime security, and end-user latency in the browser and on the server.Since we launched the preview of Firebase Studio a few weeks ago, many of you have already used it to create over 1.5 million workspaces. It’s amazing to see the apps that you’ve published across a wide variety of use cases, from e-commerce sites, CRM tools, and games, to interview coaches, educational tutors, and sales planners. Today, we’re making the applications you generate with Firebase Studio even better by enhancing its built-in App Prototyping agent to use Gemini 2.5, Google’s most powerful AI model. All Firebase Studio preview users now have access to Gemini 2.5 when prototyping applications.

Using Firebase Studio with Gemini 2.5

Gemini 2.5is a powerful thinking model, capable of reasoning about prompts and problems in much more sophisticated ways. It is particularly good at coding tasks and performs very well on several benchmarks of coding capabilities. Upgrading Firebase Studio‘s App Prototyping agent to use Gemini 2.5 has brought many positive changes, and we’ll highlight a few of them here.

First, applications created with the newest version of the application prototyper have improved UI. The designs it creates use modern web design principles and layouts. Here’s one example:

Gemini 2.5’s thinking capabilities and improved performance on coding tasks are integral to how Firebase Studio helps you create and edit more complex applications, including those involving multi-step AI flows, mathematical calculations, sound, images, and more.

Exploring some example apps

Talking about the new capabilities is nice, but experiencing what’s possible is more fun. Let’s look at just a few of the example applications we created with the App Prototyping agent in Firebase Studio and Gemini 2.5.

This interactive music tutor app was built in less than ten minutes, including a lesson catalog to help beginner, intermediate, and advanced users learn to play a musical instrument. Using only natural language prompts, we initially generated the app to teach piano lessons. It was fascinating to see how the App Prototyping agent automatically constructed a few sample lessons and found the appropriate JavaScript libraries it needed to generate the piano sounds. We then prompted the agent to expand the number of lessons and add support for violin, which it did with ease. But we found an issue, we noticed that the violin sound wasn’t quite right on the first try. After tweaking the prompt from a general request to “make it sound like a real violin” to a more specific request to “lengthen the vibration of the violin strings,” the music tutor app was ready to teach violin lessons.

This app helps manage the user’s daily schedule and to-do list in under 30 minutes. First, it retrieves your tasks from your Google Workspace task list and your appointments from your Google Calendar. Next, it schedules your tasks around your appointments, breaking up any large tasks into smaller, more manageable pieces, and optionally adds them to your calendar. The App Prototyping agent not only integrated the Tasks and Calendar APIs, but it also gave the developer instructions on how to set up OAuth in the Google Cloud console.

With this app, we imagined an engaging, educational experience that explains quantum physics phenomena, including the concepts involved, a visualization, and a way to run experiments. It was impressive to see how little prompting was needed, three to be exact, for the App Prototyping agent to produce multiple detailed and interactive tutorials, likethe Bell test,double-slit experiment,quantum tunneling experiment, andtwo-qubit simulator. The app supports using different configurations of two particles to see how they affect each other.

We also wondered what would happen if we took a real-world task, like managing our team’s social media posts. Within 10 minutes, we created a social media collaboration app that helps organize social media posts. It includes features for getting AI suggestions for optimal posting time, adding and modifying scheduled posts, categorizing posts, and managing the calendar. A particularly nice touch is a feature that lets you get AI recommendations on the optimal time to schedule a post. On the other hand, the initial version of the calendar feature had a layout that required scrolling down to view each day’s list of posts on a larger screen. So we prompted the App Prototyping agent to redesign the feature to be easier to read and within seconds, the updates were ready and refreshed in the app preview.

We created an app with a built-in, visual programming environment in about 20 minutes. This app allows users to combine different components to build AI enhanced workflows for different tasks, and examine and debug the system at every stage in the workflow. It is using AI agents to build an environment to build more AI agents, all in natural language. In this example, the app uses a weather API to help plan outdoor adventures that are suitable for the current conditions.

We test drove building an app in under 10 minutes that uses AI to generate and tailor workout plans based on multiple different inputs. The user could choose their fitness level, muscle groups, age group, and schedule availability, and the app generates the plan based on those inputs. Unlike other apps that rely on dummy data to create the different workout plans, we wanted to see how creative this app could be. So we delegated all workout plan creation to an AI flow. It was fun to try the different variations as we generated each tailored workout plan based on our chosen criteria.

And of course we built a lot of games. Below is a simpleMancalagame. The initial prompt was just “mancala” and that generated a two person version of the game. A second prompt “play against the AI” created the functionality below and then the developer spent about 10 minutes iterating on the color scheme and UI, including adding a dark mode.

Enhancing developer productivity

We’ve made additional improvements to Firebase Studio App Prototyping agent, including UI optimizations to better support developers creating applications on mobile.

We’ve also used Gemini 2.5’s thinking capabilities to provide more detailed explanations about the changes Gemini is making to files in your project as you iteratively improve and add features to the applications you create.

Summary

We’ll continue to integrate new Gemini models and AI capabilities into Firebase Studio to improve the product and address your feedback. We encourage you to try the improved App Prototyping agent, powered by Gemini 2.5. Share your creations with us on social media using #FirebaseStudio, and reach out to our team in theforumswith any feedback or questions.

TypeScript & Web SDK Implementation Pattern

Here is the baseline configuration pattern for integrating Announcing Gemini 2.5 in Firebase Studio into a modern TypeScript web application:

import { initializeApp } from "firebase/app";
import { getAI, getGenerativeModel, GoogleAIBackend } from "firebase/ai";
import { initializeAppCheck, ReCaptchaEnterpriseProvider } from "firebase/app-check";

const app = initializeApp({
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
});

// Protect AI endpoints in web apps with Firebase App Check
if (typeof window !== "undefined") {
  initializeAppCheck(app, {
    provider: new ReCaptchaEnterpriseProvider(process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!),
    isTokenAutoRefreshEnabled: true,
  });
}

const ai = getAI(app, { backend: new GoogleAIBackend() });
export const geminiModel = getGenerativeModel(ai, { model: "gemini-2.5-flash" });

Production Web Architecture & Security Checklist

Whether you are deploying onFirebase App Hosting, Cloudflare Workers, or Vercel, shipping AI features to production requires defense-in-depth across three layers:

• Enforce Firebase App Check & Attestation:Protect your web endpoints, Cloud Functions, Data Connect GraphQL resolvers, and Firebase AI Logic calls against unauthorized replay or billing abuse usingFirebase App Check with reCAPTCHA Enterprise.
• Validate Locally with the Firebase Emulator Suite:Run deterministic integration tests against local Firestore, Auth, Functions, and Data Connect PostgreSQL emulators before promoting schema or rule changes to production.
• Keep Server & Client Boundaries Type-Safe:Use the modular Firebase Web SDK and generated TypeScript bindings so SSR frameworks like Next.js, SvelteKit, and Angular serialize state cleanly without hydration flickers.

Watch Our Related Firebase Video Tutorial on YouTube

Want to see how we architect and debug Firebase web applications live? Watch our related CodingCat.dev sessionFirebase SQL with Data Connectbelow, and make sure toSubscribe to CodingCat.dev on YouTubefor weekly full-stack web and AI deep dives:

Resources, Official Docs & Related CodingCat.dev Guides

• Primary Release Source:Announcing Gemini 2.5 in Firebase Studio on the Official Firebase Blog(published 2025-05-07 by Aja Hammerly, Ali Satter)
• Official Firebase Documentation:Firebase Developer Docs & Web SDK Reference
• Related on CodingCat.dev:Atomic Data Modifications for Data Connect
• Related on CodingCat.dev:Building AI-powered apps with Firebase AI Logic
• Related on CodingCat.dev:Firebase SQL with Data Connect
• Related on CodingCat.dev:Build a Custom No-Code App in 90 Minutes

Frequently Asked Questions (FAQ)

What are the key capabilities introduced in Announcing Gemini 2.5 in Firebase Studio?

Announcing Gemini 2.5 in Firebase Studio (announced 2025-05-07) enhances the Firebase platform for Firebase, Google Cloud, Web Dev, AI workloads. Since we launched the preview of Firebase Studio a few weeks ago, many of you have already used it to create over 1.5 million workspaces. It’s amazing to see the apps that you’ve published across a wide variety of use cases, from e-commerce sites, CRM tools, and games, to interview coaches, educational tutors, and sales planners. Today, we’re making the applications you generate with Firebase Studio even better by enhancing its built-in App Prototyping agent to use Gemini 2.5, Google’s most powerful AI model. All Firebase Studio preview users now have access to Gemini 2.5 when prototyping applications. Developers can review the official release notes on theFirebase Blogalongside the implementation patterns in this guide.

How do web developers use Announcing Gemini 2.5 in Firebase Studio with Next.js, SvelteKit, React, or Angular?

Web developers can integrate these features using the modular Firebase JavaScript/TypeScript SDK, Firebase Data Connect web bindings, andFirebase App Hosting. Always pair client-side SDK initialization with Firebase App Check and strict Security Rules, and test locally with the Firebase Local Emulator Suite before deploying.

Where can I watch video tutorials on Firebase Web and AI development?

You can watch our hands-on Firebase video walkthroughs on theCodingCat.dev YouTube Channel, includingFirebase SQL with Data Connect, and browse our complete Firebase tutorial archive on CodingCat.dev.