Stitch MCP Auto

🚀 Stitch MCP Auto 🎨

1つのコマンドで、即座にUIを生成します。Google Stitch用の最も自動化されたMCPサーバーです。

English | 한국어

1つのコマンドで、即座にUIを生成します。 Google Stitch用の最も自動化されたMCPサーバーです。

💡 AIにこのリンクを共有してください: https://github.com/GreenSheep01201/stitch-mcp-auto

🚀 クイックスタート

Node.jsとgcloud CLIをインストールした後、以下のコマンドを実行します。

npx stitch-mcp-auto-setup

セットアップウィザードは以下の手順を行います。

1. http://localhost:51121でWebベースのセットアップページを開きます。
2. Googleログインをガイドします。
3. プロジェクトの選択または作成を支援します。
4. Stitch APIを有効にします。
5. 設定を保存します。

注意: MCPサーバーを直接起動する場合（npx stitch-mcp-autoまたはエディタを介して）、セットアップウィザードはhttp://localhost:8086で実行されます。

🤖 AIエージェントの注意（WSL環境）: WSLで実行する場合、ブラウザを自動的に開くことができません。ターミナルに表示されるURL（通常、setup.jsの場合はhttp://localhost:51121、MCPサーバー起動時はhttp://localhost:8086）をWindowsブラウザで開いてください。

# PowerShellで実行（WSLターミナルではない）
Start-Process "http://localhost:51121"
# 8086が表示される場合は
Start-Process "http://localhost:8086"

または、ユーザーにWindowsブラウザで表示されたURLを手動で開くように指示してください。

✨ 主な機能

なぜstitch-mcp-autoを選ぶべきか？

機能	stitch-mcp	stitch-mcp-auto
セットアップ時間	~30分 (手動)	~2分 (ウィザード)
gcloud設定	手動	自動
MCP登録	手動	自動
マルチCLIサポート	❌	✅ Claude/Gemini/Codex
AI画像生成	❌	✅ Gemini 3 Pro
カスタムコマンド	❌	✅ 7つのワークフロー

特徴

• 自動セットアップ - 1つのコマンドですべてをインストールします（gcloud認証、API有効化、MCP設定）
• マルチCLIサポート - Claude Code、Gemini CLI、Codex CLIで動作します
• 19のカスタムツール + Stitch Core - デザイン生成、アクセシビリティチェック、トークン、レスポンシブバリアント、およびデザインシステムエクスポート
• 7つのワークフローコマンド - /design, /design-system, /design-flow, /design-qa, /design-export, /generate-asset, /design-full
• 🎨 AI画像生成 - Gemini 3 Proを介してロゴ、アイコン、ヒーロー画像を生成します（Antigravity - Googleの実験的な画像生成APIを使用）
• 🎭 オーケストレーションモード - 1つのプロンプトでアセットを生成し、完全なUIデザインを完成させます
• 🌐 i18nサポート - セットアップウィザードとコンソールメッセージのシステム言語（英語/韓国語）を自動検出します

📦 インストール

前提条件（最初にインストールするもの）

1. Node.js (v18以上) のインストール

Windows

# wingetを使用（Windows 10/11）
winget install OpenJS.NodeJS.LTS

# またはインストーラーをダウンロード: https://nodejs.org/

macOS

# Homebrewを使用
brew install node@22

# またはインストーラーをダウンロード: https://nodejs.org/

Linux / WSL

# nvmを使用（推奨）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
source ~/.bashrc
nvm install 22
nvm use 22

# またはaptを使用（Ubuntu/Debian）
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt-get install -y nodejs

Node.jsのインストールを確認する:

node --version   # v18.x.x以上が表示されるはず
npm --version    # 9.x.x以上が表示されるはず

2. Google Cloud CLI (gcloud) のインストール

Windows

オプションA: インストーラー（推奨）

1. Google Cloud SDKからダウンロードします。
2. インストーラーを実行します（「Run gcloud init」オプションをチェックします）。
3. ターミナルを再起動します。

オプションB: PowerShell

