Blowback logo

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.

View on GitHub

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?

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?

Add the provided JSON configuration to your Cursor MCP settings.

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?

Use the get-console-logs tool to retrieve console logs from the browser session.

How do I capture a screenshot?

Use the capture-screenshot tool to capture a screenshot of the current page or a specific element.