DEV Community: Alex Patterson

Data Connect: All About Schemas in Firebase: Web Architecture & Implementation Guide

Alex Patterson — Sat, 31 Oct 2026 15:01:20 +0000

Original: https://codingcat.dev/post/firebase-2025-02-dataconnect-schemas

For years, choosing Firebase meant trading away relational SQL joins, strict foreign keys, and pgvector similarity search in favor of NoSQL document denormalization. Following the announcement of Data Connect: All About Schemas by Andrea Wu on the Official Firebase Blog (2025-02-11), 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. Note: Firebase Data Connect has been renamed to SQL Connect. Learn more in the SQL Connect announcement.

The Mental Model: Why Data Connect: All About Schemas 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 Data Connect bridges that gap by pairing a managed Google Cloud SQL for PostgreSQL instance with a declarative GraphQL schema compiler that automatically generates type-safe TypeScript, React, and Angular SDKs alongside server-enforced @auth directives.

AJ Pro-Tip from Alex: Keep your authorization logic inside your Data Connect GraphQL operations using @auth(level: USER) and server-evaluated expressions like auth.uid and request.time rather than trusting client-supplied user IDs in query variables.

How It Works: Technical Breakdown & Implementation

Many apps need to store persistent data, and most of the time, that data needs to be organized in a structured way. With Data Connect, you model your app data using schemas, and this blog post dives into what schemas are and how to use them.

We’ll use the movie review app example you might already know from the documentation and our previous deep-dive blog posts.

Declaring a Schema

Firebase Data Connect schemas are defined using GraphQL. The key components of GraphQL schema definitions are:

@table directive, which includes the optional arguments of naming convention and key(s)

Here is an example from the movie tracker app:

A type type definition, letting GraphQL know this is declaring a type (other examples of type definitions are query and mutation)
A directive @table which signifies creation of a schema

Within the @table directive, there are a few optional fields:

name: defines the table name; by default, the table name is the schema name
singular: for implicit queries and mutations, this defines the name that gets used in the query / mutation that requires this table
plural: for implicit mutations, this defines the name that gets used in the mutation that requires this table
key: an optional list for the name of the table’s key(s)

By default, the singular naming convention will be the name of the table with a lower case first letter, and the plural one will be the singular with a “s” at the end. You only need to use singular or plural to adjust the name if it is different than the default.

Similarly, the key by default will be named id, and you do not need to declare this when you declare a schema.

Removing all of the defaults, the above declaration can be simplified to:

Anatomy of a Schema

Now that you know how to declare a schema, how does a schema in its entirety look like? It is broken down into the following parts:

Declaration to create a schema, as described in the previous section

Here is an example schema for movies, written verbosely with all optional fields present except the schema declaration as covered above:

type
  id: UUID! @col(name: "movie_id") @default(expr: "uuidV4()")
  title: String! @col(name: "title")
  releaseYear: Int @col(name: "release_year") @index
  genre: String @col(name: "genre", dataType: "varchar(30)")
  rating: Int @col(name: "rating")
  description: String @col(name: "description")
}

Each line is the name of a column along with the data type of that column. Any data type followed by! means this attribute is required. Data Connect supports a wide range of data types, some of which are in this code snippet like UUID, String, and Int. UUID is a special data type that indicates that this is a unique ID, which is useful for keys.

You will also see @col, @default, and @index directives:

@col explicitly sets column information, including names and data type. The genre column is named “genre” with the String data type of at most 30 characters. By default, the first word of each line becomes the column name, so you only need @col(name: “...” if you want a different name.
@default lets you set default values. In the example above, an id defaults to a UUID generated by uuidV4().
@index defines a database index to optimize query performance. To create a single field SQL index, put @index on a @col field. You can specify order, but this doesn’t matter much for single field indexes as they can be scanned in both directions. To define a composite index, You can put @index(fields: [...]) on @table and define an order for each indexed column, defaulted to ASC. Above, releaseYear would be ordered in ascending order whereas rating would be ordered in descending order.

Removing all of the defaults, the above can be simplified to:

type
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  releaseYear: Int @index
  genre: String @col(dataType: "varchar(30)")
  rating: Int
  description: String
}

Key Scalars

For databases optimized for speed, key scalars are an efficient way to identify objects. Data Connect automatically assembles these identifiers from key fields in your schemas, and the resulting scalars provide information about data identity and structure, accessible within a single cell. Key use cases include:

sequential operations: key scalars serve as unique identifiers for new records, simplifying subsequent operations
relational operations: key scalars provide access to relational keys, enabling more complex data manipulations

Server Values

Sometimes, your app might need server-computed values because the values need to be computed at the time of data creation. You can do this by using server values, where the server dynamically populates fields in your tables using stored or readily-computable values according to particular server-side expressions. For example, you can define a field with a timestamp applied when the field is accessed using the expression createdAt: Timestamp! @default(expr: "request.time"). This might be used when a user creates their account, so the schema could look like this:

type
  // other fields
  createdAt: Date! @default(expr: "request.time")
}

Relationships Between Tables

A big part of using relational databases is (surprise!): relationships between tables, and Data Connect lets you do that. Here is an in-depth blog post on how to define one-to-one, one-to-many, and many-to-many relationships in your schemas.

Production Web Architecture & Security Checklist

Whether we are deploying on Firebase App Hosting, Cloudflare Workers, or Vercel, shipping SQL 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 Data Connect: All About Schemas 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

*Primary Release Source: *Data Connect: All About Schemas on the Official Firebase Blog (published 2025-02-11 by Andrea Wu)
*Official Firebase Documentation: *Firebase Developer Docs & Web SDK Reference
Related on CodingCat.dev: How Relationships Work in Data Connect
Related on CodingCat.dev: Announcing Firebase Genkit 1.0 for Node.js
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 Data Connect: All About Schemas?

Data Connect: All About Schemas (announced 2025-02-11 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, SQL workloads. Note: Firebase Data Connect has been renamed to SQL Connect. Learn more in the SQL Connect announcement. Developers can review the primary announcement on the Firebase Blog alongside our implementation patterns and production checklist above.

How do web developers use Data Connect: All About Schemas 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.

Firebase A/B Testing is now available for the web: Web Architecture & Implementation Guide

Alex Patterson — Sat, 31 Oct 2026 14:52:55 +0000

Original: https://codingcat.dev/post/firebase-2026-03-ab-testing-for-web

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 Firebase A/B Testing is now available for the web by Sumit Chandel, Athira Manu on the Official Firebase Blog (2026-03-04), 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. In this update, the Firebase team announced that Firebase A/B Testing is now available for the web!

The Mental Model: Why Firebase A/B Testing is now available for the web 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

Firebase has long offered a simple way to run A/B tests for mobile apps, and now, powered by Google Analytics and Firebase Remote Config, Firebase is bringing that same functionality to the web. This means that all of the benefits of A/B Testing, like easily being able to run, analyze and scale product and marketing experiments to optimize your app experiences that lead to massive growth in user retention and app revenue for mobile apps, are now available for your web apps too.

If you’ve ever wondered which version of your web content, feature, or design will best resonate with your users, or how to optimize app retention based on your app onboarding flow or in-app engagements, running an A/B test is the way to go.

Why use Firebase A/B Testing?

**Achieve your business goals **Firebase A/B Testing provides direct insight into how app changes affect your most critical business metrics. Out-of-the-box tracking for user retention, revenue, and user engagement, combined with Google Analytics integration lets you see exactly how user actions shift within each experiment.

**Roll out changes with confidence **Using the frequentist statistical method, Firebase A/B Testing helps you identify the best-performing variation and confirms if the results are statistically significant. This lets you to test, modify, and deploy updates without worrying about the potential repercussions of a new release.

**Empower your team without eating up engineering time **While A/B testing usually requires significant infrastructure, Firebase makes setup quick and easy. Once configured, anyone in your organization can run and analyze experiments, allowing your team to iterate faster and at a larger scale without constantly relying on engineering resources.

A/B Testing for Web use cases

With the above capabilities in mind, Let's break down some of the key use cases for the web where Firebase A/B Testing can help you move beyond guesswork and make data-backed decisions that drive real impact:

**Test content variations: **Experiment with content headlines, blog post tones, product descriptions, layouts, and more depending on your app to see what resonates with your users most.
**Optimize user flows: **Improve critical user journeys by testing app onboarding and signup processes, checkout flows, navigation paths and more.
**Improve feature adoption: **Test different feature ideas and discover the most effective way to introduce a new feature to maximize its usage.
**Drive business goals: **Optimize for key metrics like conversions, revenue, user retention, and engagement.

Integrating Firebase A/B Testing into your web apps is easy - let’s walk through a couple of examples to see how it works in action.

An Example: Optimizing Blog Subscriptions

Let’s look at an example - say you have a blog post platform and want to optimize the subscriptions your users get for their blogs. To increase reader sign-ups, you offer the choice of two blog post styles for the post teaser and post content - a “technical” style and a “relatable storytelling” tone.

With Firebase A/B Testing for web, you can set up the experiment as follows:

*Baseline (Control): *blog_tone is set to "technical".
*Variant A: *blog_tone is set to "storytelling".

Integrating A/B Testing into Your Code

Let’s assume you’ve got two versions of your users’ blog posts on your server - one optimized for each tone. Optionally, you could even use an AI model to automatically generate the blog post teaser content for your users based on these tones as well. With that content ready, you can use **Firebase Remote Config **to power the variation logic, showing readers the version that drives better subscription rates.

Here’s a simplified JavaScript snippet showing how your web app fetches the blog_tone parameter and matching blog post content from your server. Also, don’t forget to include the Firebase SDK for Google Analytics in your application as well to track the metrics necessary for your A/B test!

import

const
const

const
const

Analyzing the Results

After a few days of letting the experiment run, you can check the Firebase console to view the results of the test.

The A/B Testing report shown in the following screenshot, drawing on Google Analytics data, clearly shows which blog tone led to better user retention.

This data empowers you to **confidently roll out the winning tone **to all users, directly impacting your users blog post subscription success and revenue.

While a quick summary is available in the Firebase console, you can also dive deeper using BigQuery. Just remember that only **Google Analytics events triggered by users participating in the A/B test **will include the associated experiment and variant information. This means you can run custom queries against the Analytics event tables to get detailed insights specific to the experiment.

Another Example: Test onboarding flows in your web app

Let’s look at another example - this time, let’s say you have a React web application and want to A/B test two (or three) different onboarding flows to see which one leads to the highest user retention in your app.

One way to do this would be to create a Remote Config custom hook with useState and useEffect to retrieve the A/B test variant parameter values and let that drive the UI changes in your app to test out different onboarding flows or other layouts.

First, let’s set up the experiment similar to what we did in the previous example for optimizing blog post subscriptions:

*Baseline (Control): *onboarding_flow is set to "standard".
*Variant A: *onboarding_flow is set to "new_design".

Now you can create a useRemoteConfig custom hook that you can use to fetch variant values to drive the flows or layouts in your app:

import
import
import

export
    // Initialize with defaultValue so the app renders immediately
    const

    useEffect
        // If Firebase isn't initialized (e.g. server-side), do nothing
        if

        const
            try
                await
                const
                console.
                setValue
            } 
                console.
                // We don't need to setValue here because it's already set to defaultValue
            }
        };

        fetchConfig
    }, [key, defaultValue]);

    return
}

