What development servers does Blowback support?
Blowback aims to support various FE development servers, not only Vite.
Blowback MCP Server
@ESnark
基本信息
关于 Blowback MCP Server
MCP Server for Frontend dev environment (formerly known as vite-mcp-server)
Blowback MCP Server 配置
使用下面的配置,将此服务器添加到你的 MCP 客户端。
{
"mcpServers": {
"blowback": {
"command": "npx",
"args": [
"-y",
"blowback-context"
],
"env": {
"PROJECT_ROOT": ""
}
}
}
}Blowback MCP Server 工具
16Description of how to use the server
Creates a new browser context with an auto-generated unique ID
Lists all active browser instances
Closes a specific browser instance
Gets detailed information about a specific browser instance
Gets usage statistics for browsers
Retrieves recent HMR events
Captures a screenshot of the current page or a specific element. Stores the screenshot in the MCP resource system and returns a resource URI. If ENABLE_BASE64 environment variable is set to 'true', also includes base64 encoded image in the response.
Retrieves properties and state information of a specific element
Retrieves style information of a specific element
Retrieves dimension and position information of a specific element
Monitors network requests in the browser for a specified duration
Retrieves the HTML content of a specific element and its children with optional depth control
Retrieves console logs from the development server
Executes a sequence of predefined browser commands safely. Available commands: - click: Clicks on an element matching the selector or at specified coordinates - type: Types text into an input element - wait: Waits for an element, a specified time period, or a condition - navigate: Navigates to a specified URL - select: Selects an option in a dropdown - check: Checks or unchecks a checkbox - hover: Hovers over an element - focus: Focuses an element - blur: Removes focus from an element - keypress: Simulates pressing a keyboard key - scroll: Scrolls the page or an element - getAttribute: Gets an attribute value from an element - getProperty: Gets a property value from an element - drag: Performs a drag operation from one position to another - refresh: Refreshes the current page Note on coordinates: For all mouse-related commands (click, drag, etc.), coordinates are relative to the browser viewport where (0,0) is the top-left corner. X increases to the right, Y increases downward. Examples are available in the schema definition.
Evaluates JavaScript code directly in the browser context and returns the result. Supports expressions, function strings, and complex code with automatic execution handling. Can target the entire page or work with element handles for precise DOM manipulation. Examples: - Simple expression: "document.title" - Arrow function: "() => document.querySelectorAll('a').length" - Regular function: "function() { return document.body.children.length; }" - Function with arguments: "(tag) => document.getElementsByTagName(tag).length" - Complex code: "() => { const divs = document.querySelectorAll('div'); return { count: divs.length, hasClass: divs[0]?.className }; }" - Async function: "async () => { const res = await fetch('/api'); return res.json(); }"
概览
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
常见问题
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.
其他 分类下的更多 MCP 服务器
Handl
Handl speaks the Model Context Protocol. Your whole billing operation — projects, invoices, clients, reports, approvals — as tools any AI assistant can call, inside your autonomy rules.
N
Next Generation Movers: free moving quotes (remote MCP)
Next Generation MoversFree moving quotes for AI agents from Next Generation Movers, a licensed interstate mover (USDOT 3764697). US long-distance nationwide and local DC/MD/VA. Indicative ballpark price and booking options; optional $0.01 x40
The Living Bread
The Living BreadA free remote MCP server for The Living Bread. Bible passages read word for word from a stored public domain text with an evidence label, keyword search and cross references, real churches, gatherings and prayer groups w
MCP Toolbox for Databases
googleapisMCP Toolbox for Databases is an open source MCP server for databases.
15.9K
Health by Dr Brad
Dr Brad StanfieldHealth by Dr Brad works out a health plan from your own results: which screening is due at your age, and evidence-based suggestions, each with the reason and the published guideline or study behind it. Your record is one
评论