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

Related MCP server: Blowback

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

Herramientas del navegador

Cómo utilizar las herramientas

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

1. Servidor MCP : un módulo central basado en el SDK de protocolo de contexto de modelo que proporciona herramientas al cliente MCP.

2. Automatización del navegador : controla Chrome mediante Puppeteer para inspeccionar visualmente los cambios.

3. 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

1. 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

2. 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

3. 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