Once created, you can use the new custom hook in the page where you want to test your onboarding flows:

import
import

// 1. Use React.lazy for code splitting
const
const

export
  // Using default "standard" to prevent flash of loading or just testing default
  const

  // onboardingFlow initializes to "standard" immediately.
  // The UI will transparently update if "new_design" is fetched in the hook.
  return
    // 2. Wrap lazy components in Suspense
    <
      {onboardingFlow === "new_design" ? (
        <ModernOnboarding />
      ) : (
        <StandardOnboarding />
      )}
    </
  );
}

From there, you can analyze the results similarly to the previous blog post subscription example by letting the experiment run for a few days and visiting the A/B testing results page in the Firebase console to see if there is a measurable difference between your onboarding flow variants.

Ready to Get Started?

Firebase A/B Testing for web empowers you to move beyond guesswork and make data-backed decisions that drive real impact. Whether you’re a developer, product manager or a builder this tool is invaluable for optimizing your web presence.

Ready to get started? Dive into the official documentation:

Firebase A/B Testing Documentation: https://firebase.google.com/docs/ab-testing
Firebase Remote Config Documentation: https://firebase.google.com/docs/remote-config
Google Analytics for Web: https://firebase.google.com/docs/analytics/get-started?platform=web

Also, try out Firebase A/B Testing for web in the Antigravity IDE! Just try asking the Antigravity IDE agent to design an A/B test for a component of your choice in your web app using Firebase A/B Testing and it should provide you with a reasonable implementation plan to get started!

Give web A/B testing a try and share your feedback. Let’s build better web experiences together! 🚀

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 Firebase A/B Testing is now available for the web 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 Building a web application with Next.js and Firebase - Firebase Summit 2021 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

*Primary Release Source: *Firebase A/B Testing is now available for the web on the Official Firebase Blog (published 2026-03-04 by Sumit Chandel, Athira Manu)
*Official Firebase Documentation: *Firebase Developer Docs & Web SDK Reference
Related on CodingCat.dev: Better code, fewer tokens: Introducing Agent Skills for Firebase
Related on CodingCat.dev: App Hosting has in-console environment variables and faster builds
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 Firebase A/B Testing is now available for the web?

Firebase A/B Testing is now available for the web (announced 2026-03-04 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, AI, MCP, React, TypeScript workloads. In this update, the Firebase team announced that Firebase A/B Testing is now available for the web! Developers can review the primary announcement on the Firebase Blog alongside our implementation patterns and production checklist above.

How do web developers use Firebase A/B Testing is now available for the web with Next.js, SvelteKit, React, or Angular?

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 Building a web application with Next.js and Firebase - Firebase Summit 2021, and follow us on X (@CodingCatDev) for weekly full-stack tutorials.

Better code, fewer tokens: Introducing Agent Skills for Firebase: Web Architecture & Implementation Guide

Alex Patterson — Sat, 31 Oct 2026 14:52:14 +0000

Original: https://codingcat.dev/post/firebase-2026-02-ai-agent-skills-for-firebase

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 Better code, fewer tokens: Introducing Agent Skills for Firebase by Luke Schlangen on the Official Firebase Blog (2026-02-17), 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. When you ask Antigravity, Gemini CLI, Claude Code, Cursor, or any other AI agent to “add a sign-in screen” to your app, the agent has to rely on its (possibly outdated) foundational training or burn tokens reading through documentation to find the right configuration. What if you could give your agent the right answer, right away?

The Mental Model: Why Better code, fewer tokens: Introducing Agent Skills for Firebase 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

In this release, the Firebase team is launching Agent Skills for Firebase to do exactly that.

What are Agent Skills?

We want to enable both human and AI developers to build and operate Firebase apps with greater velocity, security, and control. Agent Skills are specialized instructions and context that you can give to your preferred AI agents to help them understand the nuances of Firebase, then execute tasks more effectively.

Any AI agent that works with the Agent Skills specification can use Agent Skills for Firebase to write code that’s more accurate, secure, and ready for production.

Instead of an agent trying to process the entire Firebase documentation at once, Skills enable an agent to pull in only the information required for the task at hand. This reduces token consumption, lowers costs, and increases the accuracy of the agent’s output.

How do Agent Skills save tokens?

Without Agent Skills, adding domain-specific context often means giving your agent all of the information it needs right away. That could be thousands of tokens before the agent is prompted with a question.

With Agent Skills, you have more control. You can inform the agent of available domain-specific context by just giving a short description of the skills available. These descriptions need very few tokens. As the agent works, it can decide to ‘activate’ the skill when it’s presented with a task. If the skill isn’t used, it won’t eat up any additional tokens. If your agent does use the skill, it doesn’t consume all of the documentation at once. Your agent can keep reading more of the reference documentation in the skill, bit-by-bit, until it has the information it needs to complete the task. This way it only uses what it needs to use.

The fancy term for this is “progressive disclosure.”

Build and deploy full-stack web apps with ease

With our initial release, Agent Skills for Firebase are optimized specifically for full-stack web development. By using these Skills, your AI agent can now assist you with:

**Project and app setup: **Automatically setting up your Firebase project and configuring your app to use Firebase
**Authentication: **Adding sign-in screens and managing user flows.
**Firestore: **Architecting your database based on your app’s specific data needs.
**Security Rules: **Writing and deploying the security rules needed to protect your Firestore data from the start.
**Firebase App Hosting: **Deploying your web application in a single step.
Firebase AI Logic: Integrating Gemini-powered features to create intelligent, personalized user experiences.
**And more! **This isn’t the full list, and Firebase is adding support for more Firebase features soon!

These Skills provide the agent with the knowledge needed to build accurate and secure applications on the first try.

Choose the right path for AI assistance

Depending on your workflow and the tools you use, you might interact with Firebase through AI assistance in a few different ways. I recommend Firebase developers use Agent Skills for Firebase and Firebase MCP tools together.

Agent Skills and MCP are complementary offerings that should be used together. Think of this as the relationship between expertise (knowing how to do a task) and capability (having the ability to actually do it). Skills provide LLMs with authoritative expertise on how to use Firebase. MCP provides LLMs with tools to set up, configure, and use Firebase services. Agent Skills for Firebase can teach models how to effectively use the Firebase CLI and Firebase MCP tools to accomplish complex tasks efficiently.

**Agent Skills for Firebase: **Agent Skills provide the quick instructions and recommended practices that tell an agent how to perform Firebase tasks through token-efficient progressive disclosure. It educates AI agents to use tools like Firebase CLI and MCP server effectively.
**Firebase MCP server: **Designed for AI-assisted development workflows, enabling LLMs to interact with your Firebase projects, resources, and data programmatically.
**Firebase CLI: **A complete command-line tool for hands-on Firebase project and product management, deployment, and local development that can be automatically triggered by AI agents.

If you’re looking for a straightforward answer to the question, “Which one should I use?” I recommend all three. Giving your agent access to all of these tools enables it to choose the right tool for the job.

Dive deeper and tell us what you think

This space is changing fast, so stay tuned as we keep improving these tools. MCP was introduced 15 months ago, Agent Skills was introduced four months ago, and who knows what the next evolution will be in agent tooling. Whatever it is, we’ll be there to support Firebase developers building incredible applications with whatever tools they like best.

Show Me the Code: TypeScript & Web SDK Setup

Here is the production baseline pattern we use at CodingCat.dev when wiring Better code, fewer tokens: Introducing Agent Skills for Firebase 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 Better code, fewer tokens: Introducing Agent Skills for Firebase 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 Security Rules: Effortless control over your app's data. 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

*Primary Release Source: *Better code, fewer tokens: Introducing Agent Skills for Firebase on the Official Firebase Blog (published 2026-02-17 by Luke Schlangen)
*Official Firebase Documentation: *Firebase Developer Docs & Web SDK Reference
Related on CodingCat.dev: Boost accuracy with the prompt optimizer
Related on CodingCat.dev: Firebase A/B Testing is now available for the web
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 Better code, fewer tokens: Introducing Agent Skills for Firebase?

Better code, fewer tokens: Introducing Agent Skills for Firebase (announced 2026-02-17 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, AI, MCP, Security workloads. When you ask Antigravity, Gemini CLI, Claude Code, Cursor, or any other AI agent to “add a sign-in screen” to your app, the agent has to rely on its (possibly outdated) foundational training or burn tokens reading through documentation to find the right configuration. What if you could give your agent the right answer, right away? Developers can review the primary announcement on the Firebase Blog alongside our implementation patterns and production checklist above.

How do web developers use Better code, fewer tokens: Introducing Agent Skills for Firebase with Next.js, SvelteKit, React, or Angular?

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 Security Rules: Effortless control over your app's data., and follow us on X (@CodingCatDev) for weekly full-stack tutorials.

Data Connect Queries: From Definitions to Client Code in Firebase: Web Architecture & Implementation Guide

Alex Patterson — Sat, 31 Oct 2026 14:48:45 +0000

Original: https://codingcat.dev/post/firebase-2025-05-dataconnect-queries-defs-to-client-code

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 Data Connect Queries: From Definitions to Client Code by Andrea Wu on the Official Firebase Blog (2025-05-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. Note: Firebase Data Connect has been renamed to SQL Connect. Learn more in the SQL Connect announcement.

The Mental Model: Why Data Connect Queries: From Definitions to Client Code 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

A big part of any database solution is seamlessly getting information that you may need for your app. With Data Connect, you set up schemas to model your data, and then you make queries on that data. This blog post will dive into queries, and we’ll assume that you are familiar with schemas. Feel free to read the Data Connect documentation if you need a reminder.

We’ll use the movie review app example you might already know from the documentation and our previous deep-dive blog posts.

What is a Data Connect query?

A Data Connect query is a GraphQL query: an operation that asks about specific fields from a backend datastore defined by your schema. You write queries in GraphQL, and you can use queries:

in your client apps, only after you’ve deployed the queries to production
for ad hoc execution from privileged environments like the Visual Studio Code extension, the Firebase console, and the Firebase Admin SDK. Deployment of the queries is not required for these actions.

Declaring a Query

These are the parts of a query definition in GraphQL:

Zero, one, or more than one operation argument

Here is an example to list all movies by genre:

A query type definition, letting GraphQL know this is a query
A ListMoviesByGenre operation (query) name
A single variable $genre operation argument of the String type. Every query argument requires a type declaration, a built-in supported data type like String, or a custom, schema-defined type like Movie_Key (which is a key scalar).
A single directive, @auth, which specifies only logged-in users, can execute this query. For this movie data that’s appropriate for public viewing, the PUBLIC level is sufficient authorization.

Anatomy of a Query

Now that we know how to declare a query, what does a query in its entirety look like? It is broken down into the following parts:

Declaration to create a query, as described in the previous section
Tables from which the query needs to get data

Here is an example query to get all movies of a particular genre ordered by highest rating to lowest:

query 
  mostPopular: 
     where: { genre: { eq: $genre } }, orderBy: { rating: DESC }
  ) {
    id
    title
    genre
    description
  }
}

The first line is described in the “Declaring a Query” section. Let's break down the other important pieces:

movies specifies the table in the schema from which the query needs to get data
where and orderBy are filters applied to retrieving the data
id, title, genre, and description are the fields to be returned by this query for all of the movies that fit the genre

Directives

Let’s talk about directives - like @auth. Data Connect has three directives for queries to define their behavior:

@auth defines the authentication policy, and it is required for the query to be accessible by client apps
@check verifies that specified fields are present in query results
@redact omits query results from the client’s response

For more information, there are more in-depth descriptions and resources in the documentation about directives for queries.

Generated Fields

When you create a schema, Data Connect’s local tooling automatically generates fields based on the types and type relationships in your schema. These generated fields are necessary for writing your own queries to be deployed and used in your client code, or run ad hoc in privileged environments

As an example of a generated field, say the Movie type is defined as:

type
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  releaseYear: Int @index
  genre: String @col(dataType: "varchar(30)")
  rating: Int
  description: String
}

