↑ ↓ navigate↵ selectesc close

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

CodingCat.dev tutorial cover image
Alex Patterson
Alex Patterson

Spinning up a full-stack web environment with cloud emulators, preview URLs, and AI-assisted scaffolding usually means hours of local Docker and environment variable wrangling. Following the announcement of Announcing Gemini 2.5 in Firebase Studio by Aja Hammerly, Ali Satter on the Official Firebase Blog (2025-05-07), here is our hands-on CodingCat.dev breakdown of what actually shipped, how it works under the hood, and how we wire it into production TypeScript, Next.js, Astro, 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 sales planners. Today, Firebase is 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.

The Mental Model: Why Announcing Gemini 2.5 in Firebase Studio Matters for Web Devs

As a Google Developer Expert (GDE) for Firebase and Senior Solutions Engineer at CodingCat.dev, I evaluate every Firebase update through one lens: does it reduce boilerplate while keeping our runtime security and cloud bills predictable? Firebase Studio unifies cloud workspaces, Gemini-powered prototyping agents, and one-click Firebase App Hosting deploys so you can move from an initial architecture prompt to a live SSR web app in a single browser tab.

AJ Pro-Tip from Alex: Treat prototypes generated in Firebase Studio like any other production repo: commit your idx/dev.nix workspace configuration, lock down your environment secrets in Cloud Secret Manager, and wire up CI/CD branch previews before inviting real users.

How It Works: Technical Breakdown & Implementation

Using Firebase Studio with Gemini 2.5

Gemini 2.5 is 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, like the Bell test, double-slit experiment, quantum tunneling experiment, and two-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 the 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.

The Firebase team 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 simple Mancala game. 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

The Firebase team 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.

Show Me the Code: TypeScript & Web SDK Setup

Here is the production baseline pattern we use at CodingCat.dev when wiring 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 we are deploying on Firebase 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 using Firebase 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, Astro, SvelteKit, and Angular serialize state cleanly without hydration flickers.

Conclusion

Accelerate your full-stack web and AI development by pairing Announcing Gemini 2.5 in Firebase Studio with strict Security Rules, Firebase App Check, and local emulator testing. Come tell us on X (@CodingCatDev) and LinkedIn (CodingCat.dev) how you are using Firebase in your stack, and subscribe to the CodingCat.dev YouTube Channel so you don't miss what we build next!

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 session Firebase SQL with Data Connect below, and make sure to Subscribe to CodingCat.dev on YouTube for weekly full-stack web and AI deep dives:

Resources, Official Docs & Related CodingCat.dev Guides

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 by the Firebase team) enhances the 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, Firebase is 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 primary announcement on the Firebase Blog alongside our implementation patterns and production checklist above.

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, and Firebase 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 the CodingCat.dev YouTube Channel, including Firebase SQL with Data Connect, and follow us on X (@CodingCatDev) for weekly full-stack tutorials.