Blowback
by ESnark
Blowback (formerly Vite MCP Server) supports integration with Cursor by adding a Model Context Protocol (MCP) server to FE development servers. It aims to support various FE development servers, not only Vite.
Last updated: N/A
What is Blowback?
Blowback is a Model Context Protocol (MCP) server that integrates with front-end development servers to provide tools for interacting with a browser instance, capturing console logs, managing screenshots, and monitoring HMR events. It leverages Puppeteer for browser automation and provides a checkpoint system for managing snapshots of browser states.
How to use Blowback?
To use Blowback, add it to your Cursor MCP configuration with the provided JSON snippet, which specifies the command and arguments to start the server. Then, you can utilize the various tools provided by Blowback through the MCP interface, such as get-hmr-events
, capture-screenshot
, and get-console-logs
.
Key features of Blowback
Integration of FE development server with MCP server
Browser console log capture and transmission via MCP
Checkpoint-based log management
Browser automation with Puppeteer
HMR event monitoring
Use cases of Blowback
Debugging front-end applications with console logs
Capturing screenshots for visual testing and documentation
Monitoring HMR events to understand application updates
Retrieving element properties and styles for inspection
Automating browser interactions for testing and development
FAQ from Blowback
What is MCP?
What is MCP?
MCP stands for Model Context Protocol. It's a protocol that allows tools like Cursor to interact with development servers.
How do I install Blowback?
How do I install Blowback?
Add the provided JSON configuration to your Cursor MCP settings.
What is the purpose of the checkpoint system?
What is the purpose of the checkpoint system?
The checkpoint system allows you to manage snapshots, logs, and screenshots of specific versions of your application.
How do I retrieve console logs?
How do I retrieve console logs?
Use the get-console-logs
tool to retrieve console logs from the browser session.
How do I capture a screenshot?
How do I capture a screenshot?
Use the capture-screenshot
tool to capture a screenshot of the current page or a specific element.