Vite MCP Server

Vite MCP Server is now Blowback

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

Blowback

Key Features

• Integration of Vite 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:

{
  "vite-hmr": {
    "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.

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

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
• Active Vite client connection
• Project root path
• Recent HMR events