LLM が「参照」できる MCP サーバーは、ベクター化されたキャンバスの可視化とデバッグ情報を通じて、ブラウザベースのゲームやアプリケーションで何が起こっているかを確認できます。

Vibe-Eyes は、軽量ブラウザクライアントがキャンバスコンテンツをキャプチャし、情報をデバッグするクライアント・サーバー・アーキテクチャを使用して、WebSocket 経由で Node.js サーバーに送信し、画像をコンパクトな SVG 表現にベクトル化し、モデルコンテキスト・プロトコル (MCP) を介して LLM に利用できるようにします。

注記:このプロジェクトは、視覚的なコンテキストと豊富なデバッグ情報を提供することで、LMs で「vibe コーディング」セッションを強化する実験的かつ設計されています。

ビデオの説明

主な機能

• ブラウザゲームからキャンバス要素をキャプチャしてベクター化
• コンソールログとエラーをリアルタイムで収集
• スタックトレースで未処理の例外をキャッチ
• MCP 経由で LLM に利用できる視覚およびデバッグ情報を作って下さい
• LLM を扱う開発者のためのシームレスなデバッグ体験を作成

使い方

1。 ブラウザゲーム/アプリケーションで軽量なクライアントが実行 2。 クライアントは、キャンバススナップショット、コンソールログ/エラーをキャプチャし、非処理例外をキャプチャします。 3.

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