Advertise
MCP.so
Sign In

Vite MCP Server

@ESnark

RepositoryHomepage

Basic information

Category

Other

Transports

stdio

Author

ESnark

About Vite MCP Server

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

Vite MCP Server config

Add this server to your MCP-compatible client using the configuration below.

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

Vite MCP Server tools

16

Description 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(); }"

Overview

What is Vite MCP Server?

Vite MCP Server (now named Blowback) integrates front-end development servers with AI tools like Claude Desktop and Cursor via the Model Context Protocol. It allows AI assistants to observe and interact with a running development server to assist with debugging and testing.

How to use Vite MCP Server?

Add the server to your MCP configuration (Claude Code: {PROJECT_ROOT}/.mcp.json; Cursor: {PROJECT_ROOT}/.cursor/mcp.json) with command npx -y blowback-context and the optional PROJECT_ROOT environment variable. Then the AI can call the available tools.

Key features of Vite MCP Server

  • Integration of local development server with MCP
  • Browser console log capture and transmission
  • Checkpoint-based log and snapshot management
  • Screenshot capture with SQLite metadata storage
  • HMR (Hot Module Replacement) event monitoring
  • Browser automation and element inspection

Use cases of Vite MCP Server

  • Debugging HMR events during development with AI assistance
  • Capturing and analyzing browser console logs automatically
  • Taking screenshots of the current page for visual inspection
  • Inspecting element properties, styles, and dimensions through AI
  • Monitoring network requests during a specific duration

Frequently asked questions

1

What front-end development servers are supported?

The server originally only supported Vite, but now (as Blowback) aims to support various FE development servers.

2

Does the server require an active HMR connection?

No, HMR connection is optional. HMR monitoring starts automatically when the browser is launched.

3

How are screenshots stored?

Screenshots are saved as files in `{PROJECT_ROOT}/.mcp_screenshot/`. Their metadata is managed in a SQLite database in the temporary directory.

4

Is Cursor Chat supported for the `init` prompt?

No, Cursor Chat does not support MCP prompt functionality. Claude Code is recommended for that feature.

5

Are base64 images included in tool responses by default?

No, base64 image inclusion is controlled by the `ENABLE_BASE64` environment variable, which defaults to `false`. Enabling it increases token usage.

Comments

More Other MCP servers

Yuppsy

Yuppsy MCP: build and publish real estate websites from your AI assistant. Yuppsy lets your AI assistant create live websites for real estate agents and individual property listings. You don't need a designer or any code

Blender

ahujasid

Open-source MCP to use Blender with any LLM

23.6K

Codelf

unbug

A search tool helps dev to solve the naming things problem.

14.2K

🚀 Model Context Protocol (MCP) Curriculum for Beginners

microsoft

This open-source curriculum introduces the fundamentals of Model Context Protocol (MCP) through real-world, cross-language examples in .NET, Java, TypeScript, JavaScript, Rust and Python. Designed for developers, it focuses on practical techniques for building modular, scalable,

16.7K

Lemon.io

lemon-io

Request dedicated senior developers to work on your project, write job descriptions, and prep technical interviews — all without leaving your Claude chat. Just describe what you need, and Lemon.io MCP does the rest. 1–3

Advertise