README - Blowback by esnark

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.

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.

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.

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. Screenshots are saved to disk. Due to MCP client limitations, you may need to manually transfer saved screenshot images to your editing tools
`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

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

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: