Blowback

Blowback

Vite MCP サーバーは Blowback になりました

Blowback は、Vite だけでなく、さまざまなフロントエンド開発サーバーをサポートすることを目指しています

Claude Desktop や Cursor などの AI ツールとフロントエンド開発サーバーを連携する Model Context Protocol（MCP）サーバーです。

使い方

コマンド（Claude Code）：

claude mcp add blowback -s project -e PROJECT_ROOT=/path/to/your/project -- npx -y blowback-context

または、JSON 設定を使用します：

• Claude Code：{PROJECT_ROOT}/.mcp.json
• Cursor：{PROJECT_ROOT}/.cursor/mcp.json

{
  "mcpServers": {
    "blowback": {
      "command": "npx",
      "args": ["-y", "blowback-context"],
      "env": {
        "PROJECT_ROOT": "/path/to/your/project"
      }
    }
  }
}

環境変数

• PROJECT_ROOT：プロジェクトのルートパス（任意。デフォルトは現在の作業ディレクトリ）
• ENABLE_BASE64：ツールの応答に Base64 エンコードされた画像を含めます（デフォルト：false。有効にするとトークン使用量とコンテキストウィンドウに影響します）

主な機能

• ローカル開発サーバーと MCP サーバーの連携
• ブラウザーのコンソールログを取得し、MCP 経由で送信
• チェックポイントベースのログ管理
• スクリーンショットの撮影と SQLite データベースの管理
• HMR（ホットモジュール置換）イベントの監視
• ブラウザーの自動化と要素の検査

init プロンプト

init プロンプトでは、以下の機能を効果的に使用する方法を AI アシスタントに案内します：

Cursor Chat は MCP プロンプト機能に対応していないため、この機能は利用できません。（Claude Code を推奨） 必要に応じて、以下のプロンプトを手動で入力してください：

<meta name="__mcp_checkpoint" data-id=""> を head に挿入すると、現在の状態の名前付きスナップショットを作成するチェックポイント機能を使用できます。 data-id 属性は、チェックポイントの一意の識別子です。

チェックポイントが有効な間にブラウザーで生成されたコンソールログにはチェックポイント ID が付与され、個別にクエリできます。

注：開発環境によっては、ファイルの保存時にホットリロードが実行されるため、meta タグの変更と、確認したい変更との順序を慎重に検討してください。追跡したい変更を行う前に、チェックポイントの meta タグを設定してください。

capture-screenshot ツールを使用してスクリーンショットを撮影できます。撮影したスクリーンショットは @.mcp_screenshot/ ディレクトリに保存されます。

ツール

HMR ツール

ツール名	説明
get-hmr-events	最近の HMR イベントを取得します
check-hmr-status	HMR のステータスを確認します

注：HMR 接続は任意であり、必須ではありません。ブラウザーの起動時に HMR イベントの監視が自動的に開始されます。

ブラウザーツール

ツール名	説明
start-browser	ブラウザーインスタンスを起動し、開発サーバーに移動します。HMR の監視は自動的に開始されます
capture-screenshot	現在のページまたは特定の要素のスクリーンショットを撮影します。スクリーンショット ID とリソース URI を返します
get-element-properties	特定の要素のプロパティと状態情報を取得します
get-element-styles	特定の要素のスタイル情報を取得します
get-element-dimensions	特定の要素の寸法と位置の情報を取得します
monitor-network	指定した時間、ブラウザーのネットワークリクエストを監視します
get-element-html	特定の要素とその子要素の HTML コンテンツを取得します
get-console-logs	任意のフィルターを指定して、ブラウザーセッションのコンソールログを取得します
execute-browser-commands	定義済みのブラウザーコマンドを安全に実行します

ヘルプツール

ツール名	説明
how-to-use	サーバーの特定の機能の使い方を案内します

リソース

screenshots

撮影したすべてのスクリーンショットを照会するためのリソースです。capture-screenshot ツールで撮影したスクリーンショットの参照 ID を、さまざまな条件で照会できます。

参照 ID に対応する画像は、{PROJECT_ROOT}/.mcp_screenshot/ ディレクトリで管理されます。

• URI：screenshot://
• すべてのスクリーンショットの一覧を返します

URL によるスクリーンショット

URL パスに基づいて特定のスクリーンショットを照会するためのリソースです。

Note：バージョン 1.0 以降、リソース経由の Blob レスポンスはデフォルトで無効になり、代わりにファイル参照情報が返されます

• URI テンプレート：screenshot://{+path}
• 例：screenshot://localhost:5173/about
• プロトコル（http://、https://）を含めずに URL パスを使用します

データストレージ構造

スクリーンショットの保存

• スクリーンショット画像：{PROJECT_ROOT}/.mcp_screenshot/ ディレクトリに保存されます
• メタデータ：一時ディレクトリ内の SQLite データベースで管理されます
• .mcp_screenshot/ ディレクトリを .gitignore に追加することをおすすめします

ログ管理システム

• ブラウザーのコンソールログを取得し、照会用にファイルへ保存します
• チェックポイントが有効な場合にのみ、チェックポイントのログが保存されます

チェックポイントシステム

チェックポイントの仕組み

• チェックポイントは、特定バージョンのスナップショット、ログ、スクリーンショットなどを管理するために使用されます
• <meta name="__mcp_checkpoint" data-id=""> を head に挿入すると、識別子として data-id 属性を使用し、データが個別に記録されます

アーキテクチャとデータフロー

コアコンポーネント

1. MCP サーバー：Model Context Protocol SDK を使用して、AI ツールにツールとリソースを公開する中核モジュールです。

2. ブラウザー自動化：Playwright を使用して Chrome を操作し、目視確認、スクリーンショットの撮影、DOM の操作を行います。

3. チェックポイントシステム：比較とテストのために、ブラウザーの状態のスナップショットを保持します。

4. SQLite データベース：スクリーンショットのメタデータを効率的に管理し、URL に基づく高速な照会を可能にします。

データソースと状態管理

サーバーは、次のような重要なデータストアを複数管理します。

• HMR イベント記録：開発サーバーからの直近の HMR イベント（更新、エラー）を追跡します。
• コンソールメッセージログ：デバッグ用にブラウザーのコンソール出力を取得します。
• チェックポイントストレージ：DOM スナップショットを含む、名前付きのブラウザー状態のスナップショットを保存します。
• スクリーンショットストレージ：プロジェクトディレクトリに画像を保存し、SQLite でメタデータを管理します。

通信フロー

1. MCP クライアント → 開発サーバー：

   • MCP クライアントがソースコードを変更し、開発サーバーが変更を検出します
   • 開発サーバーはブラウザーを自動的に更新するか、HMR イベントを発行します

2. ウェブブラウザー → MCP サーバー：

   • Playwright 経由で HMR イベントとコンソールログを取得します
   • MCP サーバーがブラウザーの現在の状態を照会するか、スクリーンショットを撮影します

3. MCP サーバー → MCP クライアント：

   • サーバーは HMR イベントを構造化されたレスポンスに変換します
   • MCP クライアントが HMR の状態を照会し、スクリーンショットを撮影するなどの操作を行えるツールを提供します

状態の維持

サーバーは、次の項目の参照オブジェクトを保持します。

• 現在のブラウザーとページのインスタンス
• 直近の HMR イベント