(New-Object Net.WebClient).DownloadFile("https://dl.google.com/dl/cloudsdk/channels/rapid/GoogleCloudSDKInstaller.exe", "$env:TEMP\gcloud.exe")
Start-Process "$env:TEMP\gcloud.exe" -Wait
# インストール後にターミナルを再起動します

macOS

# Homebrewを使用（推奨）
brew install --cask google-cloud-sdk

# または直接インストール
curl https://sdk.cloud.google.com | bash
exec -l $SHELL

Linux / WSL

# ダウンロードしてインストール
curl -sSL https://sdk.cloud.google.com | bash -s -- --disable-prompts --install-dir=$HOME

# PATHに追加
echo 'export PATH="$HOME/google-cloud-sdk/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

gcloudのインストールを確認する:

gcloud --version
# Google Cloud SDK xxx.x.x が表示されるはず

💻 使用例

新しいプロジェクトの作成

Create a new Stitch project called "My App"

画面の生成

Generate a login page with email and password fields,
a "Forgot Password" link, and social login buttons for Google and Apple.
Use a modern gradient background.

特定のスタイルで生成

Create a dashboard screen with:
- Dark theme
- Sidebar navigation
- 4 stat cards at the top
- A line chart showing weekly data
- A recent activity list

多言語サポート

Create a Korean e-commerce product detail page with:
- Product image carousel
- Price and discount badge
- Size selector
- Add to cart button
- Customer reviews section

「デザイナーフロー」

複数の画面で一貫したUIを実現するには、以下の手順を行います。

1. 既存の画面からコンテキストを抽出する

   Get the design context from the Home Screen in project X
   

2. 同じスタイルで新しい画面を生成する

   Using that design context, generate a Settings screen
   with the same visual style
   

デザイントークンの使用

開発ワークフロー用にデザイントークンをエクスポートします。

Generate CSS variables from the dashboard screen's design

Create a Tailwind config based on the home screen

トレンドのデザイン生成

最新のUI/UXトレンドを自動的に適用します。

Create a pricing page with glassmorphism and gradient-mesh effects

Design a dashboard using bento-grid layout and dark mode

一括画面生成

一貫したスタイルで複数の画面を一度に作成します。

Generate a complete onboarding flow: welcome, features, signup, and confirmation screens

アクセシビリティチェック

デザインがアクセシビリティを満たしていることを確認します。

Check the login page for WCAG AA compliance

デザインシステムのエクスポート

開発者への引き渡し用にエクスポートします。

Export the complete design system from this project including tokens and components

AI画像生成 (v1.1.0で新機能)

AIを使用してデザインアセットを生成します。

/generate-asset logo "Eco-friendly organic food delivery service called GreenBite"

/generate-asset hero "Modern fintech app showing financial growth" --style gradient --ratio 16:9

/generate-asset icon "Shopping cart with checkmark" --style flat --colors "#4CAF50"

完全なデザインオーケストレーション (v1.1.0で新機能)

1つのプロンプトでデザインを完了させます - 自動的にアセットを生成し、UIを作成します。

/design-full "친환경 유기농 식품 쇼핑몰 메인 페이지. 녹색 테마, 신선한 느낌, 모던한 디자인"

/design-full "AI-powered project management tool landing page. Professional, blue gradient theme, with pricing section"

注意: オーケストレーションモードは自動的に以下のことを行います。

1. 必要なアセット（ロゴ、ヒーロー、アイコン）を分析します。
2. Gemini 3 Proを使用して各アセットを生成します（Antigravity認証が必要）。
3. Stitch APIで完全なUI画面を作成します。
4. すべてのアセットと最終的なUIを1つのレスポンスで返します。

Antigravity認証がない場合: UI画面は依然として生成されますが、カスタム画像アセットは含まれません。

📚 ドキュメント

AIエージェントのクイックスタート（半自動）

このリポジトリは、いくつかの避けられない手動手順（OAuthログイン）を伴う半自動セットアップをサポートしています。

チェックリスト（エージェントに優しい）:

