mcpField
S
stitch::upload-to-stitch

stitch::upload-to-stitch

github.com/google-labs-codeデザイン・UI8.6k10.1k 回インストール10 週間前に更新
リポジトリ

stitch::upload-to-stitch について

MCPの出力制限で直接転送しにくいローカルファイルを、スクリプト経由でStitchプロジェクトにアップロードするスキルです。送信前にユーザーの承認が必要です。

主な機能

  1. 01画像、HTML、Markdownのアップロード
  2. 02ローカルファイルをHTTPで直接送信
  3. 03拡張子に基づくMIMEタイプ判定
  4. 04画面タイトルと生成元の指定

活用シーン

  1. 01ローカルのデザイン素材をStitchに追加
  2. 02抽出したウェブページのHTMLをアップロード
  3. 03大きなファイルのBase64出力制限を回避

MCP 対応

Stitch MCPの`list_projects`でプロジェクトを特定し、MCP設定からAPIキーを取得します。実際のファイル転送はスクリプトがHTTPで行います。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::upload-to-stitch

インストール後、Claude Code で/stitch::upload-to-stitchを入力して読み込まれたか確認します。

同梱ファイルscripts/upload_to_stitch.py

詳細

Stitch へのアップロード

付属のアップロードスクリプトを使用して、ローカルのアセット（画像、モックアップ、HTML、Markdown ファイル）を Stitch プロジェクトにアップロードします。このスクリプトは、MCP ツールの Base64 出力トークン制限を回避します。

メモ

小さなファイルでも Base64 エンコードするとモデルの出力トークン制限（約 16K トークン）を超えるため、AI モデルは MCP ツール経由でファイルを直接アップロードできません。このスクリプトはファイルを読み込み、HTTP 経由で直接送信します。

手順

1. 対象プロジェクトを特定する

list_projects を使用して、正しい projectId を見つけます。

2. API キーを取得する

アクティブな MCP サーバー設定ファイルを見つけ、API キーを取得します。

  • Antigravity：.gemini/antigravity/mcp_config.json または .gemini/jetski/mcp_config.json
  • Gemini CLI：~/.gemini/settings.json または ~/.gemini/extensions/Stitch/gemini-extension.json
  • Claude Code：~/.claude.json

以下を取得します。

  • API キー：X-Goog-Api-Key ヘッダーまたは認証引数から取得します
  • MCP URL（任意）：httpUrl またはエンドポイント引数から取得します（デフォルトは https://stitch.googleapis.com）

重要

これらの場所で API キーが見つからない場合、またはこれらのファイルにアクセスできない場合は、Stitch API キーをユーザーに提示してもらう必要があります。有効な API キーがないまま作業を進めてはいけません。

3. アップロードスクリプトを実行する

警告

チェックポイント — ユーザーの確認が必要です。 アップロードスクリプトを実行する前に、アップロードするファイル（パス、サイズ、種類）をユーザーに提示し、明示的な承認を待つ必要があります。ユーザーの確認を得るまで、アップロードスクリプトを実行してはいけません。

run_command を使用して Python スクリプトを実行します。

python3 <SKILL_DIR>/scripts/upload_to_stitch.py \
  --project-id <PROJECT_ID> \
  --file-path <PATH_TO_FILE> \
  --api-key <API_KEY> \
  [--api-url <STITCH_API_URL>] \
  [--title <SCREEN_TITLE>] \
  [--generated-by <GENERATED_BY>]

ヒント

macOS／SSL 証明書のトラブルシューティング： ssl.SSLCertVerificationError: [SSL: CERTIFICATE_VERIFY_FAILED] unable to get local issuer certificate が発生してアップロードに失敗する場合、Python のインストール環境でルート証明機関が設定されていないことを意味します。

スクリプトは、Python 環境に certifi パッケージがインストールされていれば、自動的にこれを使用して CA バンドルを読み込もうとします。certifi がインストールされていない場合は、インストールする（pip install certifi）か、スクリプトの実行時に SSL_CERT_FILE 環境変数を手動で指定できます。

SSL_CERT_FILE=$(python3 -c "import certifi; print(certifi.where())") python3 <SKILL_DIR>/scripts/upload_to_stitch.py \
  --project-id <PROJECT_ID> \
  --file-path <PATH_TO_FILE> \
  --api-key <API_KEY> \
  [--api-url <STITCH_API_URL>] \
  [--title <SCREEN_TITLE>] \
  [--generated-by <GENERATED_BY>]
対応ファイル形式
拡張子MIME タイプ
.pngimage/png
.jpg, .jpegimage/jpeg
.webpimage/webp
.html, .htmtext/html
.mdtext/markdown

スクリプトはファイル拡張子から MIME タイプを自動検出します。

スクリプトのオプション
  • --project-id：必須。Stitch のプロジェクト ID です。
  • --file-path：必須。アップロードするローカルファイルのパスです。
  • --api-key：必須。Stitch の認証に使用する API キーです。
  • --api-url：任意。Stitch API のベース URL です。デフォルトは https://stitch.googleapis.com です。
  • --title：任意。アップロードする画面のタイトルです。ウェブアプリから抽出した HTML をアップロードする場合は、Stitch の画面名／タイトルでルートが明確に分かるよう、ページのルートパス（例：'/dashboard'、'/settings/profile'、'/inbox'）を指定します。
  • --generated-by：任意。アップロードするファイルの生成方法を指定します（例：'stitch::extract-static-html' スキル、'Claude Code'、'Codex'、'Gemini' など）。

コメント

Markdown 対応