{"slug": "build-firebase-ai-logic-application-with-antigravity-cli-and-stitch-mcp-server", "title": "Build Firebase AI Logic Application with Antigravity CLI and Stitch MCP Server [GDE]", "summary": "A developer demonstrated how to use the Antigravity CLI, an agentic AI assistant, to build an image analysis demo with Angular, Firebase Hybrid & On-device Inference Web SDK, and Gemini models. The demo allows users to upload images for analysis, generating alt text, tags, recommendations, and CSS tips. The CLI integrates with Stitch MCP and Angular MCP servers to streamline development workflows.", "body_md": "**Note:** Google Cloud credits are provided for this project.\n\nIn 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.\n\nWhen 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.\n\nNext, 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.\n\nThis is my entire workflow from implementing features, generating UI screens, and mapping the screens to Angular components.\n\nI installed the `grill-with-docs`\n\n, `angular`\n\n, and `firebase`\n\nskills in my project for the following reasons:\n\n`SKILL.md`\n\nof the `grill-with-docs`\n\nskill, 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.\n\nHong Kong users need to enable a VPN to access `Stitch with AI`\n\ndue to geofencing. Then, I can visit `https://stitch.withgoogle.com/`\n\nto create a Stitch project and generate new screens in it using natural language.\n\nOn 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.\n\nThis is how I made the CLI talk to the Stitch MCP server after trial and error:\n\nNavigate to `https://github.com/davideast/stitch-mcp`\n\nand read the `Quick Start`\n\nto initialize the MCP server.\n\nVisit `https://stitch.withgoogle.com/settings`\n\n, scroll to API Key and create a new key. Copy the key because we need it in the mcp configuration file.\n\n`~/.gemini/config/mcp_config.json`\n\nto register the Stitch MCP server globally. Replace `<Stitch API Key>`\n\nwith your actual API key.\n\n```\n\"mcpServers\": {\n   \"stitch\": {\n        \"command\": \"npx\",\n        \"args\": [\"-y\", \"@_davideast/stitch-mcp@latest\", \"proxy\"],\n        \"env\": {\n            \"STITCH_API_KEY\": \"<Stitch API Key>\",\n            \"STITCH_USE_SYSTEM_GCLOUD\": \"1\",\n            \"GOOGLE_CLOUD_PROJECT\": \"<google cloud project id>\",\n            \"CI\": \"1\",\n            \"DOTENV_CONFIG_QUIET\": \"true\"\n        }\n   }\n}\n```\n\nQuit the Antigravity CLI and launch again to verify the integration is established correctly.\n\nIn 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.\n\nThe 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.\n\nSimilarly, I also registered the Angular MCP server to find Angular best practices and search documentation.\n\n```\n\"mcpServers\": {\n  \"angular-cli\": {\n       \"command\": \"npx\",\n       \"args\": [\"-y\", \"@angular/cli\", \"mcp\"]\n    }\n}\n```\n\nThe server exposes the following tools to ease Angular development:\n\nNow, the CLI is equipped with the agent skills and MCP servers to coordinate the development of the new features in the Angular application.\n\nAfter 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.\n\n**Workflow 1**: Use `/grill-with-docs`\n\nto generate an Architecture Decision Record (ADR), and save it to a path for human review and documentation. Then, use `/goal`\n\nto ask the coding assistant to implement the ADR, and accept the changes.\n\nFor example, I type this prompt to ask the coding assistant to implement an ADR and include relevant skills.\n\n*Prompt*: \"/goal implement `<ADR file name>`\n\n, use Angular skill and Angular MCP server to adopt modern Angular architecture in the code\"\n\n**Workflow 2**: Use `/grill-with-docs`\n\nto 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`\n\nto 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.\n\nFor example, I type this prompt to ask the coding assistant to fetch a Git branch, and validate against an ADR.\n\n*Prompt*: \"/code-review fetch all the commits of `<Git branch>`\n\n, and validate the changes against `<ADR filename>`\n\n.\"\n\nThe 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`\n\n, push the `main`\n\nbranch to the remote repository to deploy to Firebase App Hosting.\n\nAfter 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.\n\nThis 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.\n\n**Note**: Enable VPN to access the Stitch site\n\nI 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.\n\nFirst, I created a new Stitch project to host the UI screens.\n\nThen, I wrote prompts to generate both the home page and the image analysis page\n\nAfter clicking the Analysis Image button, the page displays the tab group with some tabs.\n\nNext, I need to use the Antigravity CLI to communicate with the Stitch MCP server to generate the `Design.md`\n\nfiles.\n\nPrompt: \"Use the Stitch MCP server to retrieve a `Stitch UI Screen`\n\nfrom my `Stitch Project`\n\n. Analyze its visual layout, extract the design tokens (colors, typography, and spacing), and generate a `DESIGN.md`\n\nfile in the `project folder path`\n\n.\"\n\nFor example, I saved the `DESIGN.md`\n\nof the home screen to the root directory and the `DESIGN.md`\n\nof the image analysis page in the `image-analysis`\n\nfolder.\n\nAfter reviewing the `DESIGN.md`\n\nand ensuring everything looks good, I use `/goal`\n\nagain to map the `DESIGN.md`\n\nto 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.\n\n*Prompt*: \"/goal You are an expert Angular developer. Your goal is to implement the UI layout defined in `DESIGN.md`\n\ninto production-ready Angular components. Fully read `DESIGN.md`\n\nfirst to extract all design tokens, spacing guidelines, colors, and layout instructions, and apply them using the following rules: Insert the context and rules....\"\n\nThe use case is to upload an image, perform image analysis, and display the token consumption of the analysis.\n\nOn Chrome 148+,\n\nStep 2: Click the button to generate tags and alternative texts\n\nStep 3: Click the Token usage tab to observe how tokens are spent to achieve the tasks.\n\nOn Firefox, repeat the same procedure\n\nStep 2: Click the button to generate tags and alternative texts\n\nStep 3: Click the Token usage tab to observe how tokens are spent to achieve the tasks.\n\nThis concludes the journey of using the Antigravity CLI, agent skills, and Stitch MCP server to build an image analysis application.\n\nWhen 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.\n\nPlease examine the Firebase AI Hybrid & On-Device Web SDK, and leverage the on-device model to perform simple AI tasks to reduce costs.", "url": "https://wpnews.pro/news/build-firebase-ai-logic-application-with-antigravity-cli-and-stitch-mcp-server", "canonical_source": "https://dev.to/gde/build-firebase-ai-logic-application-with-antigravity-cli-and-stitch-mcp-server-gde-g6o", "published_at": "2026-07-15 06:50:10+00:00", "updated_at": "2026-07-15 07:00:02.209954+00:00", "lang": "en", "topics": ["artificial-intelligence", "developer-tools", "ai-tools", "ai-agents", "large-language-models"], "entities": ["Antigravity CLI", "Stitch MCP Server", "Angular", "Firebase", "Gemini", "Google Cloud", "Gemini Nano", "Gemini 3.5 Flash"], "alternates": {"html": "https://wpnews.pro/news/build-firebase-ai-logic-application-with-antigravity-cli-and-stitch-mcp-server", "markdown": "https://wpnews.pro/news/build-firebase-ai-logic-application-with-antigravity-cli-and-stitch-mcp-server.md", "text": "https://wpnews.pro/news/build-firebase-ai-logic-application-with-antigravity-cli-and-stitch-mcp-server.txt", "jsonld": "https://wpnews.pro/news/build-firebase-ai-logic-application-with-antigravity-cli-and-stitch-mcp-server.jsonld"}}