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.

1. 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"

        }

   }

}

1. Quit the Antigravity CLI and launch again to verify the integration is established correctly.




2. 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"

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.

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...."

On Firefox, repeat the same procedure

• Step 1: Upload an image
  
  




• Step 3: Click the Token usage tab to observe how tokens are spent to achieve the tasks.
  
  









• Firebase skill