Use This MCP server To

Integrate frontend dev servers with MCP for enhanced context sharing Capture and transmit browser console logs in real time Manage browser logs using checkpoint-based log systems Support multiple frontend development environments beyond Vite Enable Cursor integration with frontend development servers Facilitate debugging by streaming browser logs to MCP clients Capture and manage screenshots via MCP resources Add MCP server capabilities to existing frontend dev setups

README

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

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

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

blowback FAQ

How do I install Blowback in my MCP configuration?

Add Blowback to your Cursor MCP config using the command 'npx -y blowback-context' as shown in the documentation.

Can Blowback capture browser console logs?

Yes, Blowback captures and transmits browser console logs via MCP for real-time monitoring.

Does Blowback support frontend dev servers other than Vite?

Yes, Blowback aims to support various frontend development servers, not just Vite.

How does Blowback manage logs?

It uses checkpoint-based log management to organize and retrieve browser console logs efficiently.

Are screenshot capture features supported directly in Cursor?

Currently, Cursor does not support the screenshot resource directly; use the 'capture-screenshot' tool instead.

What MCP resources does Blowback provide?

Blowback provides resources like console logs and screenshots, though some require external tools for full functionality.

Is Blowback compatible with other LLM providers besides OpenAI?

Yes, Blowback works within MCP environments compatible with providers like Claude and Gemini as well.

Can Blowback be used for live debugging in frontend development?

Yes, by streaming browser logs and integrating with MCP clients, it facilitates live debugging workflows.