DEV Community: CodingCatDev

Writing SQL in SQL Connect in Firebase: Web Architecture & Implementation Guide

Alex Patterson — Wed, 04 Nov 2026 05:42:54 +0000

Original: https://codingcat.dev/post/firebase-2026-03-fdc-native-sql

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 Writing SQL in SQL Connect by Cynthia Wang on the Official Firebase Blog (2026-03-24), 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 Writing SQL in SQL Connect Matters for Web Devs

As a Google Developer Expert (GDE) for Firebase and Senior Solutions Architect at CodingCat.dev, I evaluate every Firebase update through one lens: does it reduce boilerplate while keeping our runtime security and cloud bills predictable? Firebase 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

Data Connect (now SQL Connect) is our comprehensive PostgreSQL solution, designed to let you build secure, scalable apps backed by Cloud SQL. Instead of writing and maintaining a traditional backend, you define your schema and operations using a declarative syntax based on GraphQL. This approach gives you strict type safety, relation resolution, and custom directives for common features like Firebase Auth right out of the box, without the hassle of having to write your own resolvers.

However, there are times when you really want the flexibility and power of SQL. When you hit advanced use cases, like window functions, geospatial indexing, or complex atomic operations, shoehorning these SQL operations into GraphQL types becomes much more difficult.

That’s why The Firebase team announced Native SQL for Data Connect. It provides direct access to your database, bridging the gap between FDC’s features and raw SQL operations, so you can write the exact statements you need.

What is native SQL?

Native SQL is a feature in Data Connect that lets you define operations using raw SQL syntax while still benefiting from Data Connect’s other features like Firebase integrations and auto-generated SDKs.

Instead of letting Data Connect generate SQL based on your operations, you can provide the SQL commands directly into your standard.gql operation files. Because these statements are predefined in the backend, clients cannot modify them on the fly. This allows you to execute your operations securely without having to worry about SQL injections.

How does it work?

Native SQL is implemented via new root fields on the query and mutation types within Data Connect. You define named operations in your operation.gql files using these fields, passing your raw SQL string and a list of parameters. (See docs for more details).

When you run firebase deploy --only dataconnect, the FDC CLI compiles these operations, validates the SQL string as a static literal, and rejects forbidden commands like Data Definition Language (DDL). At runtime, the client invokes the named operation. The FDC server securely binds the parameters to the pre-deployed SQL template and executes the query against the Cloud SQL PostgreSQL database.

Used exclusively for Data Query Language (DQL). The deploy-time validation will block DML statements here.

_select: Executes a query expecting zero or more rows. Returns [Any] (a JSON array).
_selectFirst: Executes a query expecting exactly one row. Returns Any (a JSON object or null).

Let’s implement these concepts using a social forum app. This first query uses PostgreSQL’s HAVING clause to filter grouped post tags, a complex aggregation standard syntax would have difficulty expressing.

# Finds trending tags that have a high average view count.
query
  _select(
    sql: 
      SELECT tag_name, AVG(views) as avg_views, COUNT(id) as post_count
      FROM posts
      GROUP BY tag_name
      HAVING AVG(views) >= $1
      ORDER BY avg_views DESC
    "
    params: [$minAvgViews]
  )
}

Used for Data Manipulation Language (DML) such as INSERT, UPDATE, and DELETE.

_execute: Executes a DML statement returning the result count as an Int.
_executeReturning: Executes a DML statement with a RETURNING clause for multiple rows, returning [Any].
_executeReturningFirst: Executes a DML statement returning a single row as Any.

This mutation bulk-updates an author’s drafts in a single command, manipulating massive amounts of data without having to fetch it to the client first.

# Automatically archive drafts that haven't been touched in a year.
mutation
  _execute(
    sql: 
      UPDATE posts
      SET status = 'archived'
      WHERE status = 'draft' AND last_updated < $1
    "
    params: [$cutoffDate]
  )
}

Native SQL prevents SQL injection and unauthorized access by:

**Server-controlled SQL: **SQL statements are hardcoded in the deployed.gql files. The client cannot send arbitrary SQL at runtime.
**Deploy-time validation: **FDC validates SQL strings during deployment and rejects destructive commands.
**Strict parameterization: **Inputs are passed via a params array and bound to positional placeholders ($1, $2) by the database driver. The SQL string is never concatenated with unvetted inputs.
**Server-side context injection: **You can inject trusted server state into your parameters using the _expr directive. For example, {_expr: "auth.uid"} is resolved server-side to the authenticated user’s ID before execution, preventing client-side spoofing.

What can you do with native SQL (that you couldn’t before)

**Direct DML: **Run INSERT, UPDATE, and DELETE operations without relying strictly on generated FDC mutations.
**Multi-step execution with Common Table Expressions: **The _execute field allows you to write multi-step sql using CTEs (WITH keyword) to chain multiple operations together.
**Complex aggregations and window functions: **Execute statements using RANK(), PARTITION BY, or deeply nested subqueries.
**Flexible return structures: **You no longer need to write boilerplate GraphQL types in schema.gql just to return the result of a custom aggregation or window function.
**Postgres extensions: **Directly query extensions like PostGIS for spatial data without mapping complex geometry types into the GraphQL schema.

For a comprehensive list, see the documentation.

Difference from @view

While native SQL provides SQL’s execution flexibility and dynamic JSON returns, there are times when you want the strict type-safety of a standard Data Connect object in addition to the ability to write complex SQL expressions.

For these scenarios, Data Connect also offers the @view directive, which you can use in read-only contexts. By applying @view to an OBJECT type in your schema.gql, you can back that specific type with a custom SELECT statement. This allows you to encapsulate complex database logic on the server while keeping your client-side code strictly typed.

Data Connect maps the GraphQL fields on your @view type to the columns returned by your SQL statement. Also, your scalar fields (written in camelCase) must match the SQL columns (written in snake_case) in your SELECT statement.

type
  SELECT
    author_id,
    COUNT(id) AS total_posts,
    SUM(views) AS total_network_views
  FROM posts
  GROUP BY author_id
"
  authorId: 
  totalPosts: 
  totalNetworkViews: 
}

**sql: **The native SQL SELECT statement used as the basis for this type.
**name: **The name of a pre-existing SQL view in your Postgres database (cannot be used alongside the sql argument).
**singular / plural: **Configures the naming conventions in your generated API.

Because views are integrated into your schema, they carry a few specific rules that differ from native SQL:

**Read-only: **Only SELECT statements are permitted. Views cannot be mutated directly.
**No primary keys: **SQL views do not have primary keys, meaning direct key-based lookups (e.g., authorStats(id: ...)) are not supported.
**Nullable fields: **All fields on a @view type should generally be declared as nullable. If a field lacks a corresponding column in the SQL result, it will safely return null.
**No inbound references: **Other @table or @view types cannot use @ref to point to a view. (However, a view can contain a @ref pointing out to a base @table).
**Runtime validation: **As with native SQL, Data Connect does not parse or validate the SQL string inside a @view during deployment. Meaning that errors in your SQL, as well as mismatches between columns and fields will only surface at runtime, so always test your view queries.

When to use which FDC approach

**When to use native GraphQL: **For standard CRUD operations, simple joins, and when you rely heavily on strict end-to-end type safety in your client application (e.g., fetching a basic profile or some list of arbitrary statistics).

query
  author(id: $id) {
    id
    username
    published_posts {
      title
      views
    }
    followers {
      username
    }
  }
}

**When to use @view: **When you have a stable, read-only SQL query and you want the client to have a strictly typed object for the result. A @view is ideal here because the author leaderboard’s SQL structure is stable and predictable.

type
  SELECT author_id, SUM(views) as total_network_views
  FROM posts
  GROUP BY author_id
  ORDER BY total_network_views DESC
"
  authorId: 
  totalNetworkViews: 
}

query
  topAuthors { authorId, totalNetworkViews }
}

**When to use Native SQL: **For complex aggregations, window functions, specialized PostgreSQL operators, or multi-step SQL using CTEs (WITH clauses). It’s also for any operations that don’t map cleanly to your schema or where defining the exact return type in the schema is unnecessary overhead. For example, the query below uses SQL to calculate a rolling view average on the fly using the AVG() OVER window function.

query
  _select(
    sql: 
      SELECT
        id,
        views,
        AVG(views) OVER (
          PARTITION BY author_id
          ORDER BY published_at DESC
          ROWS BETWEEN 4 PRECEDING AND CURRENT ROW
        ) as rolling_avg_views
      FROM posts
      WHERE author_id = $1
      ORDER BY published_at DESC
      LIMIT 5
    "
    params: [$authorId]
  )
}

**When to use native GraphQL: **Standard inserts and updates. This is also a more direct path as FDC’s auto-generated resolvers provide a stable, boilerplate-free approach for data manipulation.

mutation
  post_insert(data: {
    author_id_expr
    title
    content
    status
  })
}

**When to use @transaction: **When executing atomic operations across multiple tables where the updates, inserts, and condition checks can be expressed sequentially using FDC’s generated mutations. FDC handles this multi-table transaction by chaining updates and relying on @check directives to authorize mutations based on query results and prevent invalid states.

mutation
  reader_update(id_expr: 
    wallet_coins_update
  }) 

  author_update(id: $authorId, data: {
    earned_coins_update
  })
}

**When to use Native SQL: **Complex conditional updates, bulk data manipulation, or enforcing very specific SQL logic that goes beyond standard CRUD capabilities. While native GraphQL offers built-in authorization (like @auth and @check), Native SQL gives more flexibility to write entirely custom conditional logic in your statements with row level security. We use Native SQL here to execute a precise conditional update while still maintaining security via {_expr: "auth.uid"} in the WHERE clause, so that authors can only update their own posts.

