バイブアイズ
ベクトル化されたキャンバスの視覚化とデバッグ情報を通じて、ブラウザベースのゲームやアプリケーションで何が起こっているかを LLM が「確認」できるようにする MCP サーバー。
Vibe-Eyes はクライアント サーバー アーキテクチャを使用しており、軽量のブラウザー クライアントがキャンバス コンテンツとデバッグ情報をキャプチャし、WebSocket 経由で Node.js サーバーに送信します。その後、Node.js サーバーは画像をコンパクトな SVG 表現にベクトル化し、モデル コンテキスト プロトコル (MCP) を通じて LLM で使用できるようにします。
注: このプロジェクトは実験的なもので、視覚的なコンテキストと豊富なデバッグ情報を提供することで、LLM を使用した「バイブ コーディング」セッションを強化するように設計されています。
ビデオ説明
主な機能
- ブラウザゲームからキャンバス要素をキャプチャしてベクトル化します
- コンソールログとエラーをリアルタイムで収集します
- フルスタックトレースで未処理の例外をキャッチ
- MCPを介してLLMにビジュアル情報とデバッグ情報を提供する
- LLM を使用する開発者にシームレスなデバッグ エクスペリエンスを提供します
仕組み
- 軽量クライアントはブラウザゲーム/アプリケーション内で実行されます
- クライアントはキャンバスのスナップショット、コンソールのログ/エラー、未処理の例外をキャプチャします。
- データはWebSocket経由でVibe-Eyesサーバーに送信されます（CORSの問題を回避）
- サーバーはキャンバス画像をベクトル化し、デバッグ情報とともに保存します。
- LLMはモデルコンテキストプロトコルを介して接続し、最新のデータにアクセスします。
- LLMは何が起こっているかを「見て」、完全なコンテキストで問題のデバッグを支援できます。
コンポーネント
1. Vibe-Eyes MCP サーバー ( mcp.js )
次の機能を備えたコア サーバー:
- Socket.IO経由でキャンバススナップショットを受信する
- 画像をコンパクトなSVG表現にベクトル化します（大まかな近似）
- デバッグ情報（ログ、エラー、例外、タイミング）を保存します
- モデルコンテキストプロトコル（MCP）を介してデータを公開します
- 直接アクセス用のHTTPエンドポイントを提供します
- 画像を順番に処理してリソースを管理する
2. ブラウザクライアント
ブラウザ クライアントは、vibe-eyes-client リポジトリから入手できます。
次の機能を備えた軽量ブラウザ統合:
- ページ内のキャンバス要素を検索します
- キャンバスのコンテンツをデータ URL としてキャプチャします
- コンソールのログとエラーを傍受する
- スタック トレースでグローバルな未処理例外をキャッチします
- WebSocket経由でVibe-Eyesサーバーにデータを送信します
- ゲームのパフォーマンスへの影響を最小限に抑えます
- キャプチャ開始時の制御のための明示的な初期化をサポート
3. ベクトル化エンジン（ vectorizer.js ）
以下の機能を備えた高品質の SVG ベクトル化ライブラリ:
- ラスター画像をベクターSVGに変換します
- SVGのサイズと鮮明度を最適化します
- データサイズを削減しながら視覚情報を保持
はじめる
インストール
# Clone the repository
git clone https://github.com/monteslu/vibe-eyes.git
cd vibe-eyes
# Install dependencies
npm install
LLMエージェントとの使用
MCP サーバーを AI エージェントに登録します。
# For Claude Code
claude mcp add
これにより、Claude は MCP を介して Vibe-Eyes 機能を使用できるようになります。
ゲーム/アプリケーションとの統合
必要なスクリプトを組み込んで、クライアントをブラウザ アプリケーションに追加します。
<!-- Include Socket.IO client -->
<script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>
<!-- Include Vibe-Eyes client -->
<script src="https://cdn.jsdelivr.net/npm/vibe-eyes-client/dist/index.min.js"></script>
<!-- Initialize the client -->
<script>
// Import the initialization function if using as module
// import { initializeVibeEyes } from 'vibe-eyes-client';
// Initialize with configuration
const vibeEyes = initializeVibeEyes({
// WebSocket URL to the Vibe-Eyes server
serverUrl: 'ws://localhost:8869',
// Capture interval in milliseconds
captureDelay: 1000,
// Start capturing automatically after connection
autoCapture: true
});
</script>
クロードや他のLLMと併用
MCP サーバーは、LLM がモデル コンテキスト プロトコル (MCP) を介して最新のビジュアル情報とデバッグ情報にアクセスするためのツールを公開します。
getGameDebug({ includeSvg: true/false })
LLM は以下を受け取ります:
- アプリケーションからの最近のコンソールログとエラー
- フルスタック トレースを含む未処理の例外 (発生した場合)
- キャンバスのベクトル化された SVG 近似値 (
includeSvgが true の場合) - 視覚的な状態とログを結び付けるタイミングと相関情報
これにより、LLM はアプリケーションで何が起こっているかを「確認」し、より適切なサポートを提供できるようになります。
MCP 構成の例 (Claude Code 用)
Claude から Vibe-Eyes にアクセスするには:
{
"name": "vibe-eyes",
"url": "http://localhost:8869",
"tools": [
{
"name": "getGameDebug",
"description": "Retrieves the most recent canvas visualization and debug information from a browser game or application"
}
]
}
Vibe-Eyesが「バイブコーディング」にどのように役立つか
従来の「バイブコーディング」セッションでは、開発者は手動でスクリーンショットを撮り、アプリケーション内で何が起こっているかを記述する必要がありました。Vibe-Eyesは、以下の方法でこのプロセスを自動化します。
- 視覚的なコンテキストの提供: LLMはゲーム/アプリの実際の視覚的な状態を確認できます
- ビジュアルとコードの問題の相関関係: コンソールログはビジュアル状態とペアになっています
- 手作業の削減：スクリーンショットを手動でキャプチャしてアップロードする必要はありません
- リアルタイムデバッグの有効化: LLMは変更が発生したときにそれを観察できる
- データ転送の最適化:ベクター表現はスクリーンショットよりもコンパクト
パフォーマンスに関する考慮事項
- ブラウザクライアントは、アプリケーションのパフォーマンスへの影響を最小限に抑えるように設計されています。
- キャンバスデータURLの作成はCPUを大量に消費する可能性があるため、キャプチャ頻度は設定可能です。
- WebSocketトランスポートは、クロスドメイン設定でよくあるCORSの問題を回避します。
- サーバーは過負荷を防ぐために画像を順番に処理します
- SVGベクター化は視覚的な正確さとサイズの最適化を両立します
SVGへの直接アクセス
ベクトル化された SVG 出力を再利用したいアプリケーションの場合:
- WebSocket レスポンス: サーバーは WebSocket レスポンスに SVG を直接含めます。
socket.on('debugCapture', (data, callback) => {
// Capture and process...
callback({
success: true,
id: "capture_123",
svg: "<svg>...</svg>", // Vectorized SVG
stats: { /* stats data */ }
});
});
- HTTP エンドポイント:
/latestエンドポイント経由で最新のキャプチャにアクセスします。fetch('http://localhost:8869/latest')
.then(res => res.json())
.then(data => {
const svg = data.vectorized?.svg;
// Use the SVG...
});
APIリファレンス
ブラウザクライアント
// Initialize the client
const vibeEyes = initializeVibeEyes({
serverUrl: 'ws://localhost:8869',
captureDelay: 1000, // ms between captures
maxLogs: 10, // Max console.log entries to store
maxErrors: 10, // Max console.error entries to store
autoCapture: true // Start capturing automatically
});
// Manual control
vibeEyes.startCaptureLoop(); // Start auto-capturing
vibeEyes.stopCaptureLoop(); // Stop auto-capturing
vibeEyes.captureAndSend(); // Trigger one capture immediately
// The server responds with:
// {
// success: true,
// id: "capture_1234567890",
// processedAt: 1616161616161,
// svg: "<svg>...</svg>", // The vectorized SVG for direct use
// stats: {
// vectorizeTime: 120,
// optimizeTime: 30,
// originalSize: 50000,
// finalSize: 15000,
// sizeReduction: 70
// }
// }
MCPツール
// MCP tool available to LLMs
getGameDebug({
includeSvg: true // Whether to include SVG visualization
})
// Returns
{
success: true,
capture: {
id: "capture_123456789",
timestamp: 1616161616161,
console_logs: [
{ timestamp: 1616161616000, data: ["Player position:", {x: 10, y: 20}] },
// ...more logs
],
console_errors: [
// Any errors captured
],
unhandled_exception: {
timestamp: 1616161616100,
message: "Uncaught SyntaxError: Unexpected token ';'",
stack: "SyntaxError: Unexpected token ';'\n at game.js:42:10\n...",
type: "SyntaxError",
source: "game.js",
line: 42,
column: 10
},
vectorized: {
svg: "<svg>...</svg>", // Only if includeSvg is true (rough approximation)
imageType: "png",
stats: {
vectorizeTime: 120,
optimizeTime: 30,
originalSize: 50000,
finalSize: 15000,
sizeReduction: 70
}
}
}
}
スタンドアロン ベクトライザー CLI
このプロジェクトには、個々のファイルをベクトル化するためのスタンドアロン CLI ツールも含まれています。
# Install CLI globally
npm install -g vibe-eyes
# Use the CLI
vibe-eyes-vectorize input.png output.svg
# With options
vibe-eyes-vectorize photo.jpg --color-precision 10 --max-iterations 100
ライセンス
ISC