1. セットアップを実行する: npm run setup (または npx -p stitch-mcp-auto stitch-mcp-auto-setup)
2. ターミナルに表示されるURLを開く（通常はhttp://localhost:51121）
3. ブラウザでGoogleログインを完了する（gcloud + Stitch API有効化）
4. ⚠️ 重要: MCP登録を確認する（以下を参照）
5. サーバーを起動する: npm start またはエディタで起動する

手動のみの手順:

• ブラウザのOAuth同意（Googleログイン）
• WSLのブラウザを開く（URLを手動で開く必要があります）

環境固有のコマンド:

• Windows (PowerShell):
  • セットアップURLを開く: Start-Process "http://localhost:51121" (または http://localhost:8086)
• macOS:
  • セットアップURLを開く: open "http://localhost:51121" (または http://localhost:8086)
• Linux:
  • セットアップURLを開く: xdg-open "http://localhost:51121" (または http://localhost:8086)
• WSL (Windowsホスト):
  • Windows PowerShellで実行する: Start-Process "http://localhost:51121"

⚠️ インストール後のMCP確認（必須）

セットアップが完了した後、必ずMCPサーバーが登録されていることを確認してください。

# Claude Code
claude mcp list | grep stitch

# Gemini CLI
gemini mcp list | grep stitch

# Codex CLI
codex mcp list | grep stitch

stitch がリストにない場合、手動で登録してください。

CLI	手動登録コマンド
Claude Code	claude mcp add -e GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID -s user stitch -- npx -y stitch-mcp-auto
Gemini CLI	gemini mcp add stitch -- npx -y stitch-mcp-auto --env GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID
Codex CLI	codex mcp add stitch -- npx -y stitch-mcp-auto --env GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID

なぜ確認が必要なのか: セットアップウィザードは直接設定ファイル（~/.claude.json, ~/.gemini/settings.json, ~/.codex/config.toml）に書き込みますが、確認することで設定が正しいことを保証します。常に確認して、「MCPサーバーが見つかりません」というエラーを避けてください。

その他の確認（オプション）:

• node auth.js --status (トークンとプロジェクトのステータスを表示)
• npm start (サーバーが起動し、「Ready」と表示される)

手動インストール（代替方法）

ステップ1: 自動セットアップを実行する

npx -p stitch-mcp-auto stitch-mcp-auto-setup

または、リポジトリをクローンした場合は、以下のコマンドを実行します。

node setup.js

セットアッププロセス

1. ウェルカムページ - 「Login with Google」ボタンをクリックします。
2. Googleログイン - 新しいブラウザウィンドウが認証用に開きます。
   • ログイン後、「Connection refused」ページが表示されることがあります - それを閉じてください
   • セットアップページは自動的にログインを検出します。
3. プロジェクト選択 - 既存のプロジェクトを選択するか、新しいプロジェクトを作成します。
4. API有効化 - ボタンをクリックしてStitch APIを有効にします。
   • 有効化を待ちます（数秒かかることがあります）。
5. 完了 - MCP設定をエディタにコピーします。

⚠️ WSLユーザー - 重要: WSLではブラウザを直接開くことができません。セットアップウィザードが起動したときに、以下の手順を行ってください。

1. URL http://localhost:51121 をコピーします。
2. Windowsブラウザ（Chrome、Edgeなど）で手動で開きます。
3. またはPowerShellで実行します: Start-Process "http://localhost:51121"

認証は、WSLがWindowsとlocalhostを共有しているため機能します。

ステップ3: MCPクライアントを設定する

セットアップが完了した後、MCPクライアントに設定を追加します。

Claude Desktop

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "stitch-mcp-auto"],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "YOUR_PROJECT_ID"
      }
    }
  }
}

Claude Code

🌐 方法1: CLIコマンド（推奨）

セットアップウィザードは自動的に ~/.claude.json に書き込みます。 CLIを介して手動で追加するには、以下のコマンドを実行します。

claude mcp add -e GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID -s user stitch -- npx -y stitch-mcp-auto

または、直接 ~/.claude.json を編集します。

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "stitch-mcp-auto"],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "YOUR_PROJECT_ID"
      }
    }
  }
}