mutation
  _execute(
    sql: 
      UPDATE posts
      SET title = $2
      WHERE id = $1 AND author_id = $3
    "
    params: [$postId, $newTitle, {
  )
}

Native SQL is also required when an atomic operation requires bulk data manipulation, complex subqueries, or chaining data within the database using Common Table Expressions (CTEs) that standard mutations cannot express. The Native SQL example below atomically deletes a user and reassigns all their posts to a system account within Postgres.

mutation
  _execute(
    sql: 
      WITH deleted_user AS (
        DELETE FROM users
        WHERE id = $1
        RETURNING id
      )
      UPDATE posts
      SET author_id = 'system-anon'
      WHERE author_id IN (SELECT id FROM deleted_user)
    "
    params: [{
  )
}

Best practices

**Client-side validation: **Because data-returning Native SQL fields output the Any type (JSON), the client SDK loses response type safety. You **must **validate the shape of the returned JSON in your client code.
Don’t use line comments: Use block comments (/* ... */) in your SQL strings.
**Leverage context injection: **Always use {_expr: "auth.uid"} or similar context markers in your params array for authorization, rather than relying on the client to send user IDs.
Parameterize everything: Never use string interpolation for data values. Always use positional parameters ($1, $2) linked to the params array.
**Please don’t use native SQL just because you don’t like GraphQL: **Don’t automatically replace standard FDC queries with Native SQL unless the SQL complexity strictly demands it. You will lose the out-of-the-box benefits of FDC’s automated relation resolution and strict client typing.

What does this mean for your app?

One of the biggest shifts with Native SQL is the intentional bypass of FDC’s strong typing. Because it returns the Any type (JSON format), the FDC client-side SDK generator cannot infer strict TypeScript, Swift, Kotlin, etc. interfaces. You are trading compile-time safety for execution-time flexibility. It is essential to wrap your Native SQL calls in custom client-side validation logic to safely cast the raw JSON output.

Embedding complex SQL directly means your backend performance depends entirely on your query planner’s efficiency. While standard FDC resolvers optimize lookup paths predictably, Native SQL executes exactly what you dictate. It’s generally a good idea to use Cloud SQL console’s query insights (EXPLAIN ANALYZE) before deploying these raw queries to ensure you aren’t introducing full table scans.

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 Writing SQL in SQL Connect 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: *Writing SQL in SQL Connect on the Official Firebase Blog (published 2026-03-24 by Cynthia Wang)
*Official Firebase Documentation: *Firebase Developer Docs & Web SDK Reference
Related on CodingCat.dev: From prompt to production: Build full-stack apps faster with Google AI Studio and Firebase
Related on CodingCat.dev: Next.js Deployment Adapters: A bright future for Next.js on 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 Writing SQL in SQL Connect?

Writing SQL in SQL Connect (announced 2026-03-24 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 Writing SQL in SQL Connect 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.

Improve AI output with continuous improvement in Firebase: Web Architecture & Implementation Guide

Alex Patterson — Wed, 04 Nov 2026 05:42:46 +0000

Original: https://codingcat.dev/post/firebase-2026-01-continuous-improvement

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 Improve AI output with continuous improvement by Alexander Nohe, Dan Gruhl on the Official Firebase Blog (2026-01-13), 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. Using AI to improve AI outputs is a proven strategy to get better results from prompting.

The Mental Model: Why Improve AI output with continuous improvement Matters for Web Devs

As a Google Developer Expert (GDE) for Firebase and Senior Solutions Architect at CodingCat.dev, I evaluate every Firebase update through one lens: does it reduce boilerplate while keeping our runtime security and cloud bills predictable? Firebase AI Logic lets you invoke Gemini and Imagen models from client and edge apps using the Firebase Web SDK while keeping your API credentials off the wire, enforcing Firebase App Check, and managing server-side prompt templates centrally.

AJ Pro-Tip from Alex: Combine Firebase AI Logic with server prompt templates, Firebase Remote Config feature flags, and project spend caps so you can iterate on prompts or swap Gemini models instantly without redeploying your Next.js or Astro frontend.

How It Works: Technical Breakdown & Implementation

Getting better outputs from AI can be tough without any intervention. You might like to have one prompt with a human in the loop to verify and fact check the output before it is consumed by the end user. Or you might try to trust the original output or try to re-prompt over and over again with minimal results. There has been a proven way to get better results through a strategy called continuous improvement. Read on in this blog article to understand how you can improve your AI outputs to a more reliable output through continuous improvement.

What is continuous improvement?

Continuous improvement is a way to prompt the AI through automated means or through a human in the loop system. First the AI tries to gather lots of information and then run in a loop with a different AI to critique the output based on some parameters. For instance, if you have one AI system that is in charge of designing a workout program, the first AI may design the workout program and the second AI may critique the program’s design in order to make sure it aligns with the users goals. Then the results from the second AI go back to the first AI to rewrite it based on the results of the critique. Using this looping method can achieve better results than a single prompt and may only need to be run a handful of times (2 to 3 times) to achieve a great output.

Using a LoopAgent for continuous improvement

To demonstrate how to achieve continuous improvement, we are going to use the ADK as an example. The ADK has primitives designed for continuous improvement flows by using a LoopAgent. With the LoopAgent, you can assign two or more subagents to run in a loop where the results from the first agent are passed to the second agent to go back to the first agent. Let’s take a quick look at an example.

In this example, I want to build an agentic system for designing gym workouts. The plan is that we have a receptionist to gather enough feedback to hand off to a team of agents to iterate on a workout design before returning a fully designed workout back to the user.

Before continous improvement, the original output was just from a single shot prompt asking for a workout for 5 days that focused on arms.

Alright, let’s get to work. You want big arms, and you’re willing to put in the time with a 5-day split. I love that commitment. Most people think they can just do a few curls at the end of a workout and expect results. That’s not how you build sleeve-stretchers.

The philosophy here is simple but brutally effective: **Frequency + Volume + Intensity. **We’re going to hit your arms directly and indirectly multiple times per week, culminating in a dedicated “Armageddon” day to force them into growth.

Since I don’t have your previous workout logs, I’m going to prescribe the rep ranges and a method for you to select the correct weight. This is crucial. I’m not just giving you a list of exercises; I’m giving you a system.

The Guiding Principles for Your Success

The 5-Day “Arm Annihilation” Program

This split is designed to hit your arms hard while still building a powerful, balanced physique. Neglecting your chest, back, and legs will only limit your arm growth potential.

Day 5: ARMAGEDDON (Biceps & Triceps Focus)

The heavy pressing movements will pre-fatigue your triceps, then we’ll finish them off with targeted isolation work.

Coach’s Tip: Control the weight down to your chest, pause for a split second, and drive up explosively. This is your main strength builder.
Coach’s Tip: Don’t let the dumbbells crash together at the top. Keep constant tension on your chest.
Coach’s Tip: This is a triceps mass builder. Keep your elbows tucked in close to your body. Your hands should be just inside shoulder-width.
Coach’s Tip: Focus on getting a deep stretch at the bottom to hit the long head of the tricep, this is what adds the most size to your arm.
Coach’s Tip: At the bottom of the movement, separate the ropes and squeeze your triceps as hard as you can. This is a finisher for the pump.

Heavy rows and pull-ups are fantastic for your biceps. We start with those, then isolate the biceps until they’re screaming.

Coach’s Tip: Drive your elbows down and back, imagining you’re trying to put them in your back pockets.
Coach’s Tip: Keep your back flat. Pull the bar to your lower stomach, not your chest. Your biceps will get a ton of work here.
Coach’s Tip: Your foundational bicep mass builder. Don’t use momentum. Control the negative for a full 3 seconds on the way down.
Coach’s Tip: Let your arms hang straight down to get a deep stretch on the bicep at the bottom. This is phenomenal for building the bicep “peak.”
Coach’s Tip: These build the brachialis muscle, which sits under your bicep and will push it up, making it look bigger. It also adds thickness to your arm when viewed from the front.

Do not skip this day. A strong foundation and the hormonal response from heavy leg training will help your entire body grow. Consider this an active recovery day for your arms.

Building powerful, round shoulders creates the “cap” on your upper arms, making them look even bigger and more impressive.

Coach’s Tip: Lead with your elbows, and don’t raise the weights higher than your shoulders. Think “out,” not “up.”
Coach’s Tip: Essential for shoulder health and hitting the rear delts. Pull the rope towards your face, trying to separate the handles.

This is the day we go to war. The focus is pure volume, pump, and annihilation. We’ll use supersets to maximize intensity and save time. A superset is performing two exercises back-to-back with no rest in between.

**A1: EZ Bar Curls: **4 sets of 8-12 reps (RIR 1)
**A2: Skull Crushers: **4 sets of 8-12 reps (RIR 1)
Rest 90 seconds after completing both exercises.
**B1: Preacher Curls (Machine or Dumbbell): **3 sets of 10-15 reps (RIR 1)
**B2: Tricep Dips (on bench or assisted machine): **3 sets to failure (RIR 0)
Rest 60-90 seconds after completing both exercises.
**C1: Cable Hammer Curls (with rope): **3 sets of 12-15 reps (RIR 0-1)
**C2: Single-Arm Overhead Cable Tricep Extension: **3 sets of 12-15 reps per arm (RIR 0-1)
Rest 60 seconds after completing both exercises.
Grab the heaviest dumbbells you can hold with good posture.
Walk for 3 sets of 45-60 seconds. This will demolish your grip and forearms.

Progression Plan & Final Advice

**Log Everything: **Write down the exercises, weight, sets, and reps you do for every single workout.
**The Rule of Progression: **For a given exercise, once you can hit the top end of the prescribed rep range for all your sets (e.g., 3 sets of 12 on Incline DB Press), you have earned the right to increase the weight on your next workout. Add the smallest possible increment (2.5 or 5 lbs).
**Listen to Your Body: **If you feel joint pain (especially in your elbows or shoulders), don’t push through it. Check your form, lighten the weight, or substitute the exercise. Soreness is fine; sharp pain is not.
**Be Patient: **Building impressive arms takes time. Consistency with this plan, your nutrition, and your sleep will yield results.

Run this program for 4-6 weeks, focusing on getting stronger in the key lifts. After that, we can re-evaluate, see what’s working, and make adjustments. Now, go get it done.

In the output above, you can see that the agent recommends bent over rows which I have trouble with because of back pain. It also recommends a lot of cable workouts but I do not have access to cable equipement. There is a lot of missing pieces that the agent must assume about my workout design and You can use continous improvement to derive better results.

The personal_training_reception agent is designed to iterate with the user to figure out the type of workout the user would like to proceed with in designing a workout strategy. This is done through the agent asking the user a series of questions about their workout experience and what they want to achieve through a workout designed for them. You will notice that we assign the agent a persona of being a world class physical fitness coach so the persona better understands the types of questions it should be asking of the user when designing a fitness program. This is a human in the loop process, which lets the AI extract information from you before attempting to design a workout for you. We sometimes don’t know all the details we want to share or need to share in life, so having something that can ask for more and more details helps to get a better result later on. Once we have all the information we need we then hand off to the personal_training_staff agent.

personal_training_reception 
    name
    model
    description
    instruction
    You are a world class physical fitness coach. You know how to make your clients successful based on their
    previous workouts and what they are trying to accomplish. If the user wants to target a specific muscle group,
    you know how to find the appropriate muscles to target. You also know how to find the correct rep range and
    the correct weight to put on the bar based on previous workouts. You are not afraid to give advice to help make your
    clients successful.

    Your goal is to ask any and all questions that the training team might have about this client before designing a workout.

    When you feel that there is sufficient information to design a workout for this client, send them to the personal_training_staff
    """
    tools
    sub_agents
)

With the training reception there is a back and forth that happens now between me and the agent before any workouts get recommended.

Great goal! To design the most effective 5-day arm workout for you, I need a little more information. Could you tell me:

Thanks for that detail! The “lower back hurts a lot” is a very important piece of information. To make sure we don’t aggravate it and still get you those big arms, I need to ask a few more questions:

That’s excellent information, thank you! Knowing about your lower back and the specific exercises that bother it is crucial for designing a safe and effective plan. The fact that you have a bench and your strength level on the bench press (225 lbs for 8 reps) also gives the training staff a great starting point for weight selection.

I have enough information now to pass this on to the personal training staff. They will take all of this into account to create a personalized 5-day arm workout for you that focuses on hypertrophy, works around your lower back limitations, and leverages your available equipment and experience.

The personal_training_staff agent is a LoopAgent. You can see that as a LoopAgent, it has a description (which helps other agents know when to hand off to it) and it has a max_iterations property which helps limit an infinite number of iterations on the workout. The LoopAgent is a continuous improvement loop that iterates between two sub agents (lifting friend and lifting pro).

lifting_friend 
    name
    model
    description
    instruction
    You are a world class physical fitness coach. You know how to make your clients successful based on their
    previous workouts and what they are trying to accomplish. If the user wants to target a specific muscle group,
    you know how to find the appropriate muscles to target. You also know how to find the correct rep range and
    the correct weight to put on the bar based on previous workouts. You are not afraid to give advice to help make your
    clients successful.

    Use the clients previous input to guide the design of the current program and any critiques to modify the program be sure to incorporate.
    """
    tools
)

lifting_pro 
    name
    model
    description
    instruction
    You are a world class physical fitness coach. You take workouts given to you and look for issues with them.
    You know what your clients want and sometimes they can be... over ambitious. Use your best judgement to help
    give them critical feedback on the workouts selected. Make sure the client can reach their goals safely with their workout and don't hold back on the feedback from the previously designed workout

    If you get the best possible workout from lifting_friend and you have no comments, call call exit_loop and show the client their workout
    """
    tools
)

personal_training_staff 
    name
    description
    max_iterations
    sub_agents
)

Now the outputs I see are more focused on my inputs that I originally supplied. The two agents will go back and forth iterating until the best possible workout is designed for me based on the contraints that I provided to each agent. The lifting friend agent will suggest a workout and the lifting pro will critque it and suggest improvments.

This is an abbreviated example as the two agents iterated quite a bit to get to the best possible workout for me.

Alright, my man! You want big arms, and you’ve got the drive and the equipment, even with that tricky lower back. That’s what I like to hear! Your 225 lbs for 8 reps on the bench press tells me you’ve got a great foundation of strength, so we’re not starting from scratch here. We’ll build on that and work smart to get those sleeves bursting.

The key with your lower back is form, control, and choosing the right exercises. We’re going to avoid anything that puts direct strain on it, especially those bent-over movements that you know exacerbate the pain. We’ll focus on supported, seated, or lying variations where possible.

Here’s a 5-day arm-focused workout program designed for hypertrophy, leveraging your power rack, barbell, dumbbells, and bench, all while being mindful of your lower back.

General Guidelines for Your Program:

**Warm-up (5-10 minutes before each workout): **Light cardio (if possible and back-friendly), dynamic stretches, and 1-2 sets of very light weight for the first exercise of the day to get blood flowing.
**Cool-down (5-10 minutes after each workout): **Static stretches for the muscles worked.
**Rep Ranges: **We’re aiming for hypertrophy (muscle growth), so most exercises will be in the 8-12 or 10-15 rep range. Compound movements might occasionally dip to 6-8 reps.
**Sets: **Aim for 3-4 working sets per exercise.
**Rest: **60-90 seconds between sets for isolation movements, 90-120 seconds for compound movements.
**Weight Selection: **You know your strength. For each exercise, select a weight that allows you to complete the target reps with perfect form. The last 1-2 reps should be challenging but achievable without breaking form or straining your lower back. **Starting Point Estimates (adjust as needed): Close Grip Bench Press: **Given your 225x8 regular bench, start with 135-155 lbs for 8-10 reps.
**Barbell Curls: **Aim for 60-80 lbs for 8-10 reps.
**Dumbbell Work: **For exercises like overhead extensions or dumbbell curls, if you can curl 80 lbs with a barbell, you might start with 30-40 lbs dumbbells (each hand). This is a general guide; listen to your body!

Your 5-Day “Arm Blast” Program: Day 1: Chest & Triceps (Push Focus)

Day 2: Upper Back (Back-Friendly) & Biceps (Pull Focus)

Day 3: Shoulders & Triceps (Push Focus)

Day 4: Legs (Back-Friendly) & Biceps

Day 5: Arm Annihilation (Biceps, Triceps, Forearms Focus)

Coach’s Corner: Keys to Your Success for Big Arms & a Happy Back

This is a fantastic start from lifting_friend! It’s clear a lot of thought went into accommodating your lower back, which is the most important thing here. The exercise selection is solid, using your equipment well and focusing on movements that will protect your spine. The general guidelines on warm-ups, progressive overload, and nutrition are spot on.

However, as your coach, my job is to not just give you a workout, but to give you one that will give you the best possible results for the long haul. Sometimes, more isn’t better; smarter is better.

I have a few critical adjustments to make this a truly world-class program that will prevent injury and maximize growth.

1. The Volume is Too High - Risk of Overtraining

This program has you hitting biceps and triceps directly three times a week, with one of those days being an “Arm Annihilation” session. For an intermediate lifter, even an experienced one, this is more likely to lead to overtraining and elbow/wrist tendonitis than it is to optimal growth. Muscle grows during recovery, not in the gym. By constantly hammering your arms, you’re not giving them enough time to repair and get bigger and stronger. The “Arm Annihilation” day, in particular, is excessive. After the first 3-4 exercises, you’re likely just accumulating fatigue and not stimulating any meaningful new growth.

The plan has a lot of pressing movements and front-delt dominant exercises (Bench Press, Incline Press, Overhead Press, Front Raises). This is great for building the front of your shoulder, but it neglects the back of your shoulder (the rear deltoids). Over-developing the front and ignoring the back is a classic recipe for shoulder impingement and pain down the road. We need to balance this out.

The “Lifting Pro” Revised 5-Day Plan

Here is my revised version of the program. It keeps the 5-day structure and the core focus on arms but adjusts the volume to a level that will promote better recovery and sustainable, long-term growth while also protecting your joints.

**Day 1: Chest & Triceps (Unchanged) **This day is well-structured.

**Day 2: Upper Back & Biceps (Unchanged) **Excellent back-friendly choices here.

**Day 3: Shoulders & Arms (Revised for Balance) **Firebase is adding a rear delt movement and a bicep movement to make this a more complete upper body day.

**Day 4: Legs & Core (Unchanged) **A solid, back-friendly leg day.

**Day 5: High-Intensity Arm Focus (Replaces “Annihilation”) **We’re drastically reducing the volume here to focus on high-quality, high-intensity sets. This is all you need.

Why This Is a Better Plan for You:

**Sustainable Volume: **This plan hits your arms directly twice a week with focused intensity, and indirectly on your other upper body days. This is the sweet spot for stimulating growth while allowing for full recovery.
**Reduced Injury Risk: **By eliminating the excessive volume, we significantly decrease the strain on your elbow and wrist joints. The addition of rear delt work on Day 3 will also protect your shoulders.
**Better Results: **It might seem counterintuitive, but by doing less, you will grow more. Your body will have the resources to recover and adapt, leading to more consistent strength and size gains over time. This is a program built for a marathon, not a sprint. Trust the process, stick to this revised plan, and you’ll build those big arms you want without burning out or getting injured.

The tradeoff with continuous improvement

Using continuous improvement may not be the best choice for all situations. Generally, continuous improvement results in higher latency as the model iterates on its response to the users query. The other thing to consider is that continuous improvement also can result in higher cost for you as the model will need to iterate with another model a series of times before outputting a resulting answer. So if you have enough of these models in place, you can expect costs to overall be at least twice as high and twice as slow when compared to a normal inference request. The best places to use continuous improvement would be when you want to return a more detailed plan or are looking for a higher fidelity response. This tradeoff makes a lot of sense if its a one time cost to set something up rather than an ongoing cost. In your example, we expect a workout plan to be a refined one time cost every month or so, not a daily operating cost.

from
from
from


# Agents

lifting_friend 
    name
    model
    description
    instruction
    You are a world class physical fitness coach. You know how to make your clients successful based on their
    previous workouts and what they are trying to accomplish. If the user wants to target a specific muscle group,
    you know how to find the appropriate muscles to target. You also know how to find the correct rep range and
    the correct weight to put on the bar based on previous workouts. You are not afraid to give advice to help make your
    clients successful.

    Use the clients previous input to guide the design of the current program and any critiques to modify the program be sure to incorporate.
    """
    tools
)

lifting_pro 
    name
    model
    description
    instruction
    You are a world class physical fitness coach. You take workouts given to you and look for issues with them.
    You know what your clients want and sometimes they can be... over ambitious. Use your best judgement to help
    give them critical feedback on the workouts selected. Make sure the client can reach their goals safely with their workout and don't hold back on the feedback from the previously designed workout

    If you get the best possible workout from lifting_friend and you have no comments, call call exit_loop and show the client their workout
    """
    tools
)

personal_training_staff 
    name
    description
    max_iterations
    sub_agents
)

personal_training_reception 
    name
    model
    description
    instruction
    You are a world class physical fitness coach. You know how to make your clients successful based on their
    previous workouts and what they are trying to accomplish. If the user wants to target a specific muscle group,
    you know how to find the appropriate muscles to target. You also know how to find the correct rep range and
    the correct weight to put on the bar based on previous workouts. You are not afraid to give advice to help make your
    clients successful.

    Your goal is to ask any and all questions that the training team might have about this client before designing a workout.

    When you feel that there is sufficient information to design a workout for this client, send them to the personal_training_staff
    """
    tools
    sub_agents
)

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 Improve AI output with continuous improvement 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: *Improve AI output with continuous improvement on the Official Firebase Blog (published 2026-01-13 by Alexander Nohe, Dan Gruhl)
*Official Firebase Documentation: *Firebase Developer Docs & Web SDK Reference
Related on CodingCat.dev: App Hosting adds support for Turborepo
Related on CodingCat.dev: Unveiling Firestore Pipeline operations
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 Improve AI output with continuous improvement?

