Vite MCP Server

ブローバック

Vite MCPサーバーは現在Blowbackです

BlowbackはViteだけでなく、様々なFE開発サーバーをサポートすることを目指しています。

Cursor との統合をサポートするために、FE 開発サーバーに Model Context Protocol (MCP) サーバーを追加します。

主な特徴

• FE開発サーバーとMCPサーバーの統合
• MCP 経由のブラウザ コンソール ログのキャプチャと送信
• チェックポイントベースのログ管理

インストール

カーソル MCP 構成にサーバーを追加します。

リソース

コンソールログ

ブラウザ コンソールのログを取得するためのリソース。

注: MCPリソース機能は現時点ではCursorではサポートされていません。代わりにget-console-logsツールをご利用ください。

スクリーンショット

スクリーンショットをキャプチャして管理するためのリソース。

注: 他のリソースと同様に、これは現時点ではCursorで直接サポートされていません。代わりにcapture-screenshotツールをご利用ください。

ツール

HMRツール

ブラウザツール

ツールの使い方

ログ管理システム

ログ管理方法

• すべてのブラウザコンソールログはログファイルに保存されます
• get-console-logsツールを使用して、特定のチェックポイントのログを照会できます。

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

チェックポイント操作方法

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

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

コアコンポーネント

1. MCP サーバー: MCP クライアントにツールを提供する、モデル コンテキスト プロトコル SDK に基づく中心モジュール。
2. ブラウザ自動化: Puppeteer を使用して Chrome を制御し、変更を視覚的に検査します。
3. チェックポイント システム: 比較とテストのためにブラウザーの状態のスナップショットを維持します。

データソースと状態管理

サーバーはいくつかの重要なデータ ストアを維持します。

• HMR イベント レコード: Vite からの最近の HMR イベント (更新、エラー) を追跡します。
• コンソール メッセージ ログ: デバッグ用にブラウザー コンソールの出力をキャプチャします。
• チェックポイント ストレージ: DOM スナップショットを含むブラウザー状態の名前付きスナップショットを保存します。

コミュニケーションフロー

1. MCPクライアント → 開発サーバー:
   • MCPクライアントがソースコードを変更し、開発サーバーがその変更を検出する
   • 開発サーバーはブラウザを更新したり、HMRイベントを自動的に発行したりします。
2. Webブラウザ → MCPサーバー:
   • HMR イベントとコンソール ログは Puppeteer を通じてキャプチャされます。
   • MCPサーバーはブラウザの現在の状態を照会したり、スクリーンショットをキャプチャしたりします
3. MCP サーバー → MCP クライアント:
   • サーバーは HMR イベントを構造化された応答に変換します。
   • MCP クライアントが HMR ステータスを照会し、スクリーンショットをキャプチャするためのツールを提供します。

国家維持

サーバーは次の参照オブジェクトを維持します:

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