Stitch（Googleのデザインツール）とAntigravityを連携して使う方法｜AI ProのGCPクレジット活用

1. Stitch（Google）とは

Google LabsのAIデザインツール。プロンプトや画像からUI・フロントコードを生成し、Figma貼り付け・コードエクスポートが可能（公式ブログ）。

• Web版： stitch.withgoogle.com
• GCP： Stitch API（stitch.googleapis.com）で API 利用可。

2. Google Antigravityとは

エージェント型開発プラットフォーム。エディタ・ターミナル・ブラウザで自律的に計画・実行・検証（公式ブログ）。

• ダウンロード： antigravity.google/download　ドキュメント： antigravity.google/docs
• 個人向けは無料パブリックプレビュー利用可。

3. GCPでStitch APIを有効化し、認証～権限まで一通りやる

上記の流れのとおり進めます。
特に重要な2点：(1) Stitch 用キー（JSON）の発行 (2) そのサービス アカウントへのロール付与。
キーだけだと MCP で 403 になるので、必ず IAM で「Service Usage ユーザー」等を付与してください。

認証情報の作成（種類の選び方）

「認証情報の作成」→ 使用APIに Stitch API、アクセスするデータの種類を選びます。

操作の流れ（画像つき）

① Stitch API ＋ アプリケーション データ を選択 →「次へ」。

② サービス アカウント名・ID・説明を入力 →「作成して続行」（ステップ2・3は省略可）。

③ 入力例（名前・ID 例：stich-antigravity）。

④ 「認証情報」タブに SA が表示される。ここからキー追加 → JSON ダウンロード。

⑤ IAM → サービス アカウント → 該当 SA の「キー」タブ →「キーを追加」→ 新しい鍵を作成 → JSON 選択でダウンロード。

「キーを追加」→ 鍵タイプで JSON（推奨） を選び「作成」。JSON がダウンロードされたら安全な場所に保管（紛失時は復元不可）。

「作成」後、保存ダイアログが開くので保存先を決めて「保存」。この JSON のパスを mcp_config の GOOGLE_APPLICATION_CREDENTIALS に指定する。

⑥ サービス アカウントにプロジェクトのロールを付与する（必須）

キーを作っただけでは MCP から Stitch を呼ぶと HTTP 403 になります。
サービス アカウントは「認証」用で、「このプロジェクトの API を利用する」権限は別に付与する必要があります。必ず次の手順を実行してください。

1. GCP コンソールで IAM と管理 → IAM を開く（または、サービス アカウント一覧で stich-antigravity をクリック → 「権限」タブ → 「アクセスを管理する」）。
2. プロジェクト「Gemini API」に対する権限の編集画面で、プリンシパルに stich-antigravity@...iam.gserviceaccount.com を追加（まだいなければ）し、ロールで「Service Usage ユーザー」を選んで保存する。コンソールでは「ユーザー」として表示されることが多く、「消費者」は出てこない場合があります（いずれも serviceusage.services.use を含む権限）。

コンソールで選択する「Service Usage ユーザー」は、サービス状態・オペレーションの検査やプロジェクト割り当て・請求の利用ができる権限で、Stitch API に必要な serviceusage.services.use を含みます（公式ドキュメント上のロール名は Service Usage Consumer／roles/serviceusage.serviceUsageConsumer。日本語コンソールでは「ユーザー」と表示されることが多い）。公式
権限の反映には数分かかることがあります。

キーと権限の関係（図で整理）

Stitch API を呼ぶには、その SA に「Service Usage ユーザー」等のロールを付与します（サービス アカウント概要）。
セキュリティ：private_key は秘密情報。Git に載せず、漏洩時は GCP でキー無効化・削除のうえ新キー作成。

キー作成後、同じ「キー」タブに作成したキーが一覧表示されます。ステータス・作成日・有効期限を確認でき、ゴミ箱アイコンからキーを削除も可能。漏洩時や不要になったキーはここから削除してください。

同じサービス アカウントの「アクセス権を持つプリンシパル」タブでは、この stich-antigravity にアクセスできる「誰」がどのロールを持っているかを確認できます。
ここで出てくるのはキーを発行したアカウントではなく、このサービス アカウントを管理・操作できるユーザーや他 SAです。

• オーナー： このサービス アカウントの完全な管理（削除含む）。
• サービス アカウント トークン作成者： このアカウントのキー（トークン）を作成したり、なりすまし利用したりできる。
• 編集者： 設定の変更などができる（通常、削除やキー作成はオーナー等に限られる）。