Improve AI output with continuous improvement (announced 2026-01-13 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, AI, Security workloads. Using AI to improve AI outputs is a proven strategy to get better results from prompting. Developers can review the primary announcement on the Firebase Blog alongside our implementation patterns and production checklist above.

How do web developers use Improve AI output with continuous improvement 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.

Firestore with MongoDB compatibility is now generally available in Firebase: Web Architecture & Implementation Guide

Alex Patterson — Wed, 04 Nov 2026 05:42:24 +0000

Original: https://codingcat.dev/post/firebase-2025-08-firestore-mongodb-general-availability

Shipping reliable full-stack web applications requires keeping your client SDKs, backend security rules, and cloud infrastructure tightly aligned as your traffic scales. Following the announcement of Firestore with MongoDB compatibility is now generally available by Morgan Chen, Tyler Crowe, Minh Nguyen on the Official Firebase Blog (2025-08-26), 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 April, we released a public preview of Firestore with MongoDB compatibility available through Google Cloud. With this release, the Firebase team announced that Firestore with MongoDB compatibility is available in Firebase and we’re graduating to general availability! If you missed this earlier announcement, you might be wondering: What is MongoDB compatibility? And should I use it if I’m starting a new project? Let’s take a look.

The Mental Model: Why Firestore with MongoDB compatibility is now generally available Matters for Web Devs

As a Google Developer Expert (GDE) for Firebase and Senior Solutions Architect at CodingCat.dev, I evaluate every Firebase update through one lens: does it reduce boilerplate while keeping our runtime security and cloud bills predictable? This Firebase update streamlines how web and cloud engineers configure, secure, and observe production workloads across modern TypeScript frameworks like Next.js, Astro, SvelteKit, React, and Angular.

AJ Pro-Tip from Alex: Whenever we adopt a new Firebase capability at CodingCat.dev, we validate it in the Firebase Local Emulator Suite first and pair client SDK calls with Firebase App Check and strict Security Rules before shipping to production.

How It Works: Technical Breakdown & Implementation

Firestore Enterprise edition

Firestore with MongoDB compatibility is available on a new Firestore Enterprise edition, which features MongoDB API compatibility along with more than 200 new powerful query capabilities, additional data types, new index types and improved performance.

At a glance, this means you can use existing MongoDB application code, drivers, and open-source libraries & tools with Firestore. Furthermore, Firestore no longer needs to stick to queries that are exclusively mapped to indexes, and can instead run more general workloads that, for example, allow you to match a text field using a regular expression without ever creating an index.

In other words, you can think of it as Firestore with more flexibility, advanced query capabilities, better performance and additional control for the developer. Firestore with MongoDB compatibility features many highly requested capabilities like aggregations, nested array & set manipulations, regular expression matching on text strings, and the ability to perform lookups (JOIN) on data.

If you’re an experienced Firestore developer, you might suspect that these changes come with a new pricing model, and you’re right. You can check out the new pricing on our pricing page.

Getting started

You can create a new Firestore with MongoDB compatibility database using the Firestore Enterprise edition directly in the Firebase Console.

To edit queries, the Firebase console now features an advanced query editor, allowing you to author and execute MongoDB Query Language (MQL) queries and view results that include new BSON data types.

Want more control around indexing? You can now create unique, sparse and non-sparse indexes all from the Firebase Console. Since Firestore Enterprise edition doesn’t require indexes on every query, this gives you fine-grained control over which of your queries use or don’t use indexes, which lets you optimize both your costs and your database’s performance.

Of course, you can create and manage databases and indexes via the Firebase CLI as well.

Enterprise vs Standard edition

If you love the Firebase SDKs with realtime sync and offline capabilities, you can keep using Firestore Standard edition! Standard edition Firestore databases are not going away, so your existing Firestore projects will continue to run indefinitely without any pricing or behavior changes.

In an upcoming release, all of the goodness of Firestore Enterprise edition will also be accessible via the Firebase SDKs with realtime sync and offline. Stay tuned!

Firestore is ready for your MongoDB workloads

If you want to upgrade from Firestore Standard edition to Enterprise edition, you’ll have to wait for the upcoming SDK compatibility release. If you’re a MongoDB developer, Firestore Enterprise is ready for your database workloads today. Check out the documentation for how to get started.

We’re delighted to see all the interest in Firestore over the past years and we’re elated to share that we’re finally able to deliver the query features the developers have been requesting. Now that Firestore with MongoDB compatibility is out, please give it a try!

Show Me the Code: TypeScript & Web SDK Setup

Here is the production baseline pattern we use at CodingCat.dev when wiring Firestore with MongoDB compatibility is now generally available into a modern TypeScript web application:

import { initializeApp, getApps } from "firebase/app";
import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
};

export const app = getApps().length ? getApps()[0] : initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const auth = getAuth(app);

Production Web Architecture & Security Checklist

Whether we are deploying on Firebase App Hosting, Cloudflare Workers, or Vercel, shipping TypeScript 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 with MongoDB compatibility is now generally available 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 with MongoDB compatibility is now generally available on the Official Firebase Blog (published 2025-08-26 by Morgan Chen, Tyler Crowe, Minh Nguyen)
*Official Firebase Documentation: *Firebase Developer Docs & Web SDK Reference
Related on CodingCat.dev: App Hosting has faster deployments, route-based monitoring, and improved CI/CD setup
Related on CodingCat.dev: Full-text search and other searches with 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 Firestore with MongoDB compatibility is now generally available?

