stitch-setup

stitch-kit セットアップガイド

ユーザーが次の2つのセットアップ作業を行えるように案内します。

1. Stitch MCP サーバー — AI クライアントを Google Stitch のリモート生成 API に接続します
2. stitch-kit プラグイン — Stitch のワークフローをオーケストレーションするスキルをインストールします

---

このスキルを使用するタイミング

• ユーザーが「セットアップ方法を教えて」「動作しない」「Stitch が使えない」と言った場合
• list_tools の実行後、エージェントが Stitch MCP ツールを見つけられない場合
• 新しい環境で初めてセットアップする場合

---

ステップ 1：インストール済みのものを確認する

list_tools を実行する（またはツール一覧を確認する）。次のいずれかがあるか確認します。

• create_project
• generate_screen_from_text
• get_screen

見つかった場合： Stitch MCP は動作しています。ステップ 4（プラグインのインストール）に進んでください。 見つからない場合： 以下の MCP セットアップに進んでください。

---

ステップ 2：Stitch API キーを取得する

Stitch MCP はリモート HTTP サーバーです。お使いのマシン上ではなく、クラウド上の stitch.googleapis.com で稼働しています。認証には API キーが必要です。

1. stitch.withgoogle.com/settings にアクセスします
2. API Keys セクションまでスクロールします
3. "Create API Key" をクリックします
4. キーをコピーします。次のステップで必要になります

API キーを公開リポジトリに絶対にコミットしないでください。 安全に保管してください。

---

ステップ 3：Stitch MCP を設定する

Claude Code

CLI を使用します（推奨）。

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp \
  --header "X-Goog-Api-Key: YOUR-API-KEY" -s user

または、手動で ~/.claude/settings.json に追加します。

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

Codex CLI

~/.codex/config.toml に追加します。

[mcp_servers.stitch]
url = "https://stitch.googleapis.com/mcp"

[mcp_servers.stitch.headers]
X-Goog-Api-Key = "YOUR-API-KEY"

Cursor

.cursor/mcp.json を作成または編集します。

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

VS Code

コマンドパレットを開き、→「MCP: Add Server」→「HTTP」→ https://stitch.googleapis.com/mcp → 名前：「stitch」の順に選択します。次に、生成された mcp.json を編集してヘッダーを追加します。

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

クイックインストール（全プラットフォーム）

または、NPX インストーラーを使用します。API キーの入力を求められ、すべての設定が行われます。

npx @booplex/stitch-kit

手動での確認

追加後、クライアントを再起動して list_tools を実行します。create_project、generate_screen_from_text、get_screen などのツールが表示されます。

---

ステップ 4：stitch-kit プラグインをインストールする（Claude Code）

/plugin marketplace add https://github.com/gabelul/stitch-kit.git
/plugin install stitch-kit@stitch-kit

1つのコマンドで34個すべてのスキルをインストールできます。stitch-kit エージェントも含まれており、再起動後に自動的に表示されます。

---

ステップ 5：セットアップ全体を確認する

オーケストレーターを実行して、すべてが動作することを確認します。

"Use Stitch to design a simple login screen"

想定される動作：

1. stitch-orchestrator が起動します
2. list_tools を実行し、Stitch MCP ツールを見つけます
3. Design Spec を生成します
4. create_project を使ってプロジェクトを作成します
5. generate_screen_from_text を使って画面を生成します
6. get_screen を使って画面を取得します
7. 変換先のフレームワークを尋ねます

ここまで完了すれば、セットアップは完了です。

---

トラブルシューティング

症状	考えられる原因	対処方法
list_tools に Stitch ツールが表示されない	MCP が設定されていない、またはクライアントが再起動されていない	ステップ 3 をやり直し、クライアントを再起動します
「Unauthenticated」または 401 エラー	API キーが無効または期限切れ	stitch.withgoogle.com/settings で新しいキーを生成します
create_project が 403 で失敗する	アカウントに Stitch へのアクセス権がない	stitch.withgoogle.com にアクセスして、アクセスをリクエストします
generate_screen_from_text が空の結果を返す	プロンプトが不適切、またはプロジェクト ID の形式が不正	stitch-mcp-generate-screen-from-text スキルを使用します。ID の形式に関するルールが含まれています
get_screen が 404 を返す	ID の形式が不正	projectId と screenId は数字のみである必要があります — projects/ プレフィックスは付けません
生成された HTML をダウンロードできない	GCS URL の有効期限切れ、またはリダイレクトが必要	bash scripts/fetch-stitch.sh "[url]" "temp/output.html" を使用します
プラグインが起動しない	インストールコマンドまたはリポジトリ URL が不正	@stitch-pro や @stitch-skills ではなく、@stitch-kit を使用したことを確認します

---

ネットワーク要件

Stitch MCP は次の宛先にアウトバウンドリクエストを送信します。

• stitch.googleapis.com — リモート MCP サーバー
• storage.googleapis.com — ファイルのダウンロード（HTML、スクリーンショット）
• accounts.google.com — OAuth（API キーの代わりに OAuth を使用する場合）

社内プロキシまたは VPN を使用している場合は、これらのドメインへのアクセスが許可されていることを確認してください。

---

オフライン／MCP なしモード

Stitch MCP を設定できない場合でも、オーケストレーターはプロンプトのみのモードで動作します。

• ステップ 1～3 は通常どおり実行されます（仕様書の生成、プロンプトの組み立て）
• 画面を生成する代わりに、そのままコピーできる Stitch プロンプトを出力します
• そのプロンプトを stitch.withgoogle.com に手動で貼り付けます
• その後も、ダウンロードした HTML に変換スキルを使用できます

---

認証方法の代替案

OAuth（制限された環境向け）

API キーをディスクに保存できない場合、Stitch は Google Cloud 経由の OAuth をサポートしています。

gcloud auth login
gcloud auth application-default login
gcloud config set project YOUR-PROJECT-ID
gcloud beta services mcp enable stitch.googleapis.com --project=YOUR-PROJECT-ID

その後、API キーの代わりに Bearer トークン認証を使用します。詳しくはOAuth の完全ガイドをご覧ください。

注：OAuth トークンの有効期限は 1 時間で、手動で更新する必要があります。ほとんどのユーザーには API キーの方が簡単です。

---

参考資料

• Stitch MCP の公式セットアップガイド：https://stitch.withgoogle.com/docs/mcp/setup
• プラグインリポジトリ：https://github.com/gabelul/stitch-kit
• スキルの索引：docs/skills-index.md
• MCP ツールのリファレンス：docs/mcp-naming-convention.md