Vibe-Eyes

An MCP server that enables LLMs to "see" what's happening in browser-based games and applications through vectorized canvas visualization and debug information.

<a href="https://glama.ai/mcp/servers/@monteslu/vibe-eyes">

</a>

Vibe-Eyes uses a client-server architecture where a lightweight browser client captures canvas content and debug information, sends it to a Node.js server via WebSockets, which then vectorizes the images into compact SVG representations and makes them available to LLMs through the Model Context Protocol (MCP).

flowchart LR
    A["Browser Game/App<br/>(Canvas + JavaScript)"] -->|"Captures"| B["Vibe-Eyes Client<br/>(vibe-eyes-client)"]
    B -->|"WebSocket<br/>(CORS-free)"| C["Socket.IO Server"]
    
    subgraph server["Vibe-Eyes Server (mcp.js)"]
        C -->|"Process"| D["Vectorization<br/>(vectorizer.js)"]
        C -->|"Store"| E["Debug Data<br/>(logs, errors, exceptions)"]
        D -->|"Rough SVG"| F["MCP Tool: getGameDebug()"]
        E --> F
    end
    
    F -->|"SVG + Debug Info"| G["Claude/LLM<br/>(MCP Client)"]
    G -->|"Debugging<br/>Assistance"| A
    
    classDef default color:#000,font-weight:bold
    classDef edgeLabel color:#333,font-size:12px
    
    style A fill:#c0e0ff,stroke:#000,stroke-width:2px
    style B fill:#ffe0a0,stroke:#000,stroke-width:2px
    style C fill:#a0d0ff,stroke:#000,stroke-width:2px
    style D fill:#b0e0a0,stroke:#000,stroke-width:2px
    style E fill:#ffb0b0,stroke:#000,stroke-width:2px
    style F fill:#d0b0ff,stroke:#000,stroke-width:2px
    style G fill:#ffb0d0,stroke:#000,stroke-width:2px
    style server fill:#f0f0f0,stroke:#666,stroke-width:1px,stroke-dasharray: 5 5,color:#000

> Note: This project is experimental and designed to enhance "vibe coding" sessions with LLMs by providing visual context and rich debug information.

Video Explanation

Key Capabilities

- Captures and vectorizes canvas elements from browser games
- Collects console logs and errors in real-time
- Catches unhandled exceptions with full stack traces
- Makes the visual and debug information available to LLMs via MCP
- Creates a seamless debugging experience for developers working with LLMs

How It Works

1. A lightweight client runs in the browser game/application
2. The client captures canvas snapshots, console logs/errors, and unhandled exceptions
3. Data is sent to the Vibe-Eyes server via WebSocket (avoiding CORS issues)
4. The server vectorizes the canvas images and stores them with the debug information
5. LLMs connect via the Model Context Protocol to access the latest data
6. LLMs can "see" what's happening and help debug issues with full context

Components

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

The core server that:
- Receives canvas snapshots via Socket.IO
- Vectorizes images to compact SVG representation (rough approximation)
- Stores debug information (logs, errors, exceptions, timing)
- Exposes the data via Model Context Protocol (MCP)
- Provides HTTP endpoints for direct access
- Processes images sequentially to manage resources

2. Browser Client

The browser client is available at vibe-eyes-client repository.

A lightweight browser integration that:
- Finds canvas elements in the page
- Captures canvas content as data URLs
- Intercepts console logs and errors
- Catches global unhandled exceptions with stack traces
- Sends data to the Vibe-Eyes server via WebSockets
- Minimizes performance impact on games
- Supports explicit initialization to control when capturing starts

3. Vectorization Engine (vectorizer.js)

A high-quality SVG vectorization library that:
- Converts raster images to vector SVGs
- Optimizes SVGs for size and clarity
- Preserves visual information while reducing data size

Getting Started

Installation

Installing via Smithery

To install Vibe-Eyes for Claude Desktop automatically via Smithery:

npx -y @smithery/cli install @monteslu/vibe-eyes --client claude

Manual Installation