\n\n\n\n\n\n\n```\n\n### Using with Claude or Other LLMs\n\nThe MCP server exposes a tool for LLMs to access the latest visual and debug information via Model Context Protocol (MCP):\n\n```\ngetGameDebug({ includeSvg: true/false })\n```\n\nThe LLM will receive:\n- Recent console logs and errors from the application\n- Unhandled exceptions with full stack traces (if any occurred)\n- Vectorized SVG approximation of the canvas (if `includeSvg` is true)\n- Timing and correlation information to connect visual state with logs\n\nThis allows the LLM to \"see\" what's happening in the application and provide better assistance.\n\n#### Example MCP Config (for Claude Code)\n\nTo access Vibe-Eyes from Claude:\n\n```json\n{\n \"name\": \"vibe-eyes\",\n \"url\": \"http://localhost:8869\",\n \"tools\": [\n {\n \"name\": \"getGameDebug\",\n \"description\": \"Retrieves the most recent canvas visualization and debug information from a browser game or application\"\n }\n ]\n}\n```\n\n## How Vibe-Eyes Helps with \"Vibe Coding\"\n\nTraditional \"vibe coding\" sessions require developers to manually take screenshots and describe what's happening in their application. Vibe-Eyes automates this process by:\n\n1. **Providing Visual Context**: LLMs can see the actual visual state of the game/app\n2. **Correlating Visual and Code Issues**: Console logs are paired with visual state\n3. **Reducing Manual Work**: No need to manually capture and upload screenshots\n4. **Enabling Real-Time Debugging**: LLMs can observe changes as they happen\n5. **Optimizing Data Transfer**: Vector representation is more compact than screenshots\n\n## Performance Considerations\n\n- The browser client is designed to minimize impact on application performance\n- Creating canvas data URLs can be CPU-intensive, so capturing frequency is configurable\n- WebSocket transport avoids CORS issues common in cross-domain setups\n- The server processes images sequentially to prevent overload\n- SVG vectorization balances visual accuracy with size optimization\n\n## Direct SVG Access\n\nFor applications that want to reuse the vectorized SVG output:\n\n1. **WebSocket Response**: The server includes the SVG directly in WebSocket responses:\n ```javascript\n socket.on('debugCapture', (data, callback) => {\n // Capture and process...\n callback({\n success: true,\n id: \"capture_123\",\n svg: \"...\", // Vectorized SVG\n stats: { /* stats data */ }\n });\n });\n ```\n\n2. **HTTP Endpoint**: Access the latest capture via the `/latest` endpoint:\n ```javascript\n fetch('http://localhost:8869/latest')\n .then(res => res.json())\n .then(data => {\n const svg = data.vectorized?.svg;\n // Use the SVG...\n });\n ```\n\n## API Reference\n\n### Browser Client\n\n```javascript\n// Initialize the client\nconst vibeEyes = initializeVibeEyes({\n serverUrl: 'ws://localhost:8869',\n captureDelay: 1000, // ms between captures\n maxLogs: 10, // Max console.log entries to store\n maxErrors: 10, // Max console.error entries to store\n autoCapture: true // Start capturing automatically\n});\n\n// Manual control\nvibeEyes.startCaptureLoop(); // Start auto-capturing\nvibeEyes.stopCaptureLoop(); // Stop auto-capturing\nvibeEyes.captureAndSend(); // Trigger one capture immediately\n\n// The server responds with:\n// {\n// success: true,\n// id: \"capture_1234567890\",\n// processedAt: 1616161616161,\n// svg: \"...\", // The vectorized SVG for direct use\n// stats: {\n// vectorizeTime: 120,\n// optimizeTime: 30,\n// originalSize: 50000,\n// finalSize: 15000,\n// sizeReduction: 70\n// }\n// }\n```\n\n### MCP Tool\n\n```javascript\n// MCP tool available to LLMs\ngetGameDebug({\n includeSvg: true // Whether to include SVG visualization\n})\n\n// Returns\n{\n success: true,\n capture: {\n id: \"capture_123456789\",\n timestamp: 1616161616161,\n console_logs: [\n { timestamp: 1616161616000, data: [\"Player position:\", {x: 10, y: 20}] },\n // ...more logs\n ],\n console_errors: [\n // Any errors captured\n ],\n unhandled_exception: {\n timestamp: 1616161616100,\n message: \"Uncaught SyntaxError: Unexpected token ';'\",\n stack: \"SyntaxError: Unexpected token ';'\\n at game.js:42:10\\n...\",\n type: \"SyntaxError\",\n source: \"game.js\",\n line: 42,\n column: 10\n },\n vectorized: {\n svg: \"...\", // Only if includeSvg is true (rough approximation)\n imageType: \"png\",\n stats: {\n vectorizeTime: 120,\n optimizeTime: 30,\n originalSize: 50000,\n finalSize: 15000,\n sizeReduction: 70\n }\n }\n }\n}\n```\n\n## Standalone Vectorizer CLI\n\nThe project also includes a standalone CLI tool for vectorizing individual files:\n\n```bash\n# Install CLI globally\nnpm install -g vibe-eyes\n\n# Use the CLI\nvibe-eyes-vectorize input.png output.svg\n\n# With options\nvibe-eyes-vectorize photo.jpg --color-precision 10 --max-iterations 100\n```\n\n## License\n\nISC", "installation_instructions": null, "categories": [ "Everything" ], "owners": [], "owner": null, "code_snippets": {}, "evaluation_results": [], "found_via_ownership_request": false, "security_scans": [ { "repo_url": "https://github.com/monteslu/vibe-eyes", "repo_name": "vibe-eyes", "score": 100, "risk_level": "low", "score_explanation": "Score starts at 100, deducts points for security issues, and adds points for security best practices", "scan_id": "1085b556-eb18-4e5d-89e4-eadc4c9aa318", "mcp_app_id": "d232a55d-0b6c-4ec3-8c3e-6e1e7d9831ab", "scan_time": "2025-06-07T10:34:27.377165+00:00", "created_at": "2025-06-07T10:34:27.378124+00:00", "updated_at": "2025-06-07T10:34:27.378124+00:00", "findings": [], "vulnerabilities": [] }, { "repo_url": "https://github.com/monteslu/vibe-eyes", "repo_name": "vibe-eyes", "score": 100, "risk_level": "low", "score_explanation": "Score starts at 100, deducts points for security issues, and adds points for security best practices", "scan_id": "1b60a662-dd5f-499a-84d0-e548cbf68a08", "mcp_app_id": "d232a55d-0b6c-4ec3-8c3e-6e1e7d9831ab", "scan_time": "2025-06-13T06:40:52.523224+00:00", "created_at": "2025-06-13T06:40:52.523918+00:00", "updated_at": "2025-06-13T06:40:52.523918+00:00", "findings": [], "vulnerabilities": [] } ] } }