Blowback

Name: Blowback
Author: ESnark

@ESnark

リポジトリホームページ

Blowback について

MCP Server for Frontend dev environment (formerly known as vite-mcp-server)

基本情報

カテゴリ

その他

ランタイム

node

トランスポート

stdio

公開者

ESnark

設定

以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。

{
  "mcpServers": {
    "blowback": {
      "command": "npx",
      "args": [
        "-y",
        "blowback-context"
      ],
      "env": {
        "PROJECT_ROOT": ""
      }
    }
  }
}

ツール

ツールは検出されませんでした

ツールは README から自動的に抽出されます。メンテナーは ## Tools という見出しの下に記載することで、このタブに反映できます。

概要

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.

「その他」の他のコンテンツ

Reactive Resume

amruthpillai

A one-of-a-kind resume builder that keeps your privacy in mind. Completely secure, customizable, portable, open-source and free forever. Try it out today!

39.5K