Blowback

Vite MCP Server is now Blowback

Blowback aims to support various FE development servers, not only Vite

A Model Context Protocol (MCP) server that integrates FE development servers with AI tools like Claude Desktop and Cursor.

How to Use

Command (Claude Code):

claude mcp add blowback -s project -e PROJECT_ROOT=/path/to/your/project -- npx -y blowback-context

Or use json configuration:

Claude Code: {PROJECT_ROOT}/.mcp.json
Cursor: {PROJECT_ROOT}/.cursor/mcp.json

{
  "mcpServers": {
    "blowback": {
      "command": "npx",
      "args": ["-y", "blowback-context"],
      "env": {
        "PROJECT_ROOT": "/path/to/your/project"
      }
    }
  }
}

Environment Variables

PROJECT_ROOT: Project root path (optional, defaults to current working directory)
ENABLE_BASE64: Include base64 encoded images in tool responses (default: false / affects token usage and context window when enabled)

Key Features

Integration of local development server with MCP server
Browser console log capture and transmission via MCP
Checkpoint-based log management
Screenshot capture and SQLite database management
HMR (Hot Module Replacement) event monitoring
Browser automation and element inspection

init Prompt

The init prompt provides guidance to AI assistants on how to effectively use the following features:

Cursor Chat does not support MCP prompt functionality, so this feature is not available. (Claude Code recommended) If needed, manually input the following prompt:

You can use checkpoint features by inserting <meta name="__mcp_checkpoint" data-id=""> into the head to create a named snapshot of the current state. The data-id attribute is a unique identifier for the checkpoint.

Console logs generated in the browser while a checkpoint is active are tagged with the checkpoint ID and can be queried individually.

Note: In some development environments, hot reload is triggered when files are saved, so carefully consider the sequence between meta tag changes and the changes you want to observe. Make sure to set the checkpoint meta tag before making the changes you want to track.

You can use the capture-screenshot tool to take screenshots. The captured screenshots are stored in the @.mcp_screenshot/ directory.

Tools

HMR Tools

Tool Name	Description
`get-hmr-events`	Retrieves recent HMR events
`check-hmr-status`	Checks the HMR status

Note: HMR connection is optional, not required. HMR event monitoring starts automatically when the browser is launched.

Browser Tools

Tool Name	Description
`start-browser`	Starts a browser instance and navigates to the development server. HMR monitoring starts automatically
`capture-screenshot`	Captures a screenshot of the current page or a specific element. Returns screenshot ID and resource URI
`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

Help Tools

Tool Name	Description
`how-to-use`	Provides instructions on how to use specific features of the server

Resources

screenshots

A resource for querying all captured screenshots. You can query screenshot reference IDs captured by the capture-screenshot tool using various criteria.

Images corresponding to reference IDs are managed in the {PROJECT_ROOT}/.mcp_screenshot/ directory.

URI: screenshot://
Returns a list of all screenshots

screenshot-by-url

A resource for querying specific screenshots based on URL path.

Note: Starting from version 1.0, Blob responses through resources are disabled by default, and file reference information is returned instead

URI template: screenshot://{+path}
Example: screenshot://localhost:5173/about
Use URL paths without protocol (http://, https://)

Data Storage Structure

Screenshot Storage

Screenshot images: Stored in {PROJECT_ROOT}/.mcp_screenshot/ directory
Metadata: Managed in SQLite database in temporary directory
It's recommended to add .mcp_screenshot/ directory to .gitignore

Log Management System

Captures browser console logs and saves them to files for querying
Checkpoint logs are only saved when checkpoints are active

Checkpoint System

How Checkpoints Work

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: Central module that exposes tools and resources to AI tools using the Model Context Protocol SDK.
Browser Automation: Uses Playwright to control Chrome for visual inspection, screenshot capture, and DOM manipulation.
Checkpoint System: Maintains snapshots of browser states for comparison and testing.
SQLite Database: Efficiently manages screenshot metadata and enables quick URL-based queries.

Data Sources and State Management

The server maintains several important data stores:

HMR Event Records: Tracks recent HMR events (updates, errors) from development server.
Console Message Logs: Captures browser console output for debugging.
Checkpoint Storage: Stores named snapshots of browser states including DOM snapshots.
Screenshot Storage: Saves images in project directory and manages metadata with SQLite.

Communication Flow

MCP Client → Development Server:
- MCP Client changes the source code and development server detects the change
- Development server automatically updates the browser or emits HMR events
Web Browser → MCP Server:
- HMR events and console logs are captured through Playwright
- MCP Server queries the current state of the browser or captures screenshots
MCP Server → MCP Client:
- The server converts HMR events into structured responses
- Provides tools for MCP Client to query HMR status, capture screenshots, and more

State Maintenance

The server maintains reference objects for:

Current browser and page instances
Recent HMR events