MCP セットアップ

Model Context Protocol で Stitch を AI エージェントに接続する

Stitch Model Context Protocol（MCP）サーバーを使うと、Cursor、Antigravity、Gemini CLI などお気に入りの AI ツールから、あなたの Stitch プロジェクトと直接やり取りできます。

リモート MCP について

普段使っている MCP サーバーのほとんどはローカルです。ハードドライブ上のファイルを読み取ったり、お使いのマシンでスクリプトを実行したりします。Stitch はリモート MCP サーバーであり、クラウド上に存在します。

リモートである以上、あなたに代わって動作する AI エージェントが本当にあなたのデザインを変更する権限を持っていることを確認するために、安全な「ハンドシェイク」が必要です。

API キー vs OAuth

Stitch MCP サーバーは、2 つの認証方法をサポートしています：

  1. API キー： Stitch 設定ページで生成する永続的なキーです。
  2. OAuth： キーの手動入力をサポートしていない特定の AI クライアントや、永続的なシークレットをディスクに保存することが制限されている環境で必要となる、ブラウザベースの認証フローです。

どちらを使うべきか

ほとんどの場合、API キーが最も簡単な方法です。ツールを接続するには最短の手段です。ただし、特定の状況では、OAuth に設定の 1 分を余分にかける価値があります。

シナリオAPI キーを使うべき場合OAuthを使うべき場合
クライアントの対応使用しているツール（Cursor、Antigravity、Gemini CLI など）が、設定ファイルや環境変数で API キーを受け付ける場合。使用しているツール（Web ベースのツールなど）が「ログイン」フローを必要とし、キーを手動で入力する方法がない場合。
保存ポリシープライベートなマシンを使っていて、シークレットキーをローカルの .json や .env ファイルに保存するのが一般的な場合。「ゼロトラスト」やエフェメラルな環境で、永続的なシークレットをハードドライブに保存することがブロックされている、またはリスクがある場合。
失効Stitch 設定ページから手動でキーを削除し、さらにローカルファイルからも探して削除することに問題がない場合。ローカルファイルを探し回らずに、「ログアウト」して Stitch 設定ページからツールのアクセス権を即座に無効化したい場合。
セッションの仕組み手動で変更するまで接続を無期限に維持したい場合。一定期間操作がないと期限切れになったり、再承認が必要になったりする、セッションベースの接続を好む場合。

API キーの設定

  1. Stitch 設定ページを開きます。
  2. API Keys セクションまでスクロールします
  3. 「Create API Key」をクリックして、新しい API キーを生成します。
  4. API キーをコピーして、安全な場所に保存します。

Stitch

API キーの保管

API キーを、公開されてしまう可能性のある場所に保存しないでください。API キーを公開リポジトリにコミットしないでください。他の人が閲覧できるクライアントサイドコードに API キーを含めないでください。

MCP クライアントの設定

Gemini CLI

Gemini CLI 用の Stitch 拡張機能をインストールします。

gemini extensions install https://github.com/gemini-cli-extensions/stitch

Cursor

次のエントリを含む .cursor/mcp.json ファイルを作成します：