With the schema definition, Data Connect generates fields for single-table use cases, as seen in query.gql. It creates a field to get:

a singular record from the Movie table, given the id for the movie. The field name is the same as the table name, unless otherwise defined - movie in this case.
a list of movies, given optional filtering conditions. The field name is the same as the table name with a “s” at the end, unless otherwise defined - movies in this case.

(In both of these tables, a directive that this blog post didn’t cover is @fdc_generated - you will never be writing this on your own, so don’t worry too much about it. It says which table the generated field is coming from and whether it’s querying for a single record or multiple records).

Data Connect also generates fields for multi-table, relational operations with explicit names. This will be in a future blog post, as there is a lot to cover.

Where can I find these fields?

With the Data Connect Visual Studio Code extension, there are several ways to see and use these generated fields after you begin editing your schema:

They are listed under the Schema Explorer
Their source is generated to dataconnect/.dataconnect/main/query.gql
They are browsable in automatic local documentation, accessible with the View reference docs link
They are incorporated into ad hoc queries generated when you click CodeLens buttons

Once you deploy your schema, you can view the generated fields with reference documentation in the Firebase console and use the data tab to prototype queries.

Using Generated Fields for Queries

With the generated fields, you can now write queries to retrieve the information needed for your app. Your client code can only use these queries and not the generated fields. Additionally, the client only gets to see the fields selected in queries. If there’s a secret field that you don’t want clients to see, then clients cannot see it since they don’t have direct access to the database.

For example, you can use the generated movie field to create your own query, where you pass in the movie id:

query 
  movie
    id
    title
    imageUrl
    genre
  }
}

For listing movies, you can use the generated movies field:

query ListMovies @
  movies {
    id
    title
    imageUrl
    genre
  }
}

Using queries

Now that you’ve defined your queries, you’re ready to use them in your app code. How do you do that? Data Connect automatically generates SDKs for you to use, bridging the gap between your queries defined in GraphQL and your application platform. You need to set up these generated SDKs, and then you can call the generated functions in your app code. Feel free to read about what generated SDKs are and how to use them in Data Connect.

Production Web Architecture & Security Checklist

Whether we are deploying on Firebase App Hosting, Cloudflare Workers, or Vercel, shipping SQL 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 Data Connect Queries: From Definitions to Client Code 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

Resources, Official Docs & Related CodingCat.dev Guides

*Primary Release Source: *Data Connect Queries: From Definitions to Client Code on the Official Firebase Blog (published 2025-05-01 by Andrea Wu)
*Official Firebase Documentation: *Firebase Developer Docs & Web SDK Reference
Related on CodingCat.dev: Angular and React Bindings for Data Connect
Related on CodingCat.dev: Atomic Data Modifications for Data Connect
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 Data Connect Queries: From Definitions to Client Code?