「継承」が Gemini API（プロジェクト）なら、これらの権限はそのプロジェクトで付与されたもの。
stich-antigravity が「何の API を呼べるか」は、IAM の「権限」タブやプロジェクトの IAM ページで、この SA に付いているロールを確認してください。

「同意画面を構成」ボタンと OAuth 同意画面とは？

有効化後の画面（図2）には「同意画面を構成」というボタンもあります。押すと次のような画面になります。

OAuth 同意画面は、ユーザーの Google データ（メール・カレンダー・ドライブなど）にアプリがアクセスするときに「このアプリは〇〇を使います。許可しますか？」と表示するための設定です（OAuth同意画面）。
OAuth 2.0 クライアント（ユーザーデータ）を作る場合は同意画面の構成が必須です。

Stitch API をサービス アカウント（アプリケーションデータ）だけで使う場合は、同意画面の構成は不要。ユーザーログインや「Googleでログイン」を使わない限り、認証情報の作成だけでOKです。

本記事は Antigravity から利用する想定なので、「認証情報の作成」でアプリケーションデータ（サービス アカウント）を発行し、その認証情報を MCP 設定に渡せば接続できます。

流れは記事冒頭の図のとおり。ロール付与を忘れずに。AI Pro の GCP クレジットを有効にしていれば Stitch API 利用料もクレジットで賄えます。

4. Stitch と Antigravity の連携（MCP）

AntigravityからStitchの機能を使う連携は Model Context Protocol（MCP） の「Stitch MCP Server」で行います。手順の概要は以下のとおりです（公式・コミュニティ情報に基づく）。

• Stitch用の認証情報： 上記のとおりGCPでStitch APIを有効化し、サービス アカウントのJSONキーを作成する。または stitch.withgoogle.com の設定からMCP用キーを発行する方法もあり、利用形態に応じて選択する。
• Stitch MCP Server： Antigravity が起動する MCP サーバーとして Stitch MCP を登録する。パッケージ名・コマンドは stitch.withgoogle.com/docs/mcp/setup で要確認。
• AntigravityでMCP設定： mcp_config.json に Stitch 用のエントリと、JSONキーのパス（環境変数 GOOGLE_APPLICATION_CREDENTIALS）を設定し、再起動後に「Stitch Generate」「Stitch Fetch」などのスキルが使えるか確認する。

JSONキーを利用した Antigravity の設定

ダウンロードしたサービス アカウントの JSON キーを Antigravity で使う手順です。

MCP の設定を開く：Agent Manager の右上「…」 → 「MCP Servers」。
「Manage MCP Servers」→「View raw config」で mcp_config.json を編集できます。

「MCP Servers」で Manage MCP servers と MCP Store が表示されます。
JSON キーを設定するには、左の「Manage MCP servers」で 「View raw config」 をクリックし、mcp_config.json に Stitch 用エントリと GOOGLE_APPLICATION_CREDENTIALS のパスを追記します。

Stitch の連携方法は複数あります（MCP Store の Stitch から追加して画面でキーを入力する方法など）。本記事では、GCP で Stitch API を有効化し、サービス アカウントの JSON キーを発行したうえで、その JSON ファイルのパスを mcp_config に指定する流れで説明しています。

1. JSON を安全な場所に置く： 保存した JSON ファイルを、Antigravity を起動する環境から読めるパスに置きます。例：C:\Users\＊＊＊＊\\.config\stitch-sa.json（Windows）や ~/.config/stitch-sa.json（Mac/Linux）。Git の管理外にしてください。
2. MCP 設定ファイルを編集する： Antigravity の MCP 設定は mcp_config.json です。場所は Antigravity のドキュメントまたは設定画面で確認してください。Stitch MCP 用のエントリを追加し、環境変数 GOOGLE_APPLICATION_CREDENTIALS に JSON ファイルの絶対パスを渡します。

mcp_config.json に書く内容（コピー用）

「View raw config」で開いたファイルが空、または別のサーバーだけの場合は以下をそのまま貼り付けます。
既に mcpServers がある場合は "stitch": { ... } のブロックだけを中に追加してください。

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "stitch-mcp"],
      "env": {
        "GOOGLE_APPLICATION_CREDENTIALS": "C:\\Users\\＊＊＊＊\\.config\\stitch-sa.json",
        "GOOGLE_CLOUD_PROJECT": "あなたのプロジェクトID"
      }
    }
  }
}

書き換えるところ：

