Google Labsが提供するStitchは2026年1月20日、各種コーディングエージェントからStitchに接続するための「Stitch MCP Server」のアーリーアクセス版を発表した。これによりエージェント搭載のCLIツールやIDEから直接、Stitchのデザインプロジェクトを確認・操作できるようになった。

StitchはGeminiを活用したUIデザインツール（詳しくは昨年末の記事を参照のこと⁠）⁠。今週Stitchは、Developer Weekと題して、開発者向けの更新をいくつか用意しているという。そんななか最初に発表されたのが、Stitch MCPサーバーとなる。

Stitch MCPサーバーはリモートMCPサーバーであり、Google Cloudを使ってユーザーを認証・認可し、StitchのMCPサーバーに接続できる。これにより、CursorやAntigravity、VS Code、Claude Code、Gemini CLIといった各種AIツール（コーディングエージェント）からStitchのデザインプロジェクトを参照・操作できるようになった。

Stitch MCPサーバーを使うことで、たとえば以下のような機能が利用可能になる。

• Stitchのデザインからコードを取得
• IDEを離れずに新しい画面を生成
• コンテキストを注入：エージェントに視覚的な認識能力を与える

Stitch MCPサーバーを利用するには、Google Cloud SDK（gcloud CLI）が必要となる。そしてGoogle CloudにおけるStitch APIを有効にしたプロジェクト（⁠「⁠Project ID⁠」⁠）を用意し、アクセストークンを生成しなければならない。

そのためには、次のような手順を踏む。詳しくはStitchのドキュメントを参照のこと。

1. パソコンにgcloud CLIをインストールする。
2. ターミナルで二重層認証（Double-Layer Authentication）を行う。ユーザー自身のログインと、MCPクライアントがユーザーの権限を利用するためのアプリケーションデフォルト認証情報（ADC）を用意するためのログインが必要になる。
3. Google Cloudのプロジェクトを作成し、Stitch API (stitch.googleapis.com) を検索してこのプロジェクトで有効化する。
4. ドキュメント記載の方法で、プロジェクトのProject IDを使って、ターミナル上でアクセストークンを生成する[1]。

アクセストークンを取得したら、使用するコーディングエージェント環境においてMCPサーバーを登録する。ドキュメントでは、Cursor、Antigravity、VS Code、Claude Code、Gemini CLIでの設定方法が説明されている。いずれの場合も、前述のプロジェクトIDとアクセストークンが必要になる。なおMCPサーバーのURLはhttps://stitch.googleapis.com/mcpであり、HTTPヘッダーに認証情報を付与する形式をとる。

MCPサーバーを登録して起動すると、Stitch MCPサーバーのツールが利用できるようになる。現在利用できるツールは以下のとおり。

プロジェクト管理

• create_project：新しいプロジェクトコンテナを作成する。
• list_projects：所有または共有されているプロジェクト一覧を取得する。

画面管理

• list_screens：特定プロジェクト内の全画面を取得する。
• get_project、get_screen：プロジェクトや画面の詳細情報を取得する。

デザイン生成

• generate_screen_from_text：テキストプロンプトから新しいデザインを生成する。モデルIDとしてGEMINI_3_PROまたはGEMINI_3_FLASHを指定可能。

具体的には、エージェントを使って「Stitchプロジェクトを見せてください」と指示すると、各プロジェクトのタイトルとIDをリストアップできる[2]。また、特定のプロジェクトにある画面を指定して、「⁠HTMLコードのダウンロード」や「画像のダウンロード」を指示することで、手元のプロジェクトにそれらのファイルを保存できる。なお、取得されるHTMLファイルは、そのデザイン固有のTailwind CSS設定が含まれている。

そして、create_projectを使うことでプロジェクト名だけを付けたStitchプロジェクトを作成したり、generate_screen_from_textを使って各プロジェクトで画面を生成できる。

今回の発表にあわせて、StitchのプロジェクトでデザインしたものをReactコンポーネントシステムへ変換するためのエージェントスキル「Stitch Agent Skills」をGitHubで公開している。インストールにはnpx add-skillを使う。このエージェントスキルが利用可能な場合、「⁠Podcastプロジェクトのランディングページ画面を変換してください」といったプロンプトを実行すると、エージェントは必要なツールを呼び出し、Viteローカルサーバー上で動作するReactアプリを生成するという。