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中：

用法

基本集成

// 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大小
• 当新数据从服务器到达时实时更新

配置选项

所有配置选项都是可选的，并具有合理的默认值。

客户端初始化选项

SVG显示选项

调试窗口选项

构建格式

以下构建格式在 dist/ 目录：

• vibe-eyes.min.js -针对大多数用例的小型UMD构建
• vibe-eyes.js -用于调试的未缩小UMD构建
• vibe-eyes.iife.js -IIFE构建，带有全局变量，可直接用于浏览器
• vibe-eyes.esm.js -ES模块适用于现代捆扎机和环境

相关项目

• Vibe Eyes MCP服务器 -处理调试数据并生成可视化的配套服务器

许可证

国际协调委员会