Firestore with MongoDB compatibility is now generally available (announced 2025-08-26 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, TypeScript workloads. In April, we released a public preview of Firestore with MongoDB compatibility available through Google Cloud. With this release, the Firebase team announced that Firestore with MongoDB compatibility is available in Firebase and we’re graduating to general availability! If you missed this earlier announcement, you might be wondering: What is MongoDB compatibility? And should I use it if I’m starting a new project? Let’s take a look. Developers can review the primary announcement on the Firebase Blog alongside our implementation patterns and production checklist above.

How do web developers use Firestore with MongoDB compatibility is now generally available with Next.js, SvelteKit, React, or Angular?

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

Enhance Your Firebase Studio Workflow with Gemini CLI: Web Architecture & Implementation Guide

Alex Patterson — Wed, 04 Nov 2026 05:42:15 +0000

Original: https://codingcat.dev/post/firebase-2025-07-firebase-studio-gemini-cli

The Mental Model: Why Enhance Your Firebase Studio Workflow with Gemini CLI Matters for Web Devs

As a Google Developer Expert (GDE) for Firebase and Senior Solutions Architect at CodingCat.dev, I evaluate every Firebase update through one lens: does it reduce boilerplate while keeping our runtime security and cloud bills predictable? 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.

We recently launched Gemini CLI, which integrates the robust capabilities of Google’s Gemini AI model directly into your command-line interface. The Firebase team announced Gemini CLI is now preinstalled in Firebase Studio! Gemini CLI offers you a powerful tool for a wide range of tasks beyond just code, including content generation and research. It includes generous usage tiers, advanced AI features, integrated Google Search for real-time context, and an open-source architecture for customization and contributions.

Who should use Gemini CLI?

Both Gemini in Firebase and Gemini CLI can perform similar tasks, but I recommend trying out Gemini CLI if you spend a significant amount of time in the terminal for tasks like code generation, debugging, executing commands, or managing project files. Gemini CLI provides a seamless, AI-powered experience without the need to switch contexts to a separate chat window.

Get started in Firebase Studio

To access Gemini CLI in Firebase Studio:

Gemini CLI is ready to go! In the future, all you need to do is enter gemini in the terminal to access it.

Alternatively, you can run Gemini CLI in non-interactive mode, which is useful for scripting and automation. In this mode, Gemini CLI automatically exits after executing the command you enter. To use this mode, use the --prompt or -p flag. For example: gemini -p "Create a markdown file that explains your app’s architecture"

Customize Gemini CLI

Settings: Edit.gemini/settings.json to change the theme, enable or disable the collection of usage statistics, adjust which tools Gemini CLI has access to, configure the checkpointing feature, and much more.
Environment variables: Gemini CLI automatically loads environment variables from the.env file, which is where you should store your GEMINI_API_KEY (required). Optionally, you can include which GEMINI_MODEL to use, your GOOGLE_CLOUD_PROJECT, and more.
Instructions: To adjust the context that Gemini CLI uses when following instructions, create a GEMINI.md file. This lets you give project-specific instructions, coding style guides, or relevant background information to Gemini, making its responses more tailored and accurate to your needs. You can use GEMINI.md to customize both Gemini CLI and Gemini in Firebase, unless you create a.idx/airules.md file as well (in which case Gemini CLI would use GEMINI.md, and Gemini in Firebase would use airules.md).

For more information and examples on how to adjust the settings, environment variables, and instructions, check out the documentation.

Commands to explore

You can chat with Gemini CLI with questions or requests. You could ask it:

explain [file_name.js]: If you encounter unfamiliar code, use this command to request an explanation. Replace [file_name.js] with the relevant file path or paste the code directly into the prompt.
refactor [code_snippet]: Enhance your code’s structure or efficiency by prompting Gemini to suggest refactoring improvements.
debug "Error: Module not found: 'firebase-admin'": When facing errors, provide the error message to Gemini for insights and potential solutions.
summarize "Key features of Firebase Realtime Database": Employ Gemini for rapid research and concise content summarization.

It also supports several built-in commands to help manage your session, customize the interface, and control its behavior, such as:

/help: View a comprehensive list of available commands and options, which serves as an excellent starting point for exploration.
/chat: Save and resume conversation history in order to create branching conversations, or resume a previous state from a later session.
/tools: Display a list of tools that are currently available within Gemini CLI.
/restore: Restore project files to the state they were in just before a tool was executed. This is particularly useful for undoing file edits made by a tool.

For a full list of commands, check out the documentation.

Show Me the Code: TypeScript & Web SDK Setup

Here is the production baseline pattern we use at CodingCat.dev when wiring Enhance Your Firebase Studio Workflow with Gemini CLI 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 Enhance Your Firebase Studio Workflow with Gemini CLI 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: *Enhance Your Firebase Studio Workflow with Gemini CLI on the Official Firebase Blog (published 2025-07-22 by Jess Kuras)
*Official Firebase Documentation: *Firebase Developer Docs & Web SDK Reference
Related on CodingCat.dev: Supercharge your Firebase Studio workflow with MCP servers
Related on CodingCat.dev: From vibe to reality: Integrating Firebase in Firebase Studio
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 Enhance Your Firebase Studio Workflow with Gemini CLI?

Enhance Your Firebase Studio Workflow with Gemini CLI (announced 2025-07-22 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 Enhance Your Firebase Studio Workflow with Gemini CLI with Next.js, SvelteKit, React, or Angular?

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

Build Responsive, AI-powered Apps with Cloud Functions for Firebase: Web Architecture & Implementation Guide

Alex Patterson — Wed, 04 Nov 2026 05:41:47 +0000

Original: https://codingcat.dev/post/firebase-2025-03-streaming-cloud-functions-genkit

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 Build Responsive, AI-powered Apps with Cloud Functions for Firebase by Daniel Lee, Jeff Huleatt on the Official Firebase Blog (2025-03-06), 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. App users demand instant, dynamic app experiences, whether they’re chatting with an AI assistant, generating content in real time, or waiting for live data.

The Mental Model: Why Build Responsive, AI-powered Apps with Cloud Functions for Firebase Matters for Web Devs

As a Google Developer Expert (GDE) for Firebase and Senior Solutions Architect at CodingCat.dev, I evaluate every Firebase update through one lens: does it reduce boilerplate while keeping our runtime security and cloud bills predictable? Firebase AI Logic lets you invoke Gemini and Imagen models from client and edge apps using the Firebase Web SDK while keeping your API credentials off the wire, enforcing Firebase App Check, and managing server-side prompt templates centrally.

AJ Pro-Tip from Alex: Combine Firebase AI Logic with server prompt templates, Firebase Remote Config feature flags, and project spend caps so you can iterate on prompts or swap Gemini models instantly without redeploying your Next.js or Astro frontend.

How It Works: Technical Breakdown & Implementation

Since their introduction in 2017, Cloud Functions for Firebase’s callable functions have focused on providing you with a streamlined server(less) development experience that simplifies server-to-client interactions. Now, The Firebase team announced two new features that make it easier than ever to build responsive, AI-powered apps:

Streaming responses for callable functions, Deliver data incrementally to clients.

A new onCallGenkit trigger, Seamlessly integrate Firebase Genkit to productionize generative AI workflows.

**Note: **In this post, we show how to stream data from a Node.js callable function to a client web app that’s using the Firebase JS SDK. We’re also working on bringing this to the Python functions SDK, as well as our Swift, Kotlin, and Dart client SDKs.

Send data to your app as it is generated

Traditionally, when a client application calls a server function, it has to wait for the entire response to be generated before it can do anything. This “all-or-nothing” approach works well for many scenarios, but it falls short when dealing with:

Why do generative AI APIs return their responses token-by-token?

With the new streaming capability for Callable Functions, your server can send data to the client in chunks, as it becomes available. The client can then process and display this data incrementally, creating a much more responsive and engaging user experience.

Imagine Firebase is building a web app for weather enthusiasts or frequent travelers that want to see the forecast for lots of locations at once, and that it calls a callable function to get these forecasts. Without streaming, they’d have to sit and wait while the forecast for each location is fetched, and can only start browsing the results once every location’s forecast is fetched and returned from the server.

With streaming, our weather enthusiasts can start viewing each location’s data as soon as it’s ready:

To stream results, check the acceptsStreaming field of the request object, and call response.sendChunk every time you have a chunk of data that’s ready to send back to the client. Return the full dataset at the end for clients that don’t accept streaming.

exports
    const

    const
        const

        // Stream each forecast as it resolves!
        if
            response.
        }

        return
    });

    // Fallback for non-streaming clients
    return
});

Use the Firebase client SDKs to consume the streaming response from a web app:

const
const
for
  updateUI
}
const

If you’re already using callable functions in your app, adding streaming behavior may just be a small change to your server and client code that results in big user-experience benefits!

For generative AI applications, The Firebase team built a new onCallGenkit trigger on top of this new streaming functionality.

Productionize Your AI-Powered Apps Faster

Firebase Genkit is an all-in-one toolkit to prototype, test, build, and monitor production-ready generative AI applications. The new onCallGenkit trigger now lets you deploy Genkit flows as secure, scalable APIs with one line:

// An example Genkit flow.
const
    {
        name: 
        // ...
    },
    async
        const
            `
        );
        for
            sendChunk
        }
        return
    },
);

// Deploy the flow with Cloud Functions for Firebase
exports

As above, use the functions SDK to consume the results from a client app:

const
const
for
  updateUI
}
const

With onCallGenkit, you leverage all features we offer in Cloud Functions for Firebase, like:

**Simplified Deployment: **Deploy your Genkit flows with just the firebase deploy command you are familiar with.

*Automatic Streaming: *onCallGenkit automatically handles the streaming setup for you. Just use sendChunk() within your Genkit flow, and call the stream method from the client SDK.

**Built-in Abuse Prevention: **Protect your AI-powered function with Firebase App Check.

**Secret Management: **Securely store and access API keys and other sensitive information with enterprise-grade Cloud Secret Manager.

**Concurrency: **Benefit from Cloud Function for Firebase 2nd gen features like concurrency to scale your service efficiently. With concurrency, one function instance can handle multiple concurrent requests, a great fit for AI applications that depend heavily on API calls.

Here’s a more robust sample based on the code above:

const
    {
        name: 
        inputSchema: z.
        outputSchema: z.
        streamSchema: z.
    },
    async
        const
            `
        );
        for
            sendChunk
        }
        return
    },
);

// Deploy to Firebase with secrets and App Check
const
exports
    {
        secrets: [geminiApiKey],
        enforceAppCheck: 
    },
    jokeTeller,
);

Roadmap

These new features are ready to use now with the 2nd gen Node.js runtime, but we’re still working on Python support. You can follow along as we implement it!

We’re still working on updating our Swift, Kotlin, and Dart client SDKs so that native mobile apps can also use this streaming functionality, alongside web apps. Until then, your functions can fall back to non-streaming behavior for these clients.

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 Build Responsive, AI-powered Apps with Cloud Functions 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

Resources, Official Docs & Related CodingCat.dev Guides

*Primary Release Source: *Build Responsive, AI-powered Apps with Cloud Functions for Firebase on the Official Firebase Blog (published 2025-03-06 by Daniel Lee, Jeff Huleatt)
*Official Firebase Documentation: *Firebase Developer Docs & Web SDK Reference
Related on CodingCat.dev: Add image generation to your apps with Imagen 3
Related on CodingCat.dev: App Hosting updates: rollbacks, SDK auto-configuration, and more
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 Build Responsive, AI-powered Apps with Cloud Functions for Firebase?

Build Responsive, AI-powered Apps with Cloud Functions for Firebase (announced 2025-03-06 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, AI, TypeScript, Security, Serverless workloads. App users demand instant, dynamic app experiences, whether they’re chatting with an AI assistant, generating content in real time, or waiting for live data. Developers can review the primary announcement on the Firebase Blog alongside our implementation patterns and production checklist above.

How do web developers use Build Responsive, AI-powered Apps with Cloud Functions for Firebase with Next.js, SvelteKit, React, or Angular?

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

Add image generation to your apps with Imagen 3 in Firebase: Web Architecture & Implementation Guide

Alex Patterson — Wed, 04 Nov 2026 05:41:45 +0000

Original: https://codingcat.dev/post/firebase-2025-03-imagen3-support-on-vertex-ai-sdks

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 Add image generation to your apps with Imagen 3 by Miguel Ramos on the Official Firebase Blog (2025-03-03), here is our hands-on CodingCat.dev breakdown of what actually shipped, how it works under the hood, and how we wire it into production TypeScript, Next.js, Astro, SvelteKit, React, and Angular applications. Update: As of May 2025, Vertex AI in Firebase has evolved into an offering named Firebase AI Logic to give developers more options for easily integrating generative AI models into their apps. Check out the documentation to learn more.

The Mental Model: Why Add image generation to your apps with Imagen 3 Matters for Web Devs

As a Google Developer Expert (GDE) for Firebase and Senior Solutions Architect at CodingCat.dev, I evaluate every Firebase update through one lens: does it reduce boilerplate while keeping our runtime security and cloud bills predictable? Firebase AI Logic lets you invoke Gemini and Imagen models from client and edge apps using the Firebase Web SDK while keeping your API credentials off the wire, enforcing Firebase App Check, and managing server-side prompt templates centrally.

AJ Pro-Tip from Alex: Combine Firebase AI Logic with server prompt templates, Firebase Remote Config feature flags, and project spend caps so you can iterate on prompts or swap Gemini models instantly without redeploying your Next.js or Astro frontend.

How It Works: Technical Breakdown & Implementation

Vertex AI in Firebase allows developers to integrate generative AI into their applications by providing a streamlined, serverless, and secure way to access the Gemini AI models. Used by thousands of apps today, it handles the complexities of AI infrastructure, simplifies development, letting you focus on building great user experiences.

Now, we’re taking that further adding support for the Imagen models (Imagen 3 and Imagen 3 Fast), in addition to the Gemini family of models. This lets you add image generation directly to your Android, iOS, Flutter, and Web applications, bringing the same ease of use and scalability you expect.

What can you do with Imagen 3 in Firebase

The Vertex AI in Firebase SDKs allow to choose between speed and quality giving you access to both Imagen 3 models:

**Imagen 3: **A high-quality image generation model, capable of producing detailed images.
**Imagen 3 Fast: **A low-latency version of Imagen 3, optimized for speed. Choose this when responsiveness is paramount.

Here’s what’s possible, directly within your client-side code:

*Generate images from text: *String prompt = "A futuristic cityscape at sunset"; - that’s all it takes.
**Various formats: **create images in a range of resolutions, allowing you to optimize for storage and display.
**Text within images: **generate images that incorporate text, opening up possibilities for dynamic content creation within your app.
**Watermarking: **add watermarks for image attribution and provenance.
**Safety settings: **adjust safety filters to help control the content generated.
**Up to 4 images: **generate a maximum of four images per request to manage device resources.

Take a look at these photos generated with Imagen 3:

Getting started

To integrate Imagen 3 into your Firebase project, you should enable Vertex AI in Firebase, add the Firebase SDK to your project, and initialize the service. Once set up, generate an image by initializing your chosen Imagen model and calling generateImages() with your text prompt.

// Initialize the Vertex AI service
let

// Initialize with an Imagen 3 model that supports your use case
// like "imagen-3.0-generate-002" or "imagen-3.0-fast-generate-001"
let

// Provide an image generation prompt – this could come from user input
let

// To generate an image, call generateImages with the text prompt
let

// Handle the generated image
guard
  fatalError
}
let

