Blowback
@ESnark
About Blowback
MCP Server for Frontend dev environment (formerly known as vite-mcp-server)
Basic information
Config
Add this server to your MCP-compatible client using the configuration below.
{
"mcpServers": {
"blowback": {
"command": "npx",
"args": [
"-y",
"blowback-context"
],
"env": {
"PROJECT_ROOT": ""
}
}
}
}Tools
No tools detected
We auto-extract tools from the README. The maintainer can list them under a ## Tools heading to populate this section.
Overview
What is Blowback?
Blowback is a Model Context Protocol (MCP) server that integrates front-end development servers (e.g., Vite) with AI tools like Claude Desktop and Cursor. It provides tools for browser automation, console log capture, HMR monitoring, and screenshot management.
How to use Blowback?
Install via npm as blowback-context. Add an MCP configuration entry (e.g., in .mcp.json or .cursor/mcp.json) specifying the command npx -y blowback-context and the optional environment variable PROJECT_ROOT (defaults to current working directory). Then use claude mcp add blowback -s project -e PROJECT_ROOT=/path/to/your/project -- npx -y blowback-context in Claude Code.
Key features of Blowback
- Integration of local development server with MCP server
- Browser console log capture and transmission via MCP
- Checkpoint-based log management for specific versions
- Screenshot capture and SQLite database management
- HMR (Hot Module Replacement) event monitoring
- Browser automation and element inspection tools
Use cases of Blowback
- Debugging front-end applications with AI assistants using live browser state
- Capturing and querying console logs across development checkpoints
- Inspecting and comparing DOM element properties and styles
- Monitoring HMR events and network requests during development
- Creating visual snapshots of pages for regression testing
FAQ from Blowback
What development servers does Blowback support?
Blowback aims to support various FE development servers, not only Vite.
How are screenshots stored and managed?
Screenshot images are stored in {PROJECT_ROOT}/.mcp_screenshot/ directory, and metadata is managed in a SQLite database in a temporary directory. It is recommended to add .mcp_screenshot/ to .gitignore.
Does Blowback require a real browser?
Yes. It uses Playwright to control a Chrome browser instance for visual inspection, screenshot capture, and DOM manipulation.
What is the checkpoint system?
Checkpoints are named snapshots tied to a unique data-id in a <meta name="__mcp_checkpoint" data-id=""> tag inserted into the page <head>. They allow separate recording of logs, screenshots, and DOM snapshots for specific versions.
Does Blowback support MCP prompts in all clients?
No. Cursor Chat does not support MCP prompt functionality; the init prompt is only available in Claude Code. If needed, users must manually input the prompt instructions.
More Other MCP servers
Codelf
unbugA search tool helps dev to solve the naming things problem.
Inbox Zero AI
elie222The world's best AI personal assistant for email. Open source app to help you reach inbox zero fast.
Nginx UI
0xJackyYet another WebUI for Nginx
AutoBrowser MCP
autobrowser-aiBrowser MCP is a Model Context Provider (MCP) server that allows AI applications to control your browser
Unity MCP ✨
justinpbarnettUnity MCP acts as a bridge between AI assistants and your Unity Editor. Give your LLM tools to manage assets, control scenes, edit scripts, and automate tasks within Unity.
Comments