Vibe Eyes Client

Name: Vibe Eyes Client
Author: monteslu

@monteslu

リポジトリ

Vibe Eyes Client について

Client library for integrating browser games with Vibe Eyes MCP debug server

基本情報

カテゴリ

その他

ランタイム

node

トランスポート

stdio

公開者

monteslu

設定

標準の設定はありません

このサーバーの README には解析可能な MCP 設定ブロックが含まれていません。インストール手順はリポジトリをご確認ください。

リポジトリ

ツール

ツールは検出されませんでした

ツールは README から自動的に抽出されます。メンテナーは ## Tools という見出しの下に記載することで、このタブに反映できます。

概要

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.