Blowback
Vite MCP Server is now Blowback
Blowback aims to support various FE development servers, not only Vite
Adds a Model Context Protocol (MCP) server to the FE development server to support integration with Cursor.
Key Features
- Integration of FE development server with MCP server
- Browser console log capture and transmission via MCP
- Checkpoint-based log management
Installation
Add the server to your Cursor MCP configuration:
{
"blowback": {
"command": "npx",
"args": ["-y", "blowback-context"]
}
}
Resources
console-logs
A resource for retrieving browser console logs.
Note: The MCP Resource feature is not supported by Cursor at the moment. Please use the get-console-logs tool instead.
Tools
HMR Tools
| Tool Name |
Description |
get-hmr-events |
Retrieves recent HMR events |
check-hmr-status |
Checks the HMR status |
Browser Tools
| Tool Name |
Description |
start-browser |
Starts a browser instance and navigates to the Vite development server |
capture-screenshot |
Captures a screenshot of the current page or a specific element |
get-element-properties |
Retrieves properties and state information of a specific element |
get-element-styles |
Retrieves style information of a specific element |
get-element-dimensions |
Retrieves dimension and position information of a specific element |
monitor-network |
Monitors network requests in the browser for a specified duration |
get-element-html |
Retrieves the HTML content of a specific element and its children |
get-console-logs |
Retrieves console logs from the browser session with optional filtering |
execute-browser-commands |
Safely executes predefined browser commands |
How to use Tools
| Tool Name |
Description |
how-to-use |
Provides instructions on how to use the tool |
Log Management System
Log Management Method
- All browser console logs are stored in log files
- You can query logs for specific checkpoints using the
get-console-logs tool
Checkpoint System
Checkpoint Operation Method
- Checkpoints are used to manage snapshots, logs, screenshots, etc. of specific versions
- When
<meta name="__mcp_checkpoint" data-id=""> is inserted into the head, data is recorded separately using the data-id attribute as an identifier
Architecture and Data Flow
Core Components
MCP Server : A central module based on the Model Context Protocol SDK that provides tools to MCP Client.
Browser Automation : Controls Chrome using Puppeteer to visually inspect changes.
Checkpoint System : Maintains snapshots of browser states for comparison and testing.
Data Sources and State Management
The server maintains several important data stores:
- HMR Event Records : Tracks recent HMR events (updates, errors) from Vite.
- Console Message Logs : Captures browser console output for debugging.
- Checkpoint Storage : Stores named snapshots of browser states including DOM snapshots.
Communication Flow
- MCP Client → Development Server :
* MCP Client changes the source code and Development Server detects the change
* Development Server updates the browser or emits HMR events automatically
- Web Browser → MCP Server :
* HMR events and console logs are captured through Puppeteer.
* MCP Server queries the current state of the browser or captures a screenshot
- MCP Server → MCP Client :
* The server converts HMR events into structured responses.
* Provides tools for MCP Client to query HMR status and capture screenshots.
State Maintenance
The server maintains reference objects for:
- Current browser and page instances
- Recent HMR events