📁 方法2: プロジェクトごとの設定

プロジェクトルートに .mcp.json を作成します。

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "stitch-mcp-auto"],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "YOUR_PROJECT_ID"
      }
    }
  }
}

Gemini CLI

🌐 方法1: CLIコマンド（推奨）

gemini mcp add stitch -- npx -y stitch-mcp-auto --env GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID

または、直接 ~/.gemini/settings.json を編集します。

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "stitch-mcp-auto"],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "YOUR_PROJECT_ID"
      }
    }
  }
}

Codex CLI

🌐 方法1: CLIコマンド（推奨）

codex mcp add stitch -- npx -y stitch-mcp-auto --env GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID

または、直接 ~/.codex/config.toml を編集します。

[mcp_servers.stitch]
command = "npx"
args = ["-y", "stitch-mcp-auto"]

[mcp_servers.stitch.env]
GOOGLE_CLOUD_PROJECT = "YOUR_PROJECT_ID"

Cursor

Settings > MCP > Add New Server に移動し、以下を追加します。

• コマンド: npx
• 引数: -y stitch-mcp-auto
• 環境: GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID

オプション: GOOGLE_CLOUD_PROJECT は、Stitch画像のフォールバックと auth.js --status でのみ使用されます。セットアップウィザードはアクティブなプロジェクトを ~/.stitch-mcp-auto/config.json に保存し、ワークスペースツールは .stitch-project.json を現在のフォルダに保存します。

利用可能なツール

🔄 自動プロジェクト管理 (新機能)

手動でのprojectIdの渡し方はもう必要ありません！ サーバーが自動的にプロジェクトコンテキストを管理します。

1. 自動検出: generate_screen_from_text などのツールを projectId なしで呼び出すと、自動的にワークスペースプロジェクトが使用されます。
2. 自動保存: create_project を実行すると、自動的に現在のフォルダの .stitch-project.json に保存されます。
3. セッションの継続性: 後で同じフォルダに戻ると、プロジェクトが自動的に読み込まれます。

動作原理:

┌─────────────────────────────────────────────────────────────┐
│  Tool called without projectId                              │
│                      ↓                                      │
│  1. Check active session project                            │
│  2. If none → Load from .stitch-project.json                │
│  3. If none → Return "PROJECT_REQUIRED" with options        │
│                      ↓                                      │
│  User creates/selects project → Auto-saved to workspace     │
└─────────────────────────────────────────────────────────────┘

手動のワークスペースツール（オプション）:

ツール	説明
get_workspace_project	🔍 現在のワークスペースプロジェクトのステータスを確認します。
set_workspace_project	💾 ワークスペースにプロジェクトを手動で関連付けます。
clear_workspace_project	🗑️ ワークスペースのプロジェクト関連付けをクリアします。

Core Stitch Tools (API + 便利なラッパー)

ツール	説明
create_project	新しいStitchプロジェクトを作成します。プロジェクトは、UIデザインとフロントエンドコードのコンテナです。
get_project	プロジェクト名を使用して、特定のStitchプロジェクトの詳細を取得します。
list_projects	ユーザーがアクセス可能なすべてのStitchプロジェクトをリストします。デフォルトでは、ユーザーが所有するプロジェクトがリストされます。
list_screens	特定のStitchプロジェクト内のすべての画面をリストします。
get_screen	プロジェクト内の特定の画面の詳細を取得します。
generate_screen_from_text	テキストプロンプトからプロジェクト内に新しい画面を生成します。
fetch_screen_code	画面の実際のHTML/コード内容を取得します。
fetch_screen_image	画面のスクリーンショット/プレビュー画像を取得します。

🎨 プロのウェブデザインツール

デザインの一貫性ツール

ツール	説明
extract_design_context	既存の画面からデザインDNA（色、タイポグラフィ、スペーシング、コンポーネント）を抽出し、複数の画面で視覚的な一貫性を維持します。
apply_design_context	以前に抽出したデザインコンテキストを使用して新しい画面を生成し、視覚的な一貫性を維持します。
compare_designs	2つの画面を比較して、デザインの違い、不一致を特定し、調和を提案します。