• GOOGLE_APPLICATION_CREDENTIALS： ダウンロードした Stitch 用 JSON キーを置いたファイルの絶対パスに変更。Windows では \\ か / で。例：C:/Users/＊＊＊＊/.config/stitch-sa.json
• GOOGLE_CLOUD_PROJECT： JSON キーを開いたときの project_id に合わせる（上記は例）。

command・args は Stitch 公式の MCP 手順で変更がある場合はそちらに合わせてください。
「View raw config」を開くと、次のような編集画面で mcp_config.json を編集できます。

3. Antigravity を再起動： 設定を保存し、Antigravity を再起動します。
4. 動作確認： チャットやエージェントで「Stitchで〇〇のUIを生成して」などと指示し、「Stitch Generate」「Stitch Fetch」が利用できるか確認します。エラーが出る場合は、JSON のパス・プロジェクトID・サービス アカウントの IAM ロールを確認してください。

再起動後、「…」→「MCP Servers」→「Manage MCP servers」で確認できます。
Stitch が表示され、ツール数（例：10/100 tools）や create_project・generate_screen_from_text などが一覧されていれば設定は有効です。

接続はするが HTTP 403（権限エラー）が出る場合

上記の ⑥ ロール付与 をしていないと、MCP から Stitch を呼んだときに HTTP 403 になります。
接続は成功しているが list_projects 等で 403 が出る場合は「認証は通ったが API 利用権限がない」状態。→ 本節「⑥」のとおり、サービス アカウントに「Service Usage ユーザー」を付与してください。

エラーに serviceusage.services.use 等とあれば、その SA に「Service Usage ユーザー」ロールを付与。サービス アカウントを作っただけでは API を「使う」権限は付かないので、同じプロジェクトの IAM で SA をプリンシパルとして追加しロールを割り当てる必要があります（Service Usage のアクセス制御・IAM ロール 公式）。

付与のしかた：GCP コンソール → IAM と管理 → IAM → 「アクセス権を付与」で、プリンシパルに stich-antigravity@...iam.gserviceaccount.com を入力し、ロールで「Service Usage ユーザー」を選んで保存。コンソールでは「消費者」ではなく「ユーザー」として出てくることが多いです。

設定完了後の動作例（MCP で Stitch を利用している状態）

上記まで設定すると、Antigravity のエージェントから MCP 経由で Google Stitch を利用できます。
例：「ログインボタンのUIを生成して」と指示すると、Stitch がプロジェクト作成・UI生成を行い、Tailwind CSS 付きコードがウォークスルーで返ります。以下はその一例です。

接続後は、Antigravityのエージェントに「Stitchで〇〇のUIを生成して取り込んで」と指示し、UIはStitchに任せつつ、認証・DB・デプロイなどはAntigravity側で実装する運用が可能です。

豆知識：GCP で Stitch 用サービス アカウントを無効にすると MCP から使えなくなる

GCP の IAM で Stitch 用のサービス アカウントを無効化（停止）すると、MCP から Stitch を利用できなくなります。
Manage MCP servers では Failed to get access token や Fatal Startup Error: Authentication failed が出ます。再び使うにはその SA を有効に戻してください。

5. Google One AI Pro と GCP クレジット

Google One の AI Pro プランを契約すると、毎月 $10 相当（日本円で約1,500〜1,590円程度）の GCP クレジットが付与されます。有効期限は付与から1年。
利用可能なサービスには Vertex AI・Firebase・Cloud Run・Cloud Build・Google Maps Platform などが含まれ、Antigravity で Vertex AI を使う場合もこのクレジットを充当できます。

重要：クレジットは契約するだけでは自動反映されません。developers.google.com に同じ Google アカウントでログインし、デベロッパープロフィール作成のうえ My Benefits（developers.google.com/program/my-benefits）で GCP 請求先アカウントを選択して適用する必要があります。GCP 側では請求先アカウントの作成（無料トライアルまたは課金有効化）が前提です。Google One の特典概要は Google One の特典を利用する（公式ヘルプ）を参照。

6. まとめ

Stitch で UI を生成し、Antigravity の MCP 連携でデザイン・コードを取り込んでアプリを組み上げる流れにできます。
AI Pro の GCP クレジットを有効化しておけば、Vertex AI 等を Antigravity から利用する料金を月額 $10 相当の範囲で賄えます。MCP のコマンドや設定例は Stitch 公式（MCP setup） と Antigravity のドキュメントで最新情報を確認してください。