esnark_vite_mcp_server

esnark_vite_mcp_server

by ESnark
Adds a Model Context Protocol (MCP) server to frontend development environments, supporting integration with tools like Cursor.

Blowback MCP Server for Frontend Development

Overview

Blowback is an MCP (Model Context Protocol) server designed to enhance frontend development workflows. Originally known as vite-mcp-server, Blowback integrates with development servers like Vite to provide advanced debugging and monitoring capabilities. It supports browser automation, log management, and checkpoint-based state tracking.

Key Features

  • Integration with Frontend Development Servers: Seamlessly connects with tools like Vite for enhanced development experiences.
  • Browser Console Log Capture: Captures and transmits browser console logs via MCP.
  • Checkpoint-Based Log Management: Manages logs, screenshots, and snapshots using a checkpoint system.

Installation

To integrate Blowback into your Cursor MCP configuration, add the following to your settings:

{
  "blowback": {
    "command": "npx",
    "args": ["-y", "blowback-context"]
  }
}

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

Log Management System

Log Management Method

  • All browser console logs are stored in log files.
  • Logs for specific checkpoints can be queried using the get-console-logs tool.

Checkpoint System

Checkpoint Operation Method

  • Checkpoints manage snapshots, logs, and screenshots of specific versions.
  • Data is recorded separately when <meta name="__mcp_checkpoint" data-id=""> is inserted into the head.

Architecture and Data Flow

Core Components

  1. MCP Server: Central module providing tools to MCP Client.
  2. Browser Automation: Controls Chrome using Puppeteer for visual inspection.
  3. Checkpoint System: Maintains snapshots of browser states for comparison and testing.

Data Sources and State Management

  • 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: Detects source code changes and updates the browser or emits HMR events.
  2. Web Browser → MCP Server: Captures HMR events and console logs through Puppeteer.
  3. MCP Server → MCP Client: Converts HMR events into structured responses and provides tools for querying HMR status and capturing screenshots.

State Maintenance

The server maintains reference objects for:
- Current browser and page instances
- Recent HMR events

Resources

Features & Capabilities

Categories
mcp_server model_context_protocol frontend_development javascript typescript browser_automation log_management hmr cursor_integration

Implementation Details

View on GitHub

Stats

0 Views
4 GitHub Stars

Repository Info

ESnark Organization

Similar MCP Servers

continuedev_continue by continuedev
25049
cherryhq_cherry_studio by CherryHQ
21423
bytedance_ui_tars_desktop by bytedance
9300
2025© BestAI