Karaage Stitch MCP 拡張機能｜Google Antigravity 用・Stitch 接続・プロジェクト取得・HTML 保存（v0.2.0）

01｜起動直後の「Projects」画面

コマンドパレットの「Karaage Stitch MCP: Open Panel」か、左の Stitch アイコンからパネルを開くと、この画面になります。上部の Connection… でキーを入れてから、Load projects を押すと Stitch 上のプロジェクト一覧が読み込まれます。必要なら検索用のフィルタ欄に文字を入れてから読み込むこともできます。初回だけサーバとの接続に少し時間がかかることがあります。

クリックで拡大

02｜1 枚のスクリーンを開いたところ

プロジェクトとスクリーンを選ぶと、画面タイトル・サイズ・プレビューが表示されます。ここから HTML を保存したり、下のボタンでプレビューや解析に進みます。保存するとき、いちいちフォルダを聞かれない場合は「前回保存した場所」か「開いているフォルダのルート」に自動で入る動きになっています。初めてのときや場所が決まっていないときだけ、保存先を選ぶダイアログが出ます。

クリックで拡大

03｜設定画面で入れるもの

設定を開き、検索に karaageStitchMcp と入れるとこの拡張の項目だけが出ます。API キーと Bearer の違いは、記事冒頭の「かんたんに」枠のとおりです。Bearer を使うときは、項目の説明どおり GCP のプロジェクト ID も入れてください。プレビューをエディタ内か外部ブラウザかもここで選べます。

クリックで拡大

04｜接続状態の確認と「MCP snapshot」

パネル上部の Connection, settings & MCP explorer を開くと、今つながっているサーバのアドレスや、キーが設定済みかどうかの表示があります。Refresh snapshot を押すと、Stitch 側が用意している機能の一覧が JSON で見えます（不具合調査や「何ができるか」を眺める用）。Open Antigravity mcp_config.json は、エディタ本体の MCP 用ファイルを開くだけで、この拡張の Stitch ログインには使いません。慣れた人向けに、折りたたみの「手動呼び出し」からさらに細かい操作も試せます。

クリックで拡大

05｜プロジェクトが並んだあと

Load projects が終わると、カード形式でプロジェクトが並びます。サムネイル・名前・画面の枚数・モバイル／デスクトップなどが一目で分かります。気になる行の Open project を押すと、その中の画面一覧に進みます。ブラウザで Stitch の同じプロジェクトを開きたいとき用のボタンもあります（画面によっては URL の作り方の都合で、深い階層までリンクしない場合があります）。

クリックで拡大

06｜プロジェクトの中の「ページ」一覧

1 つのプロジェクトに含まれる画面（スクリーン）がリストで出ます。解像度やモバイル向けかどうかも表示されます。Open Stitch web でブラウザの Stitch を開いたり、Generate screen で文章から新しい画面を足したりできます。いずれも Stitch 側の処理のため、生成には数十秒〜かかることがあります。進捗やエラーは通知とログに出ます。

クリックで拡大

07｜保存・プレビュー・解析・AI に話しかける

Save to folder… で HTML ファイルを書き出します（ファイル名は画面ごとに分かれます）。Preview HTML は、設定どおりエディタ内のタブで見るか、普段使いのブラウザで開くかが変わります。エディタ内を選んだ場合でも、保存したフォルダを基準に画像や CSS を読みに行くようになっており、真っ白になりやすい「ファイルだけ開く」方式は避けています。Analyze HTML は、ページに貼られたスタイルシートを拾って、色やフォントなどを読みやすいレポート（Markdown）にまとめます。CSS の @import の入れ子までは追わない仕様です。Edit with Stitch AI では、日本語でも英語でも、「ヘッダーを暗くしたい」などと入力してデバイス種別やモデルを選べば、Stitch 側で画面の修正やバリエーション生成に進めます。HTML の大量取得や AI 処理は時間がかかることがあるので、そのまま待てる状態で試すのがおすすめです。

クリックで拡大