What is Vite Mcp Server

Vite MCP Server, now known as Blowback, is a development server designed for frontend environments. It integrates a Model Context Protocol (MCP) server to facilitate seamless interaction with Cursor and enhance the development experience.

Use cases

Use cases for Vite MCP Server include capturing browser console logs for debugging, managing screenshots during development, and monitoring network requests to optimize application performance.

How to use

To use Vite MCP Server, add it to your Cursor MCP configuration with the provided JSON snippet. This will set up the server to work with your frontend development environment.

Key features

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

Where to use

Vite MCP Server can be used in frontend development environments, particularly those utilizing Vite or similar frameworks, to streamline development processes and improve debugging capabilities.

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