DEV Community: Connie Leung

Securing an Angular Firebase AI App with Email/Password Authentication (Part 3: Lightweight Home Screen, Lazy CDK Dialog, and Header Navigation)

Connie Leung — Wed, 04 Nov 2026 15:23:31 +0000

We now have AuthService for authentication and SignInModalComponent for users to enter their email and password, and we need a lightweight home screen (HomeComponent) to connect them. When a user is unauthenticated, clicking the Sign In button on the home screen opens the CDK Sign-In modal. The user then enters their email and password to complete authentication and navigate to the /dashboard route.

In addition, HeaderComponent no longer displays only static text. It now renders a Home icon link on the left edge and a conditional Sign-Out button on the right edge.

Caption: The unauthenticated Home screen displaying the left-aligned Home icon in the header, the "Sign In" button in the hero card, and the feature metadata cards.

Architecture & Mental Model

HomeComponent and HeaderComponent share the AuthService.isAuthenticated computed signal to coordinate the UI across three states:

Unauthenticated /home: HeaderComponent displays only the left-aligned Home icon link (/home), and HomeComponent renders the Sign In button.
Lazy-loaded CDK Dialog (openSignInModal()): Clicking Sign In dynamically imports SignInModalComponent and Dialog (@angular/cdk/dialog) with Promise.all(), keeping the CDK dialog and Signal Forms out of the initial main.js bundle.
Authenticated /dashboard and /home: Once signed in, HeaderComponent reveals the right-aligned Sign-Out button. When an authenticated user returns to /home, HomeComponent checks isAuthenticated() and displays the Launch Studio link (/dashboard) instead of the Sign In button.

flowchart LR
    subgraph Header["HeaderComponent (app-header)"]
        HOME_ICON["HomeIconComponent ([routerLink]='/home')"]
        AUTH_HDR{"isAuthenticated()?"}
        SIGNOUT_BTN["SignOutIconComponent (onSignOut -> /home)"]
        AUTH_HDR -- "true" --> SIGNOUT_BTN
    end

    subgraph Home["HomeComponent (/home)"]
        RESTORE["constructor: ensureAuth().catch(...)"]
        AUTH_HOME{"isAuthenticated()?"}
        SIGNIN_BTN["Button: Sign In (openSignInModal)"]
        LAUNCH_LINK["Link: Launch Studio ([routerLink]='/dashboard')"]
        RESTORE --> AUTH_HOME
        AUTH_HOME -- "false" --> SIGNIN_BTN
        AUTH_HOME -- "true" --> LAUNCH_LINK
    end

    subgraph LazyModal["Deferred Modal Chunk"]
        IMPORT["Promise.all([import(SignInModalComponent), import('@angular/cdk/dialog')])"]
        INJECT["runInInjectionContext(#injector, () => inject(Dialog).open(...))"]
        IMPORT --> INJECT
    end

    SIGNIN_BTN --> IMPORT
    INJECT -- "Auth Success" --> AUTH_HOME
    INJECT -- "Auth Success" --> AUTH_HDR

1. Updating `HeaderComponent` with Home Navigation and Conditional Sign-Out

In HeaderComponent, we add home navigation and a conditional Sign-Out button:

Component imports: Imports HomeIconComponent, RouterLink, and SignOutIconComponent in the imports array.
Home link: Displays <app-home-icon /> inside an <a> tag with [routerLink]="homeLink" (APP_LINKS.HOME, or /home) to navigate to the home screen on click.
Sign-Out button: Shows the <app-sign-out-icon /> button only when isAuthenticated() is true; clicking it calls onSignOut() to sign out, update isAuthenticated(), and return to /home.

// src/app/shared/ui/layout/header/header.component.ts
@Component({
  selector: 'app-header',
  imports: [HomeIconComponent, RouterLink, SignOutIconComponent],
})
export class HeaderComponent {
  readonly homeLink = APP_LINKS.HOME;
  readonly #authService = inject(AuthService);
  readonly #router = inject(Router);
  readonly isAuthenticated = this.#authService.isAuthenticated;

  async onSignOut(): Promise<void> {
    await this.#authService.signOut();
    await this.#router.navigate([APP_LINKS.HOME]);
  }
}

<!-- src/app/shared/ui/layout/header/header.component.html -->
<header>
  <a [routerLink]="homeLink" aria-label="Go to Home Screen">
    <app-home-icon />
  </a>
  <h1>Firebase AI Logic Obscure Fact Speech Generator</h1>
  @if (isAuthenticated()) {
    <button type="button" (click)="onSignOut()" aria-label="Sign out">
      <app-sign-out-icon />
    </button>
  }
</header>

2. Building the Lightweight `HomeComponent` & Lazy-Loading the CDK Dialog

2.1 Restoring Auth State in the Constructor (`ensureAuth().catch(...)`)

We need to ensure that the Firebase Auth Emulator and Firebase Auth are properly initialized when HomeComponent is constructed. However, a constructor() cannot be async, so we must execute this.#authService.ensureAuth() with a Promise chain instead of async/await.

The .catch() block logs and silently swallows any error without rethrowing it. Because this background task does not require the user's attention, showing an error message here would only cause confusion and unwanted panic.

// src/app/features/home/home.component.ts (Part 1: Fields & Constructor)
@Component({
  selector: 'app-home',
  imports: [RouterLink, ArrowRightIconComponent],
})
export class HomeComponent {
  readonly dashboard = APP_LINKS.DASHBOARD;
  readonly #authService = inject(AuthService);
  readonly isAuthenticated = this.#authService.isAuthenticated;
  readonly #injector = inject(Injector);
  #dialogRef: DialogRef<unknown, SignInModalComponent> | null = null;
  #isOpeningModal = false;

  constructor() {
    this.#authService.ensureAuth().catch((error) => console.error('Failed to restore auth session:', error));
  }

2.2 Lazy-Loading `@angular/cdk/dialog` & Solving the `NG0203` Injection Context Error with `runInInjectionContext`

When opening the Sign-In modal in openSignInModal(), we keep the initial bundle small while preserving Angular's injection context:

Keeping main.js lightweight: Because HomeComponent is eagerly loaded into the main.js bundle, any static import increases its raw size and transfer time.
Lazy-loading @angular/cdk/dialog and the NG0203 error: We optimize the bundle by dynamically importing SignInModalComponent and @angular/cdk/dialog in openSignInModal(). However, calling inject(Dialog) after await Promise.all(...) throws an NG0203 error because it runs outside a valid injection context.
Restoring the injection context: We solve this by running the dialog logic inside the callback of runInInjectionContext using HomeComponent's Injector (this.#injector).
Why runInInjectionContext over a higher-order function: Using runInInjectionContext lets us assign this.#dialogRef = dialogRef directly inside an arrow function, which is cleaner than passing .bind(this) to a higher-order function.

2.3 Preventing Duplicate Modals & Resetting `this.#dialogRef` on Close (`dialogRef.closed.subscribe`)

In openSignInModal(), we prevent duplicate Sign-In modals and clean up the dialog reference on close:

Guarding against duplicate modals: #isOpeningModal and #dialogRef prevent opening multiple Sign-In modals; when either is truthy, a modal is already opening or open, so the method exits early.
Lazy-loading and opening the modal: Otherwise, we dynamically import SignInModalComponent and @angular/cdk/dialog with Promise.all(), inject Dialog to open the modal, and store its reference in this.#dialogRef.
Resetting #dialogRef on close: Subscribing to dialogRef.closed resets this.#dialogRef to null when the modal closes, allowing the dialog to be reopened later.

// src/app/features/home/home.component.ts (Part 2: openSignInModal)
  async openSignInModal(): Promise<void> {
    if (this.#isOpeningModal || this.#dialogRef) {
      return;
    }

    this.#isOpeningModal = true;
    try {
      const [{ SignInModalComponent }, { Dialog }] = await Promise.all([
        import('@/shared/ui/sign-in-modal/sign-in-modal.component'),
        import('@angular/cdk/dialog'),
      ]);
      runInInjectionContext(this.#injector, () => {
        const dialog = inject(Dialog);
        const dialogRef = dialog.open(SignInModalComponent, {
          backdropClass: ['bg-surface-card'],
        });

        this.#dialogRef = dialogRef;
        dialogRef.closed.subscribe(() => (this.#dialogRef = null));
      });
    } finally {
      this.#isOpeningModal = false;
    }
  }
}

2.4 Conditional CTA Rendering in `home.component.html`

In home.component.html, the isAuthenticated() computed signal determines which button to display—including when a user navigates back to /home by typing /home in the address bar or clicking the Home icon in HeaderComponent:

When isAuthenticated() is true: The Home screen renders a Launch Studio link ([routerLink]="dashboard") that routes directly to /dashboard.
When isAuthenticated() is false: The Home screen renders a Sign In button ((click)="openSignInModal()") that opens the CDK Sign-In modal.

<!-- src/app/features/home/home.component.html (CTA excerpt) -->
@if (isAuthenticated()) {
  <a [routerLink]="dashboard">
    <span>Launch Studio</span>
    <app-arrow-right-icon />
  </a>
} @else {
  <button type="button" (click)="openSignInModal()">
    <span>Sign In</span>
  </button>
}

Caption: The authenticated Home screen displaying the Home icon on the left and Sign-Out icon on the right of the header, and the "Launch Studio" button in the hero card.

Takeaways

In Part 3, we completed our authentication flow by connecting HomeComponent, SignInModalComponent, and HeaderComponent:

Conditional Actions in HomeComponent: We built a lightweight HomeComponent that conditionally renders the Sign In and Launch Studio buttons based on the isAuthenticated() signal. When isAuthenticated() is false, it displays the Sign In button; when true, it displays Launch Studio.
Lazy CDK Sign-In Modal Flow: Clicking Sign In opens the CDK SignInModalComponent where users enter their email and password. When the credentials are valid, the modal navigates the user to the /dashboard route; otherwise, it displays an authentication error message.
Resolving NG0203 with runInInjectionContext: Injecting Dialog after await Promise.all(...) in openSignInModal() triggers Angular's NG0203 error because the async continuation runs outside an injection context. We resolve this by executing the dialog logic inside the callback of runInInjectionContext using HomeComponent's Injector.
Header Navigation and Sign-Out: HeaderComponent adds home navigation and sign-out functionality. It always displays the Home icon to navigate back to the /home screen when clicked, while the conditional Sign-Out icon allows authenticated users to sign out from Firebase Auth and reset the isAuthenticated() signal to false.

Resources

Securing an Angular Firebase AI App with Email/Password Authentication (Part 2: Signal Forms Sign-In Modal) [GDE]

Connie Leung — Wed, 04 Nov 2026 02:48:43 +0000

In this blog post, we build a Sign-In modal component (SignInModalComponent) using the stable Angular Signal Forms API (@angular/forms/signals) to handle email and password authentication.

Caption: Sign-In Dialog with email and password fields.

Architecture & Mental Model

The sign-in flow works as follows:

Signal Form Validation: We build a Signal Form with required email and password fields. When validation fails on submit, onInvalid automatically focuses the first invalid control.
Firebase Authentication: When a user submits valid form fields, SignInModalComponent calls AuthService.signIn() to verify that the submitted email and password match an existing account in Firebase Authentication.
Route Redirection or Error Handling:
- Valid credentials: When authentication succeeds (AuthService.isAuthenticated() is true), the modal closes and redirects the user to the /dashboard route, where they can perform AI tasks.
- Invalid credentials / error thrown: When authentication fails, SignInModalComponent.signIn() updates its errorMessage signal ('Failed to sign in. Please check your credentials and try again.') and returns { kind: 'serverError', message: 'Failed to submit form' }.

flowchart TD
    Submit["User Submits Email & Password"] --> Validate{"signInSchemaValidation()"}
    Validate -- "Invalid" --> Focus["onInvalid: focusBoundControl() on 1st error"]
    Validate -- "Valid" --> Action["submission.action: signIn(field)"]
    Action --> Auth["AuthService.signIn(formValues)"]
    Auth --> Check{"AuthService.isAuthenticated()?"}
    Check -- "true" --> Close["DialogRef.close() + Router.navigate(['/dashboard'])"]
    Check -- "false / throws" --> Error["Set errorMessage signal & return serverError"]

1. Defining the Signal Form Validation Schema

We start by importing the required and email validators from @angular/forms/signals to define signInSchemaValidation(), which returns a SchemaOrSchemaFn<AuthCredentials, PathKind.Root>:

Required fields (required): The required validator marks both the email and password fields as required with custom error messages ({ message: 'Email is required' } and { message: 'Password is required' }).
Email format validation (email): The email validator checks that the entered email value is a well-formed email address and returns { message: 'Invalid email format' } when the format is invalid.

// src/app/shared/ui/sign-in-modal/schemas/sign-in.schema.ts
import type { AuthCredentials } from '@/core/auth';
import type { PathKind, SchemaOrSchemaFn } from '@angular/forms/signals';
import { email, required } from '@angular/forms/signals';

export function signInSchemaValidation(): SchemaOrSchemaFn<AuthCredentials, PathKind.Root> {
  return (schemaPath) => {
    required(schemaPath.email, { message: 'Email is required' });
    email(schemaPath.email, { message: 'Invalid email format' });
    required(schemaPath.password, { message: 'Password is required' });
  };
}

2. Building `SignInModalComponent` with Signal Forms and `AuthService`

2.1 Injecting Dependencies and Initializing the Signal Form

In SignInModalComponent, we inject the required services and initialize the reactive form model:

AuthService and Router: Handle Firebase email/password authentication and route navigation after signing in.
DialogRef: Closes the modal via @angular/cdk/dialog (inject(DialogRef, { optional: true })) when the user clicks the close button or when sign-in succeeds.
errorMessage: Stores and displays an alert message (signal<string | undefined>(undefined)) when authentication fails.
signInModel: Backs the Signal Form (signal<AuthCredentials>({ email: '', password: '' })) and initializes the email and password fields to empty strings.

Note

Why @angular/cdk/dialog instead of a native <dialog> element?
If you only need a single modal in an app without @angular/cdk, the native HTML <dialog> element is the better, zero-dependency choice. However, this repository already includes @angular/cdk, and @angular/cdk/dialog provides comprehensive accessibility (a11y) out of the box—including focus trapping, focus restoration, Escape-key dismissal, and ARIA attributes. Because we also dynamically import @angular/cdk/dialog when opening the modal, so it never increases the initial bundle size, it is a practical choice here.

// src/app/core/auth/auth-credentials.interface.ts
export interface AuthCredentials {
  email: string;
  password: string;
}

// src/app/shared/ui/sign-in-modal/sign-in-modal.component.ts (Part 1a: Dependencies & Model)
@Component({
  imports: [FormField, FormRoot, CloseIconComponent, SpinnerIconComponent],
  selector: 'app-sign-in-modal',
})
export class SignInModalComponent {
  readonly #authService = inject(AuthService);
  readonly #dialogRef = inject(DialogRef, { optional: true });
  readonly #router = inject(Router);

  errorMessage = signal<string | undefined>(undefined);

  signInModel = signal<AuthCredentials>({
    email: '',
    password: '',
  });

Next, we pass this.signInModel and signInSchemaValidation() to the form() function to create signInForm. The form() function validates signInModel against the validation schema and configures form submission behavior:

Valid submission (submission.action): When validation succeeds, form submission executes the action callback, which invokes this.signIn(field).
Invalid submission (submission.onInvalid): When validation fails, form submission executes the onInvalid callback to locate the first validation error (field().errorSummary()[0]) and automatically focus its bound form control (firstError?.fieldTree().focusBoundControl()).

// src/app/shared/ui/sign-in-modal/sign-in-modal.component.ts (Part 1b: Signal Form)
  signInForm = form(this.signInModel, signInSchemaValidation(), {
    submission: {
      action: async (field) => this.signIn(field),
      onInvalid: (field) => {
        const firstError = field().errorSummary()[0];
        firstError?.fieldTree().focusBoundControl();
      },
    },
  });

2.2 Implementing `onClose()` and `signIn()`

Next, let's implement the onClose() and signIn() methods in SignInModalComponent:

onClose(): Calls this.#dialogRef?.close() when the user clicks the top-right close button to dismiss the modal.
signIn(): Calls this.#authService.signIn(field().value()) to authenticate the submitted form credentials with Firebase Authentication:
- Successful authentication: When this.#authService.isAuthenticated() evaluates to true, we close the modal (this.#dialogRef?.close()), navigate to the /dashboard route (await this.#router.navigate([APP_LINKS.DASHBOARD])), and return undefined.
- Unsuccessful authentication: When authentication fails, we update this.errorMessage.set('Failed to sign in. Please check your credentials and try again.') and return a generic submission error ({ kind: 'serverError', message: 'Failed to submit form' }) so the Signal Form records the failed submission state.

// src/app/shared/ui/sign-in-modal/sign-in-modal.component.ts (Part 2: onClose & signIn)
  onClose(): void {
    this.#dialogRef?.close();
  }

  async signIn(field: FieldTree<AuthCredentials, string | number>): Promise<SignInSubmissionError | undefined> {
    this.errorMessage.set(undefined);
    await this.#authService.signIn(field().value());
    if (this.#authService.isAuthenticated()) {
      this.#dialogRef?.close();
      await this.#router.navigate([APP_LINKS.DASHBOARD]);
      return undefined;
    }
    this.errorMessage.set('Failed to sign in. Please check your credentials and try again.');
    return { kind: 'serverError', message: 'Failed to submit form' };
  }
}

3. Binding the Signal Form in the Template

Now let's wire signInForm to the component template in src/app/shared/ui/sign-in-modal/sign-in-modal.component.html:

Closing the modal: When a user clicks the top-right close button, onClose() closes the modal via this.#dialogRef?.close().
Displaying authentication errors: When errorMessage() holds a message (@if (errorMessage(); as msg)), the template renders <div role="alert">{{ msg }}</div> above the form.
Binding the form root ([formRoot]): The [formRoot] directive binds the <form> element directly to the signInForm form model, connecting form submission to the submission configuration we defined in the component.
Binding form fields ([formField]): The [formField] directive binds signInForm.email to the email input field and signInForm.password to the password input field.
Rendering validation errors: When the user interacts with a field (touched()) and it is invalid(), we iterate over its errors() array with @for to output each validation error message ({{ error.message }}).
Handling the submission state: While the form's async submission.action is running, signInForm().submitting() evaluates to true. We bind [disabled]="signInForm().submitting()" on the submit button to disable it during authentication and prevent concurrent submissions.

<!-- src/app/shared/ui/sign-in-modal/sign-in-modal.component.html (Signal Form excerpt) -->
@if (errorMessage(); as msg) {
  <div role="alert">{{ msg }}</div>
}

<form [formRoot]="signInForm">
  <label for="sign-in-email">
    EMAIL ADDRESS
    <input id="sign-in-email" type="email" autocomplete="username" [formField]="signInForm.email" />
    @if (signInForm.email().touched() && signInForm.email().invalid()) {
      @for (error of signInForm.email().errors(); track error) {
        <span>{{ error.message }}</span>
      }
    }
  </label>

  <label for="sign-in-password">
    PASSWORD
    <input id="sign-in-password" type="password" autocomplete="current-password" [formField]="signInForm.password" />
    @if (signInForm.password().touched() && signInForm.password().invalid()) {
      @for (error of signInForm.password().errors(); track error) {
        <span>{{ error.message }}</span>
      }
    }
  </label>

