What is Blowback

Blowback is a Model Context Protocol (MCP) server designed to enhance frontend development environments, previously known as vite-mcp-server. It supports various frontend development servers, not limited to Vite.

Use cases

Blowback is useful for frontend developers who need to manage logs, monitor browser states, and automate testing processes. It is particularly beneficial in environments where rapid development and debugging are essential.

How to use

To use Blowback, add it to your Cursor MCP configuration by specifying the command and arguments in JSON format. This allows integration with the development server and enables various tools for log management and browser automation.

Key features

Key features of Blowback include integration with frontend development servers, browser console log capture and transmission via MCP, and checkpoint-based log management for better tracking and debugging.

Where to use

undefined

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.

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

Browser Tools

How to use Tools

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

1. MCP Server: A central module based on the Model Context Protocol SDK that provides tools to MCP Client.

2. Browser Automation: Controls Chrome using Puppeteer to visually inspect changes.

3. 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

1. 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

2. 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

3. 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