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.
This is my entire workflow from implementing features, generating UI screens, and mapping the screens to Angular components.
I installed the grill-with-docs
, angular
, and firebase
skills in my project for the following reasons:
SKILL.md
of the grill-with-docs
skill, so a copy of it is required.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.
~/.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.
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:
Now, the CLI is equipped with the agent skills and MCP servers to coordinate the development of the new features in the Angular application.
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.
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...."
The use case is to upload an image, perform image analysis, and display the token consumption of the analysis.
On Chrome 148+,
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 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.
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.