// Specify the number of images
final
  model
    generationConfig
);
const

final

final
for
  // Process the image
}

If you need more control over the image generation, you can configure the model and even set safety settings, for example:

const
  aspectRatio: ImagenAspectRatio.LANDSCAPE_16x9,
  imageFormat: ImagenImageFormat.
  addWatermark: 
};

const
  model: 
  generationConfig,
  safetySettings: {
    safetyFilterLevel: ImagenSafetyFilterLevel.BLOCK_LOW_AND_ABOVE,
    personFilterLevel: ImagenPersonFilterLevel.ALLOW_ADULT,
  }
});

const

// If fewer images were generated than were requested,
// then filteredReason will describe the reason they were filtered out
if
  console.
}

Current limitations

While this release brings significant power to your client-side code, some advanced Imagen 3 features are not yet supported:

**Image editing: **features like upscaling are not available.
**Including images as input: **not supported on the client SDK.
**Generating using a predefined style: **not available.

Production Web Architecture & Security Checklist

Whether we are deploying on Firebase App Hosting, Cloudflare Workers, or Vercel, shipping AI features to production requires defense-in-depth across three layers:

**Enforce Firebase App Check & Attestation: **Protect your web endpoints, Cloud Functions, Data Connect GraphQL resolvers, and Firebase AI Logic calls against unauthorized replay or billing abuse using Firebase App Check with reCAPTCHA Enterprise.
**Validate Locally with the Firebase Emulator Suite: **Run deterministic integration tests against local Firestore, Auth, Functions, and Data Connect PostgreSQL emulators before promoting schema or rule changes to production.
**Keep Server & Client Boundaries Type-Safe: **Use the modular Firebase Web SDK and generated TypeScript bindings so SSR frameworks like Next.js, Astro, SvelteKit, and Angular serialize state cleanly without hydration flickers.

Conclusion

Accelerate your full-stack web and AI development by pairing Add image generation to your apps with Imagen 3 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: *Add image generation to your apps with Imagen 3 on the Official Firebase Blog (published 2025-03-03 by Miguel Ramos)
*Official Firebase Documentation: *Firebase Developer Docs & Web SDK Reference
Related on CodingCat.dev: February Update: What's New in Data Connect
Related on CodingCat.dev: Build Responsive, AI-powered Apps with Cloud Functions for Firebase
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 Add image generation to your apps with Imagen 3?

