What is Vibe-Eyes?
An MCP server that enables LLMs to “see” what’s happening in browser-based games and applications through vectorized canvas visualization and debug information. It uses a client-server architecture with WebSockets to capture canvas content, console logs, errors, and unhandled exceptions, then exposes that data to LLMs via the Model Context Protocol.
How to use Vibe-Eyes?
Install automatically via Smithery (npx -y @smithery/cli install @monteslu/vibe-eyes --client claude) or manually (clone repo, npm install). Add the client scripts to your browser application and initialize with initializeVibeEyes({serverUrl, captureDelay, autoCapture}). Register the MCP server with your AI agent (e.g., claude mcp add). The LLM then calls the tool getGameDebug({ includeSvg: true/false }) to receive visual and debug information.
Key features of Vibe-Eyes
- Captures canvas elements from browser games and applications
- Vectorizes canvas images into compact SVG representations
- Collects console logs, errors, and unhandled exceptions in real-time
- Exposes visual and debug data to LLMs via the MCP
getGameDebug tool
- Uses WebSocket transport to avoid CORS issues
- Provides a standalone CLI for vectorizing individual files
Use cases of Vibe-Eyes
- Debugging browser games with an LLM that can “see” the actual visual state
- Enhancing “vibe coding” sessions by automatically providing visual context to the AI
- Real‑time assisted debugging where an LLM observes canvas changes and console logs simultaneously
- Reducing manual screenshot‑and‑describe workflows when working with LLM agents
评论