1. はじめに
このハンズオンラボでは、Antigravity をオーケストレートして完全なクラウドベースのアプリケーションを構築し、最新の開発スキルを習得します。また、Developer Knowledge MCP とエージェント スキルを使用して、エージェントの知識と出力品質を向上させる方法を学びます。
Google は、Gemini 3.1 Flash Image（Nano Banana 2 とも呼ばれます）を使用して猫の画像を生成するアプリケーション「Cat Delivery System」を構築しています。アプリケーションのバックエンドは Antigravity SDK を使用して開発され、Cloud Run にデプロイされます。また、lit と vite を使用して最新のフロントエンドを作成します。これらすべてを、手動でコードを 1 行も記述せずに実現します。
学習内容
- 高速モードと計画モードで Antigravity CLI を操作する方法
- Developer Knowledge MCP サーバーを使用して、Google デベロッパー ドキュメントへのアクセス権を Antigravity に付与する方法
- カスタム スキルを Antigravity CLI にインストールする方法
- Antigravity を使用してアプリケーションをデプロイして監査する方法
前提条件
- ターミナルの使用経験
- コードの読み取りと理解
- AI コーディング エージェントに関する基本的な知識
- クラウドのコンセプトに関する基本的な理解
2. セットアップ
この Codelab に必要な Google Cloud プロジェクトを初期化する手順は次のとおりです。プロジェクトを初期化したら、すぐに実行できるツールがすべて揃っている Cloud Shell でこの Codelab を実行することをおすすめします。
ローカル環境でこの Codelab を実行する場合は、続行する前に Python、uv、コードエディタをインストールする必要があります。特に記載がない限り、この Codelab の手順はすべて Cloud Shell で実行することを前提としています。
セルフペース型の環境設定
- Google Cloud Console にログインして、プロジェクトを新規作成するか、既存のプロジェクトを再利用します。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 エージェント ハーネスを使用して独自の汎用エージェントを構築するための SDK もあります（ハーネスは Antigravity のエンジンと考えてください）。
AGY の起動と認証
[エディタを開く] ボタンを押して Cloud Shell エディタを開きます。
エディタが開いたら、メニューバーの最大化ボタンを使用してウィンドウを最大化できます。
メニュー [Terminal] > [New Terminal] を使用するか、ホットキー 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 ファイルを編集します。
まず、config フォルダが存在することを確認し、空の 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 を使用して猫の画像を作成するスクリプトを生成する
Nano Banana 2 を使用して猫の画像を生成する簡単なスクリプトを作成し、Developer Knowledge MCP の機能を示します。
ターミナルで次のコマンドを実行する必要があります。Ctrl+D を 2 回押して agy を閉じ、シェルに戻ります。
まず、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 (Low)] を選択します。かっこ内の「low」は、モデルの思考レベル を意味します。思考レベルが [Low] の Gemini 3.5 Flash は、トークン エコノミーに優れた非常に高速で効果的なモデルです。思考レベルとして [Medium] または [High] を選択すると、モデルがレスポンスを返す前に、推論に多くのトークンと時間が費やされます。
たとえば、実際のシナリオでは、計画に思考レベルが [High] の最も高性能なモデルを使用し、実装にはより高速なモデルを使用できます。ただし、このプロジェクトでは Gemini 3.5 Flash（Low）で十分です。
プランを生成する
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 」というメッセージと、/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 を確認して、エージェント コーディング スキルの開発を続けてください。