Data Connect Queries: From Definitions to Client Code (announced 2025-05-01 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, SQL, TypeScript, Security workloads. Note: Firebase Data Connect has been renamed to SQL Connect. Learn more in the SQL Connect announcement. Developers can review the primary announcement on the Firebase Blog alongside our implementation patterns and production checklist above.

How do web developers use Data Connect Queries: From Definitions to Client Code with Next.js, SvelteKit, React, or Angular?

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

Bridge the design to development gap with Builder.io and Firebase Studio: Web Architecture & Implementation Guide

Alex Patterson — Sat, 31 Oct 2026 14:48:44 +0000

Original: https://codingcat.dev/post/firebase-2025-09-firebase-studio-builder-io-design-development

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 Bridge the design to development gap with Builder.io and Firebase Studio by Kirupa Chinnathambi, Alice Moore on the Official Firebase Blog (2025-09-29), 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. At Google I/O Earlier, the Firebase team announced that Firebase Studio integrates with Builder.io to provide an AI-assisted workflow that automatically syncs your team’s designs and code as part of building production-scale applications. All of this is done fully from the comforts of your browser.

The Mental Model: Why Bridge the design to development gap with Builder.io and 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

In this post, let’s take a step back and look at some of the motivations for why we built this feature to greatly improve your workflow in building high-quality apps, especially when collaborating with users who use Figma.

Typical pain points of design to code

We can all agree on the following: Going from a polished design to a functional, coded application can be a winding, tedious path.

You translate static mockups into components, which can be a time-consuming and error-prone task that introduces inconsistencies. This gap between design and development (and product management!) can lead to design drift, where the final product doesn’t capture the nuance and precision of the original vision.

This can be visualized by Jessica Lascar’s excellent illustration we see below:

Plus, a static prototype, no matter how detailed, can’t fully represent a real, dynamic application. The following critical user experiences often come to light late in the development process:

This creates extra cycles, slows down iteration, and delays feature delivery.

To address these pain points, we want to give teams a better workflow. Many tools and processes have been tried over the past few decades, but we realized the right solution requires AI. However, while many first-gen AI tools attempt to solve the problem by analyzing screenshots, a vision-based approach is imprecise and doesn’t take advantage of the structured data within the design file.

We need to improve upon the initial AI-first approaches with a solution that respects your whole team’s hard work by reusing existing design tokens, component structures, and layout rules to generate clean, production-ready code. The solution shouldn’t just stop at a visual replica. It should create a real, backend-connected app that lets you find and fix edge cases from the start of design and development.

Our integration with Builder.io is our attempt at providing the first iteration of a better solution.

Figma + Builder.io + Firebase Studio = Win!

When it comes to design and UI development, Figma is the center of gravity. We wanted to start from here and ensure you and your team have a path to take your designs in Figma and translate them into working code. The bridge that takes designs from Figma into Firebase Studio is the Builder.io Figma plug-in.

Right now, you can use the plug-in from Figma…

…to export that output to Firebase Studio where your static visuals are transformed into a cohesive part of your fully functioning app:

For more details on how to make all of this work, check out the Firebase Studio documentation.

Since we released this capability, we have received great feedback on how you all are using the Builder.io / Firebase Studio integration. Two common use cases that we want to highlight are:

Ideas are no longer limited to being in static mockups or slides or documents. You can now take the next step and validate an idea as part of building a prototype that more of your team can interact with.

The following video (by an actual Product Manager!) walks you through how this works:

By building prototypes quickly, you can test user flows, discover edge cases related to empty states or loading behavior, and get concrete feedback from your team. What previously took days of team-wide back-and-forth can now be accomplished by a single person in a single afternoon, dramatically accelerating the feedback loop.

Designer-led iteration on existing projects

You and your team can also develop features in an already-established codebase.

Let’s say you need to make a visual tweak to a component. Instead of filing a ticket and waiting, you can open the project in Builder.io’s Visual Editor, make the change directly, and submit it as a pull request to the team’s GitHub repository.

A developer on your team can then check out that PR branch within Firebase Studio to review the code and test the changes in a live preview environment before merging.

This process empowers the entire team to contribute safely to the codebase while maintaining strict development standards. Also, because the workflow carries design tokens directly from Figma into the final code, teams can ensure brand consistency across all iterations, confident that colors, fonts, and spacing align with their established design system.

A better workflow

The Builder.io + Firebase Studio workflow makes the collaborative process between designers and developers more efficient.

**Designers **work in the environment they know best: Figma. They still get to craft the vision, but now they can see that vision as a truly interactive application instead of static screens. They can communicate their intent far more effectively than in a traditional “PowerPoint-style” prototype, ensuring the final product matches the design’s nuance and feel.

**Developers **can skip the boilerplate. Instead of manually translating design specs, they get clean code that respects the project’s existing architecture. They can start solving the hard engineering problems in a full-featured, VS Code-style IDE, focusing on business logic and performance rather than pixel-pushing.

**The entire app team **gets a single source of truth where design and code stay in sync. By eliminating the manual and error-prone work of UI implementation, you reduce the back-and-forth and wasted cycles. Everyone can collaborate in a shared, in-browser environment, leading to faster iteration, higher-quality output, and a more streamlined path from idea to production.

Get started with Builder.io and Firebase Studio

Together, Builder.io and Firebase Studio collapse the distance between a great idea in Figma and a deployed, full-stack application. Get started today to accelerate your own development cycles and ship better products, faster.

Kirupa Chinnathambi (@kirupa), Product Lead - Firebase Studio

Alice Moore (@tempoimmaterial), Developer Experience - Builder.io

Show Me the Code: TypeScript & Web SDK Setup

Here is the production baseline pattern we use at CodingCat.dev when wiring Bridge the design to development gap with Builder.io and 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 Bridge the design to development gap with Builder.io and 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

Resources, Official Docs & Related CodingCat.dev Guides

*Primary Release Source: *Bridge the design to development gap with Builder.io and Firebase Studio on the Official Firebase Blog (published 2025-09-29 by Kirupa Chinnathambi, Alice Moore)
*Official Firebase Documentation: *Firebase Developer Docs & Web SDK Reference
Related on CodingCat.dev: Get the most out of Firebase Studio’s default built-in model, Gemini 2.5 Pro
Related on CodingCat.dev: Unlocking Dynamic Experiences with Client-Side custom signals conditions in Firebase Remote Config
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 Bridge the design to development gap with Builder.io and Firebase Studio?

Bridge the design to development gap with Builder.io and Firebase Studio (announced 2025-09-29 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, AI, Security workloads. At Google I/O Earlier, the Firebase team announced that Firebase Studio integrates with Builder.io to provide an AI-assisted workflow that automatically syncs your team’s designs and code as part of building production-scale applications. All of this is done fully from the comforts of your browser. Developers can review the primary announcement on the Firebase Blog alongside our implementation patterns and production checklist above.

How do web developers use Bridge the design to development gap with Builder.io and Firebase Studio with Next.js, SvelteKit, React, or Angular?

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

Firebase + Gemini Code Assist: Web Architecture & Implementation Guide

Alex Patterson — Sat, 31 Oct 2026 14:47:38 +0000

Original: https://codingcat.dev/post/firebase-2025-03-gemini-code-assist

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 Firebase + Gemini Code Assist by Nathan Yim on the Official Firebase Blog (2025-02-25), 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. The Firebase team announced the availability of Gemini Code Assist for individuals at no cost and with high usage limits to support most daily use. Now in addition to no-cost AI assistance provided by Gemini in Firebase, you can get AI assistance in your IDE to build Firebase applications with higher velocity and quality - with 6,000 code completions and 240 chat interactions daily.

The Mental Model: Why Firebase + Gemini Code Assist 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

Last year, we introduced Gemini in Firebase to provide targeted assistance for Firebase developers in the Firebase console. Built on Gemini for Google Cloud and using a customized version of the Gemini model, Gemini in Firebase helps you:

answer your questions when getting started
generate boilerplate code when setting up Firebase SDKs
optimize or refactor Firebase-specific code
offer troubleshooting support to improve your app’s quality
analyze app crashes and provide recommended next steps
write GraphQL queries for Firebase Data Connect

However, we know you’re not always working in the console. For your work in the IDE, Gemini Code Assist completes your code as you write, generates code blocks and functions on demand, and gives you chat assistance using Gemini 2.0, optimized for coding use cases and context from your local codebase to offer relevant answers.

Gemini Code Assist is available in many popular IDEs, such as Visual Studio Code, JetBrains IDEs (IntelliJ, PyCharm, GoLand, WebStorm, and more), Cloud Workstations, and Cloud Shell Editor. It also supports many programming languages, including Java, Kotlin, Swift, JavaScript, Dart, C++, C#, Python, Go, and more.

Code creation is one step to getting code to production, and the next step is usually code reviews! With Gemini Code Assist for GitHub, which is now a GitHub app, you can get code reviews on pull requests for bugs and stylistic errors.

Paired with AI assistance in Firebase, you get a continuous, AI-powered loop of productivity, reducing context switching and streamlining the entire Firebase development lifecycle, all at no cost.

Show Me the Code: TypeScript & Web SDK Setup

Here is the production baseline pattern we use at CodingCat.dev when wiring Firebase + Gemini Code Assist 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 Firebase + Gemini Code Assist 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

Resources, Official Docs & Related CodingCat.dev Guides

*Primary Release Source: *Firebase + Gemini Code Assist on the Official Firebase Blog (published 2025-02-25 by Nathan Yim)
*Official Firebase Documentation: *Firebase Developer Docs & Web SDK Reference
Related on CodingCat.dev: Extracting structured data from PDFs using Gemini 2.0 and Genkit
Related on CodingCat.dev: February Update: What's New in Data Connect
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 Firebase + Gemini Code Assist?

Firebase + Gemini Code Assist (announced 2025-02-25 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, AI, TypeScript workloads. The Firebase team announced the availability of Gemini Code Assist for individuals at no cost and with high usage limits to support most daily use. Now in addition to no-cost AI assistance provided by Gemini in Firebase, you can get AI assistance in your IDE to build Firebase applications with higher velocity and quality - with 6,000 code completions and 240 chat interactions daily. Developers can review the primary announcement on the Firebase Blog alongside our implementation patterns and production checklist above.

How do web developers use Firebase + Gemini Code Assist with Next.js, SvelteKit, React, or Angular?

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

Monitor your Genkit features in production in Firebase: Web Architecture & Implementation Guide

Alex Patterson — Sat, 31 Oct 2026 14:46:53 +0000

Original: https://codingcat.dev/post/firebase-2025-03-monitor-genkit-features-in-production

Building AI features in TypeScript or Go quickly turns into spaghetti when you try to bolt structured output validation, tool calling, and OpenTelemetry tracing onto raw model API calls. Following the announcement of Monitor your Genkit features in production by Konstantin Mandrika, Alex Singer on the Official Firebase Blog (2025-03-18), 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. From summarizing text and generating images, to translation and helpful agents, generative AI is becoming commonplace in app development. With the launch of Firebase Genkit Node.js 1.0, Firebase is making it easier than ever to build generative AI features into your applications.

The Mental Model: Why Monitor your Genkit features in production 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 Genkit gives full-stack engineers strongly typed flows, dotprompt templates, local developer UI trace inspection, and production observability wired directly into Google Cloud and Firebase.

AJ Pro-Tip from Alex: Always wrap your Genkit flows with explicit Zod input/output schemas and enforce Firebase App Check attestation on callable endpoints so bots cannot rack up unauthenticated token spend.

How It Works: Technical Breakdown & Implementation

Building with LLMs requires skilled prompt engineering and configuration to ensure consistent and expected results. While Genkit’s local development tools are invaluable for building and refining production-ready features, unexpected issues can (and will!) pop up in real-world production scenarios. Issues like unexpected or delayed generations can negatively impact your end user’s overall experience. Production monitoring and observability is crucial to detect issues promptly and allow you to swiftly take action.

Luckily, Genkit is automatically instrumented to collect telemetry data and offers Firebase Genkit Monitoring - production grade tooling to let you monitor and observe your Genkit features in the Firebase console, to know that it’s working and delivering the expected experience for your end users. In this blog post, we’ll give a quick overview of the main features of Genkit Monitoring and how to get started.

Getting started with Genkit Monitoring

If you are new to Genkit, check out the Getting Started Guide for step-by-step instructions on building your first AI feature. Once your feature is built and ready for production, turning on telemetry export is a matter of installing the @genkit-ai/firebase plugin in your project:

Importing enableFirebaseTelemetry into your Genkit configuration file (the file where genkit(...) is initialized), and calling it:

import

enableFirebaseTelemetry

And redeploying your feature to production.

High-level overview of each Genkit-powered feature

After adding the Firebase telemetry plugin and deploying your Genkit feature, data is automatically written to GCP Logging, Trace, and Monitoring, and viewable in the Genkit Monitoring dashboard in the Firebase console. The landing page gives you a high level overview of the health of each of your Genkit features - showing metrics around usage, success rates, and p95 latency. This serves as the starting point to identify any issues that need additional investigation.

The metrics are also broken down by each of your Genkit features, including the input and output token count. In many cases, the token count is a good proxy for both cost and correctness of the feature. For example, a lower than expected token count is a signal that the LLM is providing a generic “I don’t know how to answer this” message, while a higher than expected token count is a signal that the LLM inference could use a better stop sequence. Some multimodal models count images via tokens while others via a discrete image metric - the Firebase Genkit Monitoring dashboard supports both.

Feature-specific telemetry

While the overview page provides a great high-level view, clicking on a specific Genkit feature that you’ve built brings up its details page with more granular telemetry and higher fidelity graphs. Want to know when your latency shot up or when the token usage increased? This page has you covered!

Tools to identify and debug issues

To understand and debug the root cause of problems, you need more than just metrics. This is especially true given Genkit’s capabilities to construct complex, multi-step AI features.

The Firebase Genkit Monitoring console makes debugging complex flows simple. The failed paths table displays all failed fragments of your Genkit feature, allowing you to quickly identify where in your code an error occurred. You can then use the traces table to filter into the specific failed invocations and quickly view trace attributes, including status, input, output, latency, and model set. These traces can be exported and used for evaluations directly within Genkit, facilitating feature iteration and improvement - this is especially useful in cases where getting a dataset during feature development is impossible or very difficult.

Debugging errors and quality-of-results issues requires a detailed view of each execution because the most interesting parts may be hidden inside.

Clicking a trace gives you a detailed view that allows you to explore each span in your Genkit feature and its respective attributes, including input and output. The trace viewer provides an intuitive and easily navigable view of the trace that helps you find exactly where in the flow the feature went awry. And in case you need to dig deeper or join with other application data, all trace, log, and metrics data is stored in GCP and can be accessed there!

The combination of the high level metrics and low level trace debugging capabilities of the Firebase Genkit Monitoring dashboard help you quickly identify and fix emerging issues, improve your features, and ultimately keep your customers happy.

Check out the Get Started with Genkit Monitoring documentation for our complete instruction guide.

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 Monitor your Genkit features in production 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

Resources, Official Docs & Related CodingCat.dev Guides

*Primary Release Source: *Monitor your Genkit features in production on the Official Firebase Blog (published 2025-03-18 by Konstantin Mandrika, Alex Singer)
*Official Firebase Documentation: *Firebase Developer Docs & Web SDK Reference
Related on CodingCat.dev: App Hosting updates: rollbacks, SDK auto-configuration, and more
Related on CodingCat.dev: Introducing the AI-Powered App Testing Agent
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 Monitor your Genkit features in production?

Monitor your Genkit features in production (announced 2025-03-18 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, AI workloads. From summarizing text and generating images, to translation and helpful agents, generative AI is becoming commonplace in app development. With the launch of Firebase Genkit Node.js 1.0, Firebase is making it easier than ever to build generative AI features into your applications. Developers can review the primary announcement on the Firebase Blog alongside our implementation patterns and production checklist above.

How do web developers use Monitor your Genkit features in production with Next.js, SvelteKit, React, or Angular?

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

Chrome Built-in AI and Gemini Nano: A Production Guide to the Prompt, Summarizer, and Rewriter APIs

Alex Patterson — Sat, 31 Oct 2026 14:44:51 +0000

Original: https://codingcat.dev/post/chrome-built-in-ai-gemini-nano-prompt-api-guide

For the past two years, adding a simple text summarizer, tone rewriter, or draft assistant to a web application meant standing up a server-side proxy, managing API keys, paying per million tokens, and eating a 450ms network roundtrip on every single user interaction. With Chrome Built-in AI shipping Gemini Nano directly inside the browser binary, web developers can now run foundation model inference on the user's local GPU or NPU with zero token cost, zero server egress, and full offline capability.

In this guide, we will break down how Chrome's Built-in AI architecture works under the hood, walk through the LanguageModel (Prompt API), Summarizer, Rewriter, and Translator Web APIs in TypeScript, and show how we wire up progressive model download telemetry and session cloning in Astro and React.

The Mental Model: Why Move Inference into the Browser Sandbox?

When you bundle your own WebAssembly or WebGPU weights per origin, every website forces the user to download a separate 1.5GB model file. Chrome Built-in AI solves the cold-cache problem at the browser level: Chrome downloads and updates a single shared Gemini Nano checkpoint managed by the browser'sOptimization Guide service, and exposes task-specific and general-purpose JavaScript interfaces to any origin that requests them.

Chrome Built-in AI API Surface Comparison

Rather than forcing every developer to write brittle system prompts for common text transformations, Chrome splits Built-in AI into high-level task APIs and the flexible LanguageModel Prompt API:

{
  "_key": "wai_tbl_8bf23065d5",
  "_type": "table",
  "rows": [
    {
      "_key": "wai_row0_a75c26a562",
      "_type": "row",
      "cells": [
        "Browser API",
        "Global Interface",
        "Primary Configuration Options",
        "Ideal Production Workload"
      ]
    },
    {
      "_key": "wai_row1_aa7d9df1f3",
      "_type": "row",
      "cells": [
        "Prompt API",
        "window.LanguageModel",
        "systemPrompt, initialPrompts, temperature, topK, responseConstraint (JSON Schema)",
        "Custom structured extraction, interactive chat, and classification with JSON Schema output constraints."
      ]
    },
    {
      "_key": "wai_row2_452a3e30f1",
      "_type": "row",
      "cells": [
        "Summarizer API",
        "window.Summarizer",
        "type ('key-points' | 'tldr' | 'teaser' | 'headline'), format ('markdown' | 'plain-text'), length",
        "Summarizing long documentation pages, podcast transcripts, or comment threads client-side."
      ]
    },
    {
      "_key": "wai_row3_d7da1c974e",
      "_type": "row",
      "cells": [
        "Writer & Rewriter APIs",
        "window.Writer / window.Rewriter",
        "tone ('more-formal' | 'more-casual' | 'as-is'), length ('shorter' | 'longer'), sharedContext",
        "Inline rich-text editor helpers in Sanity Studio, support ticket polishing, and PR descriptions."
      ]
    },
    {
      "_key": "wai_row4_d588c38edf",
      "_type": "row",
      "cells": [
        "Translator & LanguageDetector",
        "window.Translator / window.LanguageDetector",
        "sourceLanguage, targetLanguage (BCP-47 tags)",
        "Instant privacy-preserving localization of user-generated content without cloud translation fees."
      ]
    }
  ]
}

Step 1: Probing Availability and Handling Model Downloads

Never assume the local model weights are already cached on disk. Before calling LanguageModel.create(), always inspect LanguageModel.availability() (which returns 'available', 'downloadable', 'downloading', or 'unavailable') and attach a monitor callback to surface download progress in your UI:

// src/lib/ai/chrome-language-model.ts
export type BuiltInAvailability = "available" | "downloadable" | "downloading" | "unavailable";

export interface PromptSessionOptions {
  systemPrompt?: string;
  temperature?: number;
  topK?: number;
  onDownloadProgress?: (loadedRatio: number) => void;
  signal?: AbortSignal;
}

interface ChromeLanguageModelFactory {
  availability(options?: Record<string, unknown>): Promise<BuiltInAvailability>;
  params(): Promise<{ defaultTemperature: number; maxTemperature: number; defaultTopK: number; maxTopK: number }>;
  create(options?: Record<string, unknown>): Promise<ChromeLanguageModelSession>;
}

export interface ChromeLanguageModelSession {
  prompt(input: string, options?: { responseConstraint?: object; signal?: AbortSignal }): Promise<string>;
  promptStreaming(input: string, options?: { responseConstraint?: object; signal?: AbortSignal }): ReadableStream<string>;
  measureInputUsage(input: string): Promise<number>;
  readonly inputUsage: number;
  readonly inputQuota: number;
  clone(options?: { signal?: AbortSignal }): Promise<ChromeLanguageModelSession>;
  destroy(): void;
}

function getLanguageModelFactory(): ChromeLanguageModelFactory | null {
  const g = globalThis as unknown as {
    LanguageModel?: ChromeLanguageModelFactory;
    ai?: { languageModel?: ChromeLanguageModelFactory };
  };
  return g.LanguageModel ?? g.ai?.languageModel ?? null;
}

export async function createBrowserPromptSession(
  options: PromptSessionOptions = {}
): Promise<ChromeLanguageModelSession | null> {
  const factory = getLanguageModelFactory();
  if (!factory) return null;

  const status = await factory.availability();
  if (status === "unavailable") {
    return null;
  }

  const defaults = await factory.params();
  return await factory.create({
    systemPrompt:
      options.systemPrompt ??
      "You are a concise, code-first web architecture assistant on CodingCat.dev.",
    temperature: options.temperature ?? defaults.defaultTemperature,
    topK: options.topK ?? defaults.defaultTopK,
    signal: options.signal,
    monitor(m: EventTarget) {
      m.addEventListener("downloadprogress", (event: Event) => {
        const e = event as unknown as { loaded?: number; total?: number };
        if (typeof e.loaded === "number" && options.onDownloadProgress) {
          const ratio = e.total ? e.loaded / e.total : e.loaded;
          options.onDownloadProgress(Math.min(1, Math.max(0, ratio)));
        }
      });
    },
  });
}

Step 2: Structured JSON Output with responseConstraint and Session Cloning

Two of the most impactful capabilities in Chrome's Prompt API are responseConstraint (which forces Gemini Nano's token sampler to adhere strictly to a JSON Schema without hallucinating invalid syntax) and session.clone() (which forks the KV-cache of an initialized system prompt so you can process multiple items without re-evaluating the system context). Here is how we combine both to classify and tag technical tutorials client-side:

// src/lib/ai/classify-article-client.ts
import { createBrowserPromptSession } from "./chrome-language-model";

const TAG_EXTRACTION_SCHEMA = {
  type: "object",
  properties: {
    primaryPillar: {
      type: "string",
      enum: ["Courses", "Podcasts", "Blog"],
    },
    difficulty: {
      type: "string",
      enum: ["beginner", "intermediate", "advanced"],
    },
    technicalTags: {
      type: "array",
      items: { type: "string" },
      maxItems: 5,
    },
    oneSentenceSummary: {
      type: "string",
    },
  },
  required: ["primaryPillar", "difficulty", "technicalTags", "oneSentenceSummary"],
  additionalProperties: false,
};

export async function analyzeDraftInBrowser(markdownDraft: string) {
  const baseSession = await createBrowserPromptSession({
    systemPrompt:
      "Analyze developer tutorials for CodingCat.dev and extract structured metadata.",
  });

  if (!baseSession) {
    throw new Error("Chrome Built-in AI (Gemini Nano) is not available on this device.");
  }

  try {
    // Check token budget before prompting so we never blow the context window
    const tokenCost = await baseSession.measureInputUsage(markdownDraft);
    const remainingTokens = baseSession.inputQuota - baseSession.inputUsage;
    const boundedInput =
      tokenCost > remainingTokens ? markdownDraft.slice(0, 6000) : markdownDraft;

    // Clone the warm session so repeated runs reuse the system prompt KV cache
    const workerSession = await baseSession.clone();
    try {
      const rawJson = await workerSession.prompt(
        `Extract metadata for this draft:\n\n${boundedInput}`,
        { responseConstraint: TAG_EXTRACTION_SCHEMA }
      );
      return JSON.parse(rawJson);
    } finally {
      workerSession.destroy();
    }
  } finally {
    baseSession.destroy();
  }
}

Step 3: Streaming Key-Point Summaries with the Summarizer API

When you specifically need TL;DR bullet points or executive summaries on a Blog Post or Podcast Episode transcript, use window.Summarizer instead of the raw Prompt API. Chrome tunes the underlying LoRA / task prompt specifically for factual density:

// src/lib/ai/summarize-transcript.ts
export async function streamTranscriptKeyPoints(
  transcriptText: string,
  onChunk: (partialMarkdown: string) => void
): Promise<string> {
  const SummarizerApi = (globalThis as Record<string, any>).Summarizer;
  if (!SummarizerApi) {
    throw new Error("Summarizer API is not supported in this browser.");
  }

  const availability = await SummarizerApi.availability();
  if (availability === "unavailable") {
    throw new Error("Summarizer model is unavailable on this hardware.");
  }

  const summarizer = await SummarizerApi.create({
    type: "key-points",
    format: "markdown",
    length: "medium",
    sharedContext:
      "This is a technical software engineering tutorial from CodingCat.dev.",
  });

  try {
    const stream: ReadableStream<string> = summarizer.summarizeStreaming(transcriptText, {
      context: "Focus on architectural trade-offs, browser APIs, and production benchmarks.",
    });

    const reader = stream.getReader();
    let accumulated = "";
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      // Handle both cumulative and delta streaming implementations across Chrome releases
      accumulated = value.startsWith(accumulated) ? value : accumulated + value;
      onChunk(accumulated);
    }
    return accumulated;
  } finally {
    if (typeof summarizer.destroy === "function") {
      summarizer.destroy();
    }
  }
}

AJ Pro-Tip: User Activation and Context Quotas

**AJ Pro-Tip: Always Gate Model Creation Behind Transient User Activation. **When availability() returns 'downloadable', Chrome requires a transient user gesture (such as a click event) before LanguageModel.create() or Summarizer.create() will initiate the background weight download. Call availability() on page load to render your button state, and call create() inside the button's click handler while monitoring session.inputUsage / session.inputQuota so long conversations never overflow Gemini Nano's local context window.

Try the Live Browser AI & WebMCP Playground

You can test every pattern from this article live right now in our interactive Web AI & WebMCP Playground on CodingCat.dev, or inspect our production discovery manifests on the Developers & Agent APIs page. If you are organizing a developer conference or engineering summit, check out my Web AI talk abstracts on alexpatterson.dev and explore more hands-on Courses, Podcasts, and Blog Posts right here on CodingCat.dev.

Firebase Studio: Tips and Tricks: Web Architecture & Implementation Guide

Alex Patterson — Sat, 31 Oct 2026 14:43:01 +0000

Original: https://codingcat.dev/post/firebase-2025-05-studio-tips-tricks

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 Firebase Studio: Tips and Tricks by Jess Kuras on the Official Firebase Blog (2025-05-29), 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. If you’ve experimented with the preview of Firebase Studio, you likely know the basics: how to prompt the App Prototyping agent to iterate on your app idea, swap to code view to modify your code directly or debug issues, and publish your app with Firebase App Hosting. However, there are a lot of more subtle features built into Firebase Studio to make the app development lifecycle smoother and significantly quicker. This post will dive into practical tips and tricks to harness the full potential of Firebase Studio.

The Mental Model: Why Firebase Studio: Tips and Tricks 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

Design your way

They say a picture is worth a thousand words, in app design, it can save you a thousand prompts! Instead of wrestling with lengthy descriptions, why not show the App Prototyping agent exactly what you envision? Firebase Studio offers two intuitive ways to do this:

While in Prototyper mode, click the **Annotate icon **to draw directly on the preview window. Use the available shape and text tools to pinpoint exactly what you want the App Prototyping agent to change. It’s a quick and effective way to communicate visual feedback.

Have a wireframe, a specific color palette, or an inspirational image you want the App Prototyping agent to use as guidance? Click the **Attachment icon **to add an image to accompany your prompt. This option is available when writing your initial prompt, while iterating in Prototyper mode, or when using Gemini in Firebase in Code view.

Specify the element you want to change

Tired of trying to describe which button, icon, or text block you want to change? In Prototyper mode, click the Select icon, choose the specific element on your app’s preview, and then describe the change you want. This direct approach ensures the App Prototyping agent knows exactly what you’re referring to, saving you time and iterations.

When in doubt, roll back

Sometimes the App Prototyping agent misunderstands a prompt or introduces a difficult-to-solve bug. When that happens, it’s often easier to click **Restore **on a previous version of the app to quickly return to a previous state and try again. If you change your mind, you can always swap back to the most recent version by clicking **Restore **again.

Swap between Gemini models

In Code view, Gemini in Firebase can suggest code as you type, help debug issues, answer questions about your code, and even write and modify code for you. You can configure the Gemini model that Gemini in Firebase chat uses. You have a choice of the built-in model, models configured in the chat window (including Gemini 2.5 models), or any Gemini model to which you have access. For full instructions, check the documentation.

Collaborate with others

Need some help from a friend? Firebase Studio includes two ways to share your app-in-progress.

For deeper collaboration like pair programming or letting a teammate test thoroughly, Firebase Studio allows you to share your workspace with anyone who has a Google Account. It’s important to remember that this gives them access to your entire workspace, including any sensitive files, such as private keys and access tokens. So, only share with trusted collaborators and be sure to coordinate your changes. Currently, there isn’t a merge conflict notification system, so simultaneous edits to the same file could lead to overwritten changes. For the full rundown and necessary precautions, head over to the documentation.

Preview your app on other devices

In both Prototyper mode and Code view, the preview window displays your web app as you make updates to it. But what if you want others to help test your app on different devices? Click *Preview *> **Make Preview Public **to generate a QR code and URL you can share with others to open the same preview in a web browser. As you make changes to your app in Firebase Studio, those same changes appear in the shared preview.

Bring it all together with Firebase Studio

Firebase Studio is more than just its core features; it’s packed with clever capabilities designed to accelerate your app development workflow. From visually guiding the App Prototyping agent with your own drawings and images, to pinpointing specific elements for modification and easily rolling back to previous versions, you have fine-grained control over the creative process. And with the flexibility to switch Gemini models or bring in a friend (or several!) with seamless collaboration options, you’re empowered to optimize how you build.

**Update **Want more tips? We’ve published a follow-up to this post called Firebase Studio: Tips and Tricks 2.

Show Me the Code: TypeScript & Web SDK Setup

Here is the production baseline pattern we use at CodingCat.dev when wiring Firebase Studio: Tips and Tricks 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 Firebase Studio: Tips and Tricks 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

Resources, Official Docs & Related CodingCat.dev Guides

*Primary Release Source: *Firebase Studio: Tips and Tricks on the Official Firebase Blog (published 2025-05-29 by Jess Kuras)
*Official Firebase Documentation: *Firebase Developer Docs & Web SDK Reference
Related on CodingCat.dev: What's new in Firebase at I/O 2025
Related on CodingCat.dev: What web frameworks does Firebase App Hosting support?
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 Firebase Studio: Tips and Tricks?

Firebase Studio: Tips and Tricks (announced 2025-05-29 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, AI, Next.js, Serverless workloads. If you’ve experimented with the preview of Firebase Studio, you likely know the basics: how to prompt the App Prototyping agent to iterate on your app idea, swap to code view to modify your code directly or debug issues, and publish your app with Firebase App Hosting. However, there are a lot of more subtle features built into Firebase Studio to make the app development lifecycle smoother and significantly quicker. This post will dive into practical tips and tricks to harness the full potential of Firebase Studio. Developers can review the primary announcement on the Firebase Blog alongside our implementation patterns and production checklist above.

How do web developers use Firebase Studio: Tips and Tricks with Next.js, SvelteKit, React, or Angular?

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

Introducing hybrid on-device inference using Firebase AI Logic: Web Architecture & Implementation Guide

Alex Patterson — Sat, 31 Oct 2026 14:42:30 +0000

Original: https://codingcat.dev/post/firebase-2025-06-hybrid-inference-firebase-ai-logic

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 Introducing hybrid on-device inference using Firebase AI Logic by Siddharth Gupta, Erik Eldridge on the Official Firebase Blog (2025-06-09), 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. The Firebase team announced a powerful new experimental feature in the Firebase AI Logic client SDK for Web: hybrid on-device inference!

The Mental Model: Why Introducing hybrid on-device inference using 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

Harness the power of on-device AI models with a seamless fallback to cloud-hosted models

This ensures your generative AI-powered features are always available to your users, online or offline.

Chrome on Desktop supports Gemini Nano, a powerful on-device model that can be downloaded and hosted in the browser on-demand. Running AI models directly on a user’s device offers some great advantages:

Enhanced privacy: Sensitive data can stay right on the user’s device.
Offline availability: Your app’s AI features can work even without an internet connection.
Cost savings: On-device inference is available at no cost, reducing your application’s operational expenses.
On-device performance: You can often get high performance thanks to hardware acceleration.

You can build AI features that utilize all these advantages of an on-device model, but then fallback to a cloud-hosted model when its capabilities are needed.

On-Device and In-Cloud Inference

The Firebase AI Logic client SDK for Web has a hybrid on-device extension that uses the proposed W3C Prompt API for on-device model capabilities. It uses built-in, on-device models (like Gemini Nano in Chrome) when it’s available. If that’s not an option on a particular device or browser, the SDK falls back to using Gemini models on the server. This maximizes your reach, ensuring that your users can access your AI features, regardless of their device capabilities.

How it works

Using hybrid on-device inference is straightforward. The Firebase AI Logic client SDK for Web automatically handles the logic of checking for on-device model availability and falling back to a cloud-hosted model if necessary.

Here’s a look at how you can implement hybrid inference in your web app:

// Initialize the Gemini Developer API backend service
const

// Create a `GenerativeModel` instance
// Set the mode, for example to use on-device model when possible
const

// run inference and log result
const
console.

This implementation is almost identical to a regular getGenerativeModel call, but with the addition of the mode parameter that sets how you want to access a model. The SDK takes care of the rest!

Furthermore, you can also configure this code to always use either an on-device or cloud-hosted model for inference by switching the mode\ parameter:

// Run inference only on device. Does not fallback to cloud-hosted models.
const

// Run inference only on the cloud-hosted models.
const

If you’re curious, you can **try out our demo **and view the codebase.

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 Introducing hybrid on-device inference using 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

Resources, Official Docs & Related CodingCat.dev Guides

*Primary Release Source: *Introducing hybrid on-device inference using Firebase AI Logic on the Official Firebase Blog (published 2025-06-09 by Siddharth Gupta, Erik Eldridge)
*Official Firebase Documentation: *Firebase Developer Docs & Web SDK Reference
Related on CodingCat.dev: Transactions Updates for Data Connect
Related on CodingCat.dev: Fueld.AI's nutrition coach with Firebase and Google Cloud
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 Introducing hybrid on-device inference using Firebase AI Logic?

Introducing hybrid on-device inference using Firebase AI Logic (announced 2025-06-09 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, AI, TypeScript workloads. The Firebase team announced a powerful new experimental feature in the Firebase AI Logic client SDK for Web: hybrid on-device inference! Developers can review the primary announcement on the Firebase Blog alongside our implementation patterns and production checklist above.

How do web developers use Introducing hybrid on-device inference using Firebase AI Logic with Next.js, SvelteKit, React, or Angular?

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

It’s graduation day for the Firebase MCP Server: Web Architecture & Implementation Guide

Alex Patterson — Sat, 31 Oct 2026 14:42:29 +0000

Original: https://codingcat.dev/post/firebase-2025-10-firebase-mcp-server-ga

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 It’s graduation day for the Firebase MCP Server by Kara Yu 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 It’s graduation day for the Firebase MCP Server 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.

At Google I/O in May, we launched an experimental Firebase Model Context Protocol (MCP) server to help AI agents understand and manage your Firebase project, resources, and data all through natural language prompts that you provide, for example, “show items in the cart collection” even “delete a document from my Firestore collection”.

The Model Context Protocol (MCP) extends the capabilities of AI tools used by millions of developers every day. By connecting to MCP servers, coding agents can directly access data and take action with integrated services. The Firebase CLI includes an MCP server to connect to your favorite IDEs and AI tools.

The Firebase team made improvements to the Firebase MCP server since launch, including:

New MCP tools leveraging Gemini in Firebase (like dataconnect_generate_schema to generate a schema for Firebase Data Connect).
New MCP tools covering many more Firebase products (like Cloud Functions for Firebase and Crashlytics)
More consolidated, streamlined MCP tools (like a single validate_security_rules tool that can be used across Firestore, Storage, and Realtime Database).
New deploy MCP prompt to deploy your web app to a Firebase hosting product.

Thanks to your feedback, The Firebase team improved the quality and stability of the Firebase MCP server, and In this update, the Firebase team announced that the Firebase MCP server is graduating from its experimental phase.

Introducing the new Firebase extension for Gemini CLI

Firebase is also integrating with the Gemini CLI, Google’s open-source AI agent that brings the power of Gemini models directly into your terminal. Starting today, Firebase has an official extension in the Gemini CLI gallery, alongside many other new helpful extensions from Google (like the Flutter extension). This new extension bundles our graduated MCP server together with additional context files (custom instructions for LLMs), giving you a powerful, integrated way to work with your Firebase project, resources, and data.

To get started, just type the following into your command line:

the Firebase team's goal is to reduce friction in your common development tasks, whether it’s adding database support, deploying your app, or even adding genAI features to your app!

/firebase:init This command provides you options like **setting up backend services for your app and implementing genAI features that access the Gemini API. **With a single command, you can set up Firebase for your app. This command helps set up Firestore as your database and Firebase Authentication as a way to secure your app and your user’s data. It also helps you to deploy your app in one go! If you’re building an AI feature in your app, this command can give you a head start. It sets up Firebase AI Logic and writes the code to easily and securely access the Gemini API directly from your mobile and web apps. Learn more here.
/firebase:deploy This command deploys your application to a Firebase hosting service regardless of whether it’s a static app or a full-stack app. The prompt instructs the AI to analyze your code and choose the correct Firebase hosting service based on the app’s needs. No more decision-making or misconfigured services.
/firebase:consult This command accesses detailed up-to-date documentation for the Firebase platform. Just ask a question and the model will find an answer grounded in the latest Firebase documentation.

All these commands work with existing Firebase projects. But if you’re new to Firebase, don’t worry! All these commands can also help you set up Firebase in your app from scratch!

Why use Gemini CLI to build your Firebase app?

You spend a large portion of your time in the terminal. This new Firebase extension for Gemini CLI is a step towards giving your Gemini CLI environment a practical, working understanding of Firebase.

The exciting part is that we’ve really improved how well your coding agent handles complex, long-running tasks. Things like setting up a new database or deploying an app have always been tricky because they take time and often need your approval at certain steps. The new commands in the Gemini CLI extension are designed to manage that entire process, from creating resources to managing them, and even cleaning them up if needed.

the Firebase team's goal is to make this a helpful, low-friction way to bring AI-assisted development into your daily flow. It’s not going to solve every problem, but we think it can make these specific setup and deployment tasks a lot smoother.

Show Me the Code: TypeScript & Web SDK Setup

Here is the production baseline pattern we use at CodingCat.dev when wiring It’s graduation day for the Firebase MCP Server 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 It’s graduation day for the Firebase MCP Server 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

Resources, Official Docs & Related CodingCat.dev Guides

*Primary Release Source: *It’s graduation day for the Firebase MCP Server on the Official Firebase Blog (published 2025-10-08 by Kara Yu)
*Official Firebase Documentation: *Firebase Developer Docs & Web SDK Reference
Related on CodingCat.dev: Add AI features to your app using Gemini CLI and Firebase AI Logic
Related on CodingCat.dev: Smart photo organization through privacy-first, on-device AI
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 It’s graduation day for the Firebase MCP Server?

It’s graduation day for the Firebase MCP Server (announced 2025-10-08 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, AI, MCP 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 It’s graduation day for the Firebase MCP Server with Next.js, SvelteKit, React, or Angular?

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

Firestore levels up: Bringing the power of search and JOINs to NoSQL in Firebase: Web Architecture & Implementation Guide

Alex Patterson — Sat, 31 Oct 2026 14:41:33 +0000

Original: https://codingcat.dev/post/firebase-2026-04-firestore-pipelines-ga

For years, choosing Firebase meant trading away relational SQL joins, strict foreign keys, and pgvector similarity search in favor of NoSQL document denormalization. Following the announcement of Firestore levels up: Bringing the power of search and JOINs to NoSQL by Morgan Chen, Minh Nguyen on the Official Firebase Blog (2026-04-27), 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. In November Previously, the Firebase team announced pipeline operations on Firestore enterprise edition in public preview. This launch brought Firestore’s query configurability and capabilities closer to the capabilities of relational databases like PostgreSQL, while maximizing Firestore’s NoSQL data model, differentiated serverless architecture, built-in real-time sync and embedded offline querying. For example, this launch gave developers granular control over when to create an index to improve performance, as well as the ability to create complex multi-stage queries that weren’t possible in Firestore previously. At Next, pipeline operations graduated to general availability, and with it Firebase is adding several major heavily-requested queries: full text search, geospatial queries, JOIN capabilities via subqueries, and data manipulation.

The Mental Model: Why Firestore levels up: Bringing the power of search and JOINs to NoSQL Matters for Web Devs

AJ Pro-Tip from Alex: Keep your authorization logic inside your Data Connect GraphQL operations using @auth(level: USER) and server-evaluated expressions like auth.uid and request.time rather than trusting client-supplied user IDs in query variables.

How It Works: Technical Breakdown & Implementation

Full text search and geospatial queries (in public preview)

Firestore now provides built-in support for full-text search, which allows you to use familiar search query syntax like that of google.com to retrieve relevant Firestore documents. Unlike traditional queries, search queries use special text indexes that tokenize fields in your document. These indexes are then utilized to perform a relevancy search using Google’s best-in-class models, and a search relevance score is appended to the documents returned, allowing you to sort documents by relevance. As an example, suppose you’re the CTO of a company and you want an in-house database of vetted agent skills to provide to employees for security reasons. Your data model might look like this:

{
  "
    "
    "
    "
    "
  },
  "
  "
  "
}

You want your agent skills to be discoverable both via a human-browsable marketplace landing page as well as via another agent skill for finding and installing skills. You can combine Firestore’s search with other pipeline filters to produce a narrow list of results ranked by relevance:

const

  // Run the full text search. This must occur before other pipeline stages.
  .
    // Example query: "\"iOS\" docs generation"
    query: query,
    // Add the relevance score to the document for ranking later.
    addFields: [
      score
    ]
  })

  // Narrow results down to just what the user can use.
  .
  .

  // Order by relevance score.
  .
);

Firestore’s native full-text search provides a number of benefits over third-party search providers or even PostgreSQL’s native search solution. Furthermore, it allows you to run search queries in conjunction with other pipeline stages, automatically handling synonyms, spelling errors, and even difficult-to-handle search languages like traditional Chinese naturally without any plugins. It also uses a familiar search syntax that feels similar to google.com’s search syntax, meaning you don’t need to transform user input much before passing it to Firestore. In this case, combining the Firestore search stage with the two other where filters would allow you to both order by relevance based on the skills.md content and filter only skills compatible with your user’s local environment.

We’ve also added geospatial queries so that you can create location-aware applications. For example, you can query geographical coordinates by user proximity, sorting them by their distance to a specified location:

// Find restaurants with "waffles" on the menu, but order the results
// only by distance to a query point.
firestore.
  .
    query: 
    sort: 
      .
      .
  });

