Vibe-Eyes
2025.03.25
23
JavaScript浏览器自动化开发效率浏览器自动化开发效率
Vibe-Eyes 是一个 MCP 服务器，通过向量化的画布可视化和调试信息，使 LLMs（大型语言模型）能够“看到”基于浏览器的游戏和应用程序中发生的事情。它采用客户端-服务器架构，轻量级浏览器客户端捕获画布内容和调试信息，通过 WebSocket 发送到 Node.js 服务器，服务器将图像向量化为紧凑的 SVG 表示，并通过模型上下文协议（MCP）提供给 LLMs。
View on GitHub
Overview
产品定位
Vibe-Eyes 旨在通过提供视觉上下文和丰富的调试信息，增强与 LLMs 的“氛围编码”会话。
核心功能
- 捕获并向量化浏览器游戏中的画布元素
- 实时收集控制台日志和错误
- 捕获未处理的异常及其完整堆栈跟踪
- 通过 MCP 向 LLMs 提供视觉和调试信息
- 为开发者提供无缝的调试体验
适用场景
- 开发者与 LLMs 协作进行实时调试
- 需要可视化浏览器游戏或应用程序状态的场景
- 自动化捕获和上传屏幕截图的需求
工具列表
- Vibe-Eyes MCP Server (
mcp.js)：核心服务器，接收画布快照，向量化图像，存储调试信息，并通过 MCP 暴露数据。 - Browser Client：轻量级浏览器集成，捕获画布内容，拦截控制台日志和错误，发送数据到服务器。
- Vectorization Engine (
vectorizer.js)：高质量 SVG 向量化库，将光栅图像转换为矢量 SVG。 - Standalone Vectorizer CLI：用于向量化单个文件的独立 CLI 工具。
常见问题解答
- 性能考虑：浏览器客户端设计为最小化对应用程序性能的影响，捕获频率可配置。
- 数据优化：SVG 向量化在视觉准确性和大小优化之间取得平衡。
- CORS 问题：WebSocket 传输避免了跨域设置中的常见问题。
使用教程
使用依赖
确保已安装 Node.js 和 npm。
安装教程
# Clone the repository
git clone https://github.com/monteslu/vibe-eyes.git
cd vibe-eyes
# Install dependencies
npm install
调试方式
- 启动服务器：
node mcp.js
- 在浏览器中初始化客户端：
<script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vibe-eyes-client/dist/index.min.js"></script>
<script>
const vibeEyes = initializeVibeEyes({
serverUrl: 'ws://localhost:8869',
captureDelay: 1000,
autoCapture: true
});
</script>
- 使用 LLM 访问调试信息：
claude mcp add
API 参考
Browser Client
const vibeEyes = initializeVibeEyes({
serverUrl: 'ws://localhost:8869',
captureDelay: 1000,
maxLogs: 10,
maxErrors: 10,
autoCapture: true
});
vibeEyes.startCaptureLoop();
vibeEyes.stopCaptureLoop();
vibeEyes.captureAndSend();
MCP Tool
getGameDebug({
includeSvg: true
})
Standalone Vectorizer CLI
npm install -g vibe-eyes
vibe-eyes-vectorize input.png output.svg