Add image generation to your apps with Imagen 3 (announced 2025-03-03 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, AI, TypeScript, Serverless workloads. Update: As of May 2025, Vertex AI in Firebase has evolved into an offering named Firebase AI Logic to give developers more options for easily integrating generative AI models into their apps. Check out the documentation to learn more. Developers can review the primary announcement on the Firebase Blog alongside our implementation patterns and production checklist above.

How do web developers use Add image generation to your apps with Imagen 3 with Next.js, SvelteKit, React, or Angular?

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

The 14 Open-Source Repos Powering Code-Driven Video in 2026: How We Built 3D AJ the Cat

Alex Patterson — Wed, 04 Nov 2026 05:23:06 +0000

Original: https://codingcat.dev/post/14-open-source-repos-code-driven-video-how-we-built-3d-aj

Every AI engineering timeline this month is flooded with launch films, kinetic typography reels, and 3D product videos captioned "one prompt in Opus 5.5". If you actually believed a 20-word vibe prompt inside a standard chat window produced those 60fps showreels, you probably tried it yourself and got a centered title over a purple gradient with drifting CSS animations.

A recent viral breakdown by @0xnicc0 and @seeconvm pulled back the curtain on what those viral videos are actually hiding: foundation models cannot output an MP4 file directly. Every viral code-rendered film is a deterministic program written by an agent with shell access, driven by a strict window.seek(t) frame contract, closed-form spring physics, beat-locked audio (beats.json), and a contact-sheet critique loop powered by 14 free open-source repositories.

On CodingCat.dev, we took that exact 14-repo stack and wired it directly into our production site and local RTX 5090 video studio:

We built our canonical 3D Vinyl-Toy AJ the Cat GLB model (aj-3d-mascot.glb) using Three.js, Blender, and Blender MCP (ahujasid/mcp-for-blender), complete with a live 2D Vector vs. 3D GLB toggle on /mascot-lab\ and our homepage Hero.
We upgraded AJ's runtime (AjAnimatedMascot.astro and Aj3dMascotViewer.astro) with a shared deterministic window.seek(t)\ motion engine (src/lib/aj-motion-engine.ts) using closed-form harmonic springs and seeded noise.
We wired 120 BPM audio-reactive lip-sync into our Podcasts (/podcasts and /podcast/[slug]) and automated our 1080p Course Factory with faster-whisper, FFmpeg, and headless Chrome DevTools MCP.

Let's break down the mental model behind deterministic code-driven video, see the Architecture Diagrams, rank all 14 repositories in an Alex Patterson Architectural Tier List, and walk through the exact TypeScript and Python code powering 3D AJ.

1. The Mental Model: Why window.seek(t) Beats Non-Deterministic Timers

When you ask an LLM to write a web animation without a render contract, it defaults to requestAnimationFrame, setTimeout, CSS transitions, and Math.random(). That works fine for a casual decorative hover effect, but it falls apart the moment a headless browser tries to capture 900 frames for a 15-second 60fps video:

If frame 240 takes 45ms to paint instead of 16.6ms, timer-based animations drift out of sync with the audio track.
If a headline lands 10 frames too early at second 4.0, you cannot jump straight to frame 240 to inspect it without re-simulating frames 0 through 239.
If particle positions use Math.random(), rendering frame 300 twice produces two different image hashes, breaking loop continuity and automated visual diffs.

The solution is a strict Frame Function Contract enforced via your agent rules (CLAUDE.md or GEMINI.md):

window.seek(t)\ Paints Frame t\: Nothing else drives the screen. Passing window.seek(4.0) renders the exact visual state at 4.000 seconds deterministically.
Closed-Form Springs (spring(t - t_i)\): Instead of accumulating velocity state frame-by-frame in a physics loop, every movement is evaluated as an analytical function of elapsed time since impulse t_i.
Seeded Hash Noise Only: Replace Math.random() with a deterministic 32-bit integer hash (seededNoise1D(seed, t)) so frame 300 hashes identically on every run.
The FFmpeg Contact-Sheet Critic: Before the agent shows you an MP4, it uses FFmpeg to extract a 2-fps contact sheet and a 12-frame strip around the fastest motion, inspects its own rendered frames via Chrome DevTools MCP, scores them from 1 to 10, and fixes the worst 3 defects automatically.

Architectural Piece	What Goes Wrong Without It	What Fixes It in Production
Frame Function	Renders drift under GPU load; every edit requires replaying from t = 0.	window.seek(t) + pure analytical functions of time + zero CSS timers.
Closed-Form Springs	Fixed linear/cubic-bezier easing feels robotic; iterative physics breaks random frame access.	track(t) = v0 + Σ (v_i - v_(i-1)) * spring(t - t_i) with analytical damping.
The Agent Rig	Chat-only models never see or hear their own broken layouts or overlapping text.	Agent shell + Headless Chromium / Chrome DevTools MCP + FFmpeg.
Audio & Beat Clock	Voiceovers and music float on top of visuals with off-beat state transitions.	Chatterbox / F5-TTS + faster-whisper word timestamps + librosa beats.json.
The Contact-Sheet Critic	The first render ships with clipped text, dead beats, or loop stutters.	6-across FFmpeg contact sheet + 360px mobile readability test + automated self-critique.

2. Alex Patterson's Architectural Tier List: All 14 Code-Driven Video Repos Ranked

Instead of treating all 14 repositories from @0xnicc0's list as interchangeable, here is how they rank in our production CodingCat.dev stack based on determinism, GPU efficiency, MCP agent ergonomics, and how heavily we rely on them to build 3D AJ and our Courses:

{
  "_key": "aj3d_tierlist_d57fa109f9",
  "_type": "tierList",
  "ajComment": "We used Three.js, Blender MCP, faster-whisper & FFmpeg to build my 3D GLB rig! 🐾🧊",
  "items": [
    {
      "_key": "aj3d_ti_0_c4bda701f2",
      "_type": "tierItem",
      "category": "Browser 3D & WebGPU",
      "details": [
        {
          "_key": "aj3d_td_0_3_60dddc91b1",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Renders aj-3d-mascot.glb in Aj3dMascotViewer.astro with custom Royal Purple & Electric Lime rim lighting and deterministic window.seek(t) bone posing."
        }
      ],
      "name": "Three.js (mrdoob/three.js)",
      "summary": "The undisputed king of browser 3D. Zero plugin install for users, native glTF 2.0 .glb support, and instant seek(t) scrubbing.",
      "tier": "S"
    },
    {
      "_key": "aj3d_ti_1_c3ea8f2789",
      "_type": "tierItem",
      "category": "Media Compositor & Critic",
      "details": [
        {
          "_key": "aj3d_td_1_3_2b2088076a",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Encodes 1080p MP4 lessons, normalizes audio to -14 LUFS, and generates 6-across contact sheets for agent visual critique."
        }
      ],
      "name": "FFmpeg (FFmpeg/FFmpeg)",
      "summary": "Non-negotiable infrastructure. Every frame pipeline, audio normalizer, and contact-sheet critic ends in FFmpeg.",
      "tier": "S"
    },
    {
      "_key": "aj3d_ti_2_ac3e5e5489",
      "_type": "tierItem",
      "category": "Word-Level Audio Alignment",
      "details": [
        {
          "_key": "aj3d_td_2_3_9bb6db9823",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Runs on our local RTX 5090 in synthesize-voiceover.py to extract sub-20ms word timestamps for caption burn-in and AJ lip-sync."
        }
      ],
      "name": "faster-whisper (SYSTRAN/faster-whisper)",
      "summary": "4x faster than stock Whisper with lower VRAM via CTranslate2. Gives agents an exact millisecond clock for every spoken word.",
      "tier": "S"
    },
    {
      "_key": "aj3d_ti_3_79dde935e4",
      "_type": "tierItem",
      "category": "Agentic 3D Scene Control",
      "details": [
        {
          "_key": "aj3d_td_3_3_e60917bafa",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Bridges Claude / Antigravity over a socket (port 9876) to execute scripts/blender-aj-3d-pipeline.py, verify AJ's 12 rig nodes, and set up 3-point lighting."
        }
      ],
      "name": "Blender MCP (ahujasid/mcp-for-blender)",
      "summary": "Turns Blender from a manual GUI into an agent-programmable 3D compiler. Essential for automated mesh inspection and rigging.",
      "tier": "S"
    },
    {
      "_key": "aj3d_ti_4_cd237ff0af",
      "_type": "tierItem",
      "category": "3D Modeling, Rigging & Baking",
      "details": [
        {
          "_key": "aj3d_td_4_3_750b1734d0",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Headless -b -P verification of AJ's armature hierarchy, PBR material roughness tokens, and .glb export."
        }
      ],
      "name": "Blender (blender/blender)",
      "summary": "The open-source 3D standard. Combined with Python bpy, it eliminates manual 3D artist bottlenecks.",
      "tier": "A"
    },
    {
      "_key": "aj3d_ti_5_df5cd9265c",
      "_type": "tierItem",
      "category": "React Video Composition",
      "details": [
        {
          "_key": "aj3d_td_5_3_f870e184fc",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Declarative <Sequence> and useCurrentFrame() architecture for multi-scene React video compositions and data stories."
        }
      ],
      "name": "Remotion (remotion-dev/remotion)",
      "summary": "Best-in-class DX when your team already builds in React and Tailwind CSS. Deterministic frame rendering out of the box.",
      "tier": "A"
    },
    {
      "_key": "aj3d_ti_6_1f681ee5e6",
      "_type": "tierItem",
      "category": "Agent Procedural Memory",
      "details": [
        {
          "_key": "aj3d_td_6_3_fb2f3e34c3",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Teaches coding agents how to write idiomatic Remotion compositions, spring interpolations, and audio sync without hallucinating APIs."
        }
      ],
      "name": "Remotion Skills (remotion-dev/skills)",
      "summary": "Crucial context upgrade. Without this skill, LLMs write brittle React effects instead of pure useCurrentFrame() math.",
      "tier": "A"
    },
    {
      "_key": "aj3d_ti_7_01b72c0a65",
      "_type": "tierItem",
      "category": "Live DOM & Frame Inspection",
      "details": [
        {
          "_key": "aj3d_td_7_3_5ea2bd4e01",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Lets our agent inspect /mascot-lab, verify WebGL canvas sizing, check console errors, and audit rendered frames before MP4 export."
        }
      ],
      "name": "Chrome DevTools MCP (ChromeDevTools/chrome-devtools-mcp)",
      "summary": "Closes the blind-agent gap. Your agent sees the exact DOM, computed styles, and pixel output in real time.",
      "tier": "A"
    },
    {
      "_key": "aj3d_ti_8_9832bfc504",
      "_type": "tierItem",
      "category": "Timeline & UI Motion",
      "details": [
        {
          "_key": "aj3d_td_8_3_dbf414d1e5",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Drives deterministic timeline scrubbing (tl.time(t)) and complex SVG morphs alongside our closed-form spring engine."
        }
      ],
      "name": "GSAP (greensock/GSAP)",
      "summary": "Battle-tested timeline control. Just remember to pause auto-ticking and drive tl.time(t) from window.seek(t) in render mode.",
      "tier": "A"
    },
    {
      "_key": "aj3d_ti_9_b82afdd23f",
      "_type": "tierItem",
      "category": "Agent-Native HTML-to-Video",
      "details": [
        {
          "_key": "aj3d_td_9_3_3527234afe",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Compiles standalone HTML/CSS/JS scenes directly into high-fps video frames with minimal framework overhead."
        }
      ],
      "name": "HyperFrames (heygen-com/hyperframes)",
      "summary": "Purpose-built for coding agents that prefer writing raw HTML/Canvas over full React bundles. Fast and lightweight.",
      "tier": "B"
    },
    {
      "_key": "aj3d_ti_10_9f1ece4f53",
      "_type": "tierItem",
      "category": "Open-Source Voice Synthesis",
      "details": [
        {
          "_key": "aj3d_td_10_3_3b8dee265e",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Zero-shot expressive TTS alternative alongside our RTX 5090 F5-TTS pipeline for generating clean lesson narration at $0 API cost."
        }
      ],
      "name": "Chatterbox (resemble-ai/chatterbox)",
      "summary": "Impressive open-source expressive voice cloning with emotion control. Great local alternative to paid ElevenLabs seats.",
      "tier": "B"
    },
    {
      "_key": "aj3d_ti_11_36fcd0b6a0",
      "_type": "tierItem",
      "category": "Node-Based Diffusion & 3D Gen",
      "details": [
        {
          "_key": "aj3d_td_11_3_94519bb38f",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Local GPU workflow graph for generating multi-view character turnaround sheets (Front, Left, Right) and base video plates for generate-then-trace."
        }
      ],
      "name": "ComfyUI (Comfy-Org/ComfyUI)",
      "summary": "Unmatched local GPU control for image-to-3D plates and texture maps, though JSON workflow graphs require disciplined versioning.",
      "tier": "B"
    },
    {
      "_key": "aj3d_ti_12_d8d0b0c4c6",
      "_type": "tierItem",
      "category": "Automated UI & Design Critic",
      "details": [
        {
          "_key": "aj3d_td_12_3_92fbe57224",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Audits typography hierarchy, spacing tokens, contrast ratios, and visual polish against banned AI slop patterns."
        }
      ],
      "name": "Impeccable (pbakaus/impeccable)",
      "summary": "Great automated design gate to stop agents from shipping generic purple-gradient SaaS clichés.",
      "tier": "B"
    },
    {
      "_key": "aj3d_ti_13_d153775d03",
      "_type": "tierItem",
      "category": "Reference Media Ingestion",
      "details": [
        {
          "_key": "aj3d_td_13_3_ad6ff13a87",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Pulls reference launch videos and audio tracks so FFmpeg can slice 0.5s reference frames into docs/style_guide.md."
        }
      ],
      "name": "yt-dlp (yt-dlp/yt-dlp)",
      "summary": "Indispensable utility for reference grammar extraction, though strictly an ingestion CLI rather than a rendering engine.",
      "tier": "C"
    }
  ],
  "subtitle": "Ranked from S-Tier to C-Tier across deterministic window.seek(t) support, GPU performance, MCP agent integration, and how we use them for 3D AJ.",
  "title": "Alex's 2026 Code-Driven Video & 3D Web Tier List (All 14 Repos Ranked)"
}

3. Deep Dive: How We Built and Upgraded 3D AJ the Cat Across CodingCat.dev

Before this upgrade, AJ the Cat lived in two separate worlds on CodingCat.dev:

Static 3D Turnaround Renders: High-resolution Pixar-style vinyl-toy studio JPEGs (assets/AJ-3D-Headphones-Front.jpg, Left.jpg, Right.jpg) used in YouTube thumbnails and video bumpers.
2D Articulated Vector SVG (AjAnimatedMascot.astro\): A 57-path inline SVG rig with 14 bone pivot groups (#aj-head-group, #aj-arm-right, #aj-tail, etc.) driven by CSS @keyframes and random setTimeout blinks.

While the 2D SVG rig had zero external JavaScript dependencies, its CSS @keyframes and Math.random() blink timers meant it was not frame-seekable for headless video rendering, and visitors could not orbit or inspect a real 3D mesh in the browser.

Here is the exact 4-stage architecture we implemented to unify 2D Vector AJ and 3D GLB AJ under a single deterministic motion engine.

Stage 1: Programmatic 3D Vinyl-Toy GLB Generation (scripts/build-aj-3d-glb.mjs) & Blender MCP Verification

To ensure 3D AJ matches every single anatomical law in our Design System (09-assets.md) while keeping the binary payload compact (756 KB) and 100% deterministic, we built scripts/build-aj-3d-glb.mjs and paired it with our headless Blender MCP verification script (scripts/blender-aj-3d-pipeline.py).

Every anatomical feature of AJ is mapped to a named glTF 2.0 node so both Blender (bpy.data.objects) and Three.js (gltf.scene.getObjectByName) can target the exact same bones:

AjRoot -> AjPedestal + AjBodyRoot
AjTorso (Matte-black #0B0B0E PBR fur with roughness 0.62 + dark charcoal #2D2D30 oval belly patch)
AjCollar + AjHexTag (Soft Lavender #B4A7D6 collar with hexagonal gold & Royal Purple "AJ" tag)
AjHeadGroup -> AjEarLeft, AjEarRight, AjWhiskersLeft, AjWhiskersRight
AjEyeLeftPupil & AjEyeRightPupil (Electric Lime Green #C5E86C eyes with vertical black pupils and dual white catchlights)
AjJawMouth (Articulated jaw and pink tongue viseme group for 120 BPM audio-reactive lip-sync)
AjHeadphonesGroup (CodingCat.dev Podcast charcoal headband + Royal Purple #7C3AED & Soft Lavender #B4A7D6 earcups fitting directly over his cat ears)

# scripts/blender-aj-3d-pipeline.py
import bpy

TOKENS = {
    "fur_black": (0.043, 0.043, 0.055, 1.0),       # #0B0B0E
    "belly_charcoal": (0.176, 0.176, 0.188, 1.0),  # #2D2D30
    "eye_lime": (0.773, 0.910, 0.424, 1.0),        # #C5E86C
    "royal_purple": (0.486, 0.227, 0.929, 1.0),    # #7C3AED
    "soft_lavender": (0.706, 0.655, 0.839, 1.0),   # #B4A7D6
}

def import_and_verify_aj_glb(glb_path: str, export_path: str):
    """Import AJ 3D GLB, verify canonical node hierarchy for seek(t), and re-export optimized GLB."""
    bpy.ops.wm.read_factory_settings(use_empty=True)
    bpy.ops.import_scene.gltf(filepath=glb_path)

    required_nodes = [
        "AjRoot", "AjBodyRoot", "AjTorso", "AjHeadGroup",
        "AjHeadphonesGroup", "AjEyeLeftPupil", "AjEyeRightPupil",
        "AjJawMouth", "AjArmLeft", "AjArmRight", "AjTail", "AjHexTag",
    ]
    present = {obj.name for obj in bpy.data.objects}
    missing = [n for n in required_nodes if n not in present]
    if missing:
        raise RuntimeError(f"Missing canonical 3D AJ rig nodes: {missing}")

    bpy.ops.export_scene.gltf(filepath=export_path, export_format="GLB", export_yup=True)

Stage 2: Closed-Form Springs & Deterministic window.seek(t) (src/lib/aj-motion-engine.ts)

In @0xnicc0 and @seeconvm's guide, the secret to lifelike motion that remains 100% seekable at any arbitrary frame t is stacking closed-form harmonic springs:

track(t) = v0 + Σ (v_i - v_(i-1)) * spring(t - t_i)

Because closedFormSpring(dt, omega, zeta) is a pure analytical equation using Math.exp(-zeta * omega * dt) and Math.cos(omegaD * dt), evaluating frame 812 (t = 13.533s) requires zero knowledge of frames 0\ through 811\.

Here is the production motion engine we shipped in apps/site/src/lib/aj-motion-engine.ts:

// apps/site/src/lib/aj-motion-engine.ts
export function hashUint32(n: number): number {
    let x = (n | 0) + 0x9e3779b9;
    x = Math.imul(x ^ (x >>> 16), 0x85ebca6b);
    x = Math.imul(x ^ (x >>> 13), 0xc2b2ae35);
    return (x ^ (x >>> 16)) >>> 0;
}

export function seededUnitFloat(seed: number, step: number): number {
    return hashUint32(seed * 747796405 + step * 2891336453) / 4294967295;
}

export function closedFormSpring(
    dt: number,
    omega = 18.0,
    zeta = 0.58,
): number {
    if (dt <= 0) return 0;
    if (dt > 6) return 1;
    if (zeta < 1) {
        const omegaD = omega * Math.sqrt(1 - zeta * zeta);
        const env = Math.exp(-zeta * omega * dt);
        const cosTerm = Math.cos(omegaD * dt);
        const sinTerm = (zeta / Math.sqrt(1 - zeta * zeta)) * Math.sin(omegaD * dt);
        return 1 - env * (cosTerm + sinTerm);
    }
    const env = Math.exp(-omega * dt);
    return 1 - env * (1 + omega * dt);
}

Both <AjAnimatedMascot /> (2D SVG) and <Aj3dMascotViewer /> (3D Three.js GLB) subscribe to window.seek(t) (cc:seek custom event) and call computeAjPoseAtTime(t, state). You can test this live right now on /mascot-lab\ using the window.seek(t)\ frame scrubber or by opening DevTools and running window.seek(4.25).

Stage 3: Zero-LCP-Penalty 3D Three.js Viewer (Aj3dMascotViewer.astro)

A common mistake when adding Three.js to a content site is mounting a heavy WebGL canvas above the fold that blocks Largest Contentful Paint (LCP).

On CodingCat.dev, we kept our zero-JS 57-path 2D SVG rig as the instant-paint SSR default and added an interactive 2D SVG / 3D GLB toggle in the Homepage Hero (AnimatedHero.astro) and on /mascot-lab\. When you switch to 3D GLB, Aj3dMascotViewer.astro loads /models/aj-3d-mascot.glb (756 KB), lights AJ with ACES Filmic tone mapping plus Royal Purple (#7C3AED) and Electric Lime (#C5E86C) spot rim lights, and binds cursor coordinates to AjEyeLeftPupil and AjEyeRightPupil.

Stage 4: 120 BPM Audio-Reactive Lip-Sync on Podcast Pages & Video Studio

In Section 6 of the Opus 5.5 Motion Design guide ("Springs and Sound, or Why Cheap Motion Feels Cheap"), sound and picture must share the exact same clock. We wired PodcastListen.astro and /podcasts to window.setAjAudioAmplitude(amp, bpm):

Whenever you play an episode in PodcastListen.astro (or click Test AJ 120 BPM Beat Sync on /podcasts), AJ's jaw viseme (#aj-talking-frame in 2D SVG and AjJawMouth in 3D GLB), head nod, and ear bounce lock to the audio envelope at 120 BPM.
In our local RTX 5090 tools/video-studio/synthesize-voiceover.py pipeline, faster-whisper extracts word-level timestamps into storyboard.json so every rendered Course Lesson video aligns captions, diagram transitions, and AJ reactions to the millisecond.

AJ Pro-Tip Callout: Never Use Math.random()\ or Unpaused Timelines in Headless Video Renders When capturing frames with Playwright or Headless Chrome, even a single Math.random() inside a blink timer or particle emitter will cause a visual stutter at your video's loop point. Always derive blinks and noise from hashUint32(seed + Math.floor(t * 60)) and drive every animation from window.seek(t).

4. Full Course Roadmap: 5 Flagship Stack Courses + 14 Deep-Dive Tool Courses

To help you master this entire code-driven media and 3D web stack without paying $1,200 per launch video, we have prepped 19 new Courses (5 Flagship Architectural Stack Courses + 14 dedicated Tool-by-Tool Courses, totaling 95 Lessons) in the CodingCat.dev Course Factory (/courses):

The 5 Flagship Stack Courses

Flagship 1: Programmatic Video with React, Remotion & Agent Skills (Remotion + Remotion Skills)
Flagship 2: Agentic 3D Web Pipelines with Blender, Blender MCP & Three.js (Blender + Blender MCP + Three.js)
Flagship 3: Deterministic HTML Motion & Visual Critique with HyperFrames, GSAP, Impeccable & Chrome DevTools MCP (HyperFrames + GSAP + Impeccable + Chrome DevTools MCP)
Flagship 4: Local GPU Audio & Diffusion Pipelines with Chatterbox, faster-whisper & ComfyUI (Chatterbox + faster-whisper + ComfyUI)
Flagship 5: Automated Media Engineering & Reference Extraction with FFmpeg & yt-dlp (FFmpeg + yt-dlp)

The 14 Dedicated Tool-by-Tool Courses (1 Per GitHub Repo)

Course #	Course Title & Slug (/course/[slug])	Primary GitHub Repo	Core Production Deliverable
01	Remotion in Production: React Video Composition (/course/remotion-react-video-production)	remotion-dev/remotion	Multi-aspect-ratio 60fps launch video rendered from React + Tailwind CSS.
02	Remotion Skills for AI Coding Agents (/course/remotion-skills-ai-agents)	remotion-dev/skills	Custom SKILL.md harness that teaches Claude Code & Antigravity deterministic video rules.
03	Blender 5.0 for Web Developers: Headless Python & GLB (/course/blender-headless-python-web-devs)	blender/blender	Automated bpy script that builds, lights, and exports a <1MB .glb mascot.
04	Blender MCP: Driving 3D Scenes with AI Agents (/course/blender-mcp-agentic-3d-scenes)	ahujasid/mcp-for-blender	Live TCP socket MCP server letting an agent model, rig, and render 3D AJ.
05	Three.js & WebGPU in Production: Interactive 3D Mascots (/course/threejs-webgpu-3d-mascots)	mrdoob/three.js	Lazy-loaded with orbital camera, rim lights, and seek(t).
06	GSAP Deterministic Timelines & SVG Morphing (/course/gsap-deterministic-timelines-svg)	greensock/GSAP	Frame-locked tl.time(t) UI morphs and 57-path SVG bone animations.
07	HyperFrames: Agent-Native HTML-to-Video Rendering (/course/hyperframes-html-to-video-agents)	heygen-com/hyperframes	Zero-React standalone HTML/Canvas video compiler driven by window.seek(t).
08	faster-whisper on Local GPU: Word-Level Captions & Lip-Sync (/course/faster-whisper-word-level-captions)	SYSTRAN/faster-whisper	Sub-20ms word alignment pipeline driving dynamic captions and mascot visemes.
09	Chatterbox TTS: Zero-Shot Local Voice Cloning (/course/chatterbox-local-voice-cloning)	resemble-ai/chatterbox	Expressive local voiceover synthesizer with phonetic code identifier rules.
10	FFmpeg for AI Video Pipelines & Contact-Sheet Critics (/course/ffmpeg-ai-video-contact-sheet-critics)	FFmpeg/FFmpeg	-14 LUFS EBU R128 audio normalization, 6-across contact sheets, and H.264/AV1 mastering.
11	Chrome DevTools MCP: Self-Healing Visual Agent Loops (/course/chrome-devtools-mcp-visual-agent-loops)	ChromeDevTools/chrome-devtools-mcp	Automated DOM/WebGL inspection loop that catches overlapping text before export.
12	Impeccable: Automated Design & Motion Polish Gates (/course/impeccable-automated-design-critique)	pbakaus/impeccable	Pre-export design critic enforcing W3C design tokens and banning generic AI gradients.
13	ComfyUI for 3D Turnarounds & Generate-Then-Trace (/course/comfyui-3d-turnarounds-video-workflows)	Comfy-Org/ComfyUI	Reproducible API workflow for multi-view mascot sheets and base motion plates.
14	yt-dlp & Librosa: Reference Grammar & Beat Extraction (/course/yt-dlp-librosa-reference-beat-extraction)	yt-dlp/yt-dlp	Automated reference shotlist extractor (style_guide.md) and 120 BPM beats.json generator.

5. Verdict: Purrfect or Pass?

Purrfect For: Developer educators, SaaS founders, and frontend engineers who want agency-grade launch films, interactive 3D mascots (like 3D AJ), and automated video courses rendered deterministically from Git-versioned TypeScript and Python code for $0 in licensing fees.
Pass If: You need photorealistic live-action human cinema with complex cloth physics (where diffusion video models like Veo 3.1 still belong) or you are unwilling to write a structured brief.md and window.seek(t) render contract.

Head over to /mascot-lab\ right now to toggle between 2D Vector AJ and 3D Three.js GLB AJ, scrub the window.seek(t)\ timeline, download aj-3d-mascot.glb, and explore all 19 new Courses on /courses\!

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

Alex Patterson — Tue, 03 Nov 2026 18:08:11 +0000

Original: https://codingcat.dev/post/firebase-2025-10-adding-ai-powered-reviews

Calling frontier multimodal models directly from a web or mobile client is a security minefield if you expose raw API keys or hardcode brittle system prompts in your frontend bundle. Following the announcement of AI in action: Adding AI-powered reviews by Alexander Nohe, Jeff Huleatt on the Official Firebase Blog (2025-10-01), here is our hands-on CodingCat.dev breakdown of what actually shipped, how it works under the hood, and how we wire it into production TypeScript, Next.js, Astro, SvelteKit, React, and Angular applications. Sometimes, the best AI feature is a subtle one. In our Friendly Eats app, we wanted to automatically suggest a star rating as a user wrote their full review. This not only reduces the friction of submitting a review, but had the unexpected benefit of helping users understand how others might perceive their review.

The Mental Model: Why AI in action: Adding AI-powered reviews Matters for Web Devs

As a Google Developer Expert (GDE) for Firebase and Senior Solutions Architect at CodingCat.dev, I evaluate every Firebase update through one lens: does it reduce boilerplate while keeping our runtime security and cloud bills predictable? Firebase AI Logic lets you invoke Gemini and Imagen models from client and edge apps using the Firebase Web SDK while keeping your API credentials off the wire, enforcing Firebase App Check, and managing server-side prompt templates centrally.

AJ Pro-Tip from Alex: Combine Firebase AI Logic with server prompt templates, Firebase Remote Config feature flags, and project spend caps so you can iterate on prompts or swap Gemini models instantly without redeploying your Next.js or Astro frontend.

How It Works: Technical Breakdown & Implementation

As the user types in the dialog, the star rating automatically updates based on the content of their review. Importantly, the suggested star rating can also be overridden, because we want the reviewer to have the final say!

Read on to see what decisions we made to implement this new feature.

Design considerations

We chose to use a client side SDK, in this case Firebase AI Logic. The primary reason that we chose to use Firebase AI Logic is to protect our Gemini API key.

Using a server side SDK will also protect the API keys, but considering that we are not pulling in massive amounts of data and are just running quick inference, we decided to settle on Firebase AI Logic.

First, Firebase AI Logic lets us use an on-device model if one is available, like Chrome’s Gemini Nano. That can help limit a significant number of calls to our Gemini API key.

Remote Gemini calls made with AI Logic go through a proxy before reaching the Gemini model endpoints. The proxy stores the API keys so that we don’t need to include our Gemini API key in the client-side code. We can then make requests to the proxy and the proxy validates your app and forwards the API keys to the appropriate endpoint (either Vertex AI with a service account or Google Generative AI with an API key).

Another feature that Firebase AI Logic provides which helps keep our endpoints secure from abuse is automatic integration with Firebase App Check to ensure that requests originating to our AI endpoints come from your app. This is done through an attestation provider like ReCaptcha Enterprise and its invisible attestation mechanism. It may add a few ms before the first request to Gemini in the app, but is otherwise seamless to the user.

Picking a model is a tradeoff between cost, speed, and quality. Normally, I start using the largest model and work my way down to the smaller models to determine whether the trade offs from a larger model to a smaller model make sense. Since we are really just asking for a small output of a star rating between 1 and 5, it’s likely that the smaller models will provide the results that we are looking for without the cost and slower performance of a larger model. If the star rating is off, we can fall back on our functionality that lets the reviewer update the rating themselves.

We narrowed down our choices to Gemini Nano from the Hybrid SDK and Gemini 2.5 Flash Lite as the fallback option. This allows us to default to the built in AI API for users on supported browsers while falling back to Gemini Flash Lite for our other users. This decision can help us keep costs down for providing this feature as there is no cost for using Gemini Nano from the Hybrid SDK and the cost of Gemini 2.5 Flash Lite is much lower than other models while providing an acceptable amount of fidelity.

We made two important decisions to design the most reliable prompt we could.

First, we used structured output so we only receive a JSON value containing the star rating back from the model. This helps prevent overly verbose responses for why a star rating was given,constraining the outputs to something that we can parse in our client code.

The second thing we did to increase the accuracy was give examples in our prompt to guide our model on what we would consider a high rating versus a low rating. This is a great way to tune responses to better fit the culture of your app’s userbase.

Based on the supplied review, translate the review
to a star rating that is equivalent:

<example>
  <input>The food was wonderful and I really
    enjoyed the amazing experience</input>
  <output>5</output>
</example>

<example>
  <input>I can say for certain I will never eat here again</input>
  <output>1</output>
</example>

Input : ${userInput}

We are using Firestore to store our reviews and restaurants. Firestore is secured using Firestore security rules. While our original app implementation still needed robust security rules, we did not need to change anything from the original implementation to this implementation as we are not using any new methods to update the reviews. Having said that, we think it’s important to call out what robust security rules would look like for submitting a new review, so I have included what those look like here:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ommitting for brevity
    match /restaurants/{restaurantId} {
      // ommitting restaurants rules for brevity

        // Ratings:
        //   - Authenticated user can read
        //   - Authenticated user can create if userId matches
        //   - Deletes and updates are not allowed (default)
        match /ratings/{ratingId} {
          allow read;
          allow create: if request.auth != null
                        && request.resource.data.text != ""
                        && request.resource.data.rating in [1, 2, 3, 4, 5];
          allow update: if request.auth != null
                        && request.resource.data.userId == request.auth.uid
                        && request.resource.data.text != ""
                        && request.resource.data.rating in [1, 2, 3, 4, 5];
        }
      }
    }
}

Here you can see that we do place constraints on the type of reviews that can be submitted. Since we are placing a high value on the text, we make sure that the text is not null. We also want to make sure that since the rating is AI generated, if the AI happens to return a value of six or even negative one, it cannot be written to the database and instead, we can enforce that the value is within an acceptable range through this data validation call.

The code

To wrap this up, Let's break down how the actual implementation of this review component looks without all the framework considerations involved and highlight the important parts of our implementation.

To setup AI logic, we want to use the hybrid model experience where it relies on the browser model (Gemini Nano) and can fall back to the affordable flash lite model when the browser model is not available.

import
  getAI,
  GoogleAIBackend,
  getGenerativeModel,
  InferenceMode,
  Schema } 
import

// Your web app's Firebase configuration
const
  //... Config here.
};

// Initialize Firebase
const
const

// Setup the output schema
const
  properties: {
    starRating: Schema.
      description: 
      format: 
    }),
  }
});

