Vibe Eyes Client

Vibe Eyes クライアント

ブラウザーゲームを Vibe Eyes MCP デバッグサーバーと統合し、リアルタイムのデバッグ、可視化、分析を行うための軽量なクライアントライブラリです。

これにより、AI は作業中のゲームをリアルタイムで確認できます！

特長

• キャンバスのスクリーンショットを自動でキャプチャしてストリーミング
• タイムスタンプ付きのコンソールログとエラーの収集
• グローバルエラーと未処理の Promise 拒否の処理
• 専用のデバッグウィンドウで SVG の可視化を表示
• SVG サイズの測定を含む、完全なデバッグ統計情報
• ゲームへのパフォーマンス影響を最小限に抑制
• 接続を適切に復旧する堅牢なエラー処理
• 複数のビルド形式（UMD、ESM、IIFE）

バージョン 1.1.0 の新機能

• 未接続時の SVG 表示：サーバーに接続していなくても、デバッグウィンドウを使用できるようになりました
• 接続状態の可視化：視覚的なフィードバックで接続状態をリアルタイムに表示します
• スマートなウィンドウ配置：ゲームウィンドウに対するデバッグウィンドウの位置（右、左、上、下）を指定できます
• レスポンシブなデフォルト設定：デバッグウィンドウのサイズは、デフォルトでゲームウィンドウの寸法の 75% になります
• エラー処理の改善：ウィンドウの閉じ方や再接続の状況をより適切に処理します

インストール

npm install vibe-eyes-client

または、HTML に直接追加します。

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

使い方

基本的な統合

// Initialize with default settings (auto-connects to http://localhost:8869)
// Available globally when using the script tag
// The client will automatically start capturing once connected
initializeVibeEyes();

// Or use the existing client instance directly
window.VibeEyesClient.initialize();

カスタム設定

// Initialize with custom settings (when included via script tag)
initializeVibeEyes({
  serverUrl: 'http://your-debug-server:8869',
  captureDelay: 2000,   // Screenshot every 2 seconds
  maxLogs: 50,          // Store more logs
  canvasId: 'my-canvas' // Specific canvas to capture
});

// Or when using as a module
import { initializeVibeEyes } from 'vibe-eyes-client';

initializeVibeEyes({
  serverUrl: 'http://your-debug-server:8869',
  captureDelay: 2000,
  canvasId: 'game-canvas'
});

手動制御

// Get the client instance
const client = window.VibeEyesClient;

// Explicitly stop/restart capturing if needed
client.stopCaptureLoop();
client.startCaptureLoop();

SVG の可視化を表示する

Vibe Eyes MCP サーバーは SVG の可視化を返します。専用のデバッグウィンドウに表示できます。

// Get the client from initialization
const client = initializeVibeEyes();

// Enable SVG display - opens a new debug window with SVG and stats
client.enableSvgDisplay();

// You can optionally provide a custom container
client.enableSvgDisplay({
  container: '#my-custom-container' // Optional existing container element
});

// Configure the debug window position and size (all options are optional)
const client = initializeVibeEyes({
  serverUrl: 'http://localhost:8869',
  debugWindow: {
    // All debugWindow properties are optional with sensible defaults
    width: 500,                // Optional: Width in pixels (default: 75% of game window width)
    height: 600,               // Optional: Height in pixels (default: 75% of game window height)
    position: 'right'          // Optional: Position relative to game window (default: 'right')
    // Possible positions: 'right', 'left', 'top', 'bottom', 'detached'
  }
});

// Toggle the display on/off
client.toggleSvgDisplay();

// Disable the display (closes the debug window)
client.disableSvgDisplay();

デバッグウィンドウには次の内容が表示されます。

• 上部に SVG の可視化
• 下部に、SVG サイズを含む完全な応答統計情報
• サーバーから新しいデータが届くたびにリアルタイムで更新

設定オプション

すべての設定オプションは任意で、適切なデフォルト値が設定されています。

クライアント初期化オプション

オプション	デフォルト	説明
serverUrl	'http://localhost:8869'	Vibe Eyes MCP サーバーの URL
captureDelay	1000	キャプチャ間隔（ミリ秒）
maxLogs	10	保存するコンソールログの最大数
maxErrors	10	保存するエラーログの最大数
autoConnect	true	初期化時に接続するかどうか
canvasId	null	キャプチャする特定のキャンバスの ID（null = 自動検出）
debugWindow	Object	デバッグウィンドウの設定（下記を参照）

SVG 表示オプション

オプション	デフォルト	説明
container	null	SVG コンテナーの要素またはセレクター（null の場合はポップアップウィンドウを作成）

デバッグウィンドウのオプション

オプション	デフォルト	説明
width	null	デバッグウィンドウの幅（ピクセル単位。null = ゲームウィンドウの幅の 75%）
height	null	デバッグウィンドウの高さ（ピクセル単位。null = ゲームウィンドウの高さの 75%）
position	'right'	ゲームウィンドウに対する位置：'right'、'left'、'top'、'bottom'、'detached'

ビルド形式

dist/ ディレクトリでは、次のビルド形式を利用できます。

• vibe-eyes.min.js - ほとんどの用途に適した、最小化済みの UMD ビルド
• vibe-eyes.js - デバッグ用の、最小化されていない UMD ビルド
• vibe-eyes.iife.js - ブラウザーで直接使用するためのグローバル変数を含む IIFE ビルド
• vibe-eyes.esm.js - 最新のバンドラーや環境向けの ES モジュール

関連プロジェクト

• Vibe Eyes MCP サーバー - デバッグデータを処理して可視化を生成する連携サーバー

ライセンス

ISC