Google Stitch MCP サーバー

概要

Google Stitch MCP サーバー (davideast によるメンテナンス) は、Google の Stitch AI デザインプラットフォーム (stitch.withgoogle.com) 向けの主要なオープンソース Model Context Protocol (MCP) サーバー です。これは、Stitch の AI 生成 UI デザインと、コーディングエージェントや IDE を接続します。

AI ツールは、手動でのエクスポートやコピー＆ペーストなしに、Stitch デザインをリアルタイムで発見・利用できるようになりました。画面、スクリーンショット、HTML コードの取得、さらにはフルサイトの構築まで可能です。

主な機能

• デザインからコードへのツール: get_screen_code、get_screen_image、build_site による即時フロントエンド生成。
• ローカルプレビュー: Vite 開発サーバー上で Stitch 画面を提供し、ブラウザですぐにプレビュー。
• Astro サイトビルダー: 画面をルートに自動マッピングし、デプロイ可能な Astro プロジェクトを生成。
• インタラクティブブラウザ: プロジェクト、画面、メタデータを探索するターミナルベースのエクスプローラー。
• プロキシモード: 自動トークン更新と gcloud 統合により、高レベルツールを MCP クライアントに公開。
• ワンコマンドセットアップ: 認証と MCP 設定を処理するガイド付き init ウィザード。

仕組み

このサーバーは、あなたの MCP クライアント (Claude、Cursor、VS Code など) と Stitch API との間のプロキシとして機能します。複数の Stitch API 呼び出しをエージェントフレンドリーなツールに統合し、クリーンなデザインコンテキスト (HTML、画像、メタデータ) を直接 LLM の会話に注入します。

サポートされているトランスポート: 標準入出力 (stdio) (IDE 用) 、完全な gcloud 認証サポート付き。

セットアップ & インストール

クイックスタート

npx @_davideast/stitch-mcp init

これにより、gcloud 認証のセットアップ、Stitch API の有効化、MCP クライアントの設定を行うガイド付きウィザードが実行されます。

MCP クライアントへの追加 (例: Cursor または Claude)

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@_davideast/stitch-mcp", "proxy"]
    }
  }
}

前提条件

• Stitch API が有効化された Google Cloud プロジェクト
• gcloud SDK がインストール済み
• プロジェクトで課金が有効化済み
• Node.js (npx 用)

利用可能なツール

• build_site: 画面をルートにマッピングし、マルチページサイトの完全な HTML を返します。
• get_screen_code: 任意の画面の本番環境対応の HTML/CSS をダウンロードします。
• get_screen_image: 視覚的コンテキスト用のスクリーンショットを base64 で取得します。
• 追加の CLI コマンド: serve、screens、site、view など。

ユースケース

• デザインからコードへのワークフロー: Cursor や Claude に「この Stitch デザインを Next.js ページに構築して」と依頼し、正確なコードを即座に取得。
• エージェント主導の開発: コーディングエージェントに視覚的コンテキストを提供し、UI のハルシネーションを防止。
• 迅速なプロトタイピング: エクスポート前に、Stitch デザインをローカルでプレビューし、反復。
• マルチエージェントパイプライン: Google Antigravity、Cursor、その他の MCP サーバーと組み合わせて、アイデア → UI → コード → デプロイのエンドツーエンドを実現。
• ドキュメント & 引き継ぎ: AI デザインからきれいな Astro サイトを生成し、ステークホルダーのレビューに活用。

Google Stitch MCP を使う理由

Stitch はテキストプロンプトから美しいレスポンシブ UI を生成します。この MCP サーバーにより、これらのデザインが AI コーディングワークフローに第一級の要素として組み込まれます — エージェントに実装すべき正確なデザインを見る「目」を提供します。

アクティブにメンテナンスされ、軽量で、すべての主要な MCP クライアントとシームレスに連携します。

はじめに

最新バージョン、完全なドキュメント、および例については、リポジトリ github.com/davideast/stitch-mcp をご覧ください。

npx @_davideast/stitch-mcp init から始めて、お気に入りの AI コーディングエージェントの中で Google Stitch の全機能を今日から解放しましょう。