Vibradores Ojos

Un servidor MCP que permite a los LLM "ver" lo que sucede en juegos y aplicaciones basados en navegador a través de visualización de lienzo vectorizado e información de depuración.

Vibe-Eyes utiliza una arquitectura cliente-servidor donde un cliente de navegador liviano captura el contenido del lienzo y la información de depuración, lo envía a un servidor Node.js a través de WebSockets, que luego vectoriza las imágenes en representaciones SVG compactas y las pone a disposición de los LLM a través del Protocolo de contexto de modelo (MCP).

Nota: Este proyecto es experimental y está diseñado para mejorar las sesiones de "codificación de vibraciones" con LLM al brindar contexto visual e información de depuración enriquecida.

Explicación en vídeo

Capacidades clave

Captura y vectoriza elementos del lienzo de los juegos de navegador.
Recopila registros y errores de la consola en tiempo real
Captura excepciones no controladas con seguimientos de pila completos
Hace que la información visual y de depuración esté disponible para los LLM a través de MCP
Crea una experiencia de depuración perfecta para los desarrolladores que trabajan con LLM

Cómo funciona

Un cliente liviano se ejecuta en el juego/aplicación del navegador.
El cliente captura instantáneas del lienzo, registros/errores de la consola y excepciones no controladas.
Los datos se envían al servidor Vibe-Eyes a través de WebSocket (evitando problemas de CORS)
El servidor vectoriza las imágenes del lienzo y las almacena con la información de depuración
Los LLM se conectan a través del Protocolo de Contexto de Modelo para acceder a los datos más recientes
Los LLM pueden "ver" lo que está sucediendo y ayudar a depurar problemas con contexto completo

Componentes

1. Servidor MCP Vibe-Eyes ( `mcp.js` )

El servidor central que:

Recibe instantáneas del lienzo a través de Socket.IO
Vectoriza imágenes para compactar la representación SVG (aproximación aproximada)
Almacena información de depuración (registros, errores, excepciones, tiempos)
Expone los datos a través del Protocolo de Contexto de Modelo (MCP)
Proporciona puntos finales HTTP para acceso directo
Procesa imágenes secuencialmente para administrar recursos

2. Cliente del navegador

El cliente del navegador está disponible en el repositorio vibe-eyes-client .

Una integración de navegador liviana que:

Encuentra elementos del lienzo en la página.
Captura el contenido del lienzo como URL de datos
Intercepta registros y errores de la consola
Detecta excepciones globales no controladas con seguimientos de pila
Envía datos al servidor Vibe-Eyes a través de WebSockets
Minimiza el impacto en el rendimiento de los juegos.
Admite la inicialización explícita para controlar cuándo comienza la captura

3. Motor de vectorización ( `vectorizer.js` )

Una biblioteca de vectorización SVG de alta calidad que:

Convierte imágenes rasterizadas en SVG vectoriales
Optimiza los SVG para mejorar el tamaño y la claridad
Conserva la información visual mientras reduce el tamaño de los datos

Empezando

Instalación

# Clone the repository
git clone https://github.com/monteslu/vibe-eyes.git
cd vibe-eyes

# Install dependencies
npm install

Uso con agentes LLM

Registre el servidor MCP con su agente de IA:

# For Claude Code
claude mcp add

Esto le permite a Claude utilizar las capacidades de Vibe-Eyes a través de MCP.

Integración con juegos/aplicaciones

Agregue el cliente a su aplicación de navegador incluyendo los scripts necesarios:

<!-- Include Socket.IO client -->
<script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>

<!-- Include Vibe-Eyes client -->
<script src="https://cdn.jsdelivr.net/npm/vibe-eyes-client/dist/index.min.js"></script>

<!-- Initialize the client -->
<script>
  // Import the initialization function if using as module
  // import { initializeVibeEyes } from 'vibe-eyes-client';
  
  // Initialize with configuration
  const vibeEyes = initializeVibeEyes({
    // WebSocket URL to the Vibe-Eyes server
    serverUrl: 'ws://localhost:8869',
    // Capture interval in milliseconds
    captureDelay: 1000,
    // Start capturing automatically after connection
    autoCapture: true
  });
</script>

Uso con Claude u otros LLM

El servidor MCP expone una herramienta para que los LLM accedan a la información visual y de depuración más reciente a través del Protocolo de contexto de modelo (MCP):

getGameDebug({ includeSvg: true/false })

El Máster recibirá:

Registros y errores recientes de la consola de la aplicación
Excepciones no controladas con seguimiento de pila completo (si se produjeron)
Aproximación SVG vectorizada del lienzo (si includeSvg es verdadero)
Información de tiempo y correlación para conectar el estado visual con los registros

Esto permite al LLM “ver” lo que está sucediendo en la aplicación y brindar una mejor asistencia.

Ejemplo de configuración de MCP (para Claude Code)

Para acceder a Vibe-Eyes de Claude:

{
  "name": "vibe-eyes",
  "url": "http://localhost:8869",
  "tools": [
    {
      "name": "getGameDebug",
      "description": "Retrieves the most recent canvas visualization and debug information from a browser game or application"
    }
  ]
}

Cómo Vibe-Eyes ayuda con la codificación de vibraciones

Las sesiones tradicionales de "codificación de vibraciones" requieren que los desarrolladores tomen capturas de pantalla manualmente y describan lo que sucede en su aplicación. Vibe-Eyes automatiza este proceso mediante:

