DEV Community 2h ago

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

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

Workflow

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

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.

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.

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.

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.

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

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

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

Read on DEV Community ↗ ← Back to News