AI in action: Adding AI-powered reviews in Firebase: Web Architecture & Implementation Guide

Firebase shipped AI Logic, a client-side SDK that lets web and mobile apps call Gemini and Imagen models without exposing API keys, according to a Firebase blog post by Alexander Nohe and Jeff Huleatt. Requests are routed through a proxy that holds the credentials and are gated by Firebase App Check attestation, and the SDK can fall back to on-device models such as Chrome's Gemini Nano. CodingCat.dev's breakdown demonstrates the feature in a Friendly Eats app that suggests a star rating as a user types a review, with the suggestion overridable by the reviewer.

Original: https://codingcat.dev/post/firebase-2025-10-adding-ai-powered-reviews https://codingcat.dev/post/firebase-2025-10-adding-ai-powered-reviews Calling frontier multimodal models directly from a web or mobile client is a security minefield if you expose raw API keys or hardcode brittle system prompts in your frontend bundle. Following the announcement of AI in action: Adding AI-powered reviews by Alexander Nohe, Jeff Huleatt on the Official Firebase Blog https://firebase.blog/posts/2025/10/adding-ai-powered-reviews/ 2025-10-01 , 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. Sometimes, the best AI feature is a subtle one. In our Friendly Eats app, we wanted to automatically suggest a star rating as a user wrote their full review. This not only reduces the friction of submitting a review, but had the unexpected benefit of helping users understand how others might perceive their review. As a Google Developer Expert GDE for Firebase and Senior Solutions Architect 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 AI Logic lets you invoke Gemini and Imagen models from client and edge apps using the Firebase Web SDK while keeping your API credentials off the wire, enforcing Firebase App Check, and managing server-side prompt templates centrally. AJ Pro-Tip from Alex: Combine Firebase AI Logic with server prompt templates, Firebase Remote Config feature flags, and project spend caps so you can iterate on prompts or swap Gemini models instantly without redeploying your Next.js or Astro frontend. As the user types in the dialog, the star rating automatically updates based on the content of their review. Importantly, the suggested star rating can also be overridden, because we want the reviewer to have the final say Read on to see what decisions we made to implement this new feature. We chose to use a client side SDK, in this case Firebase AI Logic. The primary reason that we chose to use Firebase AI Logic is to protect our Gemini API key. Using a server side SDK will also protect the API keys, but considering that we are not pulling in massive amounts of data and are just running quick inference, we decided to settle on Firebase AI Logic. First, Firebase AI Logic lets us use an on-device model if one is available, like Chrome’s Gemini Nano. That can help limit a significant number of calls to our Gemini API key. Remote Gemini calls made with AI Logic go through a proxy before reaching the Gemini model endpoints. The proxy stores the API keys so that we don’t need to include our Gemini API key in the client-side code. We can then make requests to the proxy and the proxy validates your app and forwards the API keys to the appropriate endpoint either Vertex AI with a service account or Google Generative AI with an API key . Another feature that Firebase AI Logic provides which helps keep our endpoints secure from abuse is automatic integration with Firebase App Check to ensure that requests originating to our AI endpoints come from your app. This is done through an attestation provider like ReCaptcha Enterprise and its invisible attestation mechanism. It may add a few ms before the first request to Gemini in the app, but is otherwise seamless to the user. Picking a model is a tradeoff between cost, speed, and quality. Normally, I start using the largest model and work my way down to the smaller models to determine whether the trade offs from a larger model to a smaller model make sense. Since we are really just asking for a small output of a star rating between 1 and 5, it’s likely that the smaller models will provide the results that we are looking for without the cost and slower performance of a larger model. If the star rating is off, we can fall back on our functionality that lets the reviewer update the rating themselves. We narrowed down our choices to Gemini Nano https://developer.chrome.com/docs/ai/get-started from the Hybrid SDK https://firebase.google.com/docs/ai-logic/hybrid-on-device-inference?api=dev and Gemini 2.5 Flash Lite https://cloud.google.com/vertex-ai/generative-ai/docs/models/gemini/2-5-flash-lite as the fallback option. This allows us to default to the built in AI API for users on supported browsers while falling back to Gemini Flash Lite for our other users. This decision can help us keep costs down for providing this feature as there is no cost for using Gemini Nano from the Hybrid SDK and the cost of Gemini 2.5 Flash Lite is much lower than other models while providing an acceptable amount of fidelity. We made two important decisions to design the most reliable prompt we could. First, we used structured output https://firebase.google.com/docs/ai-logic/generate-structured-output?api=dev so we only receive a JSON value containing the star rating back from the model. This helps prevent overly verbose responses for why a star rating was given,constraining the outputs to something that we can parse in our client code. The second thing we did to increase the accuracy was give examples in our prompt to guide our model on what we would consider a high rating versus a low rating. This is a great way to tune responses to better fit the culture of your app’s userbase. Based on the supplied review, translate the review to a star rating that is equivalent: <example <input The food was wonderful and I really enjoyed the amazing experience</input <output 5</output </example <example <input I can say for certain I will never eat here again</input <output 1</output </example Input : ${userInput} We are using Firestore to store our reviews and restaurants. Firestore is secured using Firestore security rules. While our original app implementation still needed robust security rules, we did not need to change anything from the original implementation to this implementation as we are not using any new methods to update the reviews. Having said that, we think it’s important to call out what robust security rules would look like for submitting a new review, so I have included what those look like here: rules version = '2'; service cloud.firestore { match /databases/{database}/documents { // ommitting for brevity match /restaurants/{restaurantId} { // ommitting restaurants rules for brevity // Ratings: // - Authenticated user can read // - Authenticated user can create if userId matches // - Deletes and updates are not allowed default match /ratings/{ratingId} { allow read; allow create: if request.auth = null && request.resource.data.text = "" && request.resource.data.rating in 1, 2, 3, 4, 5 ; allow update: if request.auth = null && request.resource.data.userId == request.auth.uid && request.resource.data.text = "" && request.resource.data.rating in 1, 2, 3, 4, 5 ; } } } } Here you can see that we do place constraints on the type of reviews that can be submitted. Since we are placing a high value on the text, we make sure that the text is not null. We also want to make sure that since the rating is AI generated, if the AI happens to return a value of six or even negative one, it cannot be written to the database and instead, we can enforce that the value is within an acceptable range through this data validation call. To wrap this up, Let's break down how the actual implementation of this review component looks without all the framework considerations involved and highlight the important parts of our implementation. To setup AI logic, we want to use the hybrid model experience where it relies on the browser model Gemini Nano and can fall back to the affordable flash lite model when the browser model is not available. python import getAI, GoogleAIBackend, getGenerativeModel, InferenceMode, Schema } import // Your web app's Firebase configuration const //... Config here. }; // Initialize Firebase const const // Setup the output schema const properties: { starRating: Schema. description: format: } , } } ; // setup the generative model calls. const mode: InferenceMode.PREFER ON DEVICE, inCloudParams: { model: generationConfig: { responseMimeType: responseSchema: jsonSchema }, }, onDeviceParams: { promptOptions: { responseConstraint: jsonSchema, } } } ; Here you can see that we initialize Firebase AI logic, much the same way that we initialize other services by first getting the AI logic singleton through a call to getAI . Once we have the AI singleton, we then declare the structured output schema that we are looking to use through calling Schema.object https://firebase.google.com/docs/reference/js/ai.schema . This helps us define the schema and guide the model to what each value corresponds to through the use of descriptions and additionally, we can provide optional format options to further specify the format of the response value. Finally, we make a call to getGenerativeModel https://firebase.google.com/docs/reference/js/ai.md getgenerativemodel c63f46a which allows us to specify our options for our requests. Since it still takes time to process the inputs into the generative model, we generally don’t want to overload the model with requests on every single key press. Instead, what we want to do is send a request after a set amount of time 500 ms or longer from the last key press and if a new keypress has started, cancel the existing requests by cancelling the timeout request. js let const switch case case case case return default break } timeoutIds. timeoutIds const // Ommitted logic for generating stars here... }, timeoutIds. }; const reviewBox?. Here we ignore the keys that do not change the input for requests which are the modifier keys. After we ignore those keys and return early from the handleKeyUp function, we clear the timeout using the browsers clearTimeout function and empty the list of timeouts that we are waiting on. We then start a new timeout that runs inference on the user’s input which we will see in the next section and add that back to the timeouts array. Here we are actually running the code that runs inference. js const Based on the supplied review, translate the review to a star rating that is equivalent: <example <input The food was wonderful and I really enjoyed the amazing experience</input <output 5</output </example <example <input I can say for certain I will never eat here again</input <output 1</output </example Input : const result. console. const console. ratingPicker. } . console. } ; As you can see, this is a call to generateContent from our previously defined model which we then parse the JSON for to get our structured output. Once we have that, You can call a function to update the star value In your application. While the code snippets above show the feature in a Typescript format, we thought we would share the implementation as a react component here: python " import import import getAI, getGenerativeModel, GoogleAIBackend, InferenceMode, Schema, } import // Initialize the Firebase AI Logic client SDK const { // Your web app's Firebase configuration } ; const // Set up the schema and model const properties: { starRating: Schema. description: } , }, } ; const mode: InferenceMode.PREFER ON DEVICE, inCloudParams: { model: generationConfig: { responseMimeType: responseSchema: starSchema, }, }, onDeviceParams: { promptOptions: { responseConstraint: starSchema, }, }, } ; // Call the generative model and return the generated star rating async const Based on the supplied review, translate the review to a star rating that is equivalent: <example <input The food was wonderful and I really enjoyed the amazing experience</input <output 5</output </example <example <input I can say for certain I will never eat here again</input <output 1</output </example Input : const const return } function let return clearTimeout timer }; } function const const const const debounce console. setGeneratingRating const setGeneratingRating setStars }, ; useEffect if generateStarRating } }, generateStarRating, reviewText ; return < < id className value onChange placeholder autoFocus < rating setRating setStars / {generatingRating && <span Automatically generating a rating</span } </ ; } export export rating, setRating, } rating setRating } { return < < < { < < type id name value checked onChange / < & </ </ } </ < </ ; } Note: You’ll see we pass setRating into the Stars component. That lets reviewers override the AI suggestion if they don’t agree with it. This is an important pattern for any AI suggestion feature. Whether we are deploying on Firebase App Hosting https://firebase.google.com/docs/app-hosting , Cloudflare Workers, or Vercel, shipping AI features to production requires defense-in-depth across three layers: Accelerate your full-stack web and AI development by pairing AI in action: Adding AI-powered reviews with strict Security Rules, Firebase App Check, and local emulator testing. Come tell us on X @CodingCatDev https://x.com/CodingCatDev and LinkedIn CodingCat.dev https://www.linkedin.com/company/codingcatdev how you are using Firebase in your stack, and subscribe to the CodingCat.dev YouTube Channel https://www.youtube.com/@CodingCatDev?sub confirmation=1 so you don't miss what we build next Want to see how we architect and debug Firebase web applications live? Watch our related CodingCat.dev session Firebase SQL with Data Connect https://youtu.be/N25khadfUag below, and make sure to Subscribe to CodingCat.dev on YouTube https://www.youtube.com/@CodingCatDev?sub confirmation=1 for weekly full-stack web and AI deep dives: AI in action: Adding AI-powered reviews announced 2025-10-01 by the Firebase team enhances the platform for Firebase, Google Cloud, Web Dev, AI, React, TypeScript, Security workloads. Sometimes, the best AI feature is a subtle one. In our Friendly Eats app, we wanted to automatically suggest a star rating as a user wrote their full review. This not only reduces the friction of submitting a review, but had the unexpected benefit of helping users understand how others might perceive their review. Developers can review the primary announcement on the Firebase Blog https://firebase.blog/posts/2025/10/adding-ai-powered-reviews/ alongside our implementation patterns and production checklist above. Web developers can integrate these features using the modular Firebase JavaScript/TypeScript SDK, Firebase Data Connect web bindings, and Firebase App Hosting https://firebase.google.com/docs/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. You can watch our hands-on Firebase video walkthroughs on the CodingCat.dev YouTube Channel https://www.youtube.com/@CodingCatDev?sub confirmation=1 , including Firebase SQL with Data Connect https://youtu.be/N25khadfUag , and follow us on X @CodingCatDev https://x.com/CodingCatDev for weekly full-stack tutorials.