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.
- Integration of FE development server with MCP server
- Browser console log capture and transmission via MCP
- Checkpoint-based log management
Add the server to your Cursor MCP configuration:
{
"blowback": {
"command": "npx",
"args": ["-y", "blowback-context"]
}
}
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.
Tool Name | Description |
---|---|
get-hmr-events |
Retrieves recent HMR events |
check-hmr-status |
Checks the HMR status |
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 |
Tool Name | Description |
---|---|
how-to-use |
Provides instructions on how to use the tool |
- All browser console logs are stored in log files
- You can query logs for specific checkpoints using the
get-console-logs
tool
- Checkpoints are used to manage snapshots, logs, screenshots, etc. of specific versions
- When
<meta name="__mcp_checkpoint" data-id="">
is inserted into thehead
, data is recorded separately using the data-id attribute as an identifier
-
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.
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.
-
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.
The server maintains reference objects for:
- Current browser and page instances
- Recent HMR events