Vibe-Eyes

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

javascript

50

GitHub Stars

javascript

Language

6 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

Vibe-Eyes is an MCP server that lets large language models access live visual and debug context from browser-based games and applications. By vectorizing canvas content and collecting logs and exceptions, you can ask your LLM to help debug, optimize, and understand what’s happening in real time with full context.

How to use

Connect your MCP client to the Vibe-Eyes server to provide your LLM with visual context and debugging data. The server exposes the latest vectorized canvas representations along with logs, errors, and unhandled exceptions, making it easier for the LLM to reason about what your game or app is doing.

How to install

Prerequisites you need on your machine: node.js installed (recommended LTS version) and npm or yarn for package management.

# Install the Vibe-Eyes client with Claude support via Smithery
npx -y @smithery/cli install @monteslu/vibe-eyes --client claude

# Manual setup of the server (clone and install dependencies)
git clone https://github.com/monteslu/vibe-eyes.git
cd vibe-eyes
npm install

Additional content

Vibe-Eyes uses a browser client to capture canvas content, console logs, and unhandled exceptions, then sends this data to a Vibe-Eyes server over WebSockets. The server vectorizes images into SVGs and makes both visual data and debug information accessible to LLMs through MCP.

Key components you will work with: the Vibe-Eyes MCP Server (mcp.js), the Browser Client, and the Vectorization Engine (vectorizer.js). The client is designed to minimize performance impact while providing rich context for debugging.

If you plan to connect Claude or another MCP client, you can register the MCP endpoint and tool to access the latest data. For Claude Code, you would expose a tool such as getGameDebug to retrieve the most recent canvas visualization and debug information.

Example integration snippet for Claude MCP configuration to access Vibe-Eyes data.

{
  "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"
    }
  ]
}

Available tools

getGameDebug

Retrieves the most recent canvas visualization and debug information from a browser game or application