Vibe Eyes Client

The Vibe Eyes Client is a lightweight client library used to integrate browser games with the Vibe Eyes MCP Debugging Server to achieve real-time debugging, visualization, and analysis functions.

Developer tools Games and gamification #Game Debugging #Real-time Visualization #Error Monitoring #SVG Display .JavaScript

rating : 2.5 points

downloads : 7.8K

update time : 2025-04-28

Open Site

Introduction

The Vibe Eyes MCP Debugging Server is a tool designed specifically for browser games, aiming to help developers monitor and analyze the game's running state in real-time. By capturing canvas content, network request data, and log information, this server can provide rich debugging functions, thereby improving development efficiency.

Main Features

Supports multi-platform deployment (Web and mobile), low resource consumption, a plugin extension mechanism, and detailed debugging information recording.

Application Scenarios

Suitable for scenarios such as development testing, performance optimization, and error troubleshooting of browser games, especially for game projects that require real-time monitoring.

Canvas Capture Function

Supports real-time capture of canvas content and transmits it to the debugging server via the network for visual display.

Network Request Tracking

Monitors all network requests in the game, including HTTP and WebSocket communications, to help analyze performance bottlenecks.

Log Analysis Function

Collects and displays log information during the game's running process, supporting filtering, searching, and advanced analysis.

Basic Integration

Configure the Debugging Window

Basic Integration Example

Demonstrate how to perform basic Vibe Eyes integration in a project.

Custom Debugging Window Example

Configure the debugging window to be displayed on the left side of the game interface and set the width.

Does Vibe Eyes support all browser games?

What happens if the debugging server is not running?

How to manage resource consumption to optimize performance?

🚀 Vibe Eyes Client

A lightweight client library that integrates browser games with Vibe Eyes Debug Server for real-time debugging, visualization, and analysis. This enables AI to "see" the game it's working on in real-time!

🚀 Quick Start

The Vibe Eyes Client is a lightweight library designed to integrate browser games with the Vibe Eyes Debug Server for real-time debugging, visualization, and analysis. It allows AI to "see" the game it's working on in real-time.

✨ Features

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
Comprehensive debug statistics, including SVG size measurement
Minimal impact on game performance
Robust error handling and graceful connection recovery
Multiple build formats (UMD, ESM, IIFE)

✨ What's New in 1.1.0

SVG Display on Disconnect: The debug window now works even when not connected to the server.
Real-time Connection Status Visualization: Displays the connection status in real-time and provides visual feedback.
Intelligent Window Positioning: Positions the debug window relative to the game window (right, left, top, bottom).
Responsive Defaults: The debug window size defaults to 75% of the game window dimensions.
Improved Error Handling: Better handling of window closing and reconnection scenarios.

📦 Installation

npm install vibe-eyes-client

Or include it directly in your HTML:

<script src="https://unpkg.com/vibe-eyes-client/dist/vibe-eyes.min.js"></script>

💻 Usage Examples

Basic Usage

// Initialize with default settings (auto-connect to the server)
// (null = auto-detect)
// (creates a pop-up window if container is null)

VibeEyes.init({
  // Configuration options
});

// Listen for events
VibeEyes.on('message', (msg) => {
  console.log('Received message:', msg);
});

Advanced Usage

VibeEyes.init({
  serverUrl: 'http://localhost:3000', // Custom server URL
  debugMode: true, // Enable debug mode
  container: '#debug-container' // Use a custom container element
});

📚 Documentation

General Options

Property	Type	Details
serverUrl	string	The URL address of the server (Default: `http://localhost:3000`)
debugMode	boolean	Whether to enable debug mode (Default: `false`)
container	string	The selector or element of the custom container (Default: `null`, automatically creates a pop-up window)

Network Options

Property	Type	Details
reconnectInterval	number	The interval time for reconnecting after disconnection (in milliseconds, Default: `3000`)
maxRetries	number	The maximum number of retries (Default: `5`)

Visualization Options

Property	Type	Details
theme	string	The theme color of the SVG (Default: `light`, Optional: `dark`)
fontFamily	string	The font family of the text (Default: `Arial`)
fontSize	number	The size of the text (in pixels, Default: `14`)

Example Code

<!DOCTYPE html>
<html>
<head>
  <script src="vibe-eyes.min.js"></script>
</head>
<body>
  <div id="debug-container"></div>
  <script>
    VibeEyes.init({
      serverUrl: 'http://localhost:3000',
      debugMode: true,
      container: '#debug-container'
    });
  </script>
</body>
</html>