local-only server
The server can only run on the client’s local machine because it depends on local resources.
Integrations
Requires Node.js 20 or higher to run the MCP server and connect to Vite development environments.
Leverages Puppeteer for browser automation to capture screenshots, monitor console logs, inspect element properties, track network requests, and create checkpoints for visual verification during Vite development.
Integrates with Vite's Hot Module Replacement (HMR) system to enable real-time code updates. Allows monitoring HMR events, connecting to a running Vite dev server, and observing live updates when code is modified.
ブローバック
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-hmr-events | 最近のHMRイベントを取得します |
check-hmr-status | HMRステータスを確認します |
ブラウザツール
| ツール名 | 説明 |
|---|---|
start-browser | ブラウザインスタンスを起動し、Vite開発サーバーに移動します |
capture-screenshot | 現在のページまたは特定の要素のスクリーンショットをキャプチャします。スクリーンショットはディスクに保存されます。MCPクライアントの制限により、保存したスクリーンショット画像を編集ツールに手動で転送する必要がある場合があります。 |
get-element-properties | 特定の要素のプロパティと状態情報を取得します |
get-element-styles | 特定の要素のスタイル情報を取得します |
get-element-dimensions | 特定の要素の寸法と位置情報を取得します |
monitor-network | 指定された期間、ブラウザ内のネットワークリクエストを監視します |
get-element-html | 特定の要素とその子のHTMLコンテンツを取得します。 |
get-console-logs | オプションのフィルタリングを使用してブラウザセッションからコンソールログを取得します |
execute-browser-commands | 定義済みのブラウザコマンドを安全に実行します |
ツールの使い方
| ツール名 | 説明 |
|---|---|
how-to-use | ツールの使用方法の説明を提供します |
ログ管理システム
ログ管理方法
- すべてのブラウザコンソールログはログファイルに保存されます
get-console-logsツールを使用して、特定のチェックポイントのログを照会できます。
チェックポイントシステム
チェックポイント操作方法
- チェックポイントは、特定のバージョンのスナップショット、ログ、スクリーンショットなどを管理するために使用されます。
<meta name="__mcp_checkpoint" data-id="">``headに挿入されると、data-id属性を識別子としてデータが個別に記録されます。
アーキテクチャとデータフロー
コアコンポーネント
- MCP サーバー: MCP クライアントにツールを提供する、モデル コンテキスト プロトコル SDK に基づく中心モジュール。
- ブラウザ自動化: Puppeteer を使用して Chrome を制御し、変更を視覚的に検査します。
- チェックポイント システム: 比較とテストのためにブラウザーの状態のスナップショットを維持します。
データソースと状態管理
サーバーはいくつかの重要なデータ ストアを維持します。
- HMR イベント レコード: Vite からの最近の HMR イベント (更新、エラー) を追跡します。
- コンソール メッセージ ログ: デバッグ用にブラウザー コンソールの出力をキャプチャします。
- チェックポイント ストレージ: DOM スナップショットを含むブラウザー状態の名前付きスナップショットを保存します。
コミュニケーションフロー
- MCPクライアント → 開発サーバー:
- MCPクライアントがソースコードを変更し、開発サーバーがその変更を検出する
- 開発サーバーはブラウザを更新したり、HMRイベントを自動的に発行したりします。
- Webブラウザ → MCPサーバー:
- HMR イベントとコンソール ログは Puppeteer を通じてキャプチャされます。
- MCPサーバーはブラウザの現在の状態を照会したり、スクリーンショットをキャプチャしたりします
- MCP サーバー → MCP クライアント:
- サーバーは HMR イベントを構造化された応答に変換します。
- MCP クライアントが HMR ステータスを照会し、スクリーンショットをキャプチャするためのツールを提供します。
国家維持
サーバーは次の参照オブジェクトを維持します:
- 現在のブラウザとページインスタンス
- 最近のHMRイベント
This server cannot be installed
Cursor AI を Vite Dev サーバーと統合し、AI エージェントがコードを変更し、ホット モジュール交換システムを通じてライブ更新をリアルタイムで監視できるようにします。
- Key Features
- Installation
- Resources
- Tools
- Log Management System
- Checkpoint System
- Architecture and Data Flow