  <button type="submit" [disabled]="signInForm().submitting()">
    @if (signInForm().submitting()) {
      <app-spinner-icon />
      <span>Signing in...</span>
    } @else {
      <span>Sign In</span>
    }
  </button>
</form>

Caption: Sign-In Dialog with an invalid authentication attempt.

Caption: Sign-In Dialog when the form fields violate the required field validation rules.

Takeaways & What's Next

In Part 2, we built SignInModalComponent and connected it to AuthService:

Angular Signal Forms Integration: SignInModalComponent uses Angular Signal Forms to define the form model and bind each field to its corresponding HTML <input> element. signInSchemaValidation() validates the form fields. When validation passes, submission.action calls AuthService.signIn() to authenticate the user's credentials; when validation fails, submission.onInvalid automatically focuses the first field with an error.
Lean Initial Bundles with Dynamic Imports: Even though @angular/cdk is not a lightweight library, we will dynamically import both SignInModalComponent and @angular/cdk/dialog when opening the modal from the Home component. This keeps main.js and our initial bundles lean.

In Part 3, we will build a lightweight Home screen with a Sign In button that opens the CDK Dialog. We will also update the Header component to provide icons for navigating home and logging out. Finally, we will use the AuthService.isAuthenticated() computed signal to conditionally display the Sign In and Launch Studio buttons on the Home screen, and reuse the same signal to show or hide the logout button in the Header component.

Resources

Securing an Angular Firebase AI App with Email/Password Authentication (Part 1: Emulator, AuthService, and Route Guard) [GDE]

Connie Leung — Mon, 02 Nov 2026 09:45:08 +0000

Anyone with the public URL can use my tokens to perform image analysis and text-to-speech, which can quickly drive up my billing costs. To prevent unauthorized usage, I want to convert /dashboard into a protected route by adding Email/Password authentication with Firebase Auth.

Firebase Auth supports many authentication providers out of the box, and I chose Email/Password because it is the simplest method to configure. In Part 1, we will configure the Firebase Auth Local Emulator, build a lazy-loaded AuthService and a functional route guard, and protect the /dashboard route using CanActivateFn.

Architecture & Mental Model

Part 1 focuses on running the Firebase Auth Emulator alongside the Angular dev server and configuring authentication state management.

The architecture uses Firebase's browser session persistence (browserSessionPersistence) to manage the user's authentication state, which provides two key benefits:

After a user authenticates successfully, Firebase persists the authentication state in sessionStorage. When the user refreshes the browser page, the browser retains their login state.
When the user closes the browser tab, the browser automatically clears the authentication state from sessionStorage. The next time the user visits the application, they must log in again.

Without session persistence, the application would require extra custom logic to check token expiration, explicitly purge the user state from storage, and trigger route redirection.

Similarly, because firebase/auth is a heavy third-party SDK, loading it eagerly would increase the initial bundle size. Instead, AuthService lazy-loads it via a dynamic import() to update the reactive isAuthenticated signal.

flowchart LR
    subgraph Dev["Local Development (npm run launch)"]
        NG["Angular Dev Server (:4200)"]
        EMU["Firebase Auth Emulator (:9099 & UI :4000)"]
    end

    subgraph AuthCore["AuthService (src/app/core/auth)"]
        ENSURE["ensureAuth() (Single-Flight Promise)"]
        SDK["Dynamic import('firebase/auth')"]
        STATE["onAuthStateChanged -> #user Signal"]
        COMP["isAuthenticated Computed Signal"]
        ENSURE --> SDK --> STATE --> COMP
    end

    subgraph Routing["Angular Router (app.routes.ts)"]
        GUARD["canActivateDashboard (CanActivateFn)"]
        HOME["/home (Sign-In Screen)"]
        DASH["/dashboard (Image Analysis & TTS)"]
    end

