1. はじめに
このハンズオンラボでは、Antigravity をオーケストレートして完全なクラウドベースのアプリケーションを構築し、最新の開発スキルを実践します。また、デベロッパーの知識 MCP とエージェント スキルを使用して、エージェントの知識と出力の品質を向上させる方法を学びます。
ここでは、Gemini 3.1 Flash Image（Nano Banana 2 とも呼ばれます）を使用して猫の画像を生成するアプリケーション「Cat Delivery System」を構築します。アプリケーション バックエンドは Antigravity SDK を使用して開発され、Cloud Run にデプロイされます。また、lit と vite を使用して最新のフロントエンドを作成します。すべて手動でコードを 1 行も書かずに完了できます。
学習内容
- 高速モードと計画モードで Antigravity CLI を使用する方法
- Developer Knowledge MCP サーバーを使用して Antigravity に Google デベロッパー ドキュメントへのアクセス権を付与する方法
- カスタムスキルを Antigravity CLI にインストールする方法
- Antigravity を使用してアプリケーションをデプロイして監査する方法
前提条件
- ターミナルの使用経験
- コードの読み取りと理解
- AI コーディング エージェントに関する基本的な知識
- クラウドのコンセプトに関する基礎知識
2. セットアップ
次の手順に沿って、この Codelab に必要な Google Cloud プロジェクトを初期化します。プロジェクトを初期化した後は、この Codelab を Cloud Shell で実行することをおすすめします。Cloud Shell には、この Codelab をすぐに実行するために必要なツールがすべて用意されています。
このコードラボをローカル環境で実行する場合は、続行する前に Python、uv、コードエディタをインストールする必要があります。この Codelab のすべての手順は、特に記載がない限り、Cloud Shell で実行することを前提としています。
セルフペース型の環境設定
- Google Cloud コンソール にログインして、プロジェクトを新規作成するか、既存のプロジェクトを再利用します。Gmail アカウントも Google Workspace アカウントもまだお持ちでない場合は、アカウントを作成してください。
- プロジェクト名は、このプロジェクトの参加者に表示される名称です。Google API では使用されない文字列です。いつでも更新できます。
- プロジェクト ID は、すべての Google Cloud プロジェクトにおいて一意でなければならず、不変です（設定後は変更できません）。Cloud コンソールでは一意の文字列が自動生成されます。通常は、この内容を意識する必要はありません。ほとんどの Codelab では、プロジェクト ID（通常は
PROJECT_IDと識別されます）を参照する必要があります。生成された ID が好みではない場合は、ランダムに別の ID を生成できます。または、ご自身で試して、利用可能かどうかを確認することもできます。このステップ以降は変更できず、プロジェクトを通して同じ ID になります。 - なお、3 つ目の値として、一部の API が使用するプロジェクト番号があります。これら 3 つの値について詳しくは、こちらのドキュメントをご覧ください。
- 次に、Cloud のリソースや API を使用するために、Cloud コンソールで課金を有効にする必要があります。この Codelab の操作をすべて行って、費用が生じたとしても、少額です。このチュートリアルの終了後に請求が発生しないようにリソースをシャットダウンするには、作成したリソースを削除するか、プロジェクトを削除します。Google Cloud の新規ユーザーは、300 米ドル分の無料トライアル プログラムをご利用いただけます。
Cloud Shell の起動
Google Cloud はノートパソコンからリモートで操作できますが、この Codelab では、Google Cloud Shell（Cloud 上で動作するコマンドライン環境）を使用します。
Google Cloud コンソールで、右上のツールバーにある Cloud Shell アイコンをクリックします。
プロビジョニングと環境への接続にはそれほど時間はかかりません。完了すると、次のように表示されます。
この仮想マシンには、必要な開発ツールがすべて用意されています。永続的なホーム ディレクトリが 5 GB 用意されており、Google Cloud で稼働します。そのため、ネットワークのパフォーマンスと認証機能が大幅に向上しています。この Codelab での作業はすべて、ブラウザ内から実行できます。インストールは不要です。
3. Antigravity CLI の設定と認証
このラボでは、Antigravity（AGY）を使用します。Google の Gemini モデルを使用してソフトウェアの構築を支援する Google のコーディング エージェント。AGY デスクトップ アプリケーション、コマンドライン インターフェース（AGY CLI）、エージェントと一緒にコードを表示して編集できる統合開発環境（IDE）があります。このラボでは、AGY CLI を使用します。
また、Antigravity エージェント ハーネス（ハーネスは Antigravity のエンジンと考えることができます）を使用して独自の汎用エージェントを構築するための SDK もあります。
AGY の起動と認証
[エディタを開く] ボタンを押して、Cloud Shell エディタを開きます。
エディタが開いたら、メニューバーの最大化ボタンを使用してウィンドウを最大化できます。
メニューの [ターミナル] > [新しいターミナル] を使用するか、ホットキーの Ctrl+`（Ctrl キーとバッククォート）を使用して、ターミナル パネルを開きます。
画面の下部に新しいターミナル ウィンドウが開き、bash プロンプトが表示されます。
次に、ターミナルで最初の演習用の作業ディレクトリを作成し、そのディレクトリに移動します。
mkdir -p ~/hello-agy && cd ~/hello-agy
このターミナルで agy と入力して、Antigravity CLI を起動します。
agy
agy を起動すると、認証を求められます。[Use a Google Cloud project:] を選択します。
画面にリンクが表示されます。提供されたリンクをコピーして、シークレット ブラウザの別のタブに貼り付けます。
このラボ用に提供された受講者アカウントの認証情報を使用してログインします。
認証コードをコピーして agy に貼り付けます。
プロジェクト ID を求められたら、このページのサイドパネルに表示されているプロジェクト ID を使用します。
最後に、Google Cloud のロケーションとして [global] を選択します。
猫の雑学を返す簡単なスクリプトを生成する
では、AGY CLI の動作を把握するために、簡単なスクリプトを生成してみましょう。
AGY に猫の豆知識を返す短いスクリプトの作成をリクエストし、実行してもらいます。
Write a simple node script that returns cat trivia and run it for me
AGY はしばらく考えてから、スクリプトを作成します。
AGY からノード スクリプトを実行する権限をリクエストされたら、[Yes] を選択して Enter キーを押します。
権限のリクエストは次のようになります。
Requesting permission for: node cat-trivia.js Do you want to proceed? > 1. Yes 2. Yes, and always allow in this conversation for commands that start with 'node cat-trivia\.js' 3. Yes, and always allow for commands that start with 'node cat-trivia\.js' (Persist to settings.json) 4. No
スクリプトを実行すると、AGY によって実行された内容の概要が表示されます。以下に、その結果を示します。
I have created and executed a simple Node.js script that returns cat trivia.
### Created File
• cat-trivia.js: A standalone Node.js script that fetches random cat facts from a public API ( https://catfact.ninja/fact ) with built-in fallbacks and ASCII art.
### Execution Output
Running the script using node cat-trivia.js produced the following output:
_._ _,-'""`-._
(,-.`._,'( |\`-/|
`-.-' \ )-`( , o o)
`- \`_`"'-
🐱 Here is your Cat Trivia:
----------------------------------------
"In 1987 cats overtook dogs as the number one pet in America."
----------------------------------------
猫の ASCII アートまで追加してくれたのが気に入っています。
作成された内容について詳しく知りたい場合は、エディタを開いてソースコードを検査することもできますが（ぜひそうすることをおすすめします）、AGY にコードの注釈と説明を求めることもできます。
Explain the code you generated please
説明を読んで、さらに詳しい情報を知りたい場合はフォローアップ質問をします。
最後に、このタスクを完了するには、Ctrl+D キーを 2 回押して agy を閉じます。
4. Google デベロッパー ドキュメントに接続してクエリを実行する
エージェントとモデルは日々進化していますが、回答の品質は、知識の正確さと最新性に大きく左右されます。そのため、エージェントに信頼できるソースから最新のデベロッパー ドキュメントを取得するツールを提供し、内部知識や推測に基づいて誤った判断を下すことを避けることが重要です。
Google Developer Knowledge MCP サーバーを使用すると、コーディング エージェントは Firebase、Google Cloud、Android、Maps などの Google プロダクトに関する Google の公式デベロッパー ドキュメントを検索できます。
エージェントを Google の公式ドキュメント ライブラリに直接接続することで、エージェントが使用するコードとガイダンスが最新のものであり、信頼できるコンテキストに基づいていることを確認できます。
まず、Developer Knowledge API を有効にします。
gcloud services enable developerknowledge.googleapis.com
Developer Knowledge MCP サーバーを設定して構成する
このプロジェクトのワークスペースを作成し、Antigravity 用に Developer Knowledge MCP サーバーを構成する手順は次のとおりです。
ユーザーの Antigravity 構成ファイルは、ホーム ディレクトリの .gemini フォルダに保存されます。下の図は、簡略化したバージョンで、主な要素を示しています。
~/.gemini
├── antigravity/
├── antigravity-cli/
│ ├── brain/ # Conversations and artifacts
│ └── settings.json # CLI settings
├── config/
│ ├── plugins/ # Global / shared plugins
│ └── mcp_config.json # Global / shared MCP config
├── skills/ # Global / shared skills
│ └── {skill_name}/
│ ├── SKILL.md # Skill definition
│ └── ... # [optional] support files, scripts, etc.
└── GEMINI.md # Global rules
Developer Knowledge MCP サーバーを AGY CLI に追加するには、~/.gemini/config フォルダの mcp_config.json ファイルを編集します。
まず、構成フォルダが存在することを確認し、空の mcp_config.json ファイルを作成します。
mkdir -p ~/.gemini/config && touch mcp_config.json
次に、次のコマンドを使用して、Cloud Shell エディタでこのファイルを開きます。
cloudshell edit ~/.gemini/config/mcp_config.json
最後に、次の構成を mcp_config.json に追加します。[[PROJECT_ID]] は実際のプロジェクト ID に置き換えてください。プロジェクト ID は、この手順のサイドパネルで確認できます。
~/.gemini/config/mcp_config.json
{
"mcpServers": {
"google-developer-knowledge": {
"url": "https://developerknowledge.googleapis.com/mcp",
"authProviderType": "google_credentials",
"oauth": {
"scopes": [
"https://www.googleapis.com/auth/cloud-platform"
]
},
"timeout": 30000,
"headers": {
"X-goog-user-project": "[[PROJECT_ID]]"
}
}
}
}
/mcp スラッシュ コマンドを使用して、MCP サーバーが正しく読み込まれたかどうかを確認できます。次のように表示されます。
Developer Knowledge MCP が構成されました。実際に動作を確認してみましょう。
Nano Banana 2 を使用して猫の画像を作成するスクリプトを生成する
Developer Knowledge MCP の機能を示すために、Nano Banana 2 を使用して猫の写真を生成する簡単なスクリプトを作成してみましょう。
ターミナルで次のコマンドを実行する必要があります。agy を閉じてシェルに戻るには、Ctrl+D キーを 2 回押します。
まず、AI Platform API を有効にします。これは、プロジェクトが Gemini API 呼び出しを行うことを許可する API です。
gcloud services enable aiplatform.googleapis.com
子猫ジェネレータのワークスペースを作成します。
mkdir -p ~/nano-banana-kitten && cd ~/nano-banana-kitten
依存関係マネージャーを初期化します。
uv init
Antigravity を起動し、次のプロンプトを入力します。
Write a script that uses Nano Banana 2 through Vertex AI to generate a picture of a cute kitten, and run the script for me. Use the google-developer-knowledge MCP when researching.
Ctrl+O キーを押して、中間思考ステップを展開して読みます。AGY が google-developer-knowledge サービスを使用してクエリを作成し、スクリプトを記述して実行し、見つかったエラーを修正する様子が表示されます。
猫の画像を表示します =^_^=
5. 猫の配達エージェントの構築
Google Developer Knowledge MCP は、公式ドキュメントを使用して質問に回答するのに役立ちますが、必要な情報が非常に専門的で、ドキュメントに記載されていない場合があります。このような状況では、別のオープン スタンダードである Agent Skills を使用できます。
Agent Skills は、専門知識とワークフローを使用して AI エージェント機能を拡張するための軽量でオープンな形式です。スキルの特徴は、プログレッシブ開示と呼ばれるものです。エージェントは、スキルのコンテンツを最初からすべて読み込むのではなく、必要なときにのみスキルを有効にし、必要な情報をオンデマンドで読み込んで、貴重なトークンを節約します。
猫の配達エージェントを完成させるために、エージェント ハーネスとして Antigravity SDK を使用します。コーディング エージェントの摩擦を最小限に抑え、実装を効率化するため、公式の Antigravity SDK スキルも活用します。
ワークスペースを作成して依存関係をインストールする
まず、最終プロジェクトのフォルダを作成します。
mkdir -p ~/cat-delivery && cd ~/cat-delivery
次に、uv パッケージ管理システムを使用してこのフォルダを初期化し、いくつかの依存関係をインストールします。
uv init && uv add fastapi uvicorn
AGY SDK Python スキルをインストールする
ソースコードとオープン マーケットプレイスからスキルをインストールするには、Vercel の Skill CLI を使用します。ターミナルで次のコマンドを実行して、google-antigravity-sdk スキルをインストールします。ラボのワークスペース フォルダ（~/cdslab）から実行していることを確認します。
npx skills add Google-Antigravity/antigravity-sdk-python --skill google-antigravity-sdk --agent antigravity-cli --yes
このコマンドの出力は次のようになります。
コマンド npx skills add Google-Antigravity/antigravity-sdk-python は、GitHub からリポジトリ antigravity-sdk-python のクローンを自動的に作成しました。このコマンドは、skills フォルダがある限り、任意の Github リポジトリからスキルをインストールするために使用できます。
プラグインからスキルをインストールする
スキルをインストールするもう 1 つの方法は、プラグイン システムを使用することです。Antigravity のプラグインを使用すると、スキルだけでなく、MCP サーバー、ルール、フックも同じパッケージに含めることができます。これらは、単一のデプロイ バンドルで一貫性のある拡張機能を作成するのに役立ちます。
ウェブ アプリケーションをビルドするため、次のコマンドを使用して modern-web-guidance プラグインをインストールします。
agy plugin install https://github.com/GoogleChrome/modern-web-guidance
このプラグインには、Google Chrome チームが作成したウェブ開発のベスト プラクティスを含むスキルが含まれています。
agy をもう一度起動して、スキルが機能していることを確認します。agy のプロンプトで、/skills と入力してスキル メニューを開きます。
/skills
次のような出力が表示されます。
MCP とエージェント スキルの両方が構成されたので、Antigravity はプロジェクトを成功させるために必要なすべての情報を取得して、プロジェクトに取り組む準備ができました。
アプリの計画
Antigravity には、高速と計画の 2 つの動作モードがあります。高速モードでは、Antigravity はすぐにタスクの処理を開始します。このモードは、単純な自己完結型のタスクを対象としています。計画モードは、複雑なタスク向けに設計されています。エージェントはまず計画を詳しく説明します。ユーザーは、実装を開始する前に計画を確認して修正できます。
プランニング モードを有効にするには、スラッシュ コマンド /planning を使用します。
/planning
/fast を使用して高速モードに戻すことができます。
/fast
計画モードと高速モードを切り替える場合は、モデルを切り替えることもできます。これを行うには、/model コマンドを使用します。
/model
使用可能なモデルのリストは、環境と認証モードによって若干異なる場合があります。
このチュートリアルの範囲として、[Gemini 3.5 Flash（低）] を選択します。かっこ内の「低」という単語は、モデルの思考レベルを意味します。Gemini 3.5 Flash（思考レベル: 低）は、トークン エコノミクスに優れ、非常に高速で効果的なモデルです。思考レベルとして [中] または [高] を選択すると、モデルが回答を返す前に、より多くのトークンと時間を推論に費やします。
たとえば、実際のシナリオでは、計画には High の思考レベルで最も高性能なモデルを使用し、実装にはより高速なモデルを使用できます。ただし、このプロジェクトでは Gemini 3.5 Flash（低）で十分です。
プランの生成
Antigravity をプランニング モードに戻します。
/planning
次に、次のプロンプトを送信して実装プランを作成します。
Create an application named "Cat Delivery System". This application will be an agent that generates cat pictures using Gemini 3.1 Flash Image (aka Nano Banana 2). The user will interact with the agent whenever it feels the need for a cat picture in their life, whether it be to make them smile, laugh or just brighten their day. Cat pictures can take any form the user desires: anime, cartoon, photorealistic, 3D render, etc. The only rule is ABSOLUTELY NO DOGS - steer the user towards cats if necessary. P.S.: capybaras are allowed.
The tech stack should be as follows:
- uv package manager
- Backend: agent using Antigravity SDK
- Frontend: simple chat window, light mode, lit / vite
- Model: Gemini 3.5 Flash for the root agent, Gemini 3.1 Flash Image for image generation
TODO:
- backend should serve a static frontend
- define the contract between frontend and backend before starting implementation
- use Google Cloud Project auth
調査フェーズでは、Antigravity が Developer Knowledge MCP と 1 つ以上のスキルを呼び出すことがあります。
プランが完了すると、確認を求めるメッセージが表示されます。
画面の右下隅に注目してください。1 個のアーティファクトというメッセージと、/artifact を使用して確認するというヒントが表示されています。Antigravity では、プラン、タスクリスト、チュートリアルなどのサポート ファイルは、ソリューションの一部である通常のファイル（ソースコードなど）と区別するために「アーティファクト」と呼ばれます。
プロンプトに「/artifact」と入力すると、プランを確認してコメントを追加できるため、必要に応じて調整できます。
/artifact
次のように表示されます。
implementation_plan.md というファイルがあり、開く、承認する、拒否するオプションがあります。Enter キーを押して開きます。システムでのプランの表示例を次に示します。
矢印キーで上下にスクロールできます。任意の行で C キーを押すと、コメントを追加できます。
確認する重要なセクションは [Verification Plan] です。ここで、モデルがタスクを完了したことを認識できるように、検証ステップを確認して追加できます。
プランにコメントを追加し、満足のいくプランになったら ESC キーを押して戻ります。次に、Y キーを押して、エージェントにコメントを送信することを確認します。
「Y」と入力すると、エージェントがすぐに動作を開始します。エージェントは、実装の進捗状況に応じて、ツール呼び出しの確認をさらに求めることがあります。
アーティファクトの数は時間とともに増加します。計画に加えて、Antigravity はタスクリスト（task.md）も作成し、実装する必要がある各項目や実行する必要があるアクションを追跡します。完了すると、達成した目標の説明を含むウォークスルー ファイル（walkthrough.md）が作成されます。これらすべてをもう一度 /artifact コマンドで確認できます。
これらのファイルはいつでも開いてコメントを追加できます。エージェントに送信すると、キューに登録されたプロンプトと同様に、実行のためにキューに登録されます。これらのファイルにコメントを追加して、リクエストに関する追加のコンテキストをエージェントに提供することをおすすめします。
6. エージェントをクラウドにデプロイする
これで、Cloud Run を使用してクラウドにデプロイする準備が整いました。このタスクは詳細な計画を必要としないため、高速モードを使用できます。
/fast を使用して Antigravity を高速モードに切り替えます。
/fast
次のプロンプトを使用して、CDS エージェントを Cloud Run にデプロイするように Antigravity に指示します。
Deploy the agent and frontend to Cloud Run.
TODO:
- backend should serve a static frontend
- frontend and backend are deployed in the same container
Acceptance Criteria
- Agent is deployed to cloud run
- Frontend is live and renders with no errors
- Backend is live and responds to requests with no errors
7. 完了
このワークショップでは、Antigravity を使用した最新の開発について、MCP サーバーとエージェント スキルを使用して機能を拡張する方法など、実践しました。また、Antigravity SDK と Gemini 3.1 Flash Image を活用した完全なアプリケーションも構築しました。学習はここで終わりではありません。このプラットフォームの他の Codelab を確認して、エージェント コーディングのスキルをさらに磨きましょう。