Vibe Eyes Client
by monteslu
A lightweight client library to integrate browser games with the Vibe Eyes MCP debug server for real-time debugging, visualization, and analysis. This allows AI to SEE the game it's working on in real time!
Last updated: N/A
What is Vibe Eyes Client?
Vibe Eyes Client is a client-side JavaScript library designed to facilitate real-time debugging, visualization, and analysis of browser games by integrating with the Vibe Eyes MCP debug server.
How to use Vibe Eyes Client?
Install via npm (npm install vibe-eyes-client) or include directly in your HTML using a <script> tag. Initialize the client with initializeVibeEyes() and configure options like serverUrl, captureDelay, and canvasId. Use the client instance to control capture loops, enable SVG display, and configure the debug window.
Key features of Vibe Eyes Client
Automatic canvas screenshot capture and streaming
Console log and error collection with timestamps
Global error and unhandled promise rejection handling
SVG visualization display in a dedicated debug window
Complete debug stats with SVG size measurements
Minimal performance impact on games
Robust error handling with graceful connection recovery
Multiple build formats (UMD, ESM, IIFE)
Use cases of Vibe Eyes Client
Debugging game logic in real-time
Visualizing AI behavior in games
Analyzing game performance
Collecting error logs for troubleshooting
Providing a visual interface for game state
FAQ from Vibe Eyes Client
How do I install Vibe Eyes Client?
How do I install Vibe Eyes Client?
You can install it via npm using npm install vibe-eyes-client or include it directly in your HTML using a <script> tag.
How do I configure the server URL?
How do I configure the server URL?
You can configure the server URL using the serverUrl option when initializing the client with initializeVibeEyes({ serverUrl: 'http://your-debug-server:8869' }).
How do I capture a specific canvas?
How do I capture a specific canvas?
Use the canvasId option when initializing the client: initializeVibeEyes({ canvasId: 'my-canvas' }).
How do I enable SVG display?
How do I enable SVG display?
Call the enableSvgDisplay() method on the client instance: client.enableSvgDisplay().
How do I configure the debug window position?
How do I configure the debug window position?
Use the debugWindow.position option when initializing the client: initializeVibeEyes({ debugWindow: { position: 'right' } }). Possible positions are 'right', 'left', 'top', 'bottom', or 'detached'.