    NG --> ENSURE
    SDK -. "isLocalhost()" .-> EMU
    GUARD --> ENSURE
    COMP -- "true" --> DASH
    COMP -- "false (Redirect)" --> HOME

1. Configuring the Firebase Auth Emulator & Unified Launch Script

1.1 Enabling the Auth Emulator in `firebase.json`

The { "emulators": { "auth": ... } } block in firebase/firebase.json configures the Firebase Auth Emulator to run on host port 9099 (127.0.0.1:9099), while "ui": { "enabled": true } enables the Emulator UI on port 4000 (http://127.0.0.1:4000).

// firebase/firebase.json
{
  // ... rest of configuration omitted for brevity
  "emulators": {
    "auth": {
      "port": 9099
    },
    "ui": {
      "enabled": true
    }
  }
}

1.2 Installing `concurrently` as a Dev Dependency

This step is optional, but I prefer not to start the Firebase Auth Emulator and the Angular dev server in two separate steps—opening one terminal tab to run the emulator and a second terminal tab to run the Angular dev server. Installing concurrently allows us to run both processes with a single command so we can start development immediately.

npm install --save-dev concurrently

1.3 Adding Emulator and Launch Scripts in `package.json`

During local development, I connect the Angular application to the Firebase Authentication Emulator to seed a test user for login. AuthService connects to the emulator programmatically, and the new scripts in package.json launch it.

// package.json (scripts excerpt)
{
  "scripts": {
    "start": "ng serve",
    "firebase:emulate:auth": "firebase --config firebase/firebase.json emulators:start --only auth",
    "launch": "concurrently \"npm run firebase:emulate:auth\" \"npm run start\""
  }
}

Here is what each script does:

start: Starts the local Angular development server (ng serve) on http://localhost:4200.
firebase:emulate:auth: Reads the firebase/firebase.json configuration to start the Authentication Emulator only.
launch: Launches both the Angular client and the Firebase emulator concurrently, allowing me to prompt the Antigravity CLI to execute it in the background.

2. Creating a Test Account in the Firebase Emulator UI

Seeding a user is a manual process, so I open the Emulator UI at http://localhost:4000 to create a dummy user with the credentials aaa@example.com and 123456. Note that 123456 is a weak password created strictly to facilitate local authentication testing.

Caption: Creating a new test user with an email and password in the Firebase Emulator UI at http://localhost:4000.

Saving the form creates the user account. Because the users table displays the email address without the password, I recommend using a password that is easy to remember or saving it in a password manager.

Caption: The newly created email/password user account displayed in the Firebase Authentication Emulator.

3. Building a Lazy-Loaded, Signal-Driven `AuthService`

3.1 Defining the `AuthCredentials` Interface

The AuthCredentials interface defines the email and password properties for user login credentials.

// src/app/core/auth/auth-credentials.interface.ts
export interface AuthCredentials {
  email: string;
  password: string;
}

3.2 Implementing `AuthService` with Dynamic SDK Loading and Signals

First, AuthService injects WINDOW, ConfigService, and DestroyRef, and declares the #user signal, the isAuthenticated computed signal, and private fields to cache the Firebase Auth instance and SDK module:

// src/app/core/auth/auth.service.ts
import { WINDOW } from '@/core/constants/navigator.const';
import { ConfigService, isLocalhost } from '@/core/firebase';
import { computed, DestroyRef, inject, Service, signal } from '@angular/core';
import type { Auth, User } from 'firebase/auth';
import type { AuthCredentials } from './auth-credentials.interface';

const AUTH_EMULATOR_URL = 'http://127.0.0.1:9099';

@Service()
export class AuthService {
  readonly #window = inject(WINDOW);
  readonly #configService = inject(ConfigService);
  readonly #destroyRef$ = inject(DestroyRef);

  readonly #user = signal<User | null>(null);
  user = this.#user.asReadonly();
  isAuthenticated = computed(() => !!this.#user());

  #auth: Auth | null = null;
  #authSdk: typeof import('firebase/auth') | null = null;
  #authReady: Promise<void> | null = null;

Next, AuthService manages the Firebase Auth lifecycle through four core methods:

loadAuth()
- Dynamically imports firebase/auth for the first time and retrieves the current Firebase application instance.
- Connects the Angular application to the Firebase Auth Emulator when running on localhost.
- Sets authentication state persistence to browser session persistence (browserSessionPersistence), registers onAuthStateChanged to monitor authentication state changes, and awaits auth.authStateReady() for the initial auth state to resolve.
- Stores the auth instance in #auth and the Auth SDK module in #authSdk.

  private async loadAuth(): Promise<void> {
    const [firebaseApp, authSdk] = await Promise.all([this.#configService.getApp(), import('firebase/auth')]);

    const auth = authSdk.getAuth(firebaseApp);
    if (isLocalhost(this.#window)) {
      authSdk.connectAuthEmulator(auth, AUTH_EMULATOR_URL, { disableWarnings: true });
    }

    await authSdk.setPersistence(auth, authSdk.browserSessionPersistence);
    const unsubscribe = authSdk.onAuthStateChanged(auth, (user) => this.#user.set(user));

    this.#destroyRef$.onDestroy(unsubscribe);

    await auth.authStateReady();

    this.#auth = auth;
    this.#authSdk = authSdk;
  }

ensureAuth()
- Ensures loadAuth() resolves exactly once and returns both the auth instance and the #authSdk module. Keeping both in memory allows signIn() and signOut() to reuse them when logging a user in or out.

  async ensureAuth(): Promise<{ auth: Auth; sdk: typeof import('firebase/auth') }> {
    if (!this.#authReady) {
      this.#authReady = this.loadAuth();
    }

    await this.#authReady;

    if (!this.#auth) {
      throw new Error('Auth is not initialized');
    }

    if (!this.#authSdk) {
      throw new Error('Auth SDK does not exist');
    }

    return { auth: this.#auth, sdk: this.#authSdk };
  }

signIn()
- Accepts the user's email and password, validates the arguments, and calls sdk.signInWithEmailAndPassword() to authenticate the user. When authentication succeeds, the authSdk.onAuthStateChanged(auth, (user) => this.#user.set(user)) listener observes the state change, updates the #user signal, and recalculates the isAuthenticated computed signal.

  async signIn({ email, password }: AuthCredentials): Promise<void> {
    if (!email || !password) {
      this.#user.set(null);
      return;
    }

    const { auth, sdk } = await this.ensureAuth();
    await sdk.signInWithEmailAndPassword(auth, email, password);
  }

signOut()
- Calls sdk.signOut(auth) to sign out the currently logged-in user. Similarly, the onAuthStateChanged listener resets the #user signal to null and recalculates the isAuthenticated computed signal.

  async signOut(): Promise<void> {
    const { auth, sdk } = await this.ensureAuth();
    await sdk.signOut(auth);
  }
}

4. Protecting the Dashboard Route with `canActivateDashboard`

4.1 Creating the `CanActivateFn` Route Guard

canActivateDashboard is a functional route guard of type CanActivateFn. It injects AuthService and Router to verify the user's authentication status and handle route redirection. Calling await authService.ensureAuth() initializes Firebase Auth (connecting to the Auth Emulator when running on localhost) and updates the isAuthenticated computed signal with the current authentication state. When the user is authenticated, the guard returns true to allow navigation to the route; otherwise, it redirects the user back to /home via router.createUrlTree([APP_LINKS.HOME]).

// src/app/core/auth/auth.guard.ts
import { AuthService } from './auth.service';
import { APP_LINKS } from '@/core/constants/routes.const';
import { inject } from '@angular/core';
import type { CanActivateFn } from '@angular/router';
import { Router } from '@angular/router';

export const canActivateDashboard: CanActivateFn = async () => {
  const authService = inject(AuthService);
  const router = inject(Router);

  await authService.ensureAuth();

  if (authService.isAuthenticated()) {
    return true;
  }

  return router.createUrlTree([APP_LINKS.HOME]);
};

Finally, we re-export the AuthCredentials interface, the canActivateDashboard route guard, and AuthService from a single barrel file (src/app/core/auth/index.ts). This gives the /dashboard route configuration—and the Sign-In component we will build in Part 2—a clean, unified import path.

// src/app/core/auth/index.ts
export * from './auth-credentials.interface';
export * from './auth.guard';
export * from './auth.service';

4.2 Wiring `canActivateDashboard` in `app.routes.ts`

The canActivate property of the dashboard route accepts the canActivateDashboard function in an array. When a user types /dashboard in the address bar or navigates to the path programmatically, the router executes this route guard function. Authenticated users proceed to the dashboard, while the guard blocks unauthenticated visitors and redirects them back to /home.

// src/app/core/constants/routes.const.ts
export const ROUTE_PATHS = {
  HOME: 'home',
  DASHBOARD: 'dashboard',
} as const;

// src/app/app.routes.ts (dashboard route excerpt)
  {
    path: ROUTE_PATHS.DASHBOARD,
    title: 'Firebase TTS',
    providers: [provideEnvironmentInitializer(() => inject(ConfigService).initialize())],
    loadComponent: () => import('./features/dashboard/dashboard.component'),
    canActivate: [canActivateDashboard],
  },

Takeaways & What's Next

In Part 1, we configured Firebase Auth to protect our image analysis and TTS endpoints:

Local Auth Emulator: Configured the Auth Emulator in firebase.json and used concurrently to start the emulator and Angular app together.
Lazy-Loaded AuthService: Dynamically imported firebase/auth once and used signals (#user and isAuthenticated) to track the login state.
Route Guard: Added canActivateDashboard to app.routes.ts to redirect unauthenticated users back to the home screen.

In Part 2, we will build the interactive sign-in experience on the frontend. We will use Angular 22's Signal Forms to create the form where users input their email and password, use Angular CDK Dialog to open the sign-in modal when a user clicks the Sign In button on the home screen, and connect the Sign-In component with AuthService to call the signIn() method.

Resources

From `main.js` Leaks to Hidden Tailwind CSS v4 Bloat — How I Built `angular-bundle-guard` with Antigravity `/learn` [GDE]

Connie Leung — Sun, 01 Nov 2026 13:23:27 +0000

Day 33: From `main.js` Leaks to Hidden Tailwind CSS v4 Bloat — How I Built `angular-bundle-guard` with Antigravity `/learn`

I briefly paused this series for a side quest that started with a faded memory of what my Angular bundle size used to be.

As I was making code changes across ng-firebase-tts and ng-firebase-image-analyzer in this series, I noticed main.js and the initial bundle total looked bigger than I remembered. I asked Gemini 4 in Antigravity CLI why the bundle had grown, Gemini 4 tracked down the root cause, and we fixed it. Then a few changes later, it happened again. And again.

After having the same bundle-debugging conversation one too many times, I finally hit my limit: "I am tired of this—let's build a skill to save my sanity."

So I paused writing the series and asked /learn and Antigravity CLI to turn our repeated debugging sessions into a reusable skill: angular-bundle-guard. I didn't write a single line of its Node.js static-analysis code myself. Every time we uncovered a new reason main.js or a lazy chunk was bloated in ng-firebase-tts or ng-firebase-image-analyzer—or found a new way to shave bytes off component CSS—we fed it back into the skill until it evolved into a full JavaScript and Tailwind CSS v4 bundle auditor.

Architecture & Mental Model: How the Skill Evolved

Even that "faded memory of the previous bundle size" is baked into SKILL.md, where Source A for determining the baseline build size is literally User Memory / Target (before falling back to earlier session builds or a temporary git worktree against HEAD).

We didn't design this entire architecture upfront. We added each check organically via /learn as we hit real bundle problems in ng-firebase-tts and ng-firebase-image-analyzer, eventually growing into a single-pass analyzer (analyze-bundle.mjs) built with zero external dependencies (node:fs, node:path, node:crypto, node:os, node:child_process).

flowchart TD
    Trigger["User Memory or Git Baseline"] --> Build["analyze-bundle.mjs (Smart stats.json Check)"]
    Build --> Stage1["Stage 1: Initial Bundle and Lazy JS Audit"]
    Build --> Stage2["Stage 2: Component CSS and Tailwind v4 Audit"]

    Stage1 --> V8["8 Initial Bundle Leak Vectors (main.js)"]
    Stage1 --> L3["3 Lazy Chunk Leak Vectors (chunk-*.js)"]

    Stage2 --> C1["1. Dead CSS and Unused @theme Tokens"]
    Stage2 --> C2["2. Short Static @apply (<= 3 Utilities to HTML)"]
    Stage2 --> C3["3. Partial Static Splits (Free HTML Slots + Variant Pairs)"]
    Stage2 --> C4["4. Duplicate @apply and @keyframes Consolidation"]

    V8 & L3 & C1 & C2 & C3 & C4 --> Report["HTML Report: Component CSS Files > 1 KB Table"]
    Report --> Refactor["Incremental Byte Shaving: [class] Bindings, focus:outline-*, Trim Typography, Spacing, and Duration"]

Act 1: Saving My Sanity—Automating the `main.js` & Lazy Chunk Leak Hunt

In those early conversations with Gemini 4 in Antigravity CLI, the goal was simple: figure out why a code change caused main.js or a lazy chunk to grow or slow down. Three patterns in particular convinced me we needed both automated guardrails and a dedicated skill.

Leak 1: The Mixed Barrel File (`index.ts`) Trap in `core/<domain>`

When building services and utility functions under core/<domain>, it is common practice to re-export everything—services, utility functions, constants, types, and interfaces—from a single core/<domain>/index.ts barrel file for cleaner imports.

However, we discovered two painful ways mixed barrel files leak code into main.js:

injectAsync() Sabotage: When a component used injectAsync() (our async service injection helper) to lazy-load a heavy service from core/<domain>, while an eager file in main.js statically imported a constant or helper from that same core/<domain> barrel, the bundler evaluated the barrel and pulled the lazy service straight into main.js—reducing the injectAsync() chunk to a tiny, useless wrapper!
Collateral Service Imports: Even without injectAsync(), when an eager file imported a small utility function from a barrel file, the bundler also pulled the services re-exported in that barrel into the initial bundle.

That led to our strict rule of thumb, which angular-bundle-guard now enforces as Vector 1:

Important

Barrel File Rule of Thumb: Only export lightweight items (types, interfaces, and constants) from a barrel index.ts file. Always import utility functions and services directly from their discrete file paths.

// AVOID in src/app/core/ai/index.ts: Re-exporting services and utilities in a barrel
export * from './ai.type';
export * from './ai.constant';
export * from './ai.util';
export * from './ai.service'; // Leaks into main.js when an eager file imports from '@/core/ai'!

// GOOD in src/app/core/ai/index.ts: Only export types, interfaces, and constants
export type * from './ai.type';
export type * from './ai.interface';
export * from './ai.constant';

// Import utilities and services directly from their file paths:
import { formatPrompt } from '@/core/ai/ai.util';

// And at the class level in a component:
private readonly aiService = injectAsync(() =>
  import('@/core/ai/ai.service').then((m) => m.AiService),
);

Leak 2: Missing `import type` Declarations & Automated ESLint Fixes

Another sneaky culprit was importing interfaces or types using standard value imports (import { SomeModel } from '...') instead of import type. When the TypeScript compiler does not elide them, value imports leave runtime module edges that can pull unintended files into the bundle.

Tracking down that type-import error led me to discover @typescript-eslint/consistent-type-imports. I added the rule to eslint.config.mjs:

// eslint.config.mjs
rules: {
  '@typescript-eslint/consistent-type-imports': ['error', { disallowTypeAnnotations: false }],
}

I then configured a lint:fix script in package.json:

{
  "scripts": {
    "lint:fix": "eslint \"src/**/*.{ts,js,mjs}\" --fix"
  }
}

Now, running npm run lint:fix converts value imports of types into import type immediately, while angular-bundle-guard double-checks for any remaining value imports from .interface.ts or .type.ts files during bundle audits.

Leak 3: Sequential Lazy Chunk Downloads (`@defer` + `injectAsync()` and Sequential `await import()`)

Once we started splitting code out of main.js, we encountered a new problem: sequential network calls where one lazy download waited for another to finish. Through /learn, we taught angular-bundle-guard to catch both patterns under Lazy Vector 2 (Sequential Lazy Chunk Downloads).

Example 1: Using `injectAsync()` Inside a `@defer` Component

We use @defer to separate non-critical components from main.js and the initial bundle so the browser downloads their JavaScript chunks on demand.

With injectAsync(), you declare the helper at the class level (to capture Angular's injection context) and invoke it via await this.featureService() inside a method. However, doing this inside a @defer component triggers two sequential network calls: first downloading the @defer component chunk, and then making an extra network call when await this.featureService() runs.

Because a deferred component is already separated from main.js and the initial bundle, loading its service upfront with the standard inject() function bundles the service into the @defer chunk and saves that extra network round trip:

// AVOID inside a @defer component: Leads to an extra sequential network call!
export class DeferredFeatureComponent {
  private readonly featureService = injectAsync(() =>
    import('@/core/feature/feature.service').then((m) => m.FeatureService),
  );

  async runAction() {
    // Extra network round trip after the @defer component chunk is already downloaded
    const service = await this.featureService();
    return service.execute();
  }
}

// GOOD inside a @defer component: Already separated from main.js—load the service upfront!
export class DeferredFeatureComponent {
  // Bundled with the @defer chunk; saves the extra network round trip
  private readonly featureService = inject(FeatureService);

  runAction() {
    return this.featureService.execute();
  }
}

Example 2: Awaiting Independent Dynamic `import()` Calls Sequentially

Another sequential download occurred in loadFirebase(), where we awaited two independent Firebase imports—firebase/app and firebase/remote-config—one after the other. Because those two module downloads don't depend on each other, awaiting them sequentially forced the second chunk to wait for the first chunk to finish downloading.

Using await Promise.all() downloads both Firebase chunks concurrently:

// AVOID: Awaiting two independent Firebase imports one after another
private async loadFirebase(): Promise<void> {
  try {
    const { initializeApp } = await import('firebase/app');
    const remoteConfigSdk = await import('firebase/remote-config');
    // ... other initialization code ...
  } catch (error) {
    // ... error cleanup ...
  }
}

// GOOD: Download independent Firebase imports concurrently with await Promise.all()
private async loadFirebase(): Promise<void> {
  try {
    const [{ initializeApp }, remoteConfigSdk] = await Promise.all([
      import('firebase/app'),
      import('firebase/remote-config'),
    ]);
    // ... other initialization code ...
  } catch (error) {
    // ... error cleanup ...
  }
}

All 8 Initial Bundle Vectors & 3 Lazy Chunk Vectors

As we kept debugging different bundle regressions with Gemini 4 and running /learn, the skill grew to audit 8 Initial Bundle Leak Vectors (such as mixed barrels, missing import type, top-level heavy SDKs, viewChild(ComponentClass) breaking @defer, eager routes in app.routes.ts, and static JSON imports) plus 3 Lazy Chunk Vectors (bloated lazy chunks, sequential lazy downloads, and shared barrel leaks across lazy chunks).

Act 2: The Plot Twist—Why Component CSS Was Bloating Our JS Chunks

Once the JavaScript import leaks were under control, the skill evolved into something I hadn't originally anticipated: hunting CSS bloat inside JavaScript chunks.

In Angular's default ViewEncapsulation.Emulated mode:

Global src/styles.css stays in the .css file (0 B in main.js).
Every component with styleUrl compiles its CSS rules into JavaScript string literals (styles: ["..."]) embedded directly inside main.js or its lazy .js chunk.

Even worse, our projects used Tailwind CSS v4. Whenever a component's .css file used @apply with utilities that rely on CSS custom properties—such as border, ring, shadow, font-sans, leading-*, tracking-*, bg-linear-*, translate, scale, animate-*, or duration-*—Tailwind CSS v4 injected ~2.5 to 3.2 kB of @property --tw-* and @supports definitions into that component's compiled JS chunk:

/* Inside a component .css file */
.card-wrapper {
  @apply flex flex-col gap-4 rounded-xl border p-6 shadow-sm;
}

// What actually gets embedded inside your Angular lazy chunk-*.js (simplified):
styles: [".card-wrapper[_ngcontent-%COMP%]{display:flex;flex-direction:column;...}@property --tw-border-style{syntax:'*';inherits:false;initial-value:solid}@property --tw-shadow{syntax:'*';inherits:false;initial-value:0 0 #0000}... /* ~3 kB of @property rules per component! */"]

Seeing ~3 kB of duplicate @property boilerplate repeated across lazy chunks for components that only had a few lines of @apply CSS was eye-opening—and became the next target for our skill.

Act 3: Teaching the Skill to Find Dead CSS, Static Utilities, & Duplicates

Because common utility classes (flex, flex-col, gap-4, w-full) already exist in the global styles.css file, moving static utilities from a component's .css file to class="..." in its .html template adds 0 B to the global CSS bundle while shrinking the JS chunk—and if you remove every @apply trigger from a component, its entire ~3 kB @property block disappears!

To keep HTML templates readable while maximizing bundle savings, /learn taught angular-bundle-guard to audit 4 CSS Optimization Categories using a <= 3 classes per HTML element ceiling. Choosing 3 is a personal preference: < 3 is too strict to be practical, while > 3 starts feeling like too many classes cluttering the HTML. (That said, I sometimes manually relax the rule to 4 classes when the utilities are intuitive and inlining that fourth class lets me delete the .css rule to shrink the bundle!)

1. Dead and Unused CSS & Vanilla Rules

After rounds of component changes, dead .class selectors, unused @keyframes, and unused --* custom properties often linger in .css files. The skill scans sibling .html and .ts files to flag dead classes that still compile into JS chunks.

2. Short Static `@apply` Classes (`<= 3` Utilities -> Full Move to HTML)

If a component .css class only wraps 1–3 static Tailwind utilities and replacing it in .html keeps the element at <= 3 total classes ((currentHtmlClassCount - 1) + utilities.length <= 3), the skill recommends moving the utilities to .html and deleting the .css rule (and when a rule has 4 intuitive utilities, I occasionally inline all 4 as well to eliminate the .css class):

<!-- Before: .results-wrapper in component.css had `@apply flex flex-col gap-6;` -->
<section class="results-wrapper">...</section>

<!-- After: 3 classes in HTML, 0 bytes in the component JS chunk! -->
<section class="flex flex-col gap-6">...</section>

3. Partial Static Splits (Keeping Variant Pairs Together)

When a rule has more than 3 utilities, the skill calculates how many free class slots remain on the HTML element (freeHtmlSlots = 3 - currentHtmlClassCount) and suggests moving standalone utilities (flex, w-full, relative) to .html while keeping the class name.

Tip

Specificity Guardrail Learned via /learn: The skill always keeps coupled x:* variant pairs in the same layer (for example, grid-cols-1 + md:grid-cols-2, or border + focus-visible:border-2) so Angular's [_ngcontent] selector in .css never overrides a responsive or focus utility in .html.

4. Duplicate `@apply` & `@keyframes` Consolidation

While auditing our stylesheets, we also found duplicate @apply rules and redundant @keyframes animations hiding in component .css files, which we taught the skill to catch automatically:

Duplicate `@apply` Selectors in the Same Component (`.a` vs. `.b`)

In a header component, we had two separate CSS classes—say .a and .b—that each applied the same ~10 utilities:

/* BEFORE: Two selectors in the same .css file with identical @apply utilities */
.a {
  @apply inline-flex items-center justify-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium transition-colors;
}
.b {
  @apply inline-flex items-center justify-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium transition-colors;
}

There was no reason to compile both selectors into the JS chunk. The skill now flags identical rules within a file so you can delete .b from .css and use .a in .html.

Duplicated `@keyframes fadeIn` Across `styles.css` and Component CSS

When I searched for @keyframes in ng-firebase-image-analyzer, I found @keyframes fadeIn defined in src/styles.css and redefined inside a component .css file—differing only slightly by a translateY() value. When I asked Gemini 4 about it, it recommended deleting the component's @keyframes fadeIn copy and using the global animate-fade-in utility from src/styles.css. We fed that into /learn, so angular-bundle-guard now scans src/styles.css for global @utility animations and tells you to replace component-level duplicate @keyframes with the global utility.

Component `@keyframes spin` Colliding with Tailwind's Built-In `animate-spin`

Even better, one component .css file had defined its own @keyframes spin from scratch—even though Tailwind CSS already includes animate-spin out of the box! We deleted @keyframes spin from the component .css file, switched the template to animate-spin, and taught the skill to flag any component @keyframes that collide with Tailwind's built-in animations (spin, pulse, ping, bounce).

Act 4: Inspecting "Fat" CSS Files in the HTML Report & Shaving Bytes Here and There

In the generated HTML report, right above the 4 optimization categories, there is a collapsible table titled 2. Component CSS Files > 1 KB (2, +11 <= 1 KB). It lists the "fat" component .css files in descending order by compiled byte size, showing:

Source CSS File	Compiled Size	Tailwind CSS v4 `@property` Overhead	Triggering `@apply` Classes
`src/app/.../some.component.css:14`	`4.82 kB (4,936 B)`	`3.05 kB (63%) — duplicate @property --tw-* boilerplate`	`border (L14,28)`, `focus-visible:ring-2 (L19)`, `tracking-wide (L24)`, `leading-relaxed (L35)`

When a component .css file appeared at the top of this table, we couldn't always reduce it to 0 kB—complex components still needed custom styles. Instead, I asked Gemini 4 how to optimize individual components based on the latest HTML report. Those reviews uncovered several micro-optimizations that didn't drop a stylesheet to 0 kB, but shaved a few bytes here and there across components and styles.css:

1. When Gemini 4 Suggested `focus:ring-` -> `focus:outline-`

When I asked Gemini 4 how to optimize one of the fat .css files from the HTML report, it suggested rewriting focus:ring-* to focus:outline-* (and focus-visible:ring-* to focus-visible:outline-*).

Why? In Tailwind CSS, ring-* utilities compile into a multi-variable box-shadow composition (--tw-ring-inset, --tw-ring-offset-width, --tw-ring-offset-color, --tw-ring-color, --tw-ring-shadow). Rewriting focus:ring-* / focus-visible:ring-* to focus:outline-* / focus-visible:outline-* uses native CSS outline properties so Tailwind injects fewer declarations and variables into the compiled CSS:

/* BEFORE: Injects multi-variable --tw-ring-* / --tw-shadow-* declarations */
.action-input {
  @apply rounded-md border px-3 py-2 focus-visible:ring-2 focus-visible:ring-primary;
}

/* AFTER: Uses native CSS outline—shaving injected bytes from the compiled rule */
.action-input {
  @apply rounded-md border px-3 py-2 focus-visible:outline-2 focus-visible:outline-primary;
}

2. Moving Conditional State Classes into `[class]` Bindings

When reviewing a large .css file (like the image dropzone in ng-firebase-image-analyzer), I also looked for classes that only existed to toggle UI states—such as dragging a file over a dropzone or not. By moving those conditional utilities into [class]="..." bindings in .html, I could delete the extra state selectors from .css, trimming the stylesheet size:

<!-- Conditional utilities moved to [class] in component.html (e.g., dragging a file or not) so state classes can be deleted from .css -->
<div
  class="dropzone"
  [class]="isDragging() ? 'border-primary bg-primary/10' : 'border-outline-variant bg-surface-container'"
>
  ...
</div>

3. Trimming `tracking-`, `leading-`, `uppercase`, Defaults (`font-sans` / `text-base`), Responsive Spacing, & `duration-*`

Reviewing those fat .css files also revealed several typography, spacing, and transition utilities we could simplify or remove:

Deleting tracking-*, leading-*, and uppercase: Extra letter-spacing (tracking-*) wasn't visually important to me, and both tracking-* and leading-* trigger Tailwind CSS v4 @property overhead inside @apply. Combined with converting static badge/header text to ALL CAPS directly in .html so we could delete uppercase, removing tracking-*, leading-*, and uppercase shrank our component .css files and removed those unused utility definitions from the global styles.css.
Removing redundant font-sans and text-base: Because the application's default font family and font size are already font-sans and text-base, we deleted redundant font-sans (another @property trigger in @apply) and text-base declarations.
Unifying sm:, md:, and lg: margins and padding: In places where responsive padding or margins (sm:p-*, md:p-*, lg:m-*) could use the same spacing value across screen sizes, unifying them into a single spacing class eliminated extra @media rules.
Setting a default 200ms duration in styles.css and deleting duration-*: Seeing different duration-* utilities scattered across components, I set --default-transition-duration: 200ms in src/styles.css and removed duration-* from both .html and .css files.

/* In src/styles.css: Set default transition duration to 200ms globally */
@theme {
  --default-transition-duration: 200ms;
}

4. Safety Guardrails Learned Along the Way

To make sure these refactors never broke existing behavior, /learn encoded three strict guardrails into angular-bundle-guard:

Dynamic [class] Binding Protection (isDynamicallyBoundInHtml): Once a class is dynamically bound via [class.foo], [class], or [ngClass], the skill automatically skips it from static inlining recommendations.
Unit Test (*.spec.ts) Selector Warnings: If a unit test queries a class via By.css('.some-class') or querySelector('.some-class'), the HTML report displays a ⚠️ Test Queries Selector badge with the exact .spec.ts line number so you don't break tests when deleting a .css class.
Global Override Protection: If a component .css rule intentionally overrides a global class defined in src/styles.css (such as .error-block in sign-in-modal.component.css), the skill leaves it untouched in .css.

Individually, each of these changes shaved a few bytes or kilobytes. Combined across ng-firebase-tts and ng-firebase-image-analyzer—from deleting dead classes and duplicate @apply/@keyframes rules to inlining static utilities, moving state classes to [class], and trimming focus:ring-*, typography, responsive spacing, and duration-* utilities—they noticeably shrank main.js, our lazy chunks, and styles.css.

Try `angular-bundle-guard` in Your Angular Workspace

What started as a moment of frustration—"I am tired of this—let's build a skill to save my sanity"—turned into one of the most useful tools in my Angular workflow, built entirely by pairing with Gemini 4 and /learn in Antigravity CLI. (In fact, building this skill went so well that I'm planning to build another skill to turn these blog posts into a book!)

You can install angular-bundle-guard as an Antigravity CLI plugin or via the skills CLI:

# Option 1: Install as an Antigravity CLI (agy) plugin
agy plugin install https://github.com/railsstudent/angular-bundle-guard

# Option 2: Install via npx skills
npx skills add https://github.com/railsstudent/angular-bundle-guard

Or run the zero-dependency analyzer directly from the root of any Angular project:

node <skill-dir>/scripts/analyze-bundle.mjs

Angular Bundle Guard Repository: github.com/railsstudent/angular-bundle-guard
Companion Series Repositories: ng-firebase-tts & ng-firebase-image-analyzer

Build Real-Time Client-Side TTS in Angular Using Firebase AI Logic and Gemini

Connie Leung — Tue, 01 Sep 2026 10:52:37 +0000

In my previous article on Dev.to, I showed how to build expressive text-to-speech using Gemini and Firebase Cloud Functions. While that setup worked beautifully, it required building and deploying custom backend endpoints. Firebase AI Logic enables running Gemini TTS client-side with production security, eliminating custom backend code and automating deployment via Git integration.

1. Technical Stack

Project technical stack:

Angular 22: The latest version as of August 2026.
Node.js LTS: The LTS version as of May 2026.
Firebase Remote Config: Manages dynamic parameters, such as TTS model names, and conditionally configures limited-use tokens.
Firebase AI Logic: Interfaces with Gemini generative models.
Firebase App Check: Prevents abuse and verifies token authenticity.
Firebase App Hosting: Streamlined deployment to the Firebase App Hosting environment. With a single code push, the latest changes deploy to the production environment.

The public Google Gemini Developer API is restricted in my region (Hong Kong). However, the Agent Platform Gemini API (Google Cloud) offers enterprise access that works reliably here, so I chose the Agent Platform Gemini API for this Firebase AI Logic demo.

1.1 Install global dependency

npm install -g firebase-tools

Install or update firebase-tools globally using npm.

firebase logout

firebase login

Log out and re-authenticate with Firebase.

1.2 Install dependencies

npm i --save-exact firebase
npm i --save-exact --save-dev firebase-tools serve

Install the dependencies to call the Firebase AI Logic API, use the Firebase CLI to generate files, and serve the production build.

firebase init

Execute firebase init and follow the prompts to set up the Firebase AI Logic, Emulators, App Hosting, and Remote Config.

If you have an existing project or multiple projects, you can specify the project ID on the command line.

firebase init --project <PROJECT_ID>

After completing the setup steps, the Firebase tools generate the configuration files such as .firebaserc and firebase.json. You can view the .firebaserc and firebase.json in the GitHub repo.

1.3. Generate Firebase Configuration File

We asked antigravity-cli (a terminal-first AI coding agent released by Google) and the Gemini Flash model to create two Node.js scripts to do the following:

Generate default Remote Config values in JSON format and save them to public/remote-config-defaults.json. You can read the complete listing of the script.
Populate the Firebase configuration object and write it to public/firebase.config.json. If we hardcode the public keys and push them to GitHub, GitHub triggers a false alarm. You can read the complete listing of the script and the environment variable template.

# generated firebase configuration
firebase.config.json

Add firebase.config.json to .gitignore to prevent accidental commits.

During build time, Angular bundles both JSON files into the dist directory to provide initial configuration values.

2. Architecture

Users submit text to Firebase AI Logic to synthesize speech. Firebase generates the complete L16 audio payload and returns it to the client. Because the HTML audio element does not support the L16 format, the application converts the audio to a WAV Blob before binding the Blob URL to the element source.

The second flow streams the audio and sends the L16 chunks to the Angular application. The audio player creates an AudioBufferSourceNode to play the chunk data and cleans up resources to prevent memory leaks.

3. Source Code

While the full codebase is available in the ng-firebase-tts repository, the application relies on Firebase Remote Config to manage configuration, App Check to prevent abuse, and App Hosting to deploy the Angular application.

The following sections illustrate how to initialize the Firebase app and App Check, and how to activate Remote Config values.

4. Firebase Integration

The public/firebase.config.json file contains the public Firebase API key, the sensitive reCAPTCHA Enterprise key, and the App Check debug token to bypass device attestation in local development. These values are critical in Firebase App and App Check initialization.

4.1. Firebase Infrastructure

@Service()
export class ConfigService {
  #app: FirebaseApp | undefined = undefined;
  #remoteConfig: RemoteConfig | undefined = undefined;

  /*... getter methods are omitted... */

  get appConfig(): AppRemoteConfig {
    return this.#appConfig;
  }

  get aiBackend(): AI {
    return this.#aiBackend;
  }

  async initialize(): Promise<void> {
    this.#app = initializeApp(firebaseConfig.app);

    (globalThis as any).FIREBASE_APPCHECK_DEBUG_TOKEN = firebaseConfig.appCheckDebugToken || true;

    initializeAppCheck(this.#app, {
      provider: new ReCaptchaEnterpriseProvider(firebaseConfig.recaptchaEnterpriseKey),
      isTokenAutoRefreshEnabled: true,
    });

    this.#remoteConfig = getRemoteConfig(this.#app);
    this.#remoteConfig.defaultConfig = remoteConfigDefaults;
    await fetchAndActivate(this.#remoteConfig);

    this.#appConfig = {
      vertexAILocation: getValue(this.#remoteConfig, 'vertexAILocation').asString(),
      useLimitedUseAppCheckTokens: getValue(
        this.#remoteConfig,
        'useLimitedUseAppCheckTokens',
      ).asBoolean(),
      geminiTTSModelName: getValue(this.#remoteConfig, 'geminiTTSModelName').asString(),
    };

    this.#aiBackend = getAI(this.#app, {
      backend: new AgentPlatformBackend(this.#appConfig.vertexAILocation),
      useLimitedUseAppCheckTokens: this.#appConfig.useLimitedUseAppCheckTokens,
    });
  }
}

The initialize method initializes Firebase App, configures App Check, sets up Firebase AI, and assigns Remote Config values to appConfig.

The appConfig object holds the location, the Gemini TTS model name, and the limited-use App Check token flag.

4.2. Remote Config and Construct Agent Platform Backend

Configure the TTS model name and the limited-use App Check token parameters in Firebase Remote Config. Both parameters have conditional values. When the Firebase web application is firebase-ai-logic-tts, the TTS model is gemini-3.1-flash-tts-preview, and the limited-use App Check token flag is set to true.

export const AI_BACKEND = new InjectionToken<AI>('AI_BACKEND');

export function provideFirebase() {
  return makeEnvironmentProviders([
    {
      provide: AI_BACKEND,
      useFactory: () => inject(ConfigService).aiBackend,
    },
  ]);
}

The AI_BACKEND injection token provides a factory function to return the Firebase AI from ConfigService.

export const appConfig: ApplicationConfig = {
  providers: [
    ... other providers ...
    provideAppInitializer(async () => await inject(ConfigService).initialize()),
    provideFirebase(),
  ],
};

provideAppInitializer and provideFirebase initialize Firebase and configure Firebase AI during application startup.

5. TextToSpeechService Definition in Angular

The private createModel method calls getGenerativeModel to create a generative model configured with speechConfig. The subsequent workflows use this model to convert L16 audio to WAV or stream L16 playback directly.

@Service()
export class TextToSpeechService {
  readonly #configService = inject(ConfigService);
  readonly #modelName = this.#configService.appConfig.geminiTTSModelName;

  private createModel(voiceName: string) {
    return getGenerativeModel(this.#aiBackend, {
      model: this.#modelName,
      generationConfig: {
        responseModalities: [ResponseModality.AUDIO],
        speechConfig: {
          voiceConfig: {
            prebuiltVoiceConfig: { voiceName },
          },
          languageCode: 'en-US',
        },
      },
    });
  }
}

5.1 Flow 1: L16 Audio to WAV conversion

async synthesize(text: string, voiceName: string): Promise<Blob> {
  const model = this.createModel(voiceName);
  const result = await model.generateContent([text]);
  const chunk = this.extractValidChunkData(result.response);
  const { data, mimeType } = chunk;
  return convertToWav(decodeBase64(data), mimeType);
}

The extractValidChunkData method extracts binary audio data and the MIME type from the response payload.

The synthesize method retrieves the entire audio payload in L16 format. However, the HTML audio element does not support L16, so the application must convert the data to WAV format before assigning the Blob URL to the element source.

See the conversion to WAV code for the full implementation.

This implementation remains straightforward because it avoids managing response streams and incremental audio chunks. However, users suffer from latency when the text is long and it produces a long audio stream. To eliminate playback latency, the next section explores streaming chunks directly via the Web Audio API AudioContext.

5.2 Flow 2: L16 Audio Instant Playback

async *synthesizeStream(text: string, voiceName: string): AsyncGenerator<RawAudioBinary | undefined> {
    const model = this.createModel(voiceName);
    let firstMimeType = '';
    let sampleRate = DEFAULT_SAMPLE_RATE;

    const responseStream = await model.generateContentStream([text]);
    for await (const chunk of responseStream.stream) {
      const chunkData = this.extractValidChunkData(chunk);
      if (chunkData) {
        const { data, mimeType } = chunkData;
        const decodedData = decodeBase64(data);
        if (!firstMimeType && mimeType) {
          firstMimeType = mimeType;
          sampleRate = parseMimeType(firstMimeType).sampleRate;
        }

        yield { decodedData, sampleRate };
      }
    }

    yield undefined;
}

The synthesizeStream method returns an asynchronous generator that yields the raw binary data and the sample rate. The MIME type is audio/l16; rate=24000; channels=1, so parseMimeType extracts the sample rate for the audio player's AudioContext.

While AudioPlayerService is beyond the scope of this article, the source code demonstrates how to play back audio without using an HTML audio element.

Next, we will build a reactive user interface in Angular that renders an HTML audio element to play audio.

6. Build Reactive UI in Angular

The TextToSpeechComponent delegates audio management to the view service to maintain separation of concerns.

6.1 Text to Speech Component

The TextToSpeechComponent displays three buttons to generate speech from text across three different scenarios:

Scenario 1: Synthesizes the entire audio payload and binds the resulting Blob URL to an HTML audio element.
Scenario 2: Streams audio chunks incrementally and plays the speech immediately via the Web Audio API. This mode hides the HTML audio element because audio plays directly through the Web Audio API.

@Component({
  selector: 'app-text-to-speech',
  templateUrl: './text-to-speech.component.html',
  styleUrl: './text-to-speech.component.css',
  imports: [SpinnerIconComponent, NgTemplateOutlet],
  providers: [TextToSpeechViewService],
})
export class TextToSpeechComponent {
  private readonly speechService = inject(TextToSpeechViewService);

  interestingFact = input<string | undefined>(undefined);
  audioPrompt = input.required<string>();
  voice = input.required<string>();

  async generateSpeech(mode: GenerateSpeechMode) {
    const fact = this.interestingFact();
    await this.speechService.generateSpeech(mode, {
      prompt: this.audioPrompt(),
      voice: this.voice(),
      fact: this.interestingFact(),
    });
  }
}

6.2 TextToSpeechView Definition in Angular

The TextToSpeechViewService encapsulates TextToSpeechService and AudioPlayerService to coordinate speech synthesis and audio playback.

@Injectable()
export class TextToSpeechViewService {
  private readonly speechService = inject(TextToSpeechService);
  private readonly audioPlayerService = inject(AudioPlayerService);

  #audioUrl = signal<string | undefined>(undefined);
  audioUrl = this.#audioUrl.asReadonly();

  private processStreamChunk(isInitialized: boolean, playbackRate: number, chunk: RawAudioBinary) {
    if (!isInitialized) {
      this.audioPlayerService.initialize(chunk.sampleRate, playbackRate);
      isInitialized = true;
    }
    this.audioPlayerService.processChunk(chunk.decodedData);
    return isInitialized;
  }

  private async handleSync(promptArgs: FactConfig) {
    const blob = await this.speechService.synthesize(promptArgs.prompt, promptArgs.voice);
    this.setAudioUrl(blob);
  }

  private async handleStream(promptArgs: FactConfig) {
    let isInitialized = false;    
    const { prompt, voice } = promptArgs;

    for await (const chunk of this.speechService.synthesizeStream(prompt, voice)) {
      isInitialized = this.processStreamChunk(isInitialized, 1, chunk);
    }
  }

  private setAudioUrl(finalBlob: Blob | undefined) {
    if (finalBlob) {
      const createdUrl = URL.createObjectURL(finalBlob);
      this.#audioUrl.set(createdUrl);
      return createdUrl;
    }
    return undefined;
  }

  async generateSpeech(mode: GenerateSpeechMode, promptArgs: FactConfig) {
    revokeBlobURL(this.#audioUrl());
    this.#audioUrl.set(undefined);

    switch (mode) {
      case 'sync':
        await this.handleSync(promptArgs);
        break;
      case 'web_audio_api':
        await this.handleStream(promptArgs);
        break;
    }
  }
}

handleSync invokes the Firebase SDK to synthesize audio using the Gemini TTS model, generates a Blob URL, updates #audioUrl, and renders the HTML audio element.

handleStream calls the Firebase SDK to use the Gemini TTS model to stream the audio instead. The audio context receives the chunk data, plays it immediately, and avoids rendering the HTML audio element.

Conclusion

The integration of text-to-speech with Firebase AI Logic empowers Angular applications for real-time audio generation.

The Angular application handles text-to-speech entirely on the client. Pushing changes to Git triggers an automatic deployment to Firebase App Hosting.

Try cloning the GitHub repository, uploading an image to generate an obscure fact, and using the Gemini 3.1 Flash TTS preview model to speak it with the specified scene, emotion, and pace.

Resources

Go Completely Offline: Build a Privacy-First Personal Finance Assistant with LiteRT and Gemma 4

Connie Leung — Thu, 27 Aug 2026 01:07:01 +0000

Imagine having a personal financial planner that analyzes your sensitive transaction history, flags spending anomalies, and suggests budget optimizations—all while running 100% offline, directly inside your web browser.

In this guide, we will build an offline Retrieval-Augmented Generation (RAG) assistant powered by the LiteRT LM Web API and the highly efficient, on-device Gemma 4 E2B small language model. By caching the model weights directly in the browser's Cache Storage, your application will achieve complete privacy, zero token costs, and genuine offline capability.

1. Prerequisites

LiteRT LM Web API
Gemma 4 E2B model
Angular 22
TailwindCSS
Node 24

While Angular and TailwindCSS provide the user interface and styling, the LiteRT LM Web API and the on-device small model power this demo's AI capabilities.

npm i --save-exact @litert-lm/core tailwindcss postcss @tailwindcss/postcss jsonrepair dexie
npm i --save-exact --save-dev angular-eslint husky lint-staged serve @commitlint/cli

We install additional dependencies for on-device AI, CSS Styling, JSON response streaming, and IndexedDB storage. The dev dependencies help automatically catch code smells, enforce code quality, and serve the production bundle.

2. Architecture

We designed this application to process transactions entirely on-device, ensuring financial data privacy inside the browser. The process operates in three key phases:

Model and Data Storage: First, the application downloads and caches the Gemma 4 E2B model weights directly in the browser's Cache Storage so they are available offline. When users log expenses, they are saved locally in IndexedDB.
Arithmetic Grounding: Small models hallucinate when processing arithmetic queries, so we aggregate expenses into a monthly total, a daily total, and an expense-by-category breakdown. We supply the precomputed values to the Gemma WebGPU engine as ground truth, along with the user query.
Conversation Management: To prevent exceeding browser token limits, the application resets the conversation after three turns but retains a client-side memory of the last two queries. On reset, the application re-primes the model with immutable financial grounding data before replaying those queries. This maintains conversational continuity while keeping memory usage within on-device limits.

Next, let's look at how we instantiate this LiteRT LM engine, define the insight service, and design the Angular user interfaces to generate these insights.

3. Source Code

While the full codebase is available in the NG Personal Finance Assistant repository, our application relies on an IndexedDB database to track expenses offline. You can find the database implementation in the service file, which is injected via an injection token and initialized at startup using provideAppInitializer.

With this local database configured to log expenses, we can now focus on the AI integration. The following sections illustrate how to cache the Gemma 4 weights and leverage Angular 22's reactive features to generate secure, local insights directly from this transaction data.

4. Gemma Model Caching and Engine Initialization

Running LLMs locally in the browser requires two steps:

Caching the Weights: Storing the model weights (~2GB) in the browser's Cache Storage so the application can run 100% offline.
Engine Bootstrapping: Creating a single, reusable instance of the LiteRT LM engine so we can stream responses with WebGPU speed and avoid costly re-initialization latencies.

4.1 Caching Gemma 4 to Cache Storage in the Browser

When discussing on-device AI, people often assume offline operation, zero server dependency, and total privacy. However, this is only partially true for Web AI. Most tutorials make a fetch request to retrieve the Gemma model from HuggingFace, which works well when online. This fails if the user's connection is unstable or unavailable.

This illustrates the benefit of caching a small Gemma model in Cache Storage. The device only needs to be online once to download the model, and the application runs 100% offline.

The demo has a download button for users to download the Gemma 4 E2B model that is around 2GB.

After a successful download, go to Application > Storage > Usage to verify that the model occupies 2GB in storage.

Let's implement this logic in AiModelCacheService:

export const AI_CACHE_NAME = 'JMWebAIModels';
export const DEFAULT_MODEL_FILENAME = 'gemma-4-E2B-it-web.litertlm';
export const GEMMA_MODEL_URL = `https://huggingface.co/litert-community/gemma-4-E2B-it-litert-lm/resolve/main/${DEFAULT_MODEL_FILENAME}`;

@Service()
export class AiModelCacheService {
  readonly #modelUrl = GEMMA_MODEL_URL;
  readonly #state = signal({ status: 'not-downloaded' });

  async downloadModel(): Promise<string> {
    if (this.#state().status === 'cached') {
      return await this.getModelUrl();
    }

    this.#state.set({ status: 'downloading' });
    const localBlobUrl = await FileProxyCache.loadFromURL(this.#modelUrl);
    this.#state.set({ status: 'cached' });

    return localBlobUrl;
  }

  async getModelUrl(): Promise<string | null> {
    return await FileProxyCache.loadFromURL(this.#modelUrl);      
  }
}

The AiModelCacheService class leverages FileProxyCache (an open-source utility by Jason Mayes designed specifically for caching large Web AI weights). Instead of using a standard browser fetch (which can crash or fail with large ~2GB assets), FileProxyCache handles chunked downloads and saves the Gemma model directly to the browser's Cache Storage. In subsequent runs, it instantly loads the cached local file and passes its blob URL to the LiteRT engine, completing the offline capability.

4.2. Lazy-Initializing the LiteRT LM Engine

The application has a single instance of the LiteRT LM engine. Initializing and destroying an engine for an individual query is an expensive operation. This introduces latency while waiting for the engine to become available, start a new conversation, and accept a message.

We lazily initialize the engine using GemmaEngineService, which we then inject into our insight service in the next section.

@Service()
export class GemmaEngineService {
  readonly #cacheService = inject(AiModelCacheService);
  #engine: Engine | null = null;

  private async initializeEngine(): Promise<Engine> {
    const localBlobUrl = await this.#cacheService.getModelUrl();
    const instance = await Engine.create({
      model: localBlobUrl,
      mainExecutorSettings: {
        maxNumTokens: 4096,
      },
    });

    this.#engine = instance;
    return instance;
  }

  getEngine(): Promise<Engine> {
    if (this.#engine) {
      return Promise.resolve(this.#engine);
    }

    return this.initializeEngine();
  }

  ... other methods and lifecycle methods ...
}

If initialized, the method returns the engine immediately. Otherwise, the initializeEngine helper method loads the model from Cache Storage, constructs the LiteRT LM engine, and returns it.

5. Insight Service Definition in Angular

We define the system, priming, and user prompts to analyze and derive deep insights into personal finance and spending. You can view our exact prompts here.

To ensure high-quality, structured output from Gemma 4, the model must return a JSON response adhering to the InsightsResponse interface. You can view the response and the Insight interface here.

Let's implement our InsightService to coordinate the streaming process:

@Service()
export class InsightService {
  readonly #engineService = inject(GemmaEngineService);

  #conversation: Conversation | null = null;
  #lastPrimedExpenses: Expense[] | null = null;
  #turnsCount = 0;
  #previousQueries: string[] = [];

  async *streamInsights(userQuery: string, expenses: Expense[]): AsyncGenerator<InsightsResponse> {

    const isContextDifferent = this.#lastPrimedExpenses !== expenses;
    const isContextExhausted = this.#turnsCount >= 3;

    // Reset & prime context when threshold is met
    if (!this.#conversation || isContextDifferent || isContextExhausted) {
      await this.primeContext(expenses, isContextExhausted ? this.#previousQueries : undefined);
    }

    const userPrompt = INSIGHTS_USER_PROMPT(userQuery);
    const stream = await this.#conversation.sendMessageStreaming(userPrompt);

    this.#previousQueries.push(userQuery);
    this.#turnsCount = this.#turnsCount + 1;

    // Yield repaired, streamed JSON chunks (using jsonrepair)       
    yield* this.processStream(stream);
  }

  /* processStream, lifecycle, and other helper methods */
}

Our primeContext method formats transaction data, computes high-level spending statistics, and appends them to the query context—guaranteeing that Gemma 4 generates a reliable, grounded JSON response.

The processStream method returns an asynchronous generator that iterates over the stream to extract each chunk's content. Because LLM response streaming delivers data fragment-by-fragment, the raw buffer is frequently incomplete (e.g., an open brace or unclosed bracket). Attempting to run standard JSON.parse() on these partial chunks would immediately throw a syntax error. To solve this, the jsonrepair library dynamically patches and closes the partial JSON string on the fly, allowing the application to successfully parse and render UI updates incrementally.

6. Reactive UI Construction in Angular

6.1 History Insights Facade

HistoryInsightsService acts as a clean facade between our UI component and the core InsightService, letting us easily query expenses and stream insights based on user questions.

Our component injects this service to trigger and render the JSON response asynchronously.

Source code of HistoryInsightsService

6.2 History Insights Component

HistoryInsightsComponent comprises child components and a pipe. However, the primary method that communicates with Gemma 4 to generate a list of insights is onAskGemma.

@Component({
  selector: 'app-history-insights',
  ...
})
export default class HistoryInsightsComponent {
  protected readonly vm = inject(HistoryInsightsService);

  readonly expenses = signal<Expense[]>([]);
  readonly streamingResponse = signal<InsightsResponse>({ insights: [] });

  async onAskGemma(query: string): Promise<void> {
    const trimmed = query.trim();
    if (!trimmed) {
      return;
    }

    this.streamingResponse.set({ insights: [] });

    // The expenses are populated after a search query
    // Consume the stream generator and update the UI signal incrementally
    const generator = this.vm.streamInsights(trimmed, this.expenses());
    for await (const response of generator) {
      this.streamingResponse.set(response);
    }
  }
}

The onAskGemma event handler invokes HistoryInsightsService's streamInsights method to retrieve the streamed response and incrementally updates the streamingResponse signal. The derived aiState signal computes the current status, captures any errors, and binds the values directly to the child component to render the streamed response in real-time.

The full listing of HistoryInsightsComponent

7. Conclusion

This concludes the journey of building an on-device personal finance assistant using the LiteRT LM Web SDK, the Gemma 4 E2B small-scale model, and Angular. This blog post shows how to build an offline RAG-based application by caching the model weights locally. Even when Wi-Fi is turned off, the personal finance assistant provides insights for user queries.

We mitigated the lack of tool-calling capability in the API and the mathematical hallucinations of small models by providing precomputed aggregated data as the LLM context. This prevents incorrect "60 + 40.5 = 200.2" expressions in the final results.

Engineers can build web applications with local models to perform financial analysis without leaking personal data to the training datasets of AI vendors.

Resources

Go Completely Offline: Build a Privacy-First Personal Finance Assistant with LiteRT and Gemma 4 [GDE]

Connie Leung — Thu, 27 Aug 2026 01:00:03 +0000

1. Prerequisites

LiteRT LM Web API
Gemma 4 E2B model
Angular 22
TailwindCSS
Node 24

While Angular and TailwindCSS provide the user interface and styling, the LiteRT LM Web API and the on-device small model power this demo's AI capabilities.

npm i --save-exact @litert-lm/core tailwindcss postcss @tailwindcss/postcss jsonrepair dexie
npm i --save-exact --save-dev angular-eslint husky lint-staged serve @commitlint/cli

2. Architecture

We designed this application to process transactions entirely on-device, ensuring financial data privacy inside the browser. The process operates in three key phases:

Model and Data Storage: First, the application downloads and caches the Gemma 4 E2B model weights directly in the browser's Cache Storage so they are available offline. When users log expenses, they are saved locally in IndexedDB.
Arithmetic Grounding: Small models hallucinate when processing arithmetic queries, so we aggregate expenses into a monthly total, a daily total, and an expense-by-category breakdown. We supply the precomputed values to the Gemma WebGPU engine as ground truth, along with the user query.
Conversation Management: To prevent exceeding browser token limits, the application resets the conversation after three turns but retains a client-side memory of the last two queries. On reset, the application re-primes the model with immutable financial grounding data before replaying those queries. This maintains conversational continuity while keeping memory usage within on-device limits.

Next, let's look at how we instantiate this LiteRT LM engine, define the insight service, and design the Angular user interfaces to generate these insights.

3. Source Code

4. Gemma Model Caching and Engine Initialization

Running LLMs locally in the browser requires two steps:

Caching the Weights: Storing the model weights (~2GB) in the browser's Cache Storage so the application can run 100% offline.
Engine Bootstrapping: Creating a single, reusable instance of the LiteRT LM engine so we can stream responses with WebGPU speed and avoid costly re-initialization latencies.

4.1 Caching Gemma 4 to Cache Storage in the Browser

This illustrates the benefit of caching a small Gemma model in Cache Storage. The device only needs to be online once to download the model, and the application runs 100% offline.

The demo has a download button for users to download the Gemma 4 E2B model that is around 2GB.

After a successful download, go to Application > Storage > Usage to verify that the model occupies 2GB in storage.

Let's implement this logic in AiModelCacheService:

export const AI_CACHE_NAME = 'JMWebAIModels';
export const DEFAULT_MODEL_FILENAME = 'gemma-4-E2B-it-web.litertlm';
export const GEMMA_MODEL_URL = `https://huggingface.co/litert-community/gemma-4-E2B-it-litert-lm/resolve/main/${DEFAULT_MODEL_FILENAME}`;

@Service()
export class AiModelCacheService {
  readonly #modelUrl = GEMMA_MODEL_URL;
  readonly #state = signal({ status: 'not-downloaded' });

  async downloadModel(): Promise<string> {
    if (this.#state().status === 'cached') {
      return await this.getModelUrl();
    }

    this.#state.set({ status: 'downloading' });
    const localBlobUrl = await FileProxyCache.loadFromURL(this.#modelUrl);
    this.#state.set({ status: 'cached' });

    return localBlobUrl;
  }

  async getModelUrl(): Promise<string | null> {
    return await FileProxyCache.loadFromURL(this.#modelUrl);      
  }
}

4.2. Lazy-Initializing the LiteRT LM Engine

We lazily initialize the engine using GemmaEngineService, which we then inject into our insight service in the next section.

@Service()
export class GemmaEngineService {
  readonly #cacheService = inject(AiModelCacheService);
  #engine: Engine | null = null;

  private async initializeEngine(): Promise<Engine> {
    const localBlobUrl = await this.#cacheService.getModelUrl();
    const instance = await Engine.create({
      model: localBlobUrl,
      mainExecutorSettings: {
        maxNumTokens: 4096,
      },
    });

    this.#engine = instance;
    return instance;
  }

  getEngine(): Promise<Engine> {
    if (this.#engine) {
      return Promise.resolve(this.#engine);
    }

    return this.initializeEngine();
  }

  ... other methods and lifecycle methods ...
}

If initialized, the method returns the engine immediately. Otherwise, the initializeEngine helper method loads the model from Cache Storage, constructs the LiteRT LM engine, and returns it.

5. Insight Service Definition in Angular

We define the system, priming, and user prompts to analyze and derive deep insights into personal finance and spending. You can view our exact prompts here.

To ensure high-quality, structured output from Gemma 4, the model must return a JSON response adhering to the InsightsResponse interface. You can view the response and the Insight interface here.

Let's implement our InsightService to coordinate the streaming process:

@Service()
export class InsightService {
  readonly #engineService = inject(GemmaEngineService);

  #conversation: Conversation | null = null;
  #lastPrimedExpenses: Expense[] | null = null;
  #turnsCount = 0;
  #previousQueries: string[] = [];

  async *streamInsights(userQuery: string, expenses: Expense[]): AsyncGenerator<InsightsResponse> {

    const isContextDifferent = this.#lastPrimedExpenses !== expenses;
    const isContextExhausted = this.#turnsCount >= 3;

    // Reset & prime context when threshold is met
    if (!this.#conversation || isContextDifferent || isContextExhausted) {
      await this.primeContext(expenses, isContextExhausted ? this.#previousQueries : undefined);
    }

    const userPrompt = INSIGHTS_USER_PROMPT(userQuery);
    const stream = await this.#conversation.sendMessageStreaming(userPrompt);

    this.#previousQueries.push(userQuery);
    this.#turnsCount = this.#turnsCount + 1;

    // Yield repaired, streamed JSON chunks (using jsonrepair)       
    yield* this.processStream(stream);
  }

  /* processStream, lifecycle, and other helper methods */
}

6. Reactive UI Construction in Angular

6.1 History Insights Facade

HistoryInsightsService acts as a clean facade between our UI component and the core InsightService, letting us easily query expenses and stream insights based on user questions.

Our component injects this service to trigger and render the JSON response asynchronously.

Source code of HistoryInsightsService

6.2 History Insights Component

HistoryInsightsComponent comprises child components and a pipe. However, the primary method that communicates with Gemma 4 to generate a list of insights is onAskGemma.

@Component({
  selector: 'app-history-insights',
  ...
})
export default class HistoryInsightsComponent {
  protected readonly vm = inject(HistoryInsightsService);

  readonly expenses = signal<Expense[]>([]);
  readonly streamingResponse = signal<InsightsResponse>({ insights: [] });

  async onAskGemma(query: string): Promise<void> {
    const trimmed = query.trim();
    if (!trimmed) {
      return;
    }

    this.streamingResponse.set({ insights: [] });

    // The expenses are populated after a search query
    // Consume the stream generator and update the UI signal incrementally
    const generator = this.vm.streamInsights(trimmed, this.expenses());
    for await (const response of generator) {
      this.streamingResponse.set(response);
    }
  }
}

The full listing of HistoryInsightsComponent

7. Conclusion

Engineers can build web applications with local models to perform financial analysis without leaking personal data to the training datasets of AI vendors.

Resources

Build Hybrid Image Analysis Application with Angular, Firebase AI Logic, and Gemini Nano [GDE]

Connie Leung — Fri, 07 Aug 2026 14:54:45 +0000

This tutorial demonstrates how to build a hybrid image analysis application using Angular, Firebase AI Logic, and Gemini. Users upload an image, click the button, and wait for either the Gemini Nano or the Gemini 3.5 Flash model to generate tags, alternative texts, and recommendations.

What makes Firebase AI Logic so powerful is that the Hybrid and On-device Web SDK decides to use either the on-device or cloud AI model. In this demo, the SDK downloads and uses Gemini Nano when it is executed in the Chrome browser. When it runs on other browsers, the Gemini 3.5 Flash model handles the image analysis task. The underlying model being used is completely transparent to the user and receives a high-quality response regardless of the backend.

1. Prerequisites

Angular 22
TailwindCSS
Node 24
gemini-3.5-flash
Firebase AI Logic
Firebase Remote Config
Firebase Local Emulator Suite
Firebase App Hosting
Firebase App Check

While Angular and CSS provide the user interface and styling, this demo's AI capability is powered by Firebase services such as Firebase AI Logic and Firebase Remote Config.

npm i -g firebase-tools

Install firebase-tools globally using npm.

npm i --save-exact firebase tailwindcss postcss @tailwindcss/postcss jsonrepair
npm i --save-exact --save-dev angular-eslint firebase-tools husky lint-staged serve

Install additional dependencies for Firebase AI Logic, CSS Styling, and JSON response streaming. The dev dependencies are installed to detect code smells, ensure code quality, and call the Firebase CLI to perform ad-hoc tasks.

2. Source Code

The full source code for this project is available in the NG Firebase Image Analyzer; however, the following sections describe the Firebase Project setup and provide code examples of the Firebase Hybrid and On-device Web SDK.

The following sections walk through the step-by-step Firebase project configuration.

3. Setup Firebase Project in Angular

Set up a Firebase project in an Angular project before any Angular service makes requests to Firebase AI Logic to perform AI tasks.

3.1 Access and Manage Firebase Projects

firebase logout

firebase login

Note: Logging out and logging back in to Firebase before configuring a new project is recommended to refresh authentication.

Create a firebase folder to store .firebasesrc and .firebase.json, which are Firebase configuration files. You can use the Antigravity CLI and Gemini to generate these configuration files within the folder. Antigravity CLI is a Google coding agent that uses AI models to tackle complex problems in the command line. You can find the information on this page.

In my prompt, I instructed the AI model what the default Firebase Project ID was, and the services to install. The demo utilizes Firebase AI Logic, App Hosting for production deployment, and the Firebase Local Emulator Suite to simulate hosting, accelerating the development cycle.

The following is a very simple firebase/.firebasesrc:

{
  "projects": {
    "default": "<Firebase Project ID>"
  }
}

The following is the full configuration firebase/firebase.json:

{
  "apphosting": [
    {
      "backendId": "ng-firebase-image-analyzer",
      "rootDir": "..",
      "ignore": ["node_modules", ".git", "firebase-debug.log", "firebase-debug.*.log", "functions"]
    }
  ],
  "emulators": {
    "apphosting": {
      "port": 5005,
      "rootDirectory": "..",
      "startCommand": "npm run start"
    },
    "ui": {
      "enabled": true
    }
  }
}

The apphosting block shows that the root directory of the Angular code is the parent folder and ignores a list of folders and files during upload.

The emulators block enables app hosting, the Angular application runs at port 5005 and the URL is http://localhost:5005.

The following is a simple apphosting.yaml:

runConfig:
  minInstances: 0
  maxInstances: 2

The YAML file limits the active instances to between 0 and 2, preventing unexpected cloud costs from infinite scaling.

Next, create a new firebase/scripts folder to store NodeJS scripts to facilitate Firebase integration with Angular.

mkdir -p firebase/scripts

3.2 Fetch Default Firebase Remote Config with Firebase CLI

Rather than downloading the default Firebase Remote Config JSON file from the Firebase Console manually, I instructed the Antigravity CLI and Gemini to download the Firebase Remote Configuration values, transforms the response to a JSON key-value pairs, and writes the file to ../public/remote-config-defaults.json. Then, the Angular application can access the JSON file in code during development and in the production build.

const { execSync } = require('child_process');
const fs = require('fs');
const path = require('path');

const firebaseDir = path.resolve(__dirname, '..');

const output = execSync('npx firebase remoteconfig:get --json --project default', {
  encoding: 'utf-8',
  cwd: firebaseDir,
});
const config = JSON.parse(output);
const parameters = config?.result?.parameters;

const defaults = {};
if (parameters) {
  for (const [key, paramObj] of Object.entries(parameters)) {
    if (paramObj.defaultValue && paramObj.defaultValue.value !== undefined) {
      defaults[key] = paramObj.defaultValue.value;
    }
  }
}

const outputPath = path.join(firebaseDir, '..', 'public', 'remote-config-defaults.json');
fs.writeFileSync(outputPath, `${JSON.stringify(defaults, null, 2)}\n`, 'utf-8');
console.log(`Successfully wrote ${outputPath}`);

Add a script in package.json to execute the NodeJS script.

"scripts": {
    "config:fetch": "node firebase/scripts/get-firebase-remote-config.js"
}

The output looks like the following:

{
  "geminiModelName": "gemini-3.5-flash",
  "vertexAILocation": "global",
  "thinkingLevel": "LOW"
}

The complete code can be found in this source file.

3.3 Generate Firebase App Object for App Initialization

The Angular application requires initializing a Firebase App and App Check during bootstrap before making any request to Firebase AI Logic. A Node.js script generates the Firebase App configuration object, reCAPTCHA Enterprise Key, and App Check Debug Token from .env and writes them to public/firebase.config.json. I gitignored the file because both the Recaptcha Enterprise Key and App check debug token are highly sensitive, and must not be revealed.

Copy the .env.example to .env and provide the valid information.

FIREBASE_API_KEY="<Firebase API Key>"
FIREBASE_AUTH_DOMAIN="<Firebase Auth Domain>"
FIREBASE_PROJECT_ID="<Firebase Project ID>"
FIREBASE_STORAGE_BUCKET="<Firebase Storage Bucket>"
FIREBASE_MESSAGING_SENDER_ID="<Firebase Messaging Sender ID>"
FIREBASE_APP_ID="<Firebase App ID>"
FIREBASE_RECAPTCHA_ENTERPRISE_KEY="<Recaptcha Enterprise Key>"
FIREBASE_APPCHECK_DEBUG_TOKEN="<App Check debug token>"

const fs = require('fs');
const path = require('path');

const envPath = path.resolve(__dirname, '../.env');
process.loadEnvFile(envPath);

const app = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID,
};

// Check if recaptcha enterprise key is missing
if (!process.env.FIREBASE_RECAPTCHA_ENTERPRISE_KEY) {
  console.warn('Warning: Recaptcha Enterprise key is missing');
}

const config = {
  app,
  recaptchaEnterpriseKey: process.env.FIREBASE_RECAPTCHA_ENTERPRISE_KEY,
  appCheckDebugToken: process.env.FIREBASE_APPCHECK_DEBUG_TOKEN || '',
};

const outputPath = path.resolve(__dirname, '../../public/firebase.config.json');
fs.writeFileSync(outputPath, JSON.stringify(config, null, 2), 'utf-8');
console.log(`Successfully generated ${outputPath} from .env`);

Add a script in package.json to execute the NodeJS script.

"scripts": {
  "config:generate": "node firebase/scripts/generate-firebase-config.js"
}

The JSON object is shown as follows:

{
  "app": {
    "apiKey": "firebase api key",
    "authDomain": "auth domain",
    "projectId": "project key",
    "storageBucket": "storage bucket",
    "messagingSenderId": "message sender id",
    "appId": "app id"
  },
  "recaptchaEnterpriseKey": "<Recaptcha key>",
  "appCheckDebugToken": "<app check debug key>"
}

The complete code can be found in this source file.

3.4 App Hosting

App Hosting is configured in the Firebase Console.

Select your web project
Click App Hosting from the left-side menu
Link your GitHub repository and select your region (e.g., asia-east1).
Click Settings
Click the Domain item to examine the GitHub account, repository, and live branch to roll out.
Click the Environment item to enter the environment variables. These environment variables are the same ones from .env.
Click the Rollouts item to keep the default settings.
Click the Automatic base image updates item and choose the latest Node.js runtime, which is Node 24.

4. Architecture

The Angular application initializes a Firebase App and constructs HybridParams with a cloud-based Gemini model, on-device parameters, in-cloud parameters, a system prompt, and safety settings. Then, the user uploads an image and a user prompt to prompt the model to perform image analysis to generate a response.

The Firebase AI Logic Hybrid and On-device Web SDK determines whether the browser supports Gemini Nano to handle the image-to-text task. If Gemini Nano is capable, then it is used to analyze the image to generate tags, alternative texts, and recommendations. Otherwise, the request is sent to Cloud and processed by the Gemini 3.5 Flash model.

Next, we are ready to integrate Firebase with Angular by initializing the Firebase app, fetching Remote Config, and enabling security via App Check.

5. Initialize a Firebase App in Angular

Angular initializes the Firebase App during bootstrap. We declare a few injection tokens to inject the navigator, window, and Firebase AI instance. Then, we define Angular services that encapsulate the Firebase SDK to initialize a Firebase app, fetch and activate Firebase Remote Config values, and protect AI resources from abuse via App Check.

5.1. Injection Tokens

import { isPlatformBrowser } from '@angular/common';
import { inject, InjectionToken, PLATFORM_ID } from '@angular/core';
import { AI } from 'firebase/ai';

export const FIREBASE_AI = new InjectionToken<AI>('FirebaseAI');

export const WINDOW = new InjectionToken<Window | null>('WINDOW', {
  providedIn: 'root',
  factory: () => {
    const platformId = inject(PLATFORM_ID);
    return isPlatformBrowser(platformId) ? window : null;
  },
});

export const NAVIGATOR = new InjectionToken<Navigator | null>('NAVIGATOR', {
  providedIn: 'root',
  factory: () => {
    const win = inject(WINDOW);
    return win ? win.navigator : null;
  },
});

When the platform is a browser, the factory functions return the Window and Navigator objects, respectively.

5.2. Provide Firebase AI Model

import { FIREBASE_AI } from '@/features/ai/constants/ai.const';
import { ConfigService } from '@/features/ai/services/config.service';
import { EnvironmentProviders, inject, makeEnvironmentProviders } from '@angular/core';
import { getAI, VertexAIBackend } from 'firebase/ai';
import { getValue } from 'firebase/remote-config';

export function provideFirebaseAI(): EnvironmentProviders {
  return makeEnvironmentProviders([
    {
      provide: FIREBASE_AI,
      useFactory: () => {
        const configService = inject(ConfigService);
        const location = getValue(configService.RemoteConfig, 'vertexAILocation').asString() || 'global';
        return getAI(configService.firebaseApp, {
          backend: new VertexAIBackend(location),
        });
      },
    },
  ]);
}

The provideFirebaseAI provider uses the FIREBASE_AI injection token to construct a Firebase AI having Vertex AI as its backend. Vertex AI is utilized in this architecture because its endpoints are directly accessible in regions like Hong Kong, whereas the standard Gemini API requires a VPN.

5.3. Config Service

The core method of ConfigService is initialize(), which initializes the Firebase app, configures an instance of App Check, and fetches and activates the Firebase Remote Config values.

import { inject, InjectionToken, isDevMode } from '@angular/core';
import { WINDOW, NAVIGATOR } from '@/core/constants/navigator.const';

export const LOCAL_DOMAINS = new InjectionToken<string[]>('LOCAL_DOMAINS', {
  providedIn: 'root',
  factory: () => ['localhost', '127.0.0.1', '::1', '[::1]'],
});

export function injectIsLocalhost(): () => boolean {
  const win = inject(WINDOW);
  const localDomains = inject(LOCAL_DOMAINS);

  return () => !!win && localDomains.includes(win.location.hostname);
}

export function configureAppCheckDebugToken(configToken?: string, isLocalhost?: boolean): void {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  (globalThis as any).FIREBASE_APPCHECK_DEBUG_TOKEN = configToken || isDevMode() || !!isLocalhost;
}

injectIsLocalhost creates and returns a higher-order function that determines whether the application is running on localhost.

export function injectOnlineStatus(): () => boolean {
  const navigator = inject(NAVIGATOR);
  return () => navigator?.onLine ?? true;
}

On the other hand, injectOnlineStatus returns a higher-order function that determines whether the application is running online or offline.

import firebaseConfig from '@/public/firebase.config.json';
import remoteConfigDefaults from '@/public/remote-config-defaults.json';
import { isDevMode, Service } from '@angular/core';
import { FirebaseApp, FirebaseOptions, initializeApp } from 'firebase/app';
import { AppCheck, initializeAppCheck, ReCaptchaEnterpriseProvider } from 'firebase/app-check';
import { fetchAndActivate, getRemoteConfig, RemoteConfig } from 'firebase/remote-config';

@Service()
export class ConfigService {
  #app: FirebaseApp | undefined = undefined;
  #remoteConfig: RemoteConfig | undefined = undefined;
  #isOnline = injectOnlineStatus();
  #isLocalhost = injectIsLocalhost();

  protected initializeAppCheckInstance(app: FirebaseApp, key: string): AppCheck {
    return initializeAppCheck(app, {
      provider: new ReCaptchaEnterpriseProvider(key),
      isTokenAutoRefreshEnabled: true,
    });
  }

  protected setupRemoteConfig(app: FirebaseApp): RemoteConfig {
    const rc = getRemoteConfig(app);
    rc.defaultConfig = remoteConfigDefaults;
    rc.settings.minimumFetchIntervalMillis = isDevMode() ? 0 : 3600000;
    return rc;
  }

  async initialize(): Promise<void> {
    this.#app = this.initializeApp(firebaseConfig.app);

    const isOnline = this.#isOnline();
    const isLocalhost = this.#isLocalhost();

    if (isOnline && firebaseConfig.recaptchaEnterpriseKey) {
      configureAppCheckDebugToken(firebaseConfig.appCheckDebugToken, isLocalhost);
      this.initializeAppCheckInstance(this.#app, firebaseConfig.recaptchaEnterpriseKey);
    }

    this.#remoteConfig = this.setupRemoteConfig(this.#app);

    if (isOnline) {
      await this.fetchAndActivate(this.#remoteConfig);
    }
  }
}

After Firebase app initialization, the online status and the Enterprise reCAPTCHA key are examined. When both conditions are met, an instance of Firebase App Check is initialized. Finally, the Remote Config is fetched and activated to overwrite the default values.

Tips:
Angular 22 Architecture Best Practice:
The Angular team now recommends the @Service() decorator over @Injectable({ providedIn: 'root' }) for global singletons because it is cleaner, contains less boilerplate, and is built specifically to pair with modern inject() functional dependency injection.
Note: @Injectable() is still fully supported and necessary if you require constructor-based dependency injection or scoped providers (such as component-level scoping).

5.4. Bootstrap the application

import { provideFirebaseAI } from '@/features/ai/providers/ai.provider';
import { ConfigService } from '@/features/ai/services/config.service';
import { ApplicationConfig, inject } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    ... other providers ... 
    provideAppInitializer(() => inject(ConfigService).initialize()),
    provideFirebaseAI(),
  ],
};

Include provideFirebaseAI and provideAppInitializer in the providers array of appConfig.

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';

bootstrapApplication(App, appConfig).catch((err) => console.error(err));

Calling bootstrapApplication ensures that the Firebase AI model, Firebase app, App Check, and Firebase Remote Config values are initialized properly during startup.

Once the Firebase integration is complete, we shift the focus to Angular AI services and JSON response streaming in the Angular component.

6. Image Analysis Service in Angular

6.1. AI Service with JSON Response Streaming

The Hybrid Image Analysis application prompts the Gemini Nano or Gemini 3.5 Flash model to return a structured output, which is a JSON object. Therefore, the application streams the JSON response and uses the jsonrepair library to repair the incomplete JSON object into a valid, partial JSON object.

import { EnhancedGenerateContentResponse } from 'firebase/ai';

export interface PartialResponse<T> {
  partialData: Partial<T>;
  response?: EnhancedGenerateContentResponse;
}

import { inject, Service } from '@angular/core';
import { GenerativeModel, SchemaRequest, TypedSchema } from 'firebase/ai';
import { jsonrepair } from 'jsonrepair';
import { GenerateContentParams, PartialResponse } from '../types/ai.types';
import { AiModelCacheService } from './ai-model-cache.service';

@Service()
export class AiService {
  #cacheService = inject(AiModelCacheService);

  private getCachedModel({ schema, systemInstruction }: GenerateContentParams) {
    const model = this.#cacheService.getOrCreateModel({
      schema,
      systemInstruction,
    });

    return model;
  }

  private parseStreamJSONResponse<T>(text: string, schema?: TypedSchema | SchemaRequest) {
    if (schema) {
      try {
        return JSON.parse(text) as Partial<T>;
      } catch {
        return JSON.parse(jsonrepair(text)) as Partial<T>;
      }
    }

    return { alternativeTexts: [text] } as unknown as Partial<T>;
  }

  private async downloadDeviceModel(model: GenerativeModel) {
    if (model) {
      await model.initializeDeviceModel((val) => console.log(`Download progress: ${Math.round(val * 10000) / 100}%`));
    }
  }

  private constructRequest(params: GenerateContentParams) {
    return typeof params.contents === 'string' || Array.isArray(params.contents) ? params.contents : [params.contents];
  }

  async *generateContentStream<T>(params: GenerateContentParams): AsyncGenerator<PartialResponse<T>> {
    const model = this.getCachedModel(params);
    const request = this.constructRequest(params);

    await this.downloadDeviceModel(model);

    const result = await model.generateContentStream(request);
    let accumulatedText = '';

    for await (const chunk of result.stream) {
      accumulatedText = accumulatedText + chunk.text();
      const parsed = this.parseStreamJSONResponse<T>(accumulatedText, params.schema);
      yield {
        partialData: parsed,
      };
    }

    const finalResponse = await result.response;
    const finalParsed = this.parseStreamJSONResponse<T>(finalResponse.text(), params.schema);
    yield {
      partialData: finalParsed,
      response: finalResponse,
    };
  }
}

The downloadDeviceModel helper method downloads the Gemini Nano model to the Chrome browser. When users request the image analysis task, it runs on-device instead of on a cloud server. Sensitive user data does not leave the local computer, and Cloud AI usage costs remain at zero.

The generateContentStream generator yields partial JSON objects and the final response.

6.2. Image Analysis Service, Prompts and Structured Output

The ImageAnalysisService delegates the image analysis task to AiService to obtain the generated tags, alternative texts, and recommendations.

export async function fileToGenerativePart(file: File | Blob, mimeType?: string): Promise<Part> {
  const resolvedMimeType = mimeType || file.type;
  if (!resolvedMimeType) {
    throw new Error('MIME type must be specified or present on the File/Blob.');
  }

  const dataUrl = await readFileAsDataURL(file);
  const base64Data = dataUrl.split(',')[1];

  return {
    inlineData: {
      data: base64Data,
      mimeType: resolvedMimeType,
    },
  };
}

The fileToGenerativePart utility function reads the uploaded image and converts it into inline base64 data. The function returns the data and MIME type required by the Gemini model.

export const SYSTEM_INSTRUCTION = `You are an expert image analyst, accessibility specialist, and professional photo editor.

Your behavior rules:
1. Always output strictly in raw JSON matching the provided schema, with no markdown formatting or conversational text.
2. For descriptions, prioritize screen-reader accessibility guidelines.
3. For tags, always provide an objective visual reason and platform-specific variants.`;

export const IMAGE_ANALYSIS_USER_PROMPT =
  'Analyze the attached image and generate the alternative descriptions, tags, and styling suggestions according to your defined system instructions and the response schema.';

SYSTEM_INSTRUCTION is the system prompt and IMAGE_ANALYSIS_USER_PROMPT is the user prompt.

The system prompt defines the AI's persona as an expert photo editor, while the user prompt describes the input image and specifies what structured data is expected in return.

import { Schema } from 'firebase/ai';
import { AltTextsSchema } from './alt-texts.schema';
import { RecommendationsSchema } from './recommendation.schema';
import { TagsSchema } from './tag.schema';

export const ImageAnalysisSchema = Schema.object({
  properties: {
    alternativeTexts: AltTextsSchema,
    tags: TagsSchema,
    recommendations: RecommendationsSchema,
  }
});

ImageAnalysisSchema was the structured output of the user prompt that consisted of alternative texts, tags, and recommendations.

import { fileToGenerativePart } from '@/core/utils/base64.util';
import { AiService } from '@/features/ai/services/ai.service';
import { ImageAnalysisSchema } from '@/features/image-analysis/schemas/image-analysis.schema';
import {
  ImageAnalysisResponse,
  StreamingAnalysisWithMetadata,
} from '@/features/image-analysis/types/image-analysis-metadata.type';
import { inject, Service } from '@angular/core';
import { IMAGE_ANALYSIS_USER_PROMPT, SYSTEM_INSTRUCTION } from '../prompts/image-analysis.prompt';

@Service()
export class ImageAnalysisService {
  #aiService = inject(AiService);

  async *analyzeImageStream(file: File | Blob, customPrompt?: string): AsyncGenerator<StreamingAnalysisWithMetadata> {
    const imagePart = await fileToGenerativePart(file);
    const userPrompt = customPrompt ? customPrompt : IMAGE_ANALYSIS_USER_PROMPT;

    const generator = await this.#aiService.generateContentStream<ImageAnalysisResponse>({
      systemInstruction: SYSTEM_INSTRUCTION,
      contents: [userPrompt, imagePart],
      schema: ImageAnalysisSchema,
    });

    for await (const update of generator) {
      const partialData = update.partialData;
      const analysis = {
        alternativeTexts: partialData?.alternativeTexts,
        tags: partialData?.tags,
        recommendations: partialData?.recommendations,
      };

      yield {
        analysis,
      };
    }
  }
}

The analyzeImageStream is a generator that returns the output of the image analysis.

7. Image Analysis User Interface in Angular

The ImageAnalysis component features an image uploader to select an image for analysis. When the button is clicked, it invokes triggerAnalysis to stream the image analysis response and sets the value of the analysisData signal.

import { ImageAnalysisService } from '@/features/image-analysis/services/image-analysis';
import { StreamingAnalysisWithMetadata } from '@/features/image-analysis/types/image-analysis-metadata.type';
import { ImageUploader } from '@/shared/ui/image-uploader/image-uploader';
import { Component, computed, inject, signal } from '@angular/core';
import { ImageAnalysisPanel } from './image-analysis-panel/image-analysis-panel';
import { TagList } from './tag-list/tag-list';
import { ImageTag } from './tag-list/types/image-tag.type';

@Component({
  selector: 'app-image-analysis',
  imports: [ImageUploader, TagList, ImageAnalysisPanel],
  templateUrl: './image-analysis.html',
  styleUrl: './image-analysis.css',
})
export default class ImageAnalysis {
  imageAnalysisService = inject(ImageAnalysisService);

  // Local reactive states
  imageUrl = signal<string | null>(null);
  selectedFile = signal<File | null>(null);
  analysisData = signal<StreamingAnalysisWithMetadata | null>(null);

  tags = computed<ImageTag[]>(() => {
    const data = this.analysisData();
    if (!data) {
      return [];
    }
    return (data.analysis.tags || []).map((t) => {
      return {
        label: t.name,
        tooltip: t.sentence,
      };
    });
  });

  onFileSelected(file: File) {
    this.selectedFile.set(file);
    this.analysisData.set(null);
    this.errorMessage.set('');
  }

  async triggerAnalysis() {
    const file = this.selectedFile();
    if (!file) {
      return;
    }

    const stream = this.imageAnalysisService.analyzeImageStream(file);
    for await (const update of stream) {
      this.analysisData.set(update);
    }
  }

  onImageRemoved() {
    this.selectedFile.set(null);
    this.analysisData.set(null);
    this.errorMessage.set('');
  }
}

When analysisData is updated, the HTML template of the component displays the latest values.

<div class="workspace-container">
  <app-image-uploader
    [(imageUrl)]="imageUrl"
    (fileSelected)="onFileSelected($event)"
    (imageRemoved)="onImageRemoved()"
  ></app-image-uploader>

  @if (imageUrl() && !isLoading()) {
    <div class="action-container">
      <button (click)="triggerAnalysis()" class="primary-action-btn">
        <span class="material-symbols-outlined">psychology</span>
        Analyze Image ({{ seconds() }}s)
      </button>
    </div>
  }

  @if (tags().length > 0) {
    <!-- Semantic Tag Cloud -->
    <div class="tag-cloud-section animate-fade-in">
      <h4 class="section-subtitle">Detected Classifications</h4>
      <app-tag-list [tags]="tags()"></app-tag-list>
    </div>

    @if (analysisData()) {
      <!-- Advanced Analysis Results Panel -->
      <app-image-analysis-panel
        class="animate-fade-in block"
        [data]="analysisData()"
        [imageUrl]="imageUrl()"
        [source]="source()"
      ></app-image-analysis-panel>
    }
  }
</div>

The template passed the inputs to app-tag-list and app-image-analysis-panel components.

<div class="tag-list-wrapper">
  <div class="tag-list-grid">
    @for (tag of tags(); track tag.label) {
      <app-badge [label]="tag.label" [tooltip]="tag.tooltip" />
    }
  </div>
</div>

The above is the HTML template of the tag list component. This component renders a list of tags. When a tag is hovered, a tooltip shows to explain why it is chosen.

@if (data(); as analysis) {
  @let innerAnalysis = analysis.analysis;
  @let alternativeTexts = innerAnalysis?.alternativeTexts;
  @let recommendations = innerAnalysis?.recommendations;

  <div class="analysis-panel-container">
    <app-tab-group>
      <app-tab id="thought" label="Thought Summary">
        <app-thought-summary
          [alternativeTexts]="alternativeTexts"
        />
      </app-tab>

      <app-tab id="detailed" label="Recommendations">
        <app-image-recommendation [recommendations]="recommendations" />
      </app-tab>
    </app-tab-group>
  </div>
}

The app-image-analysis-panel renders alternative texts and recommendations in separate tabs for users to view.

8. Conclusion

This concludes the journey of building a Hybrid Image Analysis Application using Angular, Firebase AI Logic Hybrid and On-device Web SDK, and Gemini models.

Engineers can build AI applications that run locally and use the Gemini Nano model in the Chrome browser. When the network is unstable, the application also works offline because AI processing never leaves the local machine for the cloud infrastructure.

Resources

Build Firebase AI Logic Application with Antigravity CLI and Stitch MCP Server [GDE]

Connie Leung — Wed, 15 Jul 2026 06:50:10 +0000

Build Firebase AI Logic with Antigravity CLI

Note: Google Cloud credits are provided for this project.

In this blog post, I demonstrate how to use the Antigravity CLI (an agentic AI assistant integrating directly with development workflows via skills and servers) to build an image analysis demo using Angular, the Firebase Hybrid & On-device Inference Web SDK, and Gemini models. Users upload an image and use a Gemini model to analyze it to generate a few alternative texts, tags, recommendations, and CSS tips to enhance the image quality.

When the demo is running in Chrome 148+, the Hybrid & On-device SDK leverages the Prompt API of the on-device Gemini Nano model to perform the image-to-text tasks, and the token usage is 0. When other browsers, such as Safari or Firefox, execute the same tasks, the SDK falls back to Cloud AI (Gemini 3.5 Flash model), which consumes tokens.

Next, I describe how to install the skills in my Angular project and register the Angular and Stitch MCP servers in the Antigravity CLI to develop the infrastructure, services, and UI design of my demo.

1. Workflow

This is my entire workflow from implementing features, generating UI screens, and mapping the screens to Angular components.

2. Skills

I installed the grill-with-docs, angular, and firebase skills in my project for the following reasons:

grill-with-docs: Conduct a rigid Q&A session to generate a specification for a feature, refactor, or critical fix. AI is responsible for performing thorough analysis, and putting in more efforts to generate code to achieve the task.
domain-modeling: The skill is referenced in the SKILL.md of the grill-with-docs skill, so a copy of it is required.
code-review: Spawn two sub-agents to review changes to detect code smells and verify that the changes align with the specification.
angular: Provide the best practices of modern Angular architecture, such as using signals and signal forms.
firebase: Provide the skills for Firebase AI Logic, Firebase Remote, etc.

3. Wire the Stitch MCP Server with the Antigravity CLI

Stitch is a Google design-to-code tool that lets developers and designers generate interactive screens using natural language prompts.

Hong Kong users need to enable a VPN to access Stitch with AI due to geofencing. Then, I can visit https://stitch.withgoogle.com/ to create a Stitch project and generate new screens in it using natural language.

On the other hand, there is no geofencing restriction on the Antigravity CLI, so I can register the Stitch MCP server to its global MCP configuration file.

This is how I made the CLI talk to the Stitch MCP server after trial and error:

Navigate to https://github.com/davideast/stitch-mcp and read the Quick Start to initialize the MCP server.
Visit https://stitch.withgoogle.com/settings, scroll to API Key and create a new key. Copy the key because we need it in the mcp configuration file.

Open ~/.gemini/config/mcp_config.json to register the Stitch MCP server globally. Replace <Stitch API Key> with your actual API key.

"mcpServers": {
   "stitch": {
        "command": "npx",
        "args": ["-y", "@_davideast/stitch-mcp@latest", "proxy"],
        "env": {
            "STITCH_API_KEY": "<Stitch API Key>",
            "STITCH_USE_SYSTEM_GCLOUD": "1",
            "GOOGLE_CLOUD_PROJECT": "<google cloud project id>",
            "CI": "1",
            "DOTENV_CONFIG_QUIET": "true"
        }
   }
}

Quit the Antigravity CLI and launch again to verify the integration is established correctly.
In the terminal, ask a question such as "List all my Stitch Projects", and wait for the response. If the CLI returns a correct response, then it can communicate with the Stitch MCP server.

The CLI is equipped with the skills and the MCP server. Next, I can use the CLI and the Gemini model to implement features and generate Angular components.

4. Wire the Angular MCP Server

Similarly, I also registered the Angular MCP server to find Angular best practices and search documentation.

"mcpServers": {
  "angular-cli": {
       "command": "npx",
       "args": ["-y", "@angular/cli", "mcp"]
    }
}

The server exposes the following tools to ease Angular development:

ai_tutor: Asks the Angular AI tutor for help with code generation or questions.
get_best_practices: Retrieves recommended guidelines and architectural practices for Angular.
search_documentation: Searches the official Angular documentation.
list_projects: Lists the projects defined in your Angular workspace configuration (angular.json).
onpush_zoneless_migration : Helps migrate parts of your application to OnPush change detection and zoneless mode.
run_target : Runs any configured architect target (e.g., build, test, lint) using the Angular CLI.
devserver.start, devserver.stop , and devserver.wait_for_build : Manage and interact with the local Angular development server.

Now, the CLI is equipped with the agent skills and MCP servers to coordinate the development of the new features in the Angular application.

5. Implement features with skills and MCP servers

After implementing a few features in my Firebase AI Logic application, I developed two workflows and chose either one depending on whether I wanted to develop muscle memory.

Workflow 1: Use /grill-with-docs to generate an Architecture Decision Record (ADR), and save it to a path for human review and documentation. Then, use /goal to ask the coding assistant to implement the ADR, and accept the changes.

For example, I type this prompt to ask the coding assistant to implement an ADR and include relevant skills.

Prompt: "/goal implement <ADR file name>, use Angular skill and Angular MCP server to adopt modern Angular architecture in the code"

Workflow 2: Use /grill-with-docs to generate an ADR, and save it to a path for human review and documentation. I implement the ADR to build up muscle memory, and commit the changes to a git branch. Next, use /code-review to fetch a commit or all changes of a Git branch, and request the coding assistant to spawn two sub-agents to review changes. The first sub-agent detects code smells, and the second sub-agent validates the changes against the ADR to find scope creep, missing, or incorrect details.

For example, I type this prompt to ask the coding assistant to fetch a Git branch, and validate against an ADR.

Prompt: "/code-review fetch all the commits of <Git branch>, and validate the changes against <ADR filename>."

The sub-agents run and print out a report with violations. I fix the violations, rebase the branch, and repeat the workflow until the report shows 0 violations. Finally, I merge the feature branch to main, push the main branch to the remote repository to deploy to Firebase App Hosting.

After implementing the features, I have the enums, types, interfaces, utilities, and services. In the next section, I use the Stitch MCP server to generate UI screens and map them to Angular components.

6. Generate UI Screens with Stitch

This web demo allows users to upload an image and prompt a Gemini model to analyze it to generate tags, alternative text, CSS filters, and image crops.

Note: Enable VPN to access the Stitch site

I use natural language to prompt Stitch to generate two pages for my web application. The web application has a landing page and an image analysis page.

First, I created a new Stitch project to host the UI screens.

Then, I wrote prompts to generate both the home page and the image analysis page

After clicking the Analysis Image button, the page displays the tab group with some tabs.

Next, I need to use the Antigravity CLI to communicate with the Stitch MCP server to generate the Design.md files.

Prompt: "Use the Stitch MCP server to retrieve a Stitch UI Screen from my Stitch Project. Analyze its visual layout, extract the design tokens (colors, typography, and spacing), and generate a DESIGN.md file in the project folder path."

For example, I saved the DESIGN.md of the home screen to the root directory and the DESIGN.md of the image analysis page in the image-analysis folder.

After reviewing the DESIGN.md and ensuring everything looks good, I use /goal again to map the DESIGN.md to the Angular components. In the prompt, I try to provide as much context as possible, so that the coding assistant does not generate all the CSS styles, HTML template, and logic in a single component.

Prompt: "/goal You are an expert Angular developer. Your goal is to implement the UI layout defined in DESIGN.md into production-ready Angular components. Fully read DESIGN.md first to extract all design tokens, spacing guidelines, colors, and layout instructions, and apply them using the following rules: Insert the context and rules...."

7. Live Site Testing

The use case is to upload an image, perform image analysis, and display the token consumption of the analysis.

On Chrome 148+,

Step 1: Upload an image
Step 2: Click the button to generate tags and alternative texts
Step 3: Click the Token usage tab to observe how tokens are spent to achieve the tasks.

On Firefox, repeat the same procedure

Step 1: Upload an image
Step 2: Click the button to generate tags and alternative texts
Step 3: Click the Token usage tab to observe how tokens are spent to achieve the tasks.

8. Conclusion

This concludes the journey of using the Antigravity CLI, agent skills, and Stitch MCP server to build an image analysis application.

When the demo is run in Chrome 148+, the Gemini Nano model is used, and the token usage of the cloud AI is 0. When the demo is run on other browsers, the Gemini 3.5 Flash model is used to generate the response, and tokens are consumed in the cloud.

Please examine the Firebase AI Hybrid & On-Device Web SDK, and leverage the on-device model to perform simple AI tasks to reduce costs.

Resources

Build Firebase AI Logic Application with Antigravity CLI

Connie Leung — Fri, 10 Jul 2026 15:45:18 +0000

Note: Google Cloud credits are provided for this project.

1. Workflow

This is my entire workflow from implementing features, generating UI screens, and mapping the screens to Angular components.

2. Skills

I installed the grill-with-docs, angular, and firebase skills in my project for the following reasons:

grill-with-docs: Conduct a rigid Q&A session to generate a specification for a feature, refactor, or critical fix. AI is responsible for performing thorough analysis, and putting in more efforts to generate code to achieve the task.
domain-modeling: The skill is referenced in the SKILL.md of the grill-with-docs skill, so a copy of it is required.
code-review: Spawn two sub-agents to review changes to detect code smells and verify that the changes align with the specification.
angular: Provide the best practices of modern Angular architecture, such as using signals and signal forms.
firebase: Provide the skills for Firebase AI Logic, Firebase Remote, etc.

3. Wire the Stitch MCP Server with the Antigravity CLI

Stitch is a Google design-to-code tool that lets developers and designers generate interactive screens using natural language prompts.

On the other hand, there is no geofencing restriction on the Antigravity CLI, so I can register the Stitch MCP server to its global MCP configuration file.

This is how I made the CLI talk to the Stitch MCP server after trial and error:

Navigate to https://github.com/davideast/stitch-mcp and read the Quick Start to initialize the MCP server.
Visit https://stitch.withgoogle.com/settings, scroll to API Key and create a new key. Copy the key because we need it in the mcp configuration file.

Open ~/.gemini/config/mcp_config.json to register the Stitch MCP server globally. Replace <Stitch API Key> with your actual API key.

"mcpServers": {
   "stitch": {
        "command": "npx",
        "args": ["-y", "@_davideast/stitch-mcp@latest", "proxy"],
        "env": {
            "STITCH_API_KEY": "<Stitch API Key>",
            "STITCH_USE_SYSTEM_GCLOUD": "1",
            "GOOGLE_CLOUD_PROJECT": "<google cloud project id>",
            "CI": "1",
            "DOTENV_CONFIG_QUIET": "true"
        }
   }
}

Quit the Antigravity CLI and launch again to verify the integration is established correctly.
In the terminal, ask a question such as "List all my Stitch Projects", and wait for the response. If the CLI returns a correct response, then it can communicate with the Stitch MCP server.

The CLI is equipped with the skills and the MCP server. Next, I can use the CLI and the Gemini model to implement features and generate Angular components.

4. Wire the Angular MCP Server

Similarly, I also registered the Angular MCP server to find Angular best practices and search documentation.

"mcpServers": {
  "angular-cli": {
       "command": "npx",
       "args": ["-y", "@angular/cli", "mcp"]
    }
}

The server exposes the following tools to ease Angular development:

ai_tutor: Asks the Angular AI tutor for help with code generation or questions.
get_best_practices: Retrieves recommended guidelines and architectural practices for Angular.
search_documentation: Searches the official Angular documentation.
list_projects: Lists the projects defined in your Angular workspace configuration (angular.json).
onpush_zoneless_migration : Helps migrate parts of your application to OnPush change detection and zoneless mode.
run_target : Runs any configured architect target (e.g., build, test, lint) using the Angular CLI.
devserver.start, devserver.stop , and devserver.wait_for_build : Manage and interact with the local Angular development server.

Now, the CLI is equipped with the agent skills and MCP servers to coordinate the development of the new features in the Angular application.

5. Implement features with skills and MCP servers

After implementing a few features in my Firebase AI Logic application, I developed two workflows and chose either one depending on whether I wanted to develop muscle memory.

For example, I type this prompt to ask the coding assistant to implement an ADR and include relevant skills.

Prompt: "/goal implement <ADR file name>, use Angular skill and Angular MCP server to adopt modern Angular architecture in the code"

For example, I type this prompt to ask the coding assistant to fetch a Git branch, and validate against an ADR.

Prompt: "/code-review fetch all the commits of <Git branch>, and validate the changes against <ADR filename>."

6. Generate UI Screens with Stitch

This web demo allows users to upload an image and prompt a Gemini model to analyze it to generate tags, alternative text, CSS filters, and image crops.

Note: Enable VPN to access the Stitch site

I use natural language to prompt Stitch to generate two pages for my web application. The web application has a landing page and an image analysis page.

First, I created a new Stitch project to host the UI screens.

Then, I wrote prompts to generate both the home page and the image analysis page

After clicking the Analysis Image button, the page displays the tab group with some tabs.

Next, I need to use the Antigravity CLI to communicate with the Stitch MCP server to generate the Design.md files.

For example, I saved the DESIGN.md of the home screen to the root directory and the DESIGN.md of the image analysis page in the image-analysis folder.

7. Live Site Testing

The use case is to upload an image, perform image analysis, and display the token consumption of the analysis.

On Chrome 148+,

Step 1: Upload an image
Step 2: Click the button to generate tags and alternative texts
Step 3: Click the Token usage tab to observe how tokens are spent to achieve the tasks.

On Firefox, repeat the same procedure

Step 1: Upload an image
Step 2: Click the button to generate tags and alternative texts
Step 3: Click the Token usage tab to observe how tokens are spent to achieve the tasks.

8. Conclusion

This concludes the journey of using the Antigravity CLI, agent skills, and Stitch MCP server to build an image analysis application.

Please examine the Firebase AI Hybrid & On-Device Web SDK, and leverage the on-device model to perform simple AI tasks to reduce costs.

Resources

How to Securely Manage AI Prompts in Angular with Firebase [GDE]

Connie Leung — Mon, 15 Jun 2026 18:31:32 +0000

Migrate to Firebase Server Prompt Template in Angular using Dependency Injection

Firebase released Server Prompt Templates to host prompt templates in its infrastructure. The template follows the DotPrompt format and syntax, so the content can have one or more of the following:

Model name
Model configuration
Input validation and schema
Output schema
Tool user
System instruction
User prompt

Moreover, the team offers the TemplateGenerativeModel class, which allows engineers to call either the generateContent or generateContentStream method with a template ID and optional template variables to generate responses. This simplifies the process of constructing text and inline data parts programmatically, passing the parts array and the generation configuration to GenerativeModel to obtain the same results.

Server Prompt Templates resolve several key enterprise AI pain points.

Pain Point	Description
Better Security	The prompt text is stored in the server side, so it cannot be exposed in the network call. Users cannot open the Network tab of the Chrome browser and inspect the prompt text in the payload.
Better Guardrail	Prompt texts are not revealed, so malicious users cannot modify the prompt easily to trigger prompt injection and other attacks to Gemini models
No Prompt Drift	Engineer A edits a prompt locally, forgets to commit, and deploys the code changes. Engineer B uses the old prompt for development, and there are two versions scattered around. Server prompt templates ensure engineers use the same version for development. When the prompt is updated on the server, it is propagated to all instances of the client application.
Testing in Console	Engineers can verify the prompts are working in the Firebase Console before writing a line of code.
Less Deployments	When prompts are updated in the server side, client applications receive the prompt updates without redeployment.

I have listed the benefits of Firebase AI Logic Server Prompt Templates. Next, I will demonstrate how to migrate an existing prompt to use Server Prompt Templates in Angular using Dependency Injection.

Note: Currently, Firebase AI Logic Server Prompt Template is in Preview, please do not use it in production until it reaches General Availability (GA) status. However, it is an interesting technology to explore.

1. Prerequisites

Angular 19
TailwindCSS
Node 22
gemini-3.1-flash-image (also known as Nano Banana 2)
Firebase AI Logic
Firebase Cloud Functions
Firebase Remote Config
Firebase Local Emulator Suite

npm i -g firebase-tools

Install firebase-tools globally using npm.

firebase logout

firebase login

Log out of Firebase and re-login to perform proper Firebase authentication.

firebase init

Execute firebase init and follow the screens to set up Firebase Cloud Function, Firebase Local Emulator Suite and Firebase Remote Config.

If you have an existing project or multiple projects, you can specify the project ID on the command line.

firebase init --project <PROJECT_ID>

After completing the step-by-step, the Firebase tools will generate function and remote config templates, and configuration files such as .firebaserc and firebase.json.

The next section has the details of the implementation repository.

2. Source Code

The full source code for this project is available in the NG Firebase AI Nano Banana, however, the following sections describe the code changes made to migrate to Firebase Server Prompt Templates.

3. Architecture

The application matches the URL paths and routes to different components. When the URL path matches template-prompt/:featureId, the route creates GenMediaService at the route level and injects IMAGE_GENERATOR_TOKEN using the route's injection context. The token is mapped to ServerTemplateService. On the other hand, other routes use the GenMediaService in the root injector and inject a global IMAGE_GENERATOR_TOKEN that maps to FirebaseService. The implementation will be shown later in the blog.

4. Server Prompt Template Creation

You can create a server prompt template in the Firebase Console. This guide assumes an existing Firebase project named vertexai-firebase. Click "AI Logic" from the left sidebar, and click the "Prompt templates (PREVIEW)" tab.

Users can click the Create Template button to create a new prompt on the server side.

A template is configured to generate a glass bottle image from inline image data. The unique template ID is glass-bottle-souvenir-v0-0-1, and the template name is glass-bottle-souvenir.

4.1. Model Configuration

---
model: "gemini-3.1-flash-image"
config:
  candidateCount: 1
  safetySettings:
    - category: HARM_CATEGORY_HARASSMENT
      threshold: BLOCK_ONLY_HIGH
    - category: HARM_CATEGORY_HATE_SPEECH
      threshold: BLOCK_ONLY_HIGH
    - category: HARM_CATEGORY_SEXUALLY_EXPLICIT
      threshold: BLOCK_ONLY_HIGH
    - category: HARM_CATEGORY_DANGEROUS_CONTENT
      threshold: BLOCK_ONLY_HIGH
input:
  schema:
    inlineImages?(array, inline image data):
      type: object
      properties:
        mimeType: string
        data: string  # inline data must be base64-encoded
    aspectRatio?: string, the aspect ratio of the image
    resolution?: string, the resolution of the image
---

The configuration specifies the model name, model configuration, and input schema and validations.

Section	Configuration	Description
model	gemini-3.1-flash-image	The Gemini model name of Nano Banana 2.
config	candidateCount: 1	The model returns at most 1 image
safetySettings	BLOCK_ONLY_HIGH	Safety category of harassment, hate speech, sexually explicit content, and dangerous content
input	schema	Input schema and validation

This prompt expects an array of inlineImages of type object. Each inline image contains a MIME type and inline data. Moreover, the prompt accepts an optional aspect ratio and resolution.

4.2. System Instructions

The prompt parts has {{role "system"}} syntax to specify the system instructions, and {{role "user"}} to specify the user prompt.

{{role "user"}}
A 1/7 scale commercialized collectible ... with realistic lighting and shadows.
{{#if aspectRatio}}
Apply this aspect ratio to the image: {{aspectRatio}}.
{{/if}}
{{#if resolution}}
Apply this resolution to the image: {{resolution}}.
{{/if}}

{{#each inlineImages}}
  {{media type="mimeType" data="data"}}
{{/each}}

The user prompt generates a souvenir glass bottle image from the uploaded inline image.

When the aspect ratio is provided, "Apply this aspect ratio to the image: {{aspectRatio}}." is appended to the prompt.

When the resolution is provided, "Apply this resolution to the image: {{resolution}}." is appended to the prompt.

The loop iterates the inlineImages list to specify the mime type and the inline data.

4.3. Testing the Prompt in Firebase Console

// Prompt Input
{
   "inline_images": [{
    "mime_type": "image/png",
    "contents": "iVBORw0KGgoAAAANSUhEUgAAARAAAABcCAYAAACm+q2AAAXGElEQVR4Ae1dC5QcVZm..."
  }],
   "aspectRatio": "4:1",
   "resolution": "512"
}

The prompt input includes an image, aspect ratio, and resolution for testing before writing a line of code.

In the Firebase UI Console, choose the Gemini API provider from the dropdown list. The Create formatted test request button allows users to verify the request is correct before the actual execution. The Run prompt text button executes the request to generate a 512px and 4:1 image.

The test request generates a souvenir glass bottle with the expected aspect ratio.

Next, I will define two new injection tokens: the first one injects an image generator and the second one injects a TemplateGenerativeModel. I also create a new Server Prompt Template service to generate an image based on the template ID and template variables.

5. Server Prompt Template Service Implementation

5.1. Image Generator Interface

export type BaseGenerateParam = {
  aspectRatio?: string;
  resolution?: string;
  imageFiles: File[];
}

export type GenerateImageParam = BaseGenerateParam &  {
  prompt?: string;
  templateId?: string;
}

The GenerateImageParam type provides aspect ratio, resolution, uploaded images, and template ID to the Gemini model to generate an image.

export type ImageResponseWithoutId = {
  data: string;
  mimeType: string;
  inlineData: string;
}

export type ImageResponse = ImageResponseWithoutId & {
  id: number;
}

export type ImageTokenUsage = {
  image: ImageResponse,
}

The ImageTokenUsage type stores inline image data, mime type, and a dummy image ID.

import { GenerateImageParam } from '@/features/ai/types/generate-image-param.type';
import { ImageTokenUsage } from '@/features/ai/types/image-response.type';

export interface ImageGenerator {
  generateImage(param: GenerateImageParam): Promise<ImageTokenUsage | undefined>;
}

ImageGenerator interface is a contract that must implement a generateImage method to accept a GenerateImageParam parameter and output a promise of ImageTokenUsage or undefined.

5.2. Injection Token for Image Generator

import { FirebaseService } from '@/features/ai/services/firebase.service';
import { ImageGenerator } from '@/shared/ui/gen-media/interfaces/image-generator.interface';
import { InjectionToken, inject } from '@angular/core';

export const IMAGE_GENERATOR_TOKEN = new InjectionToken<ImageGenerator>('IMAGE_GENERATOR_TOKEN', {
  providedIn: 'root',
  factory: () => inject(FirebaseService)
});

The IMAGE_GENERATOR_TOKEN injection token uses the factory function to inject FirebaseService by default. It can be overridden to use the ServerTemplateService when the URL path is template-prompt/:featureId.

5.3. Injection Token for Server Template Model

import { InjectionToken } from '@angular/core';
import { AI, TemplateGenerativeModel } from 'firebase/ai';

export const SERVER_TEMPLATE_MODEL = new InjectionToken<TemplateGenerativeModel>('SERVER_TEMPLATE_MODEL');

The SERVER_TEMPLATE_MODEL injection token injects an instance of TemplateGenerativeModel

Then, the provideFirebase function is updated to instantiate a TemplateGenerativeModel and provide it.

export function provideFirebase() {
    return makeEnvironmentProviders([
        {
          provide: VERTEX_AI_BACKEND,
          useFactory: () => {
            const configService = inject(ConfigService);
            const vertexAILocation = getValue(configService.remoteConfig, 'vertexAILocation').asString();
            const ai = getAI(configService.app, {
              backend: new VertexAIBackend(vertexAILocation)
            });

            return ai;
          }
        },
        {
          provide: SERVER_TEMPLATE_MODEL,
          useFactory: () => {
            const ai = inject(VERTEX_AI_BACKEND); 
            return getTemplateGenerativeModel(ai);
          }
        }
    ]);
}

5.4. Server Prompt Template Service

export async function makeTemplateVariables({ imageFiles, aspectRatio, resolution }: GenerateImageParam) {
  const imageParts = await resolveImageParts(imageFiles);
  const inlineImages = imageParts.map(part => part.inlineData);
  return {
    inlineImages,
    aspectRatio,
    resolution
  }
}

The makeTemplateVariables function converts Files[] to an array of inline image data before returning an object of inline images, aspect ratio, and resolution.

function processImageGeneratedContent(result: GenerateContentResult): ImageTokenUsage {
  const response = result.response;
  const inlineDataParts = response.inlineDataParts();

  if (inlineDataParts?.length) {
    const images = inlineDataParts.map(({inlineData}, index) => {
      const { data, mimeType } = inlineData;
      return {
        id: index,
        mimeType,
        data,
        inlineData: `data:${mimeType};base64,${data}`
      };
    });

    if (images.length <= 0) {
      throw new Error('Error in generating the image.');
    }

    return {
      image: images[0],
    };
  }

  throw new Error('Error in generating the image.');
}

export async function getTemplateBase64Images({ model, templateId, templateVariables }: TemplateImageOptions): Promise<ImageTokenUsage> {
  const result = await model.generateContent(templateId, templateVariables);
  return processImageGeneratedContent(result);
}

The getTemplateBase64Images function uses the model to generate an image, calls processImageGeneratedContent to post-process the result, and returns the ID, MIME type, inline data, and Base64-encoded string.

import { SERVER_TEMPLATE_MODEL } from '@/features/ai/constants/firebase.constant';
import { GenerateImageParam } from '@/features/ai/types/generate-image-param.type';
import { ImageTokenUsage } from '@/features/ai/types/image-response.type';
import { getTemplateBase64Images } from '@/features/ai/utils/generate-image.util';
import { makeTemplateVariables } from '@/features/ai/utils/inline-image-data.util';
import { inject, Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ServerTemplateService  {
    private readonly serverTemplateModel = inject(SERVER_TEMPLATE_MODEL);

    async generateImage(genImageParameter: GenerateImageParam): Promise<ImageTokenUsage | undefined> {
        const { templateId } = genImageParameter;
        if (!templateId) {
          return undefined;
        }

        const templateVariables = await makeTemplateVariables(genImageParameter);
        return getTemplateBase64Images({
          model: this.serverTemplateModel,
          templateId,
          templateVariables,
        });
    }
}

The ServerTemplateService fulfills the contract of ImageGenerator and implements generateImage to call serverTemplateModel.

6. Angular Route Definition

import { ServerTemplateService } from '@/features/ai/services/server-template.service';
import { IMAGE_GENERATOR_TOKEN } from '@/shared/ui/gen-media/constants/image-generator.token';
import { GenMediaService } from '@/shared/ui/gen-media/services/gen-media.service';
import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'predefined-prompt/:featureId',
    loadComponent: () => import('./features/predefined-prompt-editor/predefined-prompt-editor.component'),
  },
  {
    path: 'template-prompt/:featureId',
    loadComponent: () => import('./features/predefined-prompt-editor/predefined-prompt-editor.component'),
    providers: [
      GenMediaService,
      { provide: IMAGE_GENERATOR_TOKEN, useExisting: ServerTemplateService }
    ],
  },
  ... other routes ...
];

The routes array specifies a list of paths to route to different components to demonstrate use cases of image generation. The PredefinedPromptEditorComponent consists of an uploader that allows users to upload at least one image to prompt gemini-3.1-flash-image to generate a new image.

Use this component in two scenarios: programmatically passing the prompt text, or using Firebase Server Prompt Templates.

When the path is predefined-prompt/:featureId, the prompt text is submitted to gemini-3.1-flash-image directly. When the path is template-prompt/:featureId, the server prompt template is used.

In the former case, the component uses the FirebaseService that IMAGE_GENERATOR_TOKEN provides in its factory function. In the latter case, the route creates an instance of GenMediaService and does not use the global one. It also provides ServerTemplateService to IMAGE_GENERATOR_TOKEN.

@Injectable({
  providedIn: 'root'
})
export class GenMediaService {
  private readonly imageGenerator = inject(IMAGE_GENERATOR_TOKEN);

  ... the rest of the service ...
}

When GenMediaService injects IMAGE_GENERATOR_TOKEN, imageGenerator is mapped to the ServerTemplateService instead of FirebaseService.

Next, update the navigation menu to use /template-prompt/bottle to call the new template.

7. Update the Navigation Menu

"modeling": {
    "figurine": {
      "path": "/predefined-prompt/figurine",
      "customPrompt": "... custom prompt ..."
    },
    "bottle": {
      "path": "/template-prompt/bottle",
      "templateConfigName": "glassBottleSouvenirTemplateId"
    },
  }

In the features JSON file, the path of bottle is updated to /template-prompt/bottle. Delete customPrompt and add templateConfigName to store the Firebase Remote Config name.

glassBottleSouvenirTemplateId references the template Id, glass-bottle-souvenir-v0-0-1, to load the template to generate the image.

When the Angular application makes the request to Firebase AI Logic, the network payload does not reveal the prompt text.

8. Verify the Network Request

The network payload includes the aspect ratio, resolution, and inline image data. Firebase hides the prompt text, preventing it from being stored as a static value in the JSON file. If prompt text is sensitive data of an application, it is secured in the Firebase's infrastructure.

9. Conclusion

This concludes the journey of migrating the static prompt text to Firebase AI Logic Server Prompt Template.

After the migration, the Angular application does not require redeployment when the server prompt is modified. Users reload the page and they can use the latest prompt to generate images.

Engineers can build AI applications with Firebase AI Logic Server Prompt Templates to perform tasks beyond image generation, such as summarization, text generation, and tool use via Google Search and Google Maps.

Resources

How to Securely Manage AI Prompts in Angular with Firebase

Connie Leung — Mon, 15 Jun 2026 18:29:52 +0000

Firebase released Server Prompt Templates to host prompt templates in its infrastructure. The template follows the DotPrompt format and syntax, so the content can have one or more of the following:

Model name
Model configuration
Input validation and schema
Output schema
Tool user
System instruction
User prompt

Server Prompt Templates resolve several key enterprise AI pain points.

Pain Point	Description
Better Security	The prompt text is stored in the server side, so it cannot be exposed in the network call. Users cannot open the Network tab of the Chrome browser and inspect the prompt text in the payload.
Better Guardrail	Prompt texts are not revealed, so malicious users cannot modify the prompt easily to trigger prompt injection and other attacks to Gemini models
No Prompt Drift	Engineer A edits a prompt locally, forgets to commit, and deploys the code changes. Engineer B uses the old prompt for development, and there are two versions scattered around. Server prompt templates ensure engineers use the same version for development. When the prompt is updated on the server, it is propagated to all instances of the client application.
Testing in Console	Engineers can verify the prompts are working in the Firebase Console before writing a line of code.
Less Deployments	When prompts are updated in the server side, client applications receive the prompt updates without redeployment.

1. Prerequisites

Angular 19
TailwindCSS
Node 22
gemini-3.1-flash-image (also known as Nano Banana 2)
Firebase AI Logic
Firebase Cloud Functions
Firebase Remote Config
Firebase Local Emulator Suite

npm i -g firebase-tools

Install firebase-tools globally using npm.

firebase logout

firebase login

Log out of Firebase and re-login to perform proper Firebase authentication.

firebase init

Execute firebase init and follow the screens to set up Firebase Cloud Function, Firebase Local Emulator Suite and Firebase Remote Config.

If you have an existing project or multiple projects, you can specify the project ID on the command line.

firebase init --project <PROJECT_ID>

After completing the step-by-step, the Firebase tools will generate function and remote config templates, and configuration files such as .firebaserc and firebase.json.

The next section has the details of the implementation repository.

2. Source Code

The full source code for this project is available in the NG Firebase AI Nano Banana, however, the following sections describe the code changes made to migrate to Firebase Server Prompt Templates.

3. Architecture

4. Server Prompt Template Creation

Users can click the Create Template button to create a new prompt on the server side.

A template is configured to generate a glass bottle image from inline image data. The unique template ID is glass-bottle-souvenir-v0-0-1, and the template name is glass-bottle-souvenir.

4.1. Model Configuration

---
model: "gemini-3.1-flash-image"
config:
  candidateCount: 1
  safetySettings:
    - category: HARM_CATEGORY_HARASSMENT
      threshold: BLOCK_ONLY_HIGH
    - category: HARM_CATEGORY_HATE_SPEECH
      threshold: BLOCK_ONLY_HIGH
    - category: HARM_CATEGORY_SEXUALLY_EXPLICIT
      threshold: BLOCK_ONLY_HIGH
    - category: HARM_CATEGORY_DANGEROUS_CONTENT
      threshold: BLOCK_ONLY_HIGH
input:
  schema:
    inlineImages?(array, inline image data):
      type: object
      properties:
        mimeType: string
        data: string  # inline data must be base64-encoded
    aspectRatio?: string, the aspect ratio of the image
    resolution?: string, the resolution of the image
---

The configuration specifies the model name, model configuration, and input schema and validations.

Section	Configuration	Description
model	gemini-3.1-flash-image	The Gemini model name of Nano Banana 2.
config	candidateCount: 1	The model returns at most 1 image
safetySettings	BLOCK_ONLY_HIGH	Safety category of harassment, hate speech, sexually explicit content, and dangerous content
input	schema	Input schema and validation

This prompt expects an array of inlineImages of type object. Each inline image contains a MIME type and inline data. Moreover, the prompt accepts an optional aspect ratio and resolution.

4.2. System Instructions

The prompt parts has {{role "system"}} syntax to specify the system instructions, and {{role "user"}} to specify the user prompt.

{{role "user"}}
A 1/7 scale commercialized collectible ... with realistic lighting and shadows.
{{#if aspectRatio}}
Apply this aspect ratio to the image: {{aspectRatio}}.
{{/if}}
{{#if resolution}}
Apply this resolution to the image: {{resolution}}.
{{/if}}

{{#each inlineImages}}
  {{media type="mimeType" data="data"}}
{{/each}}

The user prompt generates a souvenir glass bottle image from the uploaded inline image.

When the aspect ratio is provided, "Apply this aspect ratio to the image: {{aspectRatio}}." is appended to the prompt.

When the resolution is provided, "Apply this resolution to the image: {{resolution}}." is appended to the prompt.

The loop iterates the inlineImages list to specify the mime type and the inline data.

4.3. Testing the Prompt in Firebase Console

// Prompt Input
{
   "inline_images": [{
    "mime_type": "image/png",
    "contents": "iVBORw0KGgoAAAANSUhEUgAAARAAAABcCAYAAACm+q2AAAXGElEQVR4Ae1dC5QcVZm..."
  }],
   "aspectRatio": "4:1",
   "resolution": "512"
}

The prompt input includes an image, aspect ratio, and resolution for testing before writing a line of code.

The test request generates a souvenir glass bottle with the expected aspect ratio.

5. Server Prompt Template Service Implementation

5.1. Image Generator Interface

export type BaseGenerateParam = {
  aspectRatio?: string;
  resolution?: string;
  imageFiles: File[];
}

export type GenerateImageParam = BaseGenerateParam &  {
  prompt?: string;
  templateId?: string;
}

The GenerateImageParam type provides aspect ratio, resolution, uploaded images, and template ID to the Gemini model to generate an image.

export type ImageResponseWithoutId = {
  data: string;
  mimeType: string;
  inlineData: string;
}

export type ImageResponse = ImageResponseWithoutId & {
  id: number;
}

export type ImageTokenUsage = {
  image: ImageResponse,
}

The ImageTokenUsage type stores inline image data, mime type, and a dummy image ID.

import { GenerateImageParam } from '@/features/ai/types/generate-image-param.type';
import { ImageTokenUsage } from '@/features/ai/types/image-response.type';

export interface ImageGenerator {
  generateImage(param: GenerateImageParam): Promise<ImageTokenUsage | undefined>;
}

ImageGenerator interface is a contract that must implement a generateImage method to accept a GenerateImageParam parameter and output a promise of ImageTokenUsage or undefined.

5.2. Injection Token for Image Generator

import { FirebaseService } from '@/features/ai/services/firebase.service';
import { ImageGenerator } from '@/shared/ui/gen-media/interfaces/image-generator.interface';
import { InjectionToken, inject } from '@angular/core';

export const IMAGE_GENERATOR_TOKEN = new InjectionToken<ImageGenerator>('IMAGE_GENERATOR_TOKEN', {
  providedIn: 'root',
  factory: () => inject(FirebaseService)
});

5.3. Injection Token for Server Template Model

import { InjectionToken } from '@angular/core';
import { AI, TemplateGenerativeModel } from 'firebase/ai';

export const SERVER_TEMPLATE_MODEL = new InjectionToken<TemplateGenerativeModel>('SERVER_TEMPLATE_MODEL');

The SERVER_TEMPLATE_MODEL injection token injects an instance of TemplateGenerativeModel

Then, the provideFirebase function is updated to instantiate a TemplateGenerativeModel and provide it.

export function provideFirebase() {
    return makeEnvironmentProviders([
        {
          provide: VERTEX_AI_BACKEND,
          useFactory: () => {
            const configService = inject(ConfigService);
            const vertexAILocation = getValue(configService.remoteConfig, 'vertexAILocation').asString();
            const ai = getAI(configService.app, {
              backend: new VertexAIBackend(vertexAILocation)
            });

            return ai;
          }
        },
        {
          provide: SERVER_TEMPLATE_MODEL,
          useFactory: () => {
            const ai = inject(VERTEX_AI_BACKEND); 
            return getTemplateGenerativeModel(ai);
          }
        }
    ]);
}

5.4. Server Prompt Template Service

export async function makeTemplateVariables({ imageFiles, aspectRatio, resolution }: GenerateImageParam) {
  const imageParts = await resolveImageParts(imageFiles);
  const inlineImages = imageParts.map(part => part.inlineData);
  return {
    inlineImages,
    aspectRatio,
    resolution
  }
}

The makeTemplateVariables function converts Files[] to an array of inline image data before returning an object of inline images, aspect ratio, and resolution.

function processImageGeneratedContent(result: GenerateContentResult): ImageTokenUsage {
  const response = result.response;
  const inlineDataParts = response.inlineDataParts();

  if (inlineDataParts?.length) {
    const images = inlineDataParts.map(({inlineData}, index) => {
      const { data, mimeType } = inlineData;
      return {
        id: index,
        mimeType,
        data,
        inlineData: `data:${mimeType};base64,${data}`
      };
    });

    if (images.length <= 0) {
      throw new Error('Error in generating the image.');
    }

    return {
      image: images[0],
    };
  }

  throw new Error('Error in generating the image.');
}

export async function getTemplateBase64Images({ model, templateId, templateVariables }: TemplateImageOptions): Promise<ImageTokenUsage> {
  const result = await model.generateContent(templateId, templateVariables);
  return processImageGeneratedContent(result);
}

import { SERVER_TEMPLATE_MODEL } from '@/features/ai/constants/firebase.constant';
import { GenerateImageParam } from '@/features/ai/types/generate-image-param.type';
import { ImageTokenUsage } from '@/features/ai/types/image-response.type';
import { getTemplateBase64Images } from '@/features/ai/utils/generate-image.util';
import { makeTemplateVariables } from '@/features/ai/utils/inline-image-data.util';
import { inject, Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ServerTemplateService  {
    private readonly serverTemplateModel = inject(SERVER_TEMPLATE_MODEL);

    async generateImage(genImageParameter: GenerateImageParam): Promise<ImageTokenUsage | undefined> {
        const { templateId } = genImageParameter;
        if (!templateId) {
          return undefined;
        }

        const templateVariables = await makeTemplateVariables(genImageParameter);
        return getTemplateBase64Images({
          model: this.serverTemplateModel,
          templateId,
          templateVariables,
        });
    }
}

The ServerTemplateService fulfills the contract of ImageGenerator and implements generateImage to call serverTemplateModel.

6. Angular Route Definition

import { ServerTemplateService } from '@/features/ai/services/server-template.service';
import { IMAGE_GENERATOR_TOKEN } from '@/shared/ui/gen-media/constants/image-generator.token';
import { GenMediaService } from '@/shared/ui/gen-media/services/gen-media.service';
import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'predefined-prompt/:featureId',
    loadComponent: () => import('./features/predefined-prompt-editor/predefined-prompt-editor.component'),
  },
  {
    path: 'template-prompt/:featureId',
    loadComponent: () => import('./features/predefined-prompt-editor/predefined-prompt-editor.component'),
    providers: [
      GenMediaService,
      { provide: IMAGE_GENERATOR_TOKEN, useExisting: ServerTemplateService }
    ],
  },
  ... other routes ...
];

Use this component in two scenarios: programmatically passing the prompt text, or using Firebase Server Prompt Templates.

When the path is predefined-prompt/:featureId, the prompt text is submitted to gemini-3.1-flash-image directly. When the path is template-prompt/:featureId, the server prompt template is used.

@Injectable({
  providedIn: 'root'
})
export class GenMediaService {
  private readonly imageGenerator = inject(IMAGE_GENERATOR_TOKEN);

  ... the rest of the service ...
}

When GenMediaService injects IMAGE_GENERATOR_TOKEN, imageGenerator is mapped to the ServerTemplateService instead of FirebaseService.

Next, update the navigation menu to use /template-prompt/bottle to call the new template.

7. Update the Navigation Menu

"modeling": {
    "figurine": {
      "path": "/predefined-prompt/figurine",
      "customPrompt": "... custom prompt ..."
    },
    "bottle": {
      "path": "/template-prompt/bottle",
      "templateConfigName": "glassBottleSouvenirTemplateId"
    },
  }

In the features JSON file, the path of bottle is updated to /template-prompt/bottle. Delete customPrompt and add templateConfigName to store the Firebase Remote Config name.

glassBottleSouvenirTemplateId references the template Id, glass-bottle-souvenir-v0-0-1, to load the template to generate the image.

When the Angular application makes the request to Firebase AI Logic, the network payload does not reveal the prompt text.

8. Verify the Network Request

9. Conclusion

This concludes the journey of migrating the static prompt text to Firebase AI Logic Server Prompt Template.

After the migration, the Angular application does not require redeployment when the server prompt is modified. Users reload the page and they can use the latest prompt to generate images.

DEV Community: Connie Leung

Securing an Angular Firebase AI App with Email/Password Authentication (Part 3: Lightweight Home Screen, Lazy CDK Dialog, and Header Navigation)

Architecture & Mental Model

1. Updating HeaderComponent with Home Navigation and Conditional Sign-Out

2. Building the Lightweight HomeComponent & Lazy-Loading the CDK Dialog

2.1 Restoring Auth State in the Constructor (ensureAuth().catch(...))

2.2 Lazy-Loading @angular/cdk/dialog & Solving the NG0203 Injection Context Error with runInInjectionContext

2.3 Preventing Duplicate Modals & Resetting this.#dialogRef on Close (dialogRef.closed.subscribe)

2.4 Conditional CTA Rendering in home.component.html

Takeaways

Resources

Securing an Angular Firebase AI App with Email/Password Authentication (Part 2: Signal Forms Sign-In Modal) [GDE]

Architecture & Mental Model

1. Defining the Signal Form Validation Schema

2. Building SignInModalComponent with Signal Forms and AuthService

2.1 Injecting Dependencies and Initializing the Signal Form

2.2 Implementing onClose() and signIn()

3. Binding the Signal Form in the Template

Takeaways & What's Next

Resources

Securing an Angular Firebase AI App with Email/Password Authentication (Part 1: Emulator, AuthService, and Route Guard) [GDE]

Architecture & Mental Model

1. Configuring the Firebase Auth Emulator & Unified Launch Script

1.1 Enabling the Auth Emulator in firebase.json

1.2 Installing concurrently as a Dev Dependency

1.3 Adding Emulator and Launch Scripts in package.json

2. Creating a Test Account in the Firebase Emulator UI

3. Building a Lazy-Loaded, Signal-Driven AuthService

3.1 Defining the AuthCredentials Interface

3.2 Implementing AuthService with Dynamic SDK Loading and Signals

4. Protecting the Dashboard Route with canActivateDashboard

4.1 Creating the CanActivateFn Route Guard

4.2 Wiring canActivateDashboard in app.routes.ts

Takeaways & What's Next

Resources

From `main.js` Leaks to Hidden Tailwind CSS v4 Bloat — How I Built `angular-bundle-guard` with Antigravity `/learn` [GDE]

Day 33: From main.js Leaks to Hidden Tailwind CSS v4 Bloat — How I Built angular-bundle-guard with Antigravity /learn

Architecture & Mental Model: How the Skill Evolved

Act 1: Saving My Sanity—Automating the main.js & Lazy Chunk Leak Hunt

Leak 1: The Mixed Barrel File (index.ts) Trap in core/<domain>

Leak 2: Missing import type Declarations & Automated ESLint Fixes

Leak 3: Sequential Lazy Chunk Downloads (@defer + injectAsync() and Sequential await import())

Example 1: Using injectAsync() Inside a @defer Component

Example 2: Awaiting Independent Dynamic import() Calls Sequentially

All 8 Initial Bundle Vectors & 3 Lazy Chunk Vectors

Act 2: The Plot Twist—Why Component CSS Was Bloating Our JS Chunks

Act 3: Teaching the Skill to Find Dead CSS, Static Utilities, & Duplicates

1. Dead and Unused CSS & Vanilla Rules

2. Short Static @apply Classes (<= 3 Utilities -> Full Move to HTML)

3. Partial Static Splits (Keeping Variant Pairs Together)

4. Duplicate @apply & @keyframes Consolidation

Duplicate @apply Selectors in the Same Component (.a vs. .b)

Duplicated @keyframes fadeIn Across styles.css and Component CSS

Component @keyframes spin Colliding with Tailwind's Built-In animate-spin

Act 4: Inspecting "Fat" CSS Files in the HTML Report & Shaving Bytes Here and There

1. When Gemini 4 Suggested focus:ring-* -> focus:outline-*

2. Moving Conditional State Classes into [class] Bindings

3. Trimming tracking-*, leading-*, uppercase, Defaults (font-sans / text-base), Responsive Spacing, & duration-*

4. Safety Guardrails Learned Along the Way

Try angular-bundle-guard in Your Angular Workspace

Build Real-Time Client-Side TTS in Angular Using Firebase AI Logic and Gemini

1. Technical Stack

1.1 Install global dependency

1.2 Install dependencies

1.3. Generate Firebase Configuration File

2. Architecture

3. Source Code

4. Firebase Integration

4.1. Firebase Infrastructure

4.2. Remote Config and Construct Agent Platform Backend

5. TextToSpeechService Definition in Angular

5.1 Flow 1: L16 Audio to WAV conversion

5.2 Flow 2: L16 Audio Instant Playback

6. Build Reactive UI in Angular

6.1 Text to Speech Component

6.2 TextToSpeechView Definition in Angular

Conclusion

Resources

Go Completely Offline: Build a Privacy-First Personal Finance Assistant with LiteRT and Gemma 4

1. Prerequisites

1. Updating `HeaderComponent` with Home Navigation and Conditional Sign-Out

2. Building the Lightweight `HomeComponent` & Lazy-Loading the CDK Dialog

2.1 Restoring Auth State in the Constructor (`ensureAuth().catch(...)`)

2.2 Lazy-Loading `@angular/cdk/dialog` & Solving the `NG0203` Injection Context Error with `runInInjectionContext`

2.3 Preventing Duplicate Modals & Resetting `this.#dialogRef` on Close (`dialogRef.closed.subscribe`)

2.4 Conditional CTA Rendering in `home.component.html`

2. Building `SignInModalComponent` with Signal Forms and `AuthService`

2.2 Implementing `onClose()` and `signIn()`

1.1 Enabling the Auth Emulator in `firebase.json`

1.2 Installing `concurrently` as a Dev Dependency

1.3 Adding Emulator and Launch Scripts in `package.json`

3. Building a Lazy-Loaded, Signal-Driven `AuthService`

3.1 Defining the `AuthCredentials` Interface

3.2 Implementing `AuthService` with Dynamic SDK Loading and Signals

4. Protecting the Dashboard Route with `canActivateDashboard`

4.1 Creating the `CanActivateFn` Route Guard

4.2 Wiring `canActivateDashboard` in `app.routes.ts`

Day 33: From `main.js` Leaks to Hidden Tailwind CSS v4 Bloat — How I Built `angular-bundle-guard` with Antigravity `/learn`

Act 1: Saving My Sanity—Automating the `main.js` & Lazy Chunk Leak Hunt

Leak 1: The Mixed Barrel File (`index.ts`) Trap in `core/<domain>`

Leak 2: Missing `import type` Declarations & Automated ESLint Fixes

Leak 3: Sequential Lazy Chunk Downloads (`@defer` + `injectAsync()` and Sequential `await import()`)

Example 1: Using `injectAsync()` Inside a `@defer` Component

Example 2: Awaiting Independent Dynamic `import()` Calls Sequentially

2. Short Static `@apply` Classes (`<= 3` Utilities -> Full Move to HTML)

4. Duplicate `@apply` & `@keyframes` Consolidation

Duplicate `@apply` Selectors in the Same Component (`.a` vs. `.b`)

Duplicated `@keyframes fadeIn` Across `styles.css` and Component CSS

Component `@keyframes spin` Colliding with Tailwind's Built-In `animate-spin`

1. When Gemini 4 Suggested `focus:ring-` -> `focus:outline-`

2. Moving Conditional State Classes into `[class]` Bindings

3. Trimming `tracking-`, `leading-`, `uppercase`, Defaults (`font-sans` / `text-base`), Responsive Spacing, & `duration-*`

Try `angular-bundle-guard` in Your Angular Workspace