Antigravity CLIを使用することで、開発者はAngularフロントエンド、FirebaseのHybrid Web SDK、そしてデバイス上のGemini Nanoモデルを組み合わせ、クラウドに一切触れることなくChrome上で動作する画像解析アプリを構築できます。Nanoモデルを実行できないブラウザでは、同じコードがGemini 3.5 Flashにフォールバックするため、あらゆる環境で機能を維持できます。

なぜこの組み合わせが重要なのか

AIを活用した画像タグ付け、代替テキスト（alt-text）の生成、CSSの提案は、アクセシビリティとデザインを向上させますが、すべてのフレームをリモートモデルに送信すると、コストが急速に膨らみます。Gemini Nanoをブラウザ上で直接実行することで、このデモではほとんどのユーザーに対してトークンベースの課金を回避しています。Safariやその他の非Chromeブラウザの場合のみ、クラウドへのフォールバックが発生し、料金が発生します。

実現を支えた要素

  • Antigravity CLI – 開発者のターミナル内で動作するAI駆動のアシスタント。コマンドラインを離れることなく、ドキュメント生成、ドメインモデリング、コードレビューなどの専門的な「スキル」を呼び出せます。
  • Stitch MCP Server – 自然言語のプロンプトをインタラクティブなUI画面に変換する、Google提供のサービス。このデモでは初期デザインを生成し、CLIはそれを DESIGN.md トークンファイルとしてエクスポートしました。
  • Angular MCP Server – Angular開発サーバー向けにベストプラクティスに基づいたスキャフォールディングとツールを提供し、プロジェクトがSignalsのようなモダンなパターンに従うようにします。
  • Firebase Hybrid Web SDK – フロントエンドをFirebaseのAI Logicレイヤーと、Geminiモデルを呼び出すために使用されるPrompt APIに橋渡しします。

Prompt APIは、リクエストをデバイス内（Gemini Nano）に留めるか、クラウド（Gemini 3.5 Flash）に送信するかを決定します。Chrome 148以降にはNanoモデルに必要なランタイムが含まれています。その他のブラウザでは、自動的にクラウドパスがトリガーされます。

開発者が品質を高く維持した方法

4つのAIスキルが繰り返し実行されました。

  1. grill-with-docs – ハイレベルな設計とトレードオフを記録したアーキテクチャ決定記録（ADR）を生成します。
  2. domain-modeling – 画像解析パイプラインに供給されるデータ構造の概要を定義します。
  3. code-review – ペアのサブエージェントが、コードの臭い（smells）、ADRとの不一致、および元の仕様からの乖離がないかをリポジトリ内でスキャンします。
  4. angular / firebase – コードがモダンなAngularのイディオムに従っているか、およびFirebase AI Logicの呼び出しが正しく構成されているかを確認します。

2つのワークフローが生まれました。1つ目は、/grill-with-docs でADRを自動生成し、次に /goal でAIに決定事項をエンドツーエンドで実装させる方法です。2つ目は、開発者が手動でADRを書き、/code-review を実行してAIに実装をチェックさせる方法です。手動ルートは、デグレ（退行）を早期に発見しつつ、「筋肉の記憶」を養うことができます。

実践的なUIパイプライン

開発者は、Stitchに希望する画面の短い説明を入力しました。Stitchはモックアップを返しました。Antigravity CLIはそのモックアップを解析してデザイントークンを抽出し、DESIGN.md に書き込みました。これらのトークンによって、デザインが本番環境で使用可能なAngularコンポーネントへとマッピングされました。

フロントエンドは、Chrome 148以降ではGemini Nanoモデルをローカルにロードし、必要なランタイムがない場合はFirebase経由でGemini 3.5 Flashにフォールバックし、トークン料金が発生します。

トレードオフ

デバイス上のモデルでは、Nanoの容量に収まるタスク（単純な分類、キャプション生成、スタイル提案など）に限定されます。より複雑なビジョン作業には、依然としてクラウドモデルが必要です。

まとめ

Antigravity CLIは、開発者がほとんどの推論呼び出しに対して料金を支払うことなく、フルスタックのAI画像解析フロー（Angular UI、Firebaseバックエンド、デバイス上のGemini推論）を組み立てられることを示しています。このアプローチはChromeのデバイス上モデルのサポートに依存していますが、エッジケースに対してクラウドへのフォールバックを許容できる、コストに敏感なアプリケーションにとって明確なブループリントを提供します。