{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

Antigravity

Agent Panel で、右上の 3 点アイコンをクリックして MCP Servers を選択します。Manage MCP Servers をクリックします。「View raw config」を選択し、次のエントリを追加します：

{
  "mcpServers": {
    "stitch": {
      "serverUrl": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

VSCode

コマンドパレット（Cmd+Shift+P）を開き、「MCP: Add Server」と入力します。「Add MCP Server」を選択します。リモート MCP サーバーを追加するには HTTP を選択します。Stitch MCP の URL（https://stitch.googleapis.com/mcp）を入力します。名前を「stitch」に設定して確定します。

次に、mcp.json ファイルを編集して API キーを追加します：

{
  "servers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "type": "http",
      "headers": {
        "Accept": "application/json",
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

Claude Code

claude mcp コマンドを使って認証し、次のエントリを追加します：

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: api-key" -s user

OAuth の設定

MCP クライアントが Stitch と通信できるようにするには、2 つのシークレットを生成する必要があります：

  1. Project ID： 作業内容を入れるコンテナです。
  2. Access Token： プロジェクトの認証を確認するための、有効期限の短いキーです。

1. Google Cloud SDK のインストール

Stitch は安全な認証のために gcloud CLI に依存しています。まだインストールしていない場合は、このクイックスタートでグローバルにインストールするか、以下の手順のようにスタンドアロンでインストールできます。

スタンドアロン

# Download and install (simplified for standard environments)
curl https://sdk.cloud.google.com | bash
exec -l $SHELL

# Set local configuration to avoid prompts
export CLOUDSDK_CORE_DISABLE_PROMPTS=1

Homebrew

brew install --cask google-cloud-sdk

2. 二重の認証

ログインは 2 回必要です。1 回はあなた（ユーザー）として、もう 1 回はアプリケーション（ローカルのコード/MCP クライアント）として行います。

# 1. User Login (Opens Browser)
gcloud auth login

# 2. Application Default Credentials (ADC) Login
# This allows the MCP server to "impersonate" you securely.
gcloud auth application-default login

3. プロジェクトと権限の設定

作業対象のプロジェクトを選択し、Stitch API を有効にします。あわせて、ユーザーにサービスを利用する権限を付与する必要があります。

# Replace [YOUR_PROJECT_ID] with your actual Google Cloud Project ID
PROJECT_ID="[YOUR_PROJECT_ID]"

gcloud config set project "$PROJECT_ID"

# Enable the Stitch API
gcloud beta services mcp enable stitch.googleapis.com --project="$PROJECT_ID"

# Grant Service Usage Consumer role
USER_EMAIL=$(gcloud config get-value account)
gcloud projects add-iam-policy-binding "$PROJECT_ID" \
    --member="user:$USER_EMAIL" \
    --role="roles/serviceusage.serviceUsageConsumer" \
    --condition=None

4. シークレットの生成（.env）

最後に、Access Token を生成して .env ファイルに保存します。

既存の .env ファイルは上書きされます

# Print the token
TOKEN=$(gcloud auth application-default print-access-token)

# Note: This overwrites any existing .env file
echo "GOOGLE_CLOUD_PROJECT=$PROJECT_ID" > .env
echo "STITCH_ACCESS_TOKEN=$TOKEN" >> .env

echo "Secrets generated in .env"

5. トークンを最新に保つ

注意： Access Token は一時的です（通常は 1 時間有効）。MCP クライアントが応答しなくなった場合や「Unauthenticated」と表示された場合は、次の操作を行います：

  1. ステップ 4 のコマンドを再実行して .env ファイルを更新する
  2. .env にある新しい STITCH_ACCESS_TOKEN の値を MCP クライアントの設定ファイルにコピーする

ほとんどの MCP クライアントは .env ファイルを自動的に読み取らないため、トークンが期限切れになるたびに、設定ファイル内のトークンを手動で更新する必要があります。

MCP クライアントのセットアップ

.env ファイルの値を MCP クライアントの設定にコピーします。以下のプレースホルダーを、.env ファイルの実際の値に置き換えてください：

  • <YOUR_PROJECT_ID> → .env の GOOGLE_CLOUD_PROJECT の値
  • <YOUR_ACCESS_TOKEN> → .env の STITCH_ACCESS_TOKEN の値

[!IMPORTANT] アクセストークンの有効期限が切れると、1 時間ごとに設定ファイルの Authorization ヘッダーを手動で更新する必要があります。更新のワークフローについては、上記のステップ 5を参照してください。

Cursor

次のエントリを含む .cursor/mcp.json ファイルを作成します：

{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "Authorization": "Bearer <YOUR_ACCESS_TOKEN>",
        "X-Goog-User-Project": "<YOUR_PROJECT_ID>"
      }
    }
  }
}

Antigravity

Agent Panel で、右上の 3 点アイコンをクリックして MCP Servers を選択します。Manage MCP Servers をクリックします。「View raw config」を選択し、次のエントリを追加します：

{
  "mcpServers": {
    "stitch": {
      "serverUrl": "https://stitch.googleapis.com/mcp",
      "headers": {
        "Authorization": "Bearer <YOUR_ACCESS_TOKEN>",
        "X-Goog-User-Project": "<YOUR_PROJECT_ID>"
      }
    }
  }
}

VSCode

コマンドパレット（Cmd+Shift+P）を開き、「MCP: Add Server」と入力します。「Add MCP Server」を選択します。リモート MCP サーバーを追加するには HTTP を選択します。Stitch MCP の URL（https://stitch.googleapis.com/mcp）を入力します。名前を「stitch」に設定して確定します。

次に、mcp.json ファイルを編集してヘッダーを追加します：

{
  "servers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "type": "http",
      "headers": {
        "Accept": "application/json",
        "Authorization": "Bearer <YOUR_ACCESS_TOKEN>",
        "X-Goog-User-Project": "<YOUR_PROJECT_ID>"
      }
    }
  }
}

Claude Code

claude mcp コマンドを使ってサーバーを追加します：

claude mcp add stitch \
  --transport http https://stitch.googleapis.com/mcp \
  --header "Authorization: Bearer <YOUR_ACCESS_TOKEN>" \
  --header "X-Goog-User-Project: <YOUR_PROJECT_ID>" \
  -s user

# -s user: saves to $HOME/.claude.json
# -s project: saves to ./.mcp.json

Gemini CLI

Gemini CLI 用の Stitch 拡張機能をインストールします：

gemini extensions install https://github.com/gemini-cli-extensions/stitch

利用可能なツール

認証が完了すると、AI アシスタントは Stitch ワークフローを管理するための以下のツールを利用できるようになります。完全なスキーマと詳細については、リファレンスを参照してください。

プロジェクト管理

  • create_project: UI の作業内容をまとめる新しいコンテナを作成します。
    • title (string): プロジェクトの表示名です。
  • get_project: 単一のプロジェクトの詳細を取得します。
    • name (string): プロジェクトのリソース名です。
  • list_projects: アクティブなすべてのデザインの一覧を取得します。
    • filter (string): 所有プロジェクトまたは共有プロジェクトでフィルタリングします。

画面管理

  • list_screens: 特定のプロジェクト内のすべての画面を取得します。
    • projectId (string): 調査対象のプロジェクトの ID です。
  • get_screen: 単一の画面の詳細を取得します。
    • name (string): 画面のリソース名です。

AI 生成

  • generate_screen_from_text: テキストプロンプトから新しいデザインを作成します。
    • projectId (string): プロジェクトの ID です。
    • prompt (string): デザインの生成に使用するテキストプロンプトです。
    • modelId (string): 使用するモデル（GEMINI_3_FLASH または GEMINI_3_1_PRO）。
  • edit_screens: テキストプロンプトを使って既存の画面を編集します。
    • projectId (string): プロジェクトの ID です。
    • selectedScreenIds (string[]): 編集する画面の ID。
    • prompt (string): 編集指示です。
  • generate_variants: 既存の画面のデザインバリアントを生成します。
    • projectId (string): プロジェクトの ID です。
    • selectedScreenIds (string[]): バリアントを生成する画面の ID。
    • prompt (string): バリアント生成を導くテキストです。
    • variantOptions (object): バリアントの設定（数、クリエイティブレンジ、アスペクト）。

デザインシステム

  • create_design_system: 基盤となるデザイントークンを持つ新しいデザインシステムを作成します。
    • designSystem (object): デザインシステムの設定（表示名、テーマ）。
    • projectId (string): 任意。デザインシステムを関連付けるプロジェクトです。
  • update_design_system: 既存のデザインシステムを更新します。
    • name (string): デザインシステムアセットのリソース名です。
    • projectId (string): プロジェクトの ID です。
    • designSystem (object): 更新後のデザインシステムの内容です。
  • list_design_systems: プロジェクトのすべてのデザインシステムを一覧表示します。
    • projectId (string): 任意。デザインシステムを一覧表示するプロジェクトの ID です。
  • apply_design_system: 1 つ以上の画面にデザインシステムを適用します。
    • projectId (string): プロジェクトの ID です。
    • selectedScreenInstances (array): 更新する画面インスタンス（get_project から取得）。
    • assetId (string): デザインシステムのアセット ID（list_design_systems から取得）。

利用規約

本製品を使用することで、以下に示すライセンスの利用規約に同意したものとみなされます：Google APIs Terms of Service。

原文: https://stitch.withgoogle.com/docs/mcp/setup/

本ページは Google Stitch 公式ドキュメントの翻訳です。原文の著作権は Google LLC に帰属します。本サイトは独立した非公式の翻訳です。

次へ →はじめに