Apps Script: Gemini CLI と MCP サーバーで Gmail アドオンをバイブ コーディングする

1. 概要

このラボでは、最新の AI 主導のワークフローに沿って、動的な Gmail アドオンをゼロから構築する方法を説明します。Gemini CLI を使用して、強力なローカル開発環境をオーケストレートします。MCP（Model Context Protocol）サーバーと Gemini CLI 拡張機能を利用して、gcloud や clasp などのツールを統合します。

作成するアドオンは、Google Cloud の Vertex AI プラットフォームで画像モデルを呼び出すことで、オンデマンドで一意の猫画像を生成して表示します。

このチュートリアルを完了すると、Vertex AI API を呼び出して Gmail インターフェース内で独自の画像を生成する、完全に機能する Gmail アドオンが作成されます。このアドオンは、ローカルのコマンドラインから管理できます。

2. 学習内容

このラボを完了すると、次の方法を学習できます。

  • 拡張機能で Gemini CLI を設定して使用する
  • 外部 API を呼び出す Gmail アドオンを構築する
  • アドオンを変更して Vertex AI API を呼び出し、画像を生成する
  • Apps Script ユーザー インターフェースから Google Workspace アドオンのテスト版をデプロイする

3. 設定と要件

ラボを開始する前に

  1. Google アカウントをお持ちでない場合は、Google アカウントを作成する必要があります。仕事用または学校用アカウントではなく、個人アカウントを使用します。職場用アカウントと学校用アカウントには、このラボに必要な API を有効にできないようにする制限が設定されている場合があります。
  2. Google Cloud コンソールにログインします。
  3. Cloud コンソールで課金を有効にします。
  1. 新しいプロジェクトを作成するか、既存のプロジェクトを再利用します。

ラボの要件

このラボを最大限に活用するには、次のものが必要です。

  • ウェブブラウザ: Chrome などの標準的なウェブブラウザ（推奨）。
  • 専用の時間: ラボ アクティビティに集中できる十分な時間を確保します。

4. Google Cloud 環境を設定する

  1. [Cloud Shell をアクティブにする] アイコン 7a0d8a88ebea95af.png をクリックします。コンソールのヘッダーの右上にあるターミナル アイコンをクリックします。このアイコンにカーソルを合わせると、[Cloud Shell をアクティブにする] と表示されます。
  2. 承認。
  3. 初期化を待つ: コンソール ウィンドウの下部の新しいフレームで Cloud Shell セッションが開きます。一時的な Debian ベースの仮想マシン（VM）がプロビジョニングされるため、セッションの初期化には数分かかります。
  4. セッションが初期化されると、コマンドライン プロンプト（user@cloudshell:~ $）が表示されます。
  5. 展開ボタンをクリックしてウィンドウのサイズを大きくすると、Cloud Shell ウィンドウを拡大できます。
  6. プロジェクトを確認する: 次のコマンドを実行します。
gcloud config list project
  1. プロジェクトを変更する（必要な場合）:
gcloud config set project [YOUR_PROJECT_ID]

これでラボのアクティビティを開始する準備が整いました。

5. ローカル開発環境を構成する

このタスクでは、Gemini CLI とその拡張機能を設定して、ターミナルからクラウド プロジェクトと Apps Script プロジェクトを管理します。

  1. Gemini CLI は Cloud Shell 環境の一部としてすでにインストールされているため、インストールする必要はありません。
  2. clasp は Cloud Shell 環境の一部としてすでにインストールされていますが、このラボでは最新バージョンを使用していることを確認します。
npm install -g @google/clasp@latest
  1. 次のコマンドを入力し、以下の手順に沿って操作して、clasp がアカウントにアクセスできるように承認します。
clasp login --no-localhost

ターミナルで生成された URL をクリックして、clasp を承認します。受講者ラボのアカウントを使用してログインし、権限を求めるプロンプトが表示されたら、[すべて選択] を選択して [続行] をクリックします。次のようなエラー メッセージが表示されます。

db77651c2ce19d7f.png

ブラウザ ウィンドウから URL（http://localhost:8888/?code=xxx で始まる）をコピーして、開いている Cloud Shell セッションに貼り付け、Enter キーを押します。clasp は認可フローを続行します。ログインが成功すると、You are logged in as user@gmail.com のような確認が表示されます。

  1. clasp Gemini CLI 拡張機能をインストールします。
gemini extensions install https://github.com/google/clasp --consent
  1. gcloud Gemini CLI 拡張機能をインストールします。
gemini extensions install https://github.com/gemini-cli-extensions/gcloud --consent
  1. Google Workspace デベロッパー向け Gemini CLI 拡張機能をインストールします。
