Vibe-Eyes

What is 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. It uses a client-server architecture with WebSockets to capture canvas content, console logs, errors, and unhandled exceptions, then exposes that data to LLMs via the Model Context Protocol.

How to use Vibe-Eyes?

Install automatically via Smithery (npx -y @smithery/cli install @monteslu/vibe-eyes --client claude) or manually (clone repo, npm install). Add the client scripts to your browser application and initialize with initializeVibeEyes({serverUrl, captureDelay, autoCapture}). Register the MCP server with your AI agent (e.g., claude mcp add). The LLM then calls the tool getGameDebug({ includeSvg: true/false }) to receive visual and debug information.

Key features of Vibe-Eyes

• Captures canvas elements from browser games and applications
• Vectorizes canvas images into compact SVG representations
• Collects console logs, errors, and unhandled exceptions in real-time
• Exposes visual and debug data to LLMs via the MCP getGameDebug tool
• Uses WebSocket transport to avoid CORS issues
• Provides a standalone CLI for vectorizing individual files

Use cases of Vibe-Eyes

• Debugging browser games with an LLM that can “see” the actual visual state
• Enhancing “vibe coding” sessions by automatically providing visual context to the AI
• Real‑time assisted debugging where an LLM observes canvas changes and console logs simultaneously
• Reducing manual screenshot‑and‑describe workflows when working with LLM agents

FAQ from Vibe-Eyes

What does Vibe-Eyes do exactly?

It captures canvas content, console logs, and unhandled exceptions from a browser game or app, sends that data via WebSockets to a Node.js server, vectorizes the images into SVG, and makes everything available to an LLM through an MCP tool called getGameDebug.

How do I integrate Vibe-Eyes into my game or application?

Add the Socket.IO client and the vibe-eyes-client script to your HTML page, then call initializeVibeEyes({ serverUrl, captureDelay, autoCapture }). The client automatically finds canvas elements, captures data, and sends it to the server.

Does Vibe-Eyes affect game performance?

The client is designed to minimize performance impact. Capture frequency is configurable via captureDelay, and the server processes images sequentially to prevent overload. Canvas data‑URL creation can be CPU‑intensive, so you can adjust or manually trigger captures.

What data is sent to the LLM?

The getGameDebug tool returns recent console logs, console errors, unhandled exceptions (with stack traces), and an optional vectorized SVG approximation of the canvas. Timing information is included to correlate visual state with log entries.

Does Vibe-Eyes use authentication or require special transport?

No authentication is documented. The server uses WebSocket (Socket.IO) for client communication and HTTP for direct /latest endpoint access. MCP tools are available over HTTP to the LLM agent. No special security or authorization steps are described.