↑ ↓ navigate↵ selectesc close

Add AI features to your app using Gemini CLI and Firebase AI Logic: Web Architecture & Implementation Guide

CodingCat.dev tutorial cover image
Alex Patterson
Alex Patterson

If you have ever watched an AI coding agent hallucinate deprecated Firebase v8 syntax or deploy wide-open Firestore rules, you know that raw LLM prompts are not enough for production backends. Following the announcement of Add AI features to your app using Gemini CLI and Firebase AI Logic by Andrew Peynado, Tri Cao on the Official Firebase Blog (2025-10-08), 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. Update: Gemini CLI has transitioned to Antigravity CLI.

The Mental Model: Why Add AI features to your app using Gemini CLI and Firebase AI Logic 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? Instead of relying on stale training weights, wiring up the Model Context Protocol (MCP) and structured Firebase agent skills gives your IDE or CLI direct, schema-aware tools to provision resources, inspect security rules, and run deterministic CLI deployments.

AJ Pro-Tip from Alex: Never let an autonomous coding agent push Firestore or Data Connect rules straight to production without a gate. Always require the agent to run your test suite against the Firebase Local Emulator Suite first, and audit every generated rule for strict request.auth.uid ownership checks.

How It Works: Technical Breakdown & Implementation

If you previously installed the Firebase extension for Gemini CLI, you can migrate it to Antigravity CLI using the instructions in Migrate the Firebase extension from Gemini CLI to Antigravity CLI.

For more details about the sunset, see the transition announcement.

The Firebase team announced our new Firebase extension for Gemini CLI, which provides a powerful, integrated way to work with your Firebase projects and codebase directly from your terminal. In addition to automating Firebase setup, it also streamlines feature development, allowing Gemini CLI to implement AI features in your app, such as analysis of multimodal input and nano banana image generation directly in your application code for you.

Start adding AI features to your apps

The new Firebase extension for Gemini CLI comes bundled with the Firebase MCP server. It includes a new /firebase:init command which helps the Gemini CLI set up Firebase AI Logic and add the AI feature into your actual codebase. Firebase is launching with support for web, Flutter, and Android apps to ensure a wide range of developers can take advantage of this new agentic workflow.

Adding an AI feature to your mobile and web applications is now as simple as three steps:

Some best practices using /firebase:init:

  • Since Gemini is non-deterministic, account for some variation in the experience across sessions. You can remind it to check its instructions if it makes mistakes.
  • If you encounter any errors, share them with Gemini CLI so it can help fix them.
  • Frequently commit snapshots of your code, especially before making major changes to your app.
  • Test your code before deploying to production.

Walking through the experience

Make sure that you have the latest version of Gemini CLI installed. Then, install the new Firebase extension, which provides the Gemini CLI with access to the Firebase MCP tools and prompts.

Next you trigger the /firebase:init prompt and select the Firebase AI Logic option. Gemini CLI sets up a Firebase project for you, registers apps in your Firebase project based on your platform, enables the Gemini Developer API, and adds the necessary SDK initialization code to your application.

Lastly, you describe, in natural language, the AI feature you want to implement, sharing any relevant context about where the feature should be added into your app and how it should behave. The /firebase:init prompt provides the Gemini CLI with applicable code snippets for AI Logic so that Gemini can combine them with its knowledge of your codebase to implement your requested feature.

Show Me the Code: TypeScript & Web SDK Setup

Here is the production baseline pattern we use at CodingCat.dev when wiring Add AI features to your app using Gemini CLI and Firebase AI Logic 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 Add AI features to your app using Gemini CLI and Firebase AI Logic 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 Add AI features to your app using Gemini CLI and Firebase AI Logic?

Add AI features to your app using Gemini CLI and Firebase AI Logic (announced 2025-10-08 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, AI, MCP, TypeScript workloads. Update: Gemini CLI has transitioned to Antigravity CLI. Developers can review the primary announcement on the Firebase Blog alongside our implementation patterns and production checklist above.

How do web developers use Add AI features to your app using Gemini CLI and Firebase AI Logic 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.