Since these are new major features, they’re available in preview while the rest of pipelines are GA.

Subqueries: Joins, but better

With Next’s GA release The Firebase team added a feature called subqueries, allowing you to write queries that combine two arbitrary pipelines into a single pipeline. This means that, for example, if you have a collection of restaurants and a subcollection of reviews:

// Restaurant
{
  "
  "
  // ...

  // Review (subcollection)
  {
    "
    "
    // ...
  }
}

You could write a query to aggregate each restaurant’s average rating into a single field per restaurant:

db.
  .
    subcollection
      .
    // Convert the subquery to a scalar value in the parent query.
      .
      .
  );

You can also use this feature to join documents from separate collections together within a pipeline by subquerying the collection you’d like to join and then passing it as a map into the document of the parent query’s collection, for example if you wanted to display a preview of a restaurant’s reviews under a restaurant thumbnail:

db.
  .
  .
    average
    count
  .
  .

The resulting document would look like this:

{
  "
  "
  "
    "
    "
  }
}

Data manipulation language (DML)

Have you ever written a Firestore pipeline query and decided you wanted to pipe the output of that query into some kind of update operation? Maybe you’re building a restaurant finder application and you want to add food categories to your app, requiring you to backfill a new field across every document that doesn’t already have it defined. Now you can do this directly within Firestore.

