一个MCP服务器，使LLM能够通过矢量画布可视化和调试信息“看到”浏览器游戏和应用中的动态。

Vibe-Eyes 采用客户端-服务器架构，轻量级浏览器客户端捕获画布内容和调试信息，通过 WebSockets 发送到Node.js服务器，后者将图像矢量化为紧凑的 SVG 表示，并通过模型上下文协议（MCP）向大型语言模型（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