Vibe Eyes Client

What is Vibe Eyes Client?

Vibe Eyes Client is a lightweight JavaScript library that integrates browser games with the Vibe Eyes MCP debug server for real-time debugging, visualization, and analysis. It captures canvas screenshots, console logs, and errors, and displays SVG visualizations sent back from the server, allowing an AI to see the game it is working on in real time.

How to use Vibe Eyes Client?

Install via npm (npm install vibe-eyes-client) or include the <script> tag from unpkg. Call initializeVibeEyes() with optional configuration to begin auto-capturing. Use the returned client instance to enable an SVG debug window with client.enableSvgDisplay(), toggle it, or stop/restart the capture loop. Configuration options include server URL, capture delay, canvas ID, and debug window position/size.

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 statistics including SVG size measurements
• Minimal performance impact on games
• Graceful connection recovery and error handling
• Multiple build formats (UMD, ESM, IIFE)

Use cases of Vibe Eyes Client

• Debugging browser games in real time with an AI assistant
• Providing visual feedback to an AI coding agent while it modifies game code
• Monitoring game state changes through live SVG visualizations
• Logging and analyzing runtime errors and console output during development

FAQ from Vibe Eyes Client

Does the client require a running Vibe Eyes MCP server?

Yes, the client auto-connects to a Vibe Eyes MCP server at http://localhost:8869 by default. You must have the server running to capture and send data.

How do I install Vibe Eyes Client?

You can install it via npm with npm install vibe-eyes-client or include it directly in HTML via <script src="https://unpkg.com/vibe-eyes-client/dist/vibe-eyes.min.js"></script>.

What build formats are available?

UMD (minified and unminified), IIFE, and ES Module builds are available in the dist/ directory.

Can I customize the debug window position?

Yes. The debug window configuration accepts a position parameter with options 'right', 'left', 'top', 'bottom', or 'detached'. The default is 'right' relative to the game window.

What data does Vibe Eyes Client capture?

It captures canvas screenshots, console logs, errors, unhandled promise rejections, and displays SVG visualizations received from the Vibe Eyes MCP server.