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 とその拡張機能を設定して、ターミナルから Cloud プロジェクトと 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. [デプロイ] の横にある矢印をクリックして、[テスト デプロイ] を選択します。
  4. [テスト デプロイ] ダイアログ ボックスが表示され、公開されていないアドオンをインストールするオプションが表示されます。
  5. [インストール] ボタンをクリックします。
  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 のアドオンをバイブコード化しました。

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

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

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