Servidor Vite MCP

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

license - not found

quality - not tested

How are these scores calculated?

local-only server

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

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

Related MCP Servers

Cursor MCP Server
Buga-luga
-
security
A
license
-
quality
Facilitates integration with the Cursor code editor by enabling real-time code indexing, analysis, and bi-directional communication with Claude, supporting concurrent sessions and automatic reconnection.
Last updated -
2
21
31
TypeScript
MIT License
Cursor MCP Server
johnneerdael
-
security
A
license
-
quality
Acts as a bridge between Claude's desktop application and the Cursor editor, enabling seamless AI-powered automation and multi-instance management across platforms with standardized communication and secure token-based authentication.
Last updated -
21
46
TypeScript
MIT License
AI Development Assistant MCP Server
kleneway
-
security
A
license
-
quality
An AI-powered development toolkit for Cursor providing intelligent coding assistance through advanced reasoning, UI screenshot analysis, and code review tools.
Last updated -
839
240
TypeScript
MIT License
AI Development Assistant MCP Server
yeakub108
-
security
A
license
-
quality
A Cursor-compatible toolkit that provides intelligent coding assistance through custom AI tools for code architecture planning, screenshot analysis, code review, and file reading capabilities.
Last updated -
839
2
TypeScript
MIT License

View all related MCP servers

Vite MCP Server