Proporcionar contexto visual : los LLM pueden ver el estado visual real del juego/aplicación
Correlación de problemas visuales y de código : los registros de la consola se emparejan con el estado visual
Reducción del trabajo manual : no es necesario capturar ni cargar capturas de pantalla manualmente
Habilitación de la depuración en tiempo real : los LLM pueden observar los cambios a medida que ocurren
Optimización de la transferencia de datos : la representación vectorial es más compacta que las capturas de pantalla

Consideraciones de rendimiento

El cliente del navegador está diseñado para minimizar el impacto en el rendimiento de la aplicación.
La creación de URL de datos de lienzo puede consumir muchos recursos de la CPU, por lo que la frecuencia de captura es configurable
El transporte WebSocket evita los problemas CORS comunes en configuraciones entre dominios
El servidor procesa las imágenes secuencialmente para evitar la sobrecarga.
La vectorización SVG equilibra la precisión visual con la optimización del tamaño

Acceso directo a SVG

Para aplicaciones que quieran reutilizar la salida SVG vectorizada:

Respuesta de WebSocket : el servidor incluye el SVG directamente en las respuestas de WebSocket:
socket.on('debugCapture', (data, callback) => { // Capture and process... callback({ success: true, id: "capture_123", svg: "<svg>...</svg>", // Vectorized SVG stats: { /* stats data */ } }); });
Punto final HTTP : acceda a la última captura a través del punto final /latest :
fetch('http://localhost:8869/latest') .then(res => res.json()) .then(data => { const svg = data.vectorized?.svg; // Use the SVG... });

Referencia de API

Cliente de navegador

// Initialize the client
const vibeEyes = initializeVibeEyes({
  serverUrl: 'ws://localhost:8869',
  captureDelay: 1000, // ms between captures
  maxLogs: 10,        // Max console.log entries to store
  maxErrors: 10,      // Max console.error entries to store
  autoCapture: true   // Start capturing automatically
});

// Manual control
vibeEyes.startCaptureLoop(); // Start auto-capturing
vibeEyes.stopCaptureLoop();  // Stop auto-capturing
vibeEyes.captureAndSend();   // Trigger one capture immediately

// The server responds with:
// {
//   success: true,
//   id: "capture_1234567890",
//   processedAt: 1616161616161,
//   svg: "<svg>...</svg>",  // The vectorized SVG for direct use
//   stats: {
//     vectorizeTime: 120,
//     optimizeTime: 30,
//     originalSize: 50000,
//     finalSize: 15000,
//     sizeReduction: 70
//   }
// }

Herramienta MCP

// MCP tool available to LLMs
getGameDebug({
  includeSvg: true  // Whether to include SVG visualization
})

// Returns
{
  success: true,
  capture: {
    id: "capture_123456789",
    timestamp: 1616161616161,
    console_logs: [
      { timestamp: 1616161616000, data: ["Player position:", {x: 10, y: 20}] },
      // ...more logs
    ],
    console_errors: [
      // Any errors captured
    ],
    unhandled_exception: {
      timestamp: 1616161616100,
      message: "Uncaught SyntaxError: Unexpected token ';'",
      stack: "SyntaxError: Unexpected token ';'\n    at game.js:42:10\n...",
      type: "SyntaxError",
      source: "game.js",
      line: 42,
      column: 10
    },
    vectorized: {
      svg: "<svg>...</svg>",  // Only if includeSvg is true (rough approximation)
      imageType: "png",
      stats: {
        vectorizeTime: 120,
        optimizeTime: 30,
        originalSize: 50000,
        finalSize: 15000,
        sizeReduction: 70
      }
    }
  }
}

CLI del vectorizador independiente

El proyecto también incluye una herramienta CLI independiente para vectorizar archivos individuales:

# Install CLI globally
npm install -g vibe-eyes

# Use the CLI
vibe-eyes-vectorize input.png output.svg

# With options
vibe-eyes-vectorize photo.jpg --color-precision 10 --max-iterations 100

Licencia

ISC

Vibe-Eyes

Integrations

Vibradores Ojos

Explicación en vídeo

Capacidades clave

Cómo funciona

Componentes

1. Servidor MCP Vibe-Eyes ( `mcp.js` )

2. Cliente del navegador

3. Motor de vectorización ( `vectorizer.js` )

Empezando

Instalación

Uso con agentes LLM

Integración con juegos/aplicaciones

Uso con Claude u otros LLM

Ejemplo de configuración de MCP (para Claude Code)

Cómo Vibe-Eyes ayuda con la codificación de vibraciones

Consideraciones de rendimiento

Acceso directo a SVG

Referencia de API

Cliente de navegador

Herramienta MCP

CLI del vectorizador independiente

Licencia

Appeared in Searches

Integrations

Vibradores Ojos

Explicación en vídeo

Capacidades clave

Cómo funciona

Componentes

1. Servidor MCP Vibe-Eyes ( mcp.js )

2. Cliente del navegador

3. Motor de vectorización ( vectorizer.js )

Empezando

Instalación

Uso con agentes LLM

Integración con juegos/aplicaciones

Uso con Claude u otros LLM

Ejemplo de configuración de MCP (para Claude Code)

Cómo Vibe-Eyes ayuda con la codificación de vibraciones

Consideraciones de rendimiento

Acceso directo a SVG

Referencia de API

Cliente de navegador

Herramienta MCP

CLI del vectorizador independiente

Licencia

Appeared in Searches

1. Servidor MCP Vibe-Eyes ( `mcp.js` )

3. Motor de vectorización ( `vectorizer.js` )