gemini extensions install https://github.com/googleworkspace/developer-tools --consent
  1. 空のプロジェクト ディレクトリを作成します。
mkdir genai-cat-add-on
  1. 新しく作成したプロジェクト ディレクトリに移動します。
cd genai-cat-add-on
  1. このプロジェクトの Gemini CLI コンテキスト ファイルを構成します。
cat << 'END_OF_FILE' > GEMINI.md
## **Gemini CLI Instructions for Gmail Add-on Development**

You are a methodical **Google Workspace extensibility and integration expert**. Your goal is to build a Gmail Add-on for the `genai-cat-add-on` project by writing Apps Script code and using command-line tools.

---

## **Tools Available**

*   **`clasp`**: Use this tool for all Apps Script project operations like pushing files.
*   **`gcloud`**: Use this tool for Google Cloud operations, such as enabling APIs or managing IAM permissions.
*   **`workspace-developer`**: Use this tool to search the official Google Workspace documentation for correct syntax, manifest properties, and required OAuth scopes.

---

## **Development Workflow and Validation**

You MUST follow the workflow below when building the add-on:

1.  **Mandatory Documentation Check**: Before creating, committing, or modifying any code (especially manifest files or Apps Script functions), you **MUST** first utilize the **`workspace-developer` tool** and use **search_workspace_docs** to search and validate the necessary Apps Script syntax, OAuth scopes, Apps Script services such as GmailApp, and best practices. Always refer to the official Google Workspace developer documentation via this tool for authoritative information.
2.  **Security and Scopes**: For every code commit or structural change, you must first **verify the manifest file (`appsscript.json`) includes the necessary OAuth scopes** for Gmail access and external API calls, ensuring you use the **minimal required scopes** and nothing more to adhere to the principle of least privilege.
3.  **Versioning/Persistence**: After any successful file creation, update, or deletion, you must ensure the changes are persistently saved and pushed using the appropriate `clasp` tool command.
4.  **Error Handling**: Include appropriate debugging and robust error handling code in all Apps Script functions.

---

## **Project and API Specifications**

* **Project Focus:** All work is centered on the **`genai-cat-add-on`** Apps Script project.
* **Vertex AI Details:** If asked to generate images, you must use the **`gemini-2.5-flash-image`** model on **Vertex AI**. Do NOT use imagen. All Vertex AI operations must use the currently logged-in user's credentials and the current Google Cloud project.
END_OF_FILE
  1. 学生用ラボアカウントで Google Apps Script API を有効にし、Google Apps Script API をクリックして、[オフ] から [オン] に切り替えます。

41eb25a89e13e1ff.gif

6. Gemini CLI の設定を開始して確認する

  1. プロジェクト ディレクトリで Gemini を起動します。
gemini
  1. デフォルトでは、Gemini CLI はファイルへの変更を確認して承認するよう求めます。このラボでは、Shift+Tab キーを押して自動的に編集を適用し、ラボを時間内に完了することをおすすめします。このオプションが赤色でハイライト表示されます。

31a7326896719d73.png

  1. GEMINI.md ファイルが読み込まれたことを確認し、Gemini CLI のコンテキストに読み込まれた内容を表示します。
/memory show
  1. MCP サーバーが正しく構成されていることを確認します。gcloud MCP サーバーの初期化には時間がかかることがあります。切断と表示されても、慌てないでください。数分待ってから、もう一度お試しください。
/mcp list

7. Gmail アドオンを作成する

  1. Gemini に Gmail アドオンの最初のバージョンを作成するよう依頼します。
Use Apps Script to create a new Google Workspace add-on that displays a random cat image using the Cat-as-a-Service API upon opening the add-on in Gmail. Make sure you update the code and manifest files, use the correct scopes, and use the API documentation at https://cataas.com/doc.html.

Once done, provide a link to view the project.
  1. Gemini がプロンプトへの回答を完了したら、表示されたリンクをクリックするか、Apps Script のホームページに移動して genai-cat-add-on プロジェクトをクリックします。
  2. ページの左側にある [プロジェクト設定] アイコン（歯車アイコン）9485fddc5bf46369.png をクリックします。

2bc043bb3c3a216d.png

  1. [「appsscript.json」マニフェスト ファイルをエディタで表示する] オプションを選択します。

e74dca570d64e540.png 9. エディタ画面に切り替え、Code.gs で生成されたコードと、appsscript.json でプロジェクトを構成するマニフェスト ファイルを確認します。