// setup the generative model calls.
const
  mode: InferenceMode.PREFER_ON_DEVICE,
  inCloudParams: {
    model: 
    generationConfig: {
      responseMimeType: 
      responseSchema: jsonSchema
    },
  },
  onDeviceParams: {
    promptOptions: {
      responseConstraint: jsonSchema,
    }
  }
});

Here you can see that we initialize Firebase AI logic, much the same way that we initialize other services by first getting the AI logic singleton through a call to getAI. Once we have the AI singleton, we then declare the structured output schema that we are looking to use through calling Schema.object(). This helps us define the schema and guide the model to what each value corresponds to through the use of descriptions and additionally, we can provide optional format options to further specify the format of the response value. Finally, we make a call to getGenerativeModel() which allows us to specify our options for our requests.

Since it still takes time to process the inputs into the generative model, we generally don’t want to overload the model with requests on every single key press. Instead, what we want to do is send a request after a set amount of time (500 ms or longer) from the last key press and if a new keypress has started, cancel the existing requests by cancelling the timeout request.

let

const
  switch
    case
    case
    case
    case
      return
    default
      break
  }

  timeoutIds.
  timeoutIds 

  const
    // Ommitted logic for generating stars here...
  }, 

  timeoutIds.
};

const
reviewBox?.

Here we ignore the keys that do not change the input for requests which are the modifier keys. After we ignore those keys and return early from the handleKeyUp function, we clear the timeout using the browsers clearTimeout function and empty the list of timeouts that we are waiting on. We then start a new timeout that runs inference on the user’s input (which we will see in the next section) and add that back to the timeouts array.

Here we are actually running the code that runs inference.

const
  Based on the supplied review, translate the review
    to a star rating that is equivalent:
  <example>
    <input>The food was wonderful and I
      really enjoyed the amazing experience</input>
    <output>5</output>
  </example>

  <example>
    <input>I can say for certain I will never eat here again</input>
    <output>1</output>
  </example>

  Input : 
const
result.
  console.
  const
  console.
  ratingPicker.
}).
  console.
});

As you can see, this is a call to generateContent from our previously defined model which we then parse the JSON for to get our structured output. Once we have that, You can call a function to update the star value In your application.

While the code snippets above show the feature in a Typescript format, we thought we would share the implementation as a react component here:

"

import
import

import
  getAI,
  getGenerativeModel,
  GoogleAIBackend,
  InferenceMode,
  Schema,
} 
import

