唐揚げブラウザ拡張機能（Karaage Browser Extension）｜Google Antigravity 用・HTML 編集と Stitch MCP 連携

アプリの紹介・利用方法・寄付

| 3 min read

📝 記事について： 誠に、恐縮でございますが、この拡張機能は、Antigravity IDE用　対Google Stitch MCPの開発支援の拡張機能です。 簡単にこちらの記事で、ご紹介します。内容は、動画をご用意したので、見ていただければ、どんな拡張機能なのかわかります。 おいしそうだなぁ～～とおもったら、使ってみて気に入ったら、寄付で応援してもらえると大変うれしいです。バージョンは、1.0.0です。

1. アプリの紹介

唐揚げブラウザ拡張機能 v1.0.0

karaage-browser-ext-1.0.0.zip をダウンロード

ZIP を解凍し、.vsix を VS Code / Antigravity の「拡張機能から VSIX をインストール」で入れます。

拡張は無料でご利用いただけます。開発の継続のため、ご支援いただけると大変嬉しいです。

※ 重要

Google Antigravity 用の VS Code 拡張機能。HTML の要素選択・編集を LLM 向けに最適化し、Stitch MCP で自然言語による画面生成・編集まで Antigravity 内で一気通貫できます。本拡張には、Google Stitch MCP サーバへ Antigravity から接続する機能と、その管理機能が付随しています。

2. 利用方法

基本的な流れ

① 拡張を起動 → ② Elements でインスペクト・編集 → ③ Stitch MCP で自然言語編集

  • 1 起動

    Launch Karaage Browser で起動

    Activity Bar の「Karaage Browser」から起動。ワークスペースの HTML を WebView でプレビュー。

  • 2 Elements タブ

    Elements でインスペクト・編集・LLM 送信

    要素選択、Apply HTML/Style、Edit History で Revert。CopyClipBoard で Antigravity チャットにコンテキスト送信。

  • 3 Stitch MCP タブ

    Stitch MCP で自然言語編集

    プロジェクト→画面一覧→画面詳細。Generate / Edit / Variants で自然言語編集。Download All でローカル保存。

クリックで拡大

唐揚げブラウザ メニュー・起動
唐揚げブラウザ プレビュー
唐揚げブラウザ Stitch MCP

この拡張では、ローカルの HTML を WebView でプレビューできます。あわせて、DevTools のような要素の検査・ライブ編集と、Stitch MCP を使った AI による画面の生成・編集が可能です。

Elements タブ

  • インスペクト：画面上の要素をクリックして選択
  • Apply HTML / Apply Inline Style：編集を反映
  • Edit History：Revert で元に戻す
  • CopyClipBoard：選択した要素を Antigravity のチャットに送り、LLM のコンテキストとして使う

Stitch MCP タブ

  • プロジェクト → 画面一覧 → 画面詳細の順に進む
  • Generate / Edit / Variants で自然言語で画面を生成・編集
  • Download All でローカルに保存

その他

  • 操作ログ：karaage-session.log.md に記録される
  • コマンド：Launch / Stop / Change Target / Show Logs
  • MCP 設定：~/.gemini/antigravity/mcp_config.json で StitchMCP を設定（brief034 参照）

拡張は無料でお使いいただけます。開発の継続と改善のため、寄付で応援していただけると大変うれしいです。

Artist's Perspective

Antigravity 内で完結することを目指した、Antigravity用の拡張機能第一弾です。バージョンは、1.0.0になります。制作は主に、Antigravity利用して制作。 GoogleStitchMCP用として制作したのですが、HTML要素選択部分が、妙にこりまくりで、かなりの精度が出ております。それだけでも価値があるかと思うので、 おいしそうだなぁ～～＾とおもったらぜひお試しくださいませ。

フィードバック等はまだ準備できておりませんが、将来的には用意したいと考えております。また、まだひよこ段階ですので、ニーズがある程度見込めたら進んでバージョンアップしていきたいと思います。

データソース・参考リンク

本記事は以下の情報源を参考にしています。内容の正確性については、必ず元のデータソースをご確認ください。

関連記事

過去のTech Briefing記事をご覧いただけます。