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.
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
Related MCP server: Cursor MCP Server
Installation
Add the server to your Cursor MCP configuration:
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.
screenshot
A resource for capturing and managing screenshots.
Note: Like other resources, this is not directly supported by Cursor at the moment. Please use the capture-screenshot tool instead.
Tools
HMR Tools
Tool Name | Description |
| Retrieves recent HMR events |
| Checks the HMR status |
Browser Tools
Tool Name | Description |
| Starts a browser instance and navigates to the Vite development server |
| Captures a screenshot of the current page or a specific element. Screenshots are saved to disk. Due to MCP client limitations, you may need to manually transfer saved screenshot images to your editing tools |
| Retrieves properties and state information of a specific element |
| Retrieves style information of a specific element |
| Retrieves dimension and position information of a specific element |
| Monitors network requests in the browser for a specified duration |
| Retrieves the HTML content of a specific element and its children |
| Retrieves console logs from the browser session with optional filtering |
| Safely executes predefined browser commands |
How to use Tools
Tool Name | Description |
| 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-logstool
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 thehead, 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