生産性ツール

ツール	説明
generate_design_tokens	画面のデザインからデザイントークン（CSS変数、Tailwind設定、SCSS、JSON）を生成します。
generate_responsive_variant	既存の画面のレスポンシブバリアントを異なるデバイスタイプ用に作成します。
batch_generate_screens	一貫したデザインで複数の関連する画面を一度に生成します。

品質と分析ツール

ツール	説明
analyze_accessibility	WCAG 2.1アクセシビリティコンプライアンスに関するアクション可能な推奨事項を含む画面を分析します。
extract_components	再利用可能なUIコンポーネントパターン（ボタン、カード、フォーム）とそのスタイルを抽出します。

デザイン強化ツール

ツール	説明
suggest_trending_design	2024 - 2025年のUIトレンド（グラスモーフィズム、ベントグリッド、グラデーションメッシュなど）を画面生成に適用します。
generate_style_guide	既存のデザインから包括的なスタイルガイド/デザインドキュメントを生成します。
export_design_system	完全なデザインシステムパッケージ（トークン、コンポーネント、ドキュメント）を開発者への引き渡し用にエクスポートします。

🎨 AI画像生成ツール (v1.1.0)

これらのツールには、異なる認証要件があります。

ツール	必要な認証	説明
generate_design_asset	Antigravity	Geminiモデルを使用してデザインアセット（ロゴ、アイコン、イラスト、ヒーロー、ワイヤーフレーム、背景、パターン）を生成します。Antigravity認証が必要です。 モデル選択（gemini-3-pro、gemini-2.5-pro）と強制認証をサポートします。
orchestrate_design	Stitch + Antigravity	完全なオーケストレーション: 自動的にアセット（ロゴ、アイコン、ヒーロー）を生成し、次に完全なUIを作成します。Stitchのみのユーザーは、カスタムアセットなしでUIページを生成することができます。
check_antigravity_auth	なし	画像生成機能のAntigravity OAuth認証ステータスを確認します。

画像生成に対応しているモデル

モデル	状態	画像生成	説明
gemini-3-pro	✅ 利用可能	✅ 対応	デフォルト。 画像生成機能を備えた最新のGemini 3 Proモデル
gemini-2.5-pro	✅ 利用可能	✅ 対応	画像生成機能を備えたGemini 2.5 Proモデル

参照: ANTIGRAVITY-MODELS.md (EN) / ANTIGRAVITY-MODELS.ko.md (KO) を参照して、完全なモデルリスト、思考バリアント、およびエンドポイントの詳細を確認してください。

💡 モデル選択: generate_design_asset を呼び出すときにモデルを指定することができます。

{
  "assetType": "logo",
  "prompt": "Modern tech company logo",
  "model": "gemini-3-pro"
}

主要パラメータ (generate_design_asset):

• assetType: logo, icon, illustration, hero, wireframe, background, pattern
• aspectRatio: 1:1, 16:9, 9:16, 4:3, 3:4
• saveToFile: デフォルトで true（現在のディレクトリに保存）
• forceAntigravityAuth: ブラウザログインをトリガーするには true

📋 役割の分離:

• Stitch API (gcloud認証): UIページ/画面の生成 - すべてのユーザーが利用できます。
• Antigravity OAuth: 画像アセットの生成（ロゴ、アイコン、ヒーロー） - 個別の認証が必要です。

Stitchのみのユーザーは、依然として generate_screen_from_text を使用して完全なUIページを作成することができます。Antigravityは、カスタムAI生成アセットを追加することでこれを拡張します。

🔲 背景削除 (新機能)

generate_design_asset は、透明なアセットの自動背景削除をサポートしています。

パラメータ	タイプ	デフォルト	説明
removeBackground	boolean	false	自動背景削除を有効にします。
backgroundRemovalMode	"white" | "auto"	"white"	white: 白色背景を削除します。 auto: 単色を自動検出します。
backgroundThreshold	number	240	検出のしきい値（0 - 255）。値が高いほど、より積極的に削除されます。

