esnark_blowback
by ESnarkIntegrates 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-logstool 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 theheadto record data using thedata-idattribute.
Architecture and Data Flow
Core Components
- MCP Server: Central module providing tools to MCP Client.
- Browser Automation: Controls Chrome using Puppeteer for visual inspection.
- 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
- MCP Client → Development Server: Detects source code changes and updates the browser.
- Web Browser → MCP Server: Captures HMR events and console logs via Puppeteer.
- 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
Stats
0
Views
4
GitHub Stars
Repository Info
ESnark
Organization
Invite Gmail Contacts