const
  .
  .
  .
  .
  .

DML is a set of pipeline stages that allow you to perform updates and deletes, so now you can make granular adjustments to your database fully within Firestore using the expressive pipeline operations to describe exactly which documents should be affected. Calling the update() function will merge the added field back into the document, persisting the value added by addFields(). Paired with the exists() check, this code conditionally adds fields only if they don’t exist. As this example shows, combining DML with other pipeline operations is an effective way to update entire collections of documents within Firestore without having to spin up a Cloud Function or other external service.

DML launched last week with updates and deletes, with inserts and transactions coming soon.

What’s next for Firestore?

After many years of waiting and many words on updates to the internals of Firestore, the queries you have been requesting from launch are now finally here for you to use. With these changes, we have achieved a major milestone in bringing Firestore to query feature parity with other major relational databases like PostgreSQL. Now, when you’re choosing a database for your new project, you no longer have to worry that Firestore’s queries won’t support an app feature you want to build.

Thanks for your patience, and we hope you continue to enjoy Firestore. As always, you can read more about search, DML, and subqueries as well as our getting started guide in the Firebase documentation.

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 Firestore levels up: Bringing the power of search and JOINs to NoSQL 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

Resources, Official Docs & Related CodingCat.dev Guides

*Primary Release Source: *Firestore levels up: Bringing the power of search and JOINs to NoSQL on the Official Firebase Blog (published 2026-04-27 by Morgan Chen, Minh Nguyen)
*Official Firebase Documentation: *Firebase Developer Docs & Web SDK Reference
Related on CodingCat.dev: What’s new from Firebase at Cloud Next 2026
Related on CodingCat.dev: Realtime PostgreSQL: From Data Connect to SQL Connect
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 Firestore levels up: Bringing the power of search and JOINs to NoSQL?

Firestore levels up: Bringing the power of search and JOINs to NoSQL (announced 2026-04-27 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, AI, SQL, Security, Serverless workloads. In November Previously, the Firebase team announced pipeline operations on Firestore enterprise edition in public preview. This launch brought Firestore’s query configurability and capabilities closer to the capabilities of relational databases like PostgreSQL, while maximizing Firestore’s NoSQL data model, differentiated serverless architecture, built-in real-time sync and embedded offline querying. For example, this launch gave developers granular control over when to create an index to improve performance, as well as the ability to create complex multi-stage queries that weren’t possible in Firestore previously. At Next, pipeline operations graduated to general availability, and with it Firebase is adding several major heavily-requested queries: full text search, geospatial queries, JOIN capabilities via subqueries, and data manipulation. Developers can review the primary announcement on the Firebase Blog alongside our implementation patterns and production checklist above.