例:

{
  "assetType": "logo",
  "prompt": "Modern tech company logo with abstract shapes",
  "removeBackground": true,
  "backgroundRemovalMode": "white",
  "backgroundThreshold": 240
}

これにより、透明なPNGが生成され、以下に最適です。

• ロゴ - 色付きの背景に配置しても白い枠が表示されません。
• アイコン - UIデザインにきれいに統合されます。
• イラスト - 任意の背景にシームレスに重ねることができます。

MCPプロンプト (自動検出)

MCPプロンプトは、サーバーが接続されているときに自動的に利用可能です - インストールは必要ありません。これらは、あなたのMCPクライアントのプロンプトリストに表示されます。

プロンプト	説明
/stitch:design	自動スタイル検出によるスマートUIデザイン生成
/stitch:design-system	デザインの一貫性を維持しながら新しい画面を作成
/stitch:design-flow	完全なユーザーフロー用の複数の画面を生成
/stitch:design-qa	アクセシビリティ（WCAG 2.1）とデザイン品質のチェック
/stitch:design-export	開発者への引き渡し用にデザインシステムパッケージをエクスポート

Claude Codeでの使用例:

/stitch:design login page with dark mode
/stitch:design-system settings page
/stitch:design-flow onboarding: welcome -> signup -> complete
/stitch:design-qa all --level AA
/stitch:design-export --token_format tailwind

注意: MCPプロンプトには、複雑なデザインタスクを自動的にガイドする詳細なワークフロー指示が含まれています。

カスタムコマンド (マルチCLIサポート)

npx -p stitch-mcp-auto stitch-mcp-auto-setup を実行すると、セットアップウィザードはすべての主要なAI CLIツール - Claude Code、Gemini CLI、およびCodex CLI - のカスタムコマンドを自動的にインストールします。

サポートされているCLI

CLI	コマンド形式	インストールパス
Claude Code	/design	~/.claude/commands/
Gemini CLI	/stitch:design	~/.gemini/commands/stitch/
Codex CLI	$stitch-design	~/.codex/skills/stitch/

利用可能なコマンド

コマンド	Claude Code	Gemini CLI	Codex CLI	説明
design	/design	/stitch:design	$stitch-design	スマートUIデザイン生成
design-system	/design-system	/stitch:design-system	$stitch-design-system	デザインの一貫性を維持
design-flow	/design-flow	/stitch:design-flow	$stitch-design-flow	ユーザーフローを生成
design-qa	/design-qa	/stitch:design-qa	$stitch-design-qa	アクセシビリティと品質のチェック
design-export	/design-export	/stitch:design-export	$stitch-design-export	デザインシステムをエクスポート
generate-asset	/generate-asset	/stitch:generate-asset	$stitch-generate-asset	AI画像生成 (v1.1.0)
design-full	/design-full	/stitch:design-full	$stitch-design-full	完全なオーケストレーションモード (v1.1.0)

CLIの使用例

Claude Code:

/design login page dark mode
/design-system settings page
/design-flow onboarding: welcome -> signup -> complete

Gemini CLI:

/stitch:design login page dark mode
/stitch:design-system settings page
/stitch:design-flow onboarding: welcome -> signup -> complete

Codex CLI:

$stitch-design login page dark mode
$stitch-design-system settings page
$stitch-design-flow onboarding: welcome -> signup -> complete

コマンドのインストール場所

コマンドは、すべてのCLIディレクトリに自動的にインストールされます。

~/.claude/commands/          # Claude Code (Markdown)
├── design.md
├── design-system.md
├── design-flow.md
├── design-qa.md
├── design-export.md
├── generate-asset.md        # NEW in v1.1.0
└── design-full.md           # NEW in v1.1.0

~/.gemini/commands/stitch/   # Gemini CLI (TOML)
├── design.toml
├── design-system.toml
├── design-flow.toml
├── design-qa.toml
├── design-export.toml
├── generate-asset.toml      # NEW in v1.1.0
└── design-full.toml         # NEW in v1.1.0

