MCP 設定指南

透過 Model Context Protocol 將 Stitch 接入你的 AI 代理程式

Stitch Model Context Protocol（MCP）伺服器讓你慣用的 AI 工具（例如 Cursor、Antigravity 或 Gemini CLI）直接與你的 Stitch 專案互動。

了解遠端 MCP

你使用的大多數 MCP 伺服器都是本機的：它們會讀取你硬碟上的檔案，或在你電腦上執行指令碼。Stitch 則是遠端 MCP 伺服器，它位於雲端。

由於它位於遠端，因此需要一次安全的「握手」，以確保代表你行動的 AI 代理程式確實有權限修改你的設計。

API 金鑰 vs OAuth

Stitch MCP 伺服器支援兩種身分驗證方式：

  1. API 金鑰： 在 Stitch 設定頁面產生的持久金鑰。
  2. OAuth： 以瀏覽器為基礎的身分驗證流程，適用於不支援手動輸入金鑰的特定 AI 用戶端，或在禁止將持久密鑰儲存到磁碟的環境中使用。

何時該用哪一種

大多數情況下，API 金鑰是最簡單的做法，也是讓工具最快連線成功的方式。不過在特定情況下，OAuth 值得你多花一分鐘設定。

情境適合使用 API 金鑰，如果……適合使用 OAuth，如果……
用戶端支援你的工具（例如 Cursor、Antigravity 或 Gemini CLI）接受在設定檔或環境變數中填入 API 金鑰。你的工具（例如網頁式工具）要求「登入」流程，不提供手動輸入金鑰的方式。
儲存原則你在私人電腦上，將密鑰儲存到本機 .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 中，點擊右上角的三個點，選擇 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」。選擇 HTTP 以新增遠端 MCP 伺服器。輸入 Stitch MCP 網址 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 通訊：

  1. 專案 ID： 存放你工作內容的容器。
  2. 存取權杖： 用於驗證專案身分驗證的短期金鑰。

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. 雙層身分驗證

你需要登入兩次：一次以你本人（使用者）的身分，另一次以應用程式（你本機的程式碼/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）

最後，我們會產生存取權杖，並儲存到 .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. 讓權杖保持最新

注意： 存取權杖是暫時性的（通常效期為 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] 存取權杖過期後，你需要每小時手動更新設定檔中的 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 中，點擊右上角的三個點，選擇 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」。選擇 HTTP 以新增遠端 MCP 伺服器。輸入 Stitch MCP 網址 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：將設計系統套用到一或多個螢幕。
    • 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 所有。本站為獨立第三方翻譯，與 Google 無關聯。

下一頁 →快速上手