Сервер MCP, который позволяет LLM «видеть» то, что происходит в браузерных играх и приложениях через векторизованную визуализацию холста и отладку информации.

Vibe-Eyes использует архитектуру клиент-сервер, где легкий клиент браузера захватывает контент холста и отлаживает информацию, отправляет его на сервер Node.js через WebSockets, который затем векторизирует изображения в компактные представления SVG и делает их доступными для LLM через протокол Model Context Protocol (MCP).

Этот проект является экспериментальным и предназначен для улучшения сеансов «vibe-кодирования» с LLM, предоставляя визуальный контекст и богатую информацию отладки.

Видеообъяснение

Ключевые возможности

• Захват и векторизация элементов холста из браузерных игр Собирает журналы консолей и ошибки в режиме реального времени Улавливает необработанные исключения с полными следами стека
• Обеспечивает доступность визуальной и отладочной информации для LLM через MCP Создает бесшовный опыт отладки для разработчиков, работающих с LLM

Как это работает

1. Легкий клиент запускается в браузерной игре / приложении
2. клиент фиксирует снимки холста, журналы/ошибки консоли и необработанные исключения

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.

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(Canvas + JavaScript)"] -->|"Captures"| B["Vibe-Eyes Client(vibe-eyes-client)"]
    B -->|"WebSocket(CORS-free)"| C["Socket.IO Server"]
    
    subgraph server["Vibe-Eyes Server (mcp.js)"]
        C -->|"Process"| D["Vectorization(vectorizer.js)"]
        C -->|"Store"| E["Debug Data(logs, errors, exceptions)"]
        D -->|"Rough SVG"| F["MCP Tool: getGameDebug()"]
        E --> F
    end
    
    F -->|"SVG + Debug Info"| G["Claude/LLM(MCP Client)"]
    G -->|"DebuggingAssistance"| 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