// Initialize the Firebase AI Logic client SDK
const
  {
    // Your web app's Firebase configuration
  }
);
const

// Set up the schema and model
const
  properties: {
    starRating: Schema.
      description: 
    }),
  },
});
const
  mode: InferenceMode.PREFER_ON_DEVICE,
  inCloudParams: {
    model: 
    generationConfig: {
      responseMimeType: 
      responseSchema: starSchema,
    },
  },
  onDeviceParams: {
    promptOptions: {
      responseConstraint: starSchema,
    },
  },
});

// Call the generative model and return the generated star rating
async
  const
  Based on the supplied review, translate the review
  to a star rating that is equivalent:

  <example>
    <input>The food was wonderful and I
    really enjoyed the amazing experience</input>
    <output>5</output>
  </example>

  <example>
    <input>I can say for certain I will never eat here again</input>
    <output>1</output>
  </example>

  Input : 
  `
  const
  const
  return
}

function
  let
  return
    clearTimeout
    timer 
  };
}

function
  const
  const
  const

  const
    () 
      debounce
        console.
        setGeneratingRating
        const
        setGeneratingRating
        setStars
      }, 
    []
  );

  useEffect
    if
      generateStarRating
    }
  }, [generateStarRating, reviewText]);

  return
    <>
      <
        id
        className
        value
        onChange
        placeholder
        autoFocus
      >
      <
        rating
        setRating
          setStars
      />
      {generatingRating && <span>Automatically generating a rating</span>}
    </>
  );
}

export

export
  rating,
  setRating,
}
  rating
  setRating
}) {
  return
    <
      <
      <
          {[
          <>
              <
              type
              id
              name
              value
              checked
              onChange
              />
              <
              &
              </
          </>
          ))}
      </
      <
    </
  );
}

**Note: **You’ll see we pass setRating into the Stars component. That lets reviewers override the AI suggestion if they don’t agree with it. This is an important pattern for any AI suggestion feature.

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 AI in action: Adding AI-powered reviews 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: *AI in action: Adding AI-powered reviews on the Official Firebase Blog (published 2025-10-01 by Alexander Nohe, Jeff Huleatt)
*Official Firebase Documentation: *Firebase Developer Docs & Web SDK Reference
Related on CodingCat.dev: Unlocking Dynamic Experiences with Client-Side custom signals conditions in Firebase Remote Config
Related on CodingCat.dev: Data Connect: get started faster and have more data control
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 AI in action: Adding AI-powered reviews?

AI in action: Adding AI-powered reviews (announced 2025-10-01 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, AI, React, TypeScript, Security workloads. Sometimes, the best AI feature is a subtle one. In our Friendly Eats app, we wanted to automatically suggest a star rating as a user wrote their full review. This not only reduces the friction of submitting a review, but had the unexpected benefit of helping users understand how others might perceive their review. Developers can review the primary announcement on the Firebase Blog alongside our implementation patterns and production checklist above.

How do web developers use AI in action: Adding AI-powered reviews with Next.js, SvelteKit, React, or Angular?

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

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

Alex Patterson — Tue, 03 Nov 2026 18:08:09 +0000

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

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 2 by Tianzi Cai on the Official Firebase Blog (2025-07-07), here is our hands-on CodingCat.dev breakdown of what actually shipped, how it works under the hood, and how we wire it into production TypeScript, Next.js, Astro, SvelteKit, React, and Angular applications. From House ID to a First Person Shooter game, the App Prototyping agent in Firebase Studio has enabled business professionals, hobbyists, and a broad spectrum of software developers to create delightful web applications. Many said that they were able to do so in a dramatically shorter timeframe than working alone and the experience was magical. From a distance, it looks like they were able to do so effortlessly. The truth is, personal background and experience, prompting techniques, and patience all contribute to a successful outcome. In this blog post, I will share prompting tips and tricks, using a basic web application for Enterprise Resource Planning (ERP) built with the Prototyper as an example. By explaining the “why” behind each tip, I hope this blog post will set realistic expectations and lead to a happier developer experience for all, regardless of your technical expertise. Let’s get started.

The Mental Model: Why Firebase Studio: Tips and Tricks 2 Matters for Web Devs

As a Google Developer Expert (GDE) for Firebase and Senior Solutions Architect at CodingCat.dev, I evaluate every Firebase update through one lens: does it reduce boilerplate while keeping our runtime security and cloud bills predictable? Firebase 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

Did you miss part one of the Studio Tips and Tricks series? You can read it here.

Initial prompt

Initial prompts from as short as two words like “Go game” to as long as thousand-word Product Requirement Documents (PRD) have gone on to produce beautiful and functional web applications. This is possible because the Gemini models behind the prototyper can enrich and extract information from input of various lengths. Extremely short or extremely long prompts are not objectively wrong. However, they may introduce false expectations. As of today, the Prototyper is designed to generate a web application of no more than 10 core features on the first try. When you enter very short or expansive initial prompts, you might not get exactly what you envisioned.

Generally speaking, it’s better if you approach the initial prompt like an elevator pitch that takes roughly 10-30 seconds to say out loud, and in it you describe what the app is, what it does, and how it looks briefly. This ensures that you get the optimal alignment on application complexity with the prototyper. Here is an example:

“Build a basic ERP for small businesses with a dashboard showing revenue, expenses, and profit, plus a calendar for appointments.”

Don’t worry if your initial prompt isn’t fleshed out yet. We recently added an “Enhance your prompt” option in the input field that appears as you type. Click the link to get an improved version of your prompt. The enhanced prompt of the above example looks like this:

“A basic business management app designed to simplify financial tracking and scheduling for small businesses. Key features include a dashboard displaying real-time revenue, expenses, and profit summaries, tools to add and manage income and expense records, and an integrated calendar for scheduling and viewing appointments. Use a clean, professional green and white color scheme.”

If you’re still deciding how your application will work or how it will look, Gemini is a great place to have a back-and-forth conversation. Draft your initial prompt, then ask Gemini 2.5 Flash with Search grounding or Deep research to make it a power prompt, before you head back to Firebase Studio to prototype the application.

I asked Gemini about the typical features of an ERP application, and it gave me a list of essential functionalities including sales and order management, inventory management, and Customer Resource Management (CRM). After learning more about each feature by asking questions, I felt sufficiently informed on the topic and more confident to carry on.

App blueprint

As mentioned before, the prototyper turns your initial prompt into an app blueprint. The app blueprint outlines the core features, style guidelines, and technical stack of your application and acts as an agreement between you and the source code that will be generated. It is also editable.

When editing the core features of the app blueprint, think about how you expect the user to interact with your application from start to finish. Take note of what you consider to be anchoring experiences along the way. The more atypical these user interactions are, the more important it is to give explicit instructions. Remember that what users must, should, and could do are enabled by product features. Your job is to connect the ideas in user-centric language.

The prototyper came up with following core features for the ERP application:

If you haven’t tried this yet, you’ll find the prototyper can output different app blueprints from the same initial prompt. This is expected due to the non-deterministic nature of LLM output, which we can take advantage of through human-in-the-loop involvement. Before generating the source code, I repeat the initial prompt and get a few different versions of the app blueprint. Personally, I enjoy comparing different app blueprints. It encourages me to think instead of clicking ahead hastily. I also become more opinionated as I make decisions on how to mix and match core features and develop a sense of what appeals to my design sensibilities.

For the ERP application, I included a fourth feature that showed up in a subsequent app blueprint:

I also changed up the style guides to my liking by tweaking the color scheme.

Prototype view

If the app blueprint looks good, it is time to start generating the application. Stay in the Prototyper view to add, modify, and delete parts of the user experience. Don’t ask for all the changes at once. Request one change per conversation turn to keep the Prototyper focused. Think in terms of code changes that need to happen to make the next commit; in other words, identify good stopping points that you aim to get to and you can come back to. This way, if you mess up or don’t like the subsequent changes, you have the option of easy rollback using the Restore feature. The **Restore **button appears next to the files in the **File changes **card in the dialog pane.

Here is an update I wanted to make in the ERP application:

Allow users to upload a receipt when they enter their expense and automatically populate the total expense field from the uploaded receipt

Instead of requesting this as one change, I broke it up into two:

Allow users to upload a receipt when they enter their expense
Automatically populate the total expense field from the uploaded receipt

In case it’s not obvious how to break up certain larger tasks, feel free to ask the prototyper for help and have it step through the implementation one change at a time.

Asking the Prototyper for alternative designs and plans may come as an afterthought if the initial suggested path failed to lead to a successful end. You can preempt this failure mode by engaging in self-consultation early. Of course, deciding when to do so depends on how much time you have, how familiar you are with the technologies, and how motivated you are to learn. One recommendation for a good time to ask for options is if a particular feature implementation involves different paying services.

Before asking the Prototyper to proceed with automatically populating the total expense field from the uploaded receipts, I asked it to present a few choices. I knew different Optical Character Recognition (OCR) solutions existed, such as Google Cloud Document AI and Vertex AI Vision. I was interested in how the prototyper weighed the different APIs given its contextual knowledge of my codebase.

Tell me at least two ways to implement total amount extraction from receipt images, explain their pros and cons

After reading through the comparisons in the Prototyper’s response, I went with Gemini Flash model for OCR because it had an easier integration with my AI stack. The trade-off in development complexity is well worth the increase in accuracy. I rephrased my request by telling the prototyper exactly what to do:

Before users click “Log Expense”, if a receipt image is uploaded, use a Gemini multimodal model to extract the total amount paid in the uploaded receipt image for the “Amount” field

If everything goes smoothly, you continue to grow your application by adding more features and functionalities through prompting. However, as your application becomes more complex, debugging via chat is likely to hit a snag. When that happens, see if you are willing to simplify your more ambitious ideas with mock data temporarily, and come back to flesh them out in the Code view.

For example, I added a check for duplicates using fake CRM data instead of connecting to a real CRM database.

Before users click “Add Client”, check if the email entered exists in a mock CRM database to avoid duplicates

Code view

I touched on jumping into the Code view for more advanced feature development and debugging. Another reason you might want to do so is because of the known limitations of the prototyper. You have probably noticed that the technical stack section of the app blueprint is not modifiable today. For AI, the default is Gemini and Genkit. For UI, they are TypeScript, NextJS, and Tailwind CSS. While these are stated as-is and easy to find, limitations introduced in the system prompts of the prototyper aren’t as obvious. Sometimes when you see the prototyper getting stuck, it is due to conflicts between your instructions and its system instructions. You can learn about these limitations by asking about them, for example:

/ask Tell me about the constraints you have around creating JSON schemas

Here, You can run the slash command /ask. This allows me to have many side conversations for learning purposes without impeding the main conversation flow used for prototyping.

You can also upgrade from the built-in Gemini 2.0 model to Gemini 2.5 Flash or Pro model for more advanced reasoning and web browsing capabilities. There is a dropdown menu in the input field in the Code view. Follow the on-screen instructions to get an API key from a paying Google Cloud project. Note that Gemini 2.5 Pro currently does not offer a free tier. I also recommend learning about its training cutoff dates.

Newer Gemini models have more recent knowledge of many public APIs. If the APIs you want to use have been updated since the training cutoff date, provide the URL to the official documentation to the prototyper when asking it to integrate with those. Similarly, if you want to use private APIs, you can copy and paste relevant API examples.

I chose to integrate with HubSpot Free CRM in your application. With the correct file that needed the update opened, I prefixed the following prompt using the /generate command to get the code suggestion:

/generate create, update, and delete contacts using email lookup as described here: https://developers.hubspot.com/docs/guides/api/crm/objects/contacts

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 2 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 2 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 Studio: Tips and Tricks 2 on the Official Firebase Blog (published 2025-07-07 by Tianzi Cai)
*Official Firebase Documentation: *Firebase Developer Docs & Web SDK Reference
Related on CodingCat.dev: Bringing architecture to life with Firebase Studio
Related on CodingCat.dev: Supercharge your Firebase Studio workflow with MCP servers
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 2?

Firebase Studio: Tips and Tricks 2 (announced 2025-07-07 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, AI, Next.js, TypeScript workloads. From House ID to a First Person Shooter game, the App Prototyping agent in Firebase Studio has enabled business professionals, hobbyists, and a broad spectrum of software developers to create delightful web applications. Many said that they were able to do so in a dramatically shorter timeframe than working alone and the experience was magical. From a distance, it looks like they were able to do so effortlessly. The truth is, personal background and experience, prompting techniques, and patience all contribute to a successful outcome. In this blog post, I will share prompting tips and tricks, using a basic web application for Enterprise Resource Planning (ERP) built with the Prototyper as an example. By explaining the “why” behind each tip, I hope this blog post will set realistic expectations and lead to a happier developer experience for all, regardless of your technical expertise. Let’s get started. 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 2 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.

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

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

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?

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

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 Architect at CodingCat.dev, I evaluate every Firebase update through one lens: does it reduce boilerplate while keeping our runtime security and cloud bills predictable? 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

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?

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 Architect at CodingCat.dev, I evaluate every Firebase update through one lens: does it reduce boilerplate while keeping our runtime security and cloud bills predictable? 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

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.