local-only server

The server can only run on the client’s local machine because it depends on local resources.

Integrations

Requires Node.js 20 or higher to run the MCP server and connect to Vite development environments.
Leverages Puppeteer for browser automation to capture screenshots, monitor console logs, inspect element properties, track network requests, and create checkpoints for visual verification during Vite development.
Integrates with Vite's Hot Module Replacement (HMR) system to enable real-time code updates. Allows monitoring HMR events, connecting to a running Vite dev server, and observing live updates when code is modified.

Retroceso

El servidor Vite MCP ahora es Blowback
Blowback tiene como objetivo dar soporte a varios servidores de desarrollo de FE, no solo a Vite.

Agrega un servidor de Protocolo de contexto de modelo (MCP) al servidor de desarrollo FE para admitir la integración con Cursor.

Características principales

Integración del servidor de desarrollo FE con el servidor MCP
Captura y transmisión del registro de la consola del navegador a través de MCP
Gestión de registros basada en puntos de control

Instalación

Agregue el servidor a su configuración de Cursor MCP:

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

Recursos

registros de la consola

Un recurso para recuperar registros de la consola del navegador.

Nota: Cursor no admite la función de recursos MCP actualmente. Utilice la herramienta get-console-logs .

captura de pantalla

Un recurso para capturar y administrar capturas de pantalla.

Nota: Al igual que otros recursos, Cursor no ofrece soporte directo para esto por el momento. Utilice la herramienta capture-screenshot .

Herramientas

Herramientas HMR

Nombre de la herramienta	Descripción
`get-hmr-events`	Recupera eventos recientes de HMR
`check-hmr-status`	Comprueba el estado del HMR

Herramientas del navegador

Nombre de la herramienta	Descripción
`start-browser`	Inicia una instancia del navegador y navega al servidor de desarrollo de Vite
`capture-screenshot`	Captura una captura de pantalla de la página actual o de un elemento específico. Las capturas se guardan en el disco. Debido a las limitaciones del cliente MCP, es posible que deba transferir manualmente las capturas de pantalla guardadas a sus herramientas de edición.
`get-element-properties`	Recupera propiedades e información de estado de un elemento específico
`get-element-styles`	Recupera información de estilo de un elemento específico
`get-element-dimensions`	Recupera información de dimensión y posición de un elemento específico
`monitor-network`	Monitorea las solicitudes de red en el navegador durante una duración específica
`get-element-html`	Recupera el contenido HTML de un elemento específico y sus hijos.
`get-console-logs`	Recupera registros de la consola de la sesión del navegador con filtrado opcional
`execute-browser-commands`	Ejecuta de forma segura comandos de navegador predefinidos

Cómo utilizar las herramientas

Nombre de la herramienta	Descripción
`how-to-use`	Proporciona instrucciones sobre cómo utilizar la herramienta.

Sistema de gestión de registros

Método de gestión de registros

Todos los registros de la consola del navegador se almacenan en archivos de registro
Puede consultar registros de puntos de control específicos utilizando la herramienta get-console-logs

Sistema de puntos de control

Método de operación del punto de control

Los puntos de control se utilizan para administrar instantáneas, registros, capturas de pantalla, etc. de versiones específicas.
Cuando se inserta <meta name="__mcp_checkpoint" data-id=""> en el head , los datos se registran por separado utilizando el atributo data-id como identificador

Arquitectura y flujo de datos

Componentes principales

Servidor MCP : un módulo central basado en el SDK de protocolo de contexto de modelo que proporciona herramientas al cliente MCP.
Automatización del navegador : controla Chrome mediante Puppeteer para inspeccionar visualmente los cambios.
Sistema de puntos de control : mantiene instantáneas de los estados del navegador para comparar y realizar pruebas.

Fuentes de datos y gestión de estados

El servidor mantiene varios almacenes de datos importantes:

Registros de eventos HMR : rastrea eventos HMR recientes (actualizaciones, errores) de Vite.
Registros de mensajes de la consola : captura la salida de la consola del navegador para depuración.
Almacenamiento de puntos de control : almacena instantáneas con nombre de los estados del navegador, incluidas instantáneas DOM.

Flujo de comunicación

Cliente MCP → Servidor de desarrollo :
- El cliente MCP cambia el código fuente y el servidor de desarrollo detecta el cambio
- El servidor de desarrollo actualiza el navegador o emite eventos HMR automáticamente
Navegador web → Servidor MCP :
- Los eventos HMR y los registros de la consola se capturan a través de Puppeteer.
- El servidor MCP consulta el estado actual del navegador o captura una captura de pantalla
Servidor MCP → Cliente MCP :
- El servidor convierte los eventos HMR en respuestas estructuradas.
- Proporciona herramientas para que el cliente MCP consulte el estado de HMR y capture capturas de pantalla.

Mantenimiento del Estado

El servidor mantiene objetos de referencia para:

Instancias actuales del navegador y de la página
Eventos recientes de HMR

This server cannot be installed

-

security - not tested

F

license - not found

-

quality - not tested

Integra Cursor AI con el servidor Vite Dev, lo que permite a los agentes de IA modificar el código y observar actualizaciones en vivo a través del sistema de reemplazo de módulo activo en tiempo real.

Related Resources

Reddit Discussion about this server

Vite MCP Server