> Canonical URL: https://codingcat.dev/post/firebase-2025-05-building-ai-apps

# Building AI-powered apps with Firebase AI Logic: Web Architecture & Implementation Guide

![CodingCat.dev tutorial cover image](https://cdn.sanity.io/images/hfh83o0w/production/ee3224dc507d4601c4e7ad683a9388f54f6f6c73-1200x630.svg?w=1200&q=82&fit=max&auto=format)[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)May 21, 2025

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 **Building AI-powered apps with Firebase AI Logic**  by Thevi Sundaralingam, Dmitry Lyalin, Miguel Ramos on the [**Official Firebase Blog**](https://firebase.blog/posts/2025/05/building-ai-apps/) (2025-05-20), 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: As of August 2026, Vertex AI in Firebase is now called Firebase AI Logic and Vertex AI Gemini API is now called Agent Platform Gemini API.

## The Mental Model: Why Building AI-powered apps with 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? 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.

## How It Works: Technical Breakdown & Implementation

Firebase’s mission is to help you transform your apps with the power of generative AI. We’re continuing to invest in robust frameworks, SDKs, and tooling to help streamline integrating AI experiences in your apps.

Previously, the Firebase team introduced [**Vertex AI in Firebase**](https://firebase.blog/posts/2024/10/vertex-ai-in-firebase-ga), enabling mobile and web apps to access the Vertex AI Gemini API on the client side. We also launched [**Genkit**](https://firebase.blog/posts/2025/02/announcing-genkit), designed for leveraging Gemini and other models in server-side scenarios. Together, these offerings help you build robust AI-powered solutions.

### Meet Firebase AI Logic

In this release, the Firebase team is launching the evolution of Vertex AI in Firebase to Firebase AI Logic.

Easily integrate generative AI into your apps, either directly via client-side access without setting up a backend, or through Genkit for robust server-side implementations

As part of this evolution, we’re also launching new features for both Firebase AI Logic client integration and the Genkit framework:

- On the client side: You now have access to the Gemini Developer API, hybrid and on-device inference capabilities, support for Unity, image generation and editing with Gemini, and enhanced observability in AI monitoring dashboards.
- On the server side: For Node.js, you can use Genkit to do dynamic model lookup to use the latest Gemini models without updating packages.

For more details, keep reading below.

### Build client-side integrations directly in your apps

Firebase AI Logic client-side integrations enable a variety of rich AI-powered scenarios without needing a custom backend.

Thousands of apps in production today use these client-side integrations, such as:

- [**Meal Planner**](https://play.google.com/store/apps/details?id=com.yinqs.weeklymealplanner&hl=en_US): a meal planning and shopping list management app
- [**Life**](https://play.google.com/store/apps/details?id=com.hitbytes.minidiarynotes): an AI-powered diary assistant
- [**Waveful**](https://play.google.com/store/apps/details?id=app.waveful&hl=en_US): a social media app for creators.

Firebase is launching multiple new features to provide more flexibility with Gemini integrations and expanded platform support.

You now have the choice to use the Gemini Developer API, in addition to the long-available Vertex AI Gemini API. Now, when you access Google’s generative AI models directly from your apps, you can choose the API provider that’s the best fit for your specific requirements:

- The Gemini Developer API is the easiest way to get started with generative AI in your app. It has a no-cost tier to let you prototype quickly without friction and upgrade to the paid tier when you’re ready to launch to production. This functionality is released in Preview.
- The Vertex AI Gemini API remains the go-to for apps needing enterprise-grade features. When availability, scalability, governance, and robust performance are critical for production apps, Vertex AI is built for those demands. Support for the Vertex AI Gemini API is already available in GA.

You can start with the Gemini Developer API and if your needs grow, you can then transition smoothly to the Vertex AI Gemini API. Switching between them is designed to be seamless - often just a change in how you initialize the service.

```
import
import

@Composable
fun
  var

  LaunchedEffect

    val
    // This is code needed for using Vertex AI Gemini API instead of Developer API
    // val model = Firebase.ai(backend = GenerativeBackend.vertexAI())
    //           .generativeModel("gemini-2.0-flash")

    val

    output
  }
  MagicBackpackUI
}
```

Understanding how AI features are performing is crucial. Your AI monitoring dashboards that were already available for Genkit to also now supports requests through the Firebase AI Logic client SDKs. You’ll get valuable insights into usage patterns, performance metrics, and debugging information for your Gemini API calls - helping you create a better experience for your users.

Many of you in the game development community have asked for Unity support. The Firebase team announced the Preview of the Firebase AI Logic SDK for Unity so that you can integrate generative AI into games and Android XR experiences.

```
using
using
using

var

var
var
UnityEngine.Debug.
```

This SDK is in parity with other Firebase AI Logic SDKs, so you can generate text, images, and even build conversational AI experiences using the bidirectional streaming [**Gemini Live API**](https://firebase.blog/posts/2025/04/vertex-ai-updates).

Since earlier this year, you could access Imagen models client-side for high-quality text-to-image generation. Now, you have client-side access to even more image generation capabilities (and image editing) through the Gemini models. With Gemini’s multimodal capabilities, you can build more complex image interactions.

```
import
import
...

final
    modelName
);
final

Future
  final
    Content
    generationConfig
      responseModalities
    ),
  );
  return
}

final
  "Generate a beautiful sunset image over mountains with orange and purple sky"
);
final
  "Now transform that sunset into a beautiful sunrise with yellow and pink colors"
);

// Display images in your UI
```

While accessing cloud models is essential for many tasks, running AI directly in the browser offers significant advantages, like more privacy and supporting off-line scenarios. To give you the flexibility of on-device AI using Gemini Nano for web apps running on Chrome, Firebase is launching experimental support for hybrid inference through Firebase AI Logic.

How does it work? When your web app is running on a desktop Chrome browser (capable of running Gemini Nano locally), the SDK will attempt to run inference directly on the device. If on-device inference isn’t possible, the SDK automatically and seamlessly falls back to a cloud-hosted Gemini model. To enable this “hybrid” approach, you need to set `mode: "prefer_on_device"` when you instantiate your model.

### Build server-side AI experiences with Genkit

While Firebase AI Logic client SDKs excel at simplifying client-side model access, many AI applications require server-side flexibility and integration. For these scenarios, we offer Genkit, our powerful open-source framework that supports server-side development in Firebase AI Logic.

Genkit provides you with robust AI capabilities and dedicated tooling for JavaScript (Node.js), Python, and Go. In case you aren’t yet familiar with [**Genkit**](https://genkit.dev/), here are some key features:

- Broad model support: Connect seamlessly to models from Google, OpenAI, Anthropic, Ollama, and more through a unified, consistent interface.
- Streamlined AI development: Implement powerful capabilities including structured output generation, automatic tool calling, RAG, human-in-the-loop workflows, and agentic systems.
- Developer experience first: Leverage the Genkit CLI and Developer UI for rapid local testing, debugging with comprehensive tracing, and robust evaluation of AI features.
- Privacy and control: Protect sensitive prompts and maintain full control by keeping logic and data handling on your server.
- Deployment anywhere: Deploy to Cloud Functions for Firebase, Firebase App Hosting, Cloud Run, or any environment supporting the runtime of your choice.

You can also quickly prototype apps powered by Genkit using [**Firebase Studio**](https://firebase.studio/) - create any app that has an AI feature and switch to code view to see exactly how Genkit works in an app.

Genkit is expanding its language support to include [**Go (Beta) and Python (Alpha)**](https://firebase.blog/posts/2025/04/genkit-python-go/). The beta release for Go brings improved API stability and new capabilities as it rapidly approaches feature parity with our production-ready JavaScript SDK. Genkit for Python is now available in Alpha, providing early access for experimentation and community feedback as we shape its future direction.

With the rapid improvements and releases of new models, you can now more easily use the latest models and their features without needing to update any packages. This capability is already available for Google AI, Vertex AI, and Ollama plugins for Genkit JS (v1.8+), and it’s coming to Genkit’s other languages and most popular third-party model providers soon.

```
import

const

const
  prompt:
  model: googleAI.
    thinkingConfig: {
        thinkingBudget:
        includeThoughts:
    },
  })
});
```

These plugin updates also enhance the Genkit Developer UI experience. The latest Gemini models and any locally installed open source models automatically appear in the model and prompt runners, making exploration and comparison effortless.

Additionally, Developer UI runners now surface model-specific parameters to easily explore powerful features like code execution and multi-modal responses.

### Share feedback!

You can reach us on these channels:

- For Genkit, file issues for problems or new features on our [**GitHub**](https://github.com/firebase/genkit), or visit our [**Discord**](https://discord.com/invite/qXt5zzQKpc) to interact directly with the team and show us what you’re building.

## Production Web Architecture & Security Checklist

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:

- **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**](https://firebase.google.com/docs/app-check).
- **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 **Building AI-powered apps with Firebase AI Logic**  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!

## 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**](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:

## Resources, Official Docs & Related CodingCat.dev Guides

- **Primary Release Source: ** [Building AI-powered apps with Firebase AI Logic on the Official Firebase Blog](https://firebase.blog/posts/2025/05/building-ai-apps/) (published 2025-05-20 by Thevi Sundaralingam, Dmitry Lyalin, Miguel Ramos)
- **Official Firebase Documentation: ** [Firebase Developer Docs & Web SDK Reference](https://firebase.google.com/docs/web/setup)
- **Related on CodingCat.dev: [Announcing Gemini 2.5 in Firebase Studio](/post/firebase-2025-05-announcing-gemini-25-in-firebase-studio)**
- **Related on CodingCat.dev: [Data Connect Updates](/post/firebase-2025-05-dataconnect-io-updates)**
- **Related on CodingCat.dev: [Firebase SQL with Data Connect](/podcast/firebase-sql-with-data-connect)**
- **Related on CodingCat.dev: [Build a Custom No-Code App in 90 Minutes](/podcast/build-a-custom-no-code-app-in-90-minutes)**

## Frequently Asked Questions (FAQ)

### What are the key capabilities introduced in Building AI-powered apps with Firebase AI Logic?

Building AI-powered apps with Firebase AI Logic (announced 2025-05-20 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, AI, TypeScript workloads. Update: As of August 2026, Vertex AI in Firebase is now called Firebase AI Logic and Vertex AI Gemini API is now called Agent Platform Gemini API. Developers can review the primary announcement on the [**Firebase Blog**](https://firebase.blog/posts/2025/05/building-ai-apps/) alongside our implementation patterns and production checklist above.

### How do web developers use Building AI-powered apps with 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**](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.

### 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**](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.

## Recent Posts

[View More](/blog/page/1)[![PHP2Shell (CVE-2026-109618): How AI Found a Decade-Old Bug in 70% of the Web](https://cdn.sanity.io/images/hfh83o0w/production/e83065d0a4e2f841ce64d3f4aea8ddbbf07e5cb9-1376x768.jpg?w=1376&q=82&fit=max&auto=format)](/post/php2shell-cve-2026-109618-ai-php-security-scramble)

### [PHP2Shell (CVE-2026-109618): How AI Found a Decade-Old Bug in 70% of the Web](/post/php2shell-cve-2026-109618-ai-php-security-scramble)

October 22, 2026

Two critical pre-authentication RCE flaws in PHP (CVE-2026-109618 and CVE-2026-109619), uncovered by AI models from OpenAI and Google Gemini, sparked a global patching scramble across 70% of the web. Here is how PHP2Shell works and how to patch your servers.

[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Sanity Knowledge Bases](https://cdn.sanity.io/images/hfh83o0w/production/38b0f021c51d97043c8a1ebf31d505a0ea877b7c-2752x1536.jpg?w=1920&q=82&fit=max&auto=format)](/post/sanity-knowledge-bases)

### [Sanity Knowledge Bases](/post/sanity-knowledge-bases)

October 17, 2026

Eliminate query-time guessing in your AI agents. Learn how Sanity Context Knowledge Bases compile structured datasets, crawled documentation websites, and uploaded files ahead of time, resolve conflicting facts, and serve a compact outline over Context MCP.

[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)