LLM을 "see"로 활성화하는 MCP 서버는 벡터화 된 캔버스 시각화 및 디버그 정보를 통해 브라우저 기반 게임 및 응용 프로그램에 무슨 일이 일어나고 있습니다.

Vibe-Eyes는 경량 브라우저 클라이언트가 캔버스 콘텐츠를 캡처하고 디버그 정보를 캡처 한 클라이언트 서버 아키텍처를 사용하여 WebSockets를 통해 Node.js 서버로 전송하여 이미지를 컴팩트 SVG 표현으로 벡터화하고 모델 Context Protocol (MCP)을 통해 LLM을 사용할 수 있습니다.

참고: 이 프로젝트는 시각적 맥락과 풍부한 디버그 정보를 제공함으로써 LLM과 함께 “vibe coding” 세션을 개선하도록 설계되었습니다.

비디오 설명

키 기능

• 캡처 및 브라우저 게임에서 캔버스 요소를 벡터화
• 실시간 콘솔 로그 및 오류 수집
• Catches 완전 스택 추적 예외
• MCP를 통해 LLMs에 사용할 수 있는 시각 및 디버그 정보를 만듭니다.
• LLM과 함께 일하는 개발자를 위한 완벽한 디버깅 경험 창조

그것이 작동하는 방법

1. 경량 클라이언트는 브라우저 game/application에서 실행합니다
2. 클라이언트 캡처 캔버스 스냅 샷, 콘솔 로그 / 오류, 그리고 unhandled 예외
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