](https://mseep.ai/app/monteslu-vibe-eyes)
Vibe-Eyes（可译为“氛围之眼”或根据具体语境调整为更贴切的表达）
](https://smithery.ai/server/@monteslu/vibe-eyes)
一个MCP服务器，通过矢量化的画布可视化和调试信息，使大型语言模型（LLMs）能够“看到”基于浏览器的游戏和应用程序中发生的情况。
Vibe-Eyes采用客户端-服务器架构，其中轻量级的浏览器客户端负责捕获画布内容和调试信息，并通过WebSockets将其发送到Node.js服务器。服务器随后将这些图像矢量化为紧凑的SVG表示形式，并通过模型上下文协议（MCP）使大型语言模型（LLMs）能够访问这些图像。
flowchart LR
A["Browser Game/App
(Canvas + JavaScript)"] -->|"Captures"| B["Vibe-Eyes Client
(vibe-eyes-client)"]
B -->|"WebSocket
(CORS-free)"| C["Socket.IO Server"]
subgraph server["Vibe-Eyes Server (mcp.js)"]
C -->|"Process"| D["Vectorization
(vectorizer.js)"]
C -->|"Store"| E["Debug Data
(logs, errors, exceptions)"]
D -->|"Rough SVG"| F["MCP Tool: getGameDebug()"]
E --> F
end
F -->|"SVG + Debug Info"| G["Claude/LLM
(MCP Client)"]
G -->|"Debugging
Assistance"| A
classDef default color:#000,font-weight:bold
classDef edgeLabel color:#333,font-size:12px
style A fill:#c0e0ff,stroke:#000,stroke-width:2px
style B fill:#ffe0a0,stroke:#000,stroke-width:2px
style C fill:#a0d0ff,stroke:#000,stroke-width:2px
style D fill:#b0e0a0,stroke:#000,stroke-width:2px
style E fill:#ffb0b0,stroke:#000,stroke-width:2px
style F fill:#d0b0ff,stroke:#000,stroke-width:2px
style G fill:#ffb0d0,stroke:#000,stroke-width:2px
style server fill:#f0f0f0,stroke:#666,stroke-width:1px,stroke-dasharray: 5 5,color:#000注：此项目为实验性项目，旨在通过提供视觉上下文和丰富的调试信息，增强与大型语言模型（LLMs）进行的“氛围编码”会话体验。
视频讲解
关键能力
- 从浏览器游戏捕获并矢量化画布元素
- 实时收集控制台日志和错误信息
- 捕获未处理的异常并显示完整的堆栈跟踪
- 通过MCP（可能是指某种通信协议或接口）为大型语言模型（LLMs）提供视觉和调试信息
- 为使用大型语言模型（LLMs）的开发者打造无缝的调试体验
它是如何运作的
- 一个轻量级客户端在浏览器游戏/应用程序中运行
- 客户端捕获画布快照、控制台日志/错误以及未处理的异常
- 数据通过WebSocket发送到Vibe-Eyes服务器（避免CORS问题）
- 服务器将画布图像进行向量化处理，并与调试信息一起存储
- 大型语言模型（LLMs）通过模型上下文协议进行连接，以访问最新数据
- 大型语言模型（LLMs）能够“看到”正在发生的事情，并在全面了解上下文的情况下帮助调试问题
组件
1. Vibe-Eyes MCP 服务器（mcp.js）
核心服务器，其：
- 通过 Socket.IO 接收画布快照
- 将图像矢量化为紧凑的SVG表示（粗略近似）
- 存储调试信息（日志、错误、异常、时间戳）
- 通过模型上下文协议（MCP）暴露数据
- 提供HTTP端点以实现直接访问
- 按顺序处理图像以管理资源
2. 浏览器客户端
浏览器客户端可在以下位置获取： vibe-eyes-client 仓库.
一种轻量级的浏览器集成，它：
- 在页面中查找画布元素
- 将画布内容捕获为数据URL
- 拦截控制台日志和错误
- 捕获全局未处理异常并获取堆栈跟踪信息
- 通过WebSockets将数据发送到Vibe-Eyes服务器
- 最大限度地减少对游戏性能的影响
- 支持显式初始化以控制捕获开始的时间
3. 向量化引擎（vectorizer.js)
一个高质量的SVG矢量库，它：
- 将栅格图像转换为矢量SVG图像
- 优化SVG文件的大小和清晰度
- 在减小数据大小的同时保留视觉信息
入门指南
安装
通过Smithery进行安装
通过（某种方式）自动为Claude桌面安装Vibe-Eyes Smithery（注：这个词在英语中并不常见，可能是某个特定领域或虚构作品中的术语，直接翻译可能无法准确传达其含义。如果这是一个专有名词或特定概念，建议根据上下文或具体领域进行翻译。在此处，我将其直译为“史密斯里”，但实际使用时可能需要根据具体语境调整。）:
npx -y @smithery/cli install @monteslu/vibe-eyes --client claude手动安装
# 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这使得克劳德能够通过MCP使用Vibe-Eyes的功能。
与游戏/应用程序集成
通过在浏览器应用程序中包含所需的脚本，将客户端添加到其中：
// 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
});
与Claude或其他大型语言模型（LLMs）一起使用
MCP服务器提供了一个工具，通过模型上下文协议（MCP）让大型语言模型（LLMs）能够访问最新的视觉和调试信息：
getGameDebug({ includeSvg: true/false })大型语言模型（LLM）将接收：
- 最近的应用程序控制台日志和错误
- 未处理的异常及其完整的堆栈跟踪（如果发生）
- 画布的向量化SVG近似（如果
includeSvg是真实的） - 将视觉状态与日志关联的时间和相关性信息
这使得大型语言模型（LLM）能够“看到”应用程序中发生的情况，并提供更好的帮助。
示例MCP配置（适用于Claude代码）
要从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 coding）会话要求开发者手动截图并描述其应用程序中发生的情况。Vibe-Eyes通过以下方式自动化这一过程：
- 提供视觉上下文大型语言模型（LLMs）能够看到游戏/应用程序的实际视觉状态
- 将视觉问题与代码问题相关联控制台日志与视觉状态相匹配
- 减少手工劳动无需手动截取和上传截图
- 实现实时调试大型语言模型（LLMs）能够实时观察到变化的发生
- 优化数据传输矢量表示比截图更紧凑
性能考量
- 浏览器客户端的设计旨在将对应用程序性能的影响降至最低
- 创建画布数据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: "...", // Vectorized SVG
stats: { /* stats data */ }
});
});- HTTP 终点（或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: "...", // 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: "...", // 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（互联网安全中心）