# Google Stitch MCP サーバー

GoogleのStitch AIデザインフラットフォーム向け公式オープンソースMCPサーバーです。AIエージェント（Claude、Cursor、Geminiなど）が自然言語を使用して、Stitchプロジェクトから直接UIデザインを取得し、コードを生成、画面をプレビューし、完全なサイトを構築できるようにします。

Canonical URL: https://a2a-mcp.org/entry/google-stitch-mcp-ja

Language: ja

Category: MCP Servers

Updated: 2026-03-21

## 概要

**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 認証サポート付き。

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

### クイックスタート

```bash
npx @_davideast/stitch-mcp init
```

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

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

```json
{
  "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](https://github.com/davideast/stitch-mcp) をご覧ください。

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

## Tags

- google-stitch
- mcp
- mcpサーバー
- uiデザイン
- デザインツーコード
- ai-ui
- フロントエンド
- astro
- vite
- claude
- cursor
- gemini

## Sources

- [Project website](https://github.com/davideast/stitch-mcp)