esnark_blowback

esnark_blowback

by ESnark
Integrates a Model Context Protocol (MCP) server with frontend development environments, supporting browser console log capture and checkpoint-based log management.

Blowback MCP Server for Frontend Development

Overview

Blowback is an MCP (Model Context Protocol) server designed to enhance frontend development environments. Formerly known as vite-mcp-server, Blowback integrates with various frontend development servers, not just Vite, to provide advanced debugging and automation capabilities.

Key Features

  • Integration with Frontend Development Servers: Seamlessly connects with MCP servers to enhance development workflows.
  • Browser Console Log Capture: Captures and transmits browser console logs via MCP.
  • Checkpoint-Based Log Management: Efficiently manages logs using a checkpoint system for version snapshots.

Installation

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

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

How to Use Tools

Tool Name Description
how-to-use Provides instructions on tool usage.

Log Management System

  • Log Storage: All browser console logs are stored in log files.
  • Querying Logs: Use the get-console-logs tool to query logs for specific checkpoints.

Checkpoint System

  • Checkpoint Operation: Checkpoints manage snapshots, logs, and screenshots for specific versions.
  • Checkpoint Identifier: Insert <meta name="__mcp_checkpoint" data-id=""> into the head to record data using the data-id attribute.

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

Data Sources and State Management

  • HMR Event Records: Tracks recent HMR events from Vite.
  • Console Message Logs: Captures browser console output for debugging.
  • Checkpoint Storage: Stores named snapshots of browser states.

Communication Flow

  1. MCP Client → Development Server: Detects source code changes and updates the browser.
  2. Web Browser → MCP Server: Captures HMR events and console logs via Puppeteer.
  3. MCP Server → MCP Client: Converts HMR events into structured responses and provides tools.

State Maintenance

  • Reference Objects: Maintains current browser and page instances, and recent HMR events.

Resources

About

Blowback is an MCP server tailored for frontend development environments, offering advanced debugging and automation features.

Stars and Forks

  • Stars: 4
  • Forks: 0

Languages

  • TypeScript: 94.5%
  • JavaScript: 5.5%

Features & Capabilities

Categories
mcp_server model_context_protocol typescript javascript frontend_development browser_automation log_management vite

Implementation Details

View on GitHub

Stats

0 Views
0 Favorites
4 GitHub Stars

Repository Info

ESnark Organization

Similar Servers

continuedev_continue by continuedev
0
cherryhq_cherry_studio by CherryHQ
0
bytedance_ui_tars_desktop by bytedance
0
2025© BestAI