8. アドオンをインストールしてテストする

  1. Apps Script プロジェクト ページに戻ります。
  2. 上部にある [デプロイ] ボタンを探します。
  3. [Deploy] の横にある矢印をクリックして、[Test deployments] を選択します。
  4. 表示された [テストのデプロイ] ダイアログ ボックスに、非公開アドオンをインストールするオプションが表示されます。
  5. [Install] ボタンをクリックします。
  6. 確認メッセージが表示されたら、下部の [完了] をクリックして、デプロイ ダイアログを閉じます。
  7. Gmail のホームページを開いて更新します。
  8. これで、アドオンが利用可能になります。アドオンが右側のサイドパネルに表示されます。
  9. アドオンを初めて使用する際には、必要なデータや権限にアクセスするための承認を求めるメッセージが表示されます。画面の指示に沿って権限を付与します。
  10. 猫の画像が表示されます。表示されない場合は、エラー メッセージを共有して Gemini CLI でトラブルシューティングを行います。

9. AI 画像生成ロジックを実装する

  1. Gemini に、画像を生成するロジックを追加するよう依頼します。
Now update the add-on to display an AI-generated image using the samples in https://docs.cloud.google.com/vertex-ai/generative-ai/docs/multimodal/image-generation#use-image-generation. 

The image should show a cute cat if I open my inbox, and should add a speech bubble saying "<email sender name> rocks!" with the actual sender name when I open an email.
  1. Gmail のホームページを更新して、アドオンをもう一度開きます。新しい権限を承認するよう求められた場合は、承認します。
  2. AI によって生成された猫の画像が表示されます。画像が表示されない場合は、エラー メッセージを共有してその手順に沿って Gemini CLI でトラブルシューティングを行います。
  3. メールを開くと、画像が変化して送信者の名前が表示された吹き出しが表示されます。前の手順と同様に、Gemini CLI に関する問題をトラブルシューティングします。

10. [省略可] 動物の種類プルダウンを追加

  1. 猫の画像に加えて、他の動物の画像を生成するオプションを追加するよう Gemini に依頼します。
Add a dropdown menu that lets the user choose the type of animal image it wants. Choose 2 random animals to add to the list in addition to the cat image.
  1. 縦の 3 つの点をクリックして [更新] をクリックするか、Gmail のホームページを更新してアドオンを再度開くことで、アドオンを更新します。
  2. 別の動物の写真を選択して、新しい機能をテストします。UI が更新されない、エラーが表示されるなどのエラーが発生した場合は、エラー メッセージを共有して Gemini CLI の指示に従い、トラブルシューティングを行います。

11. クリーンアップ

Gemini CLI を終了する

Gemini CLI を終了し、次のコマンドを発行して使用状況の統計情報を確認します。

/quit

Google Cloud プロジェクトを削除する

この Codelab で使用したリソースに対して Google Cloud アカウントで課金されないようにするには、Google Cloud プロジェクトを削除することをおすすめします。

gcloud projects delete $GOOGLE_CLOUD_PROJECT

Apps Script プロジェクトを削除する

左側のナビゲーション パネルにある dc2524b2c9878567.png 情報アイコンをクリックし、画面の右側にある 4ad389ddfeda5d7f.png ゴミ箱アイコンをクリックして、Apps Script プロジェクトを削除します。

12. トラブルシューティングのヒント

  • Gemini CLI と拡張機能で問題が発生した場合は、次のコマンドを使用して、特定の動作バージョンの Gemini CLI を実行できます。
npx https://github.com/google-gemini/gemini-cli#v0.12.0
  • エラーが発生した場合は、Gemini に修正を依頼し、エラーとコンテキスト（エラーが発生した場所）を共有します。
  • Gemini がエラー ロギングを実装し、エラーの共有を求めてきた場合は、エラーの原因となった手順を再実行し、その結果を Gemini と共有します。
  • 次のようなプロンプトを試すことができます。
You have my permission to fix any errors. Please go ahead and make it work.
  • 行き詰まって Gemini のサポートが必要な場合は、次のプロンプトを使用できます。
Use the following Github repo as a reference implementation to make my add-on work: https://github.com/googleworkspace/add-ons-samples/tree/main/apps-script/generative-ai/cat-add-on

13. 完了

これで、ラボが完了し、Gemini CLI を使用して Gmail アドオンを vibe-code で作成しました。

このラボでは、以下の操作について学習しました。

  • Gemini CLI を使用します。
  • MCP（Model Context Protocol）サーバーを使用してツールをインストールし、Gemini CLI を拡張します。
  • Gmail アドオンをビルド、デプロイ、インストールします。

これで、次のラボに進む準備が整いました。