~/.codex/skills/stitch/      # Codex CLI (Skills)
├── design.md
├── design-system.md
├── design-flow.md
├── design-qa.md
├── design-export.md
├── generate-asset.md        # NEW in v1.1.0
└── design-full.md           # NEW in v1.1.0

🔧 技術詳細

トラブルシューティング

"gcloud: command not found"

Linux/macOS/WSL:

export PATH="$HOME/google-cloud-sdk/bin:$PATH"
echo 'export PATH="$HOME/google-cloud-sdk/bin:$PATH"' >> ~/.bashrc

Windows: gcloudをインストールした後、ターミナルを再起動します。

"Stitch API has not been used in project" エラー

APIを手動で有効にします。

gcloud services enable stitch.googleapis.com --project=YOUR_PROJECT_ID

または、以下のURLを訪問します。https://console.cloud.google.com/apis/library/stitch.googleapis.com?project=YOUR_PROJECT_ID

トークンの有効期限切れ / 認証エラー

認証を更新します。

gcloud auth login

または、セットアップを再実行します。

npx -p stitch-mcp-auto stitch-mcp-auto-setup

Googleログイン後に "Connection Refused"

これは正常な動作です。Google認証が完了すると、ブラウザは localhost:8085 にリダイレクトされます。これはgcloudが使用する一時的なコールバックサーバーです。認証が完了すると、このサーバーは閉じられます。

解決策: このタブを閉じて、セットアップページに戻ってください。自動的にログインが検出されます。

ブラウザが自動的に開かない (WSL)

WSLでブラウザが自動的に開かない場合、以下の手順を行ってください。

1. ターミナルに表示されるURLをコピーします。
2. Windowsブラウザに貼り付けて手動で開きます。
3. ログインを完了します。
4. セットアップページに戻ります。

完全なリセット

何かがうまくいかない場合は、すべてをリセットします。

# stitch-mcp-autoの設定を削除
rm -rf ~/.stitch-mcp-auto

# gcloudの資格情報を取り消す
gcloud auth revoke --all

# セットアップを再実行
npx -p stitch-mcp-auto stitch-mcp-auto-setup

アーキテクチャ

┌──────────────────────────────────────────────────────────────┐
│                        User Request                          │
│              "Create a login page with..."                   │
│              "/design-full eco-friendly shop"                │
└──────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌──────────────────────────────────────────────────────────────┐
│                    AI Editor (Claude/Cursor)                 │
│                         MCP Client                           │
└──────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌──────────────────────────────────────────────────────────────┐
│                     stitch-mcp-auto                          │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐           │
│  │ setup.js    │  │ index.js    │  │ auth.js     │           │
│  │ (Auto Setup)│  │ (MCP Server)│  │ (OAuth)     │           │
│  └─────────────┘  └─────────────┘  └─────────────┘           │
│                          │                                   │
│           ┌──────────────┼──────────────┐                    │
│           ▼              ▼              ▼                    │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐           │
│  │ Design Tools│  │ Image Gen   │  │ Orchestrate │           │
│  │ (UI + QA)   │  │ (Antigrav.) │  │ (assets+UI) │           │
│  └─────────────┘  └─────────────┘  └─────────────┘           │
└──────────────────────────────────────────────────────────────┘
                              │
            ┌─────────────────┼─────────────────┐
            ▼                                   ▼
┌─────────────────────────────┐   ┌─────────────────────────────┐
│   Google Cloud Platform     │   │   Antigravity (Optional)    │
│  ┌─────────┐  ┌─────────┐   │   │  ┌─────────────────────┐    │
│  │ gcloud  │  │ Stitch  │   │   │  │ Gemini 3 Pro        │    │
│  │ CLI     │  │ API     │   │   │  │ (Image Generation)  │    │
│  │ (Auth)  │  │ (UI Gen)│   │   │  │ FREE via OAuth      │    │
│  └─────────┘  └─────────┘   │   │  └─────────────────────┘    │
└─────────────────────────────┘   └─────────────────────────────┘

📋 役割の分離:

• Stitch API (gcloud): すべてのUIページ/画面の生成を処理します。
• Antigravity OAuth: 画像アセットの生成（ロゴ、アイコン、ヒーロー画像）を処理します。

Antigravity認証がない場合、generate_design_asset はエラーを返します。UIページにはStitchの generate_screen_from_text を使用してください。

ファイル構造

stitch-mcp-auto/
├── index.js               # メインのMCPサーバー (Antigravity OAuth付き)
├── setup.js               # Webベースの自動セットアップウィザード
├── auth.js                # OAuthヘルパーユーティリティ
├── package.json           # 依存関係とスクリプト
├── README.md              # ドキュメント (EN)
├── README.ko.md           # ドキュメント (KO)
├── ANTIGRAVITY-MODELS.md  # Antigravityモデルリスト (EN)
├── ANTIGRAVITY-MODELS.ko.md # Antigravityモデルリスト (KO)
├── AGENTS.md              # リポジトリガイドライン
└── skills/                # コマンドソース (Claude/Gemini/Codex)
    ├── design.md
    ├── design-system.md
    ├── design-flow.md
    ├── design-qa.md
    ├── design-export.md
    ├── generate-asset.md    # NEW: AI画像生成
    └── design-full.md       # NEW: 完全なオーケストレーション

設定ファイル

ファイル/ディレクトリ	場所	目的
tokens.json	~/.stitch-mcp-auto/	OAuthアクセストークン (gcloud)
antigravity_tokens.json	~/.stitch-mcp-auto/	Antigravity OAuthトークン (オプション)
config.json	~/.stitch-mcp-auto/	プロジェクト設定
.stitch-project.json	ワークスペースルート（AI CLIを実行する場所）	このワークスペースの自動保存されたプロジェクトマッピング
MCP設定
.claude.json	~/	Claude Code MCPサーバー (ユーザースコープ)
settings.json	~/.gemini/	Gemini CLI MCPサーバー
config.toml	~/.codex/	Codex CLI MCPサーバー (TOML形式)
コマンド
commands/	~/.claude/commands/	Claude Codeコマンド (自動インストール)
commands/stitch/	~/.gemini/commands/stitch/	Gemini CLIコマンド (自動インストール)
skills/stitch/	~/.codex/skills/stitch/	Codex CLIスキル (自動インストール)

スクリプト

コマンド	説明
npm start	MCPサーバーを起動します (node index.js)
npm run setup	セットアップウィザードを実行します (node setup.js, http://localhost:51121 を開きます)
`npm run auth -- --status	--login
npx -p stitch-mcp-auto stitch-mcp-auto-setup	対話型セットアップウィザードを実行します
npx stitch-mcp-auto	MCPサーバーを起動します (エディタで使用)
node auth.js --status	認証ステータスを確認します
node auth.js --login	手動でログインします
node auth.js --logout	保存されたトークンをクリアします
node auth.js --setup	OAuthセットアップガイドを表示します
node auth.js --project <id>	プロジェクトIDを保存します (オプション)

要件

• Node.js: 18.0.0以上
• Google Cloud CLI: 最新バージョン
• Googleアカウント: Google Cloud Consoleにアクセスできるもの
• MCPクライアント: Claude Desktop、Claude Code、Cursor、または互換性のあるエディタ

セキュリティに関する注意

このプロジェクトは、認証にGoogleの公開OAuthクライアントを使用しています。ソースコードに表示されるクライアントIDは意図的に公開されています（OAuth 2.0仕様によるデスクトップアプリタイプ）。あなたのトークンは ~/.stitch-mcp-auto/ にローカルに保存され、第三者に送信されることはありません。

📄 ライセンス

Apache 2.0 - オープンソースで無料で使用できます。

クレジット

• 作者: GreenSheep01201 (Wongil Seo)
• ベースになったもの: stitch-mcp by Kargatharaakash
• コンセプト: MCP (Model Context Protocol) ファイルスティッチングシステムの自動化実装

サポート

• 問題報告: GitHub Issues
• ドキュメント: Google Stitch API

---

Built with love for the AI community