Vibe-Eyes

Name: Vibe-Eyes
Author: monteslu

本地服务

github.com/monteslu开发工具5438 周前更新

代码仓库

关于 Vibe-Eyes

Vibe-Eyes 是一个 MCP 服务，让 LLM 通过矢量化的画布图像和调试信息，了解浏览器游戏或应用的运行状态。它面向借助 LLM 进行编程的开发者，目前为实验性项目。

主要功能

01捕获浏览器画布内容并转换为 SVG
02实时收集控制台日志与错误
03捕获未处理异常及完整堆栈
04通过 getGameDebug 工具提供数据
05基于 WebSocket 传输，避免 CORS 问题

适用场景

01让 LLM 查看游戏画面并协助排查渲染问题
02将控制台错误与画面状态关联分析
03减少 vibe coding 中手动截图的工作

MCP 相关

该项目是一个 MCP 服务，通过 getGameDebug 工具向 MCP 客户端提供最新的 SVG 画布近似图和调试信息。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置

{
  "mcpServers": {
    "vibe-eyes": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli"
      ]
    }
  }
}

启动命令npx -y @smithery/cli

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包

npm@smithery/clistdio

工具

还没有获取到工具列表

本地服务需要在你的电脑上运行后才能读取工具，维护者暂未提供工具列表。

详细介绍

Vibe-Eyes

一款 MCP 服务，通过矢量化画布可视化和调试信息，让大模型能够“看到”基于浏览器的游戏和应用中发生的情况。

Vibe-Eyes 采用客户端-服务端架构：轻量级浏览器客户端捕获画布内容和调试信息，通过 WebSockets 将其发送到 Node.js 服务端；服务端随后将图像矢量化为紧凑的 SVG 表示，并通过模型上下文协议（MCP）提供给大模型。

flowchart LR
    A["Browser Game/App<br/>(Canvas + JavaScript)"] -->|"Captures"| B["Vibe-Eyes Client<br/>(vibe-eyes-client)"]
    B -->|"WebSocket<br/>(CORS-free)"| C["Socket.IO Server"]
    
    subgraph server["Vibe-Eyes Server (mcp.js)"]
        C -->|"Process"| D["Vectorization<br/>(vectorizer.js)"]
        C -->|"Store"| E["Debug Data<br/>(logs, errors, exceptions)"]
        D -->|"Rough SVG"| F["MCP Tool: getGameDebug()"]
        E --> F
    end
    
    F -->|"SVG + Debug Info"| G["Claude/LLM<br/>(MCP Client)"]
    G -->|"Debugging<br/>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

注意：此项目仍处于实验阶段，旨在通过提供视觉上下文和丰富的调试信息，增强与大模型一起进行的“氛围编码”会话。

视频说明

主要功能

捕获并矢量化浏览器游戏中的画布元素
实时收集控制台日志和错误
捕获未处理的异常及完整堆栈跟踪
通过 MCP 向大模型提供视觉和调试信息
为开发者与大模型协作提供无缝的调试体验

工作原理

在浏览器游戏或应用中运行轻量级客户端
客户端捕获画布快照、控制台日志/错误和未处理的异常
通过 WebSocket 将数据发送到 Vibe-Eyes 服务（避免 CORS 问题）
服务将画布图像矢量化，并与调试信息一同存储
大模型通过模型上下文协议连接，以访问最新数据
大模型可以“看到”正在发生的情况，并结合完整上下文帮助调试问题

组件

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 安装

要通过 Smithery 自动为 Claude Desktop 安装 Vibe-Eyes：

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

与大模型 Agent 配合使用

向 AI Agent 注册 MCP 服务：

# For Claude Code
claude mcp add

这样即可通过 MCP 让 Claude 使用 Vibe-Eyes 的功能。

与游戏/应用集成

在浏览器应用中添加客户端，方法是引入所需脚本：


<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>
  // 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>

与 Claude 或其他大模型搭配使用

MCP 服务通过模型上下文协议（MCP）提供一个工具，让大模型获取最新的视觉和调试信息：

getGameDebug({ includeSvg: true/false })

大模型将收到：

应用程序最近的控制台日志和错误
未处理的异常及其完整堆栈跟踪（如果发生）
画布的矢量化 SVG 近似图（如果 includeSvg 为 true）
用于关联视觉状态与日志的计时和关联信息

这样，大模型就能“看到”应用程序中发生的情况，从而提供更好的帮助。

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 通过以下方式自动完成这一过程：

提供视觉上下文：大模型可以看到游戏／应用的实际视觉状态
关联视觉问题与代码问题：控制台日志会与视觉状态配对
减少手动操作：无需手动截取并上传屏幕截图
支持实时调试：大模型可以观察实时发生的变化
优化数据传输：矢量表示比屏幕截图更紧凑

性能注意事项

浏览器客户端旨在尽量减少对应用程序性能的影响
创建画布数据 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

支持 Markdown

登录后评论

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

阅读入门指南

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。

Vibe-Eyes

关于 Vibe-Eyes

主要功能

适用场景

MCP 相关

配置

工具

详细介绍

Vibe-Eyes

视频说明

主要功能

工作原理

组件

1. Vibe-Eyes MCP 服务（mcp.js）

2. 浏览器客户端

3. 矢量化引擎（vectorizer.js）

入门

安装

通过 Smithery 安装

手动安装

与大模型 Agent 配合使用

与游戏/应用集成

与 Claude 或其他大模型搭配使用

MCP 配置示例（适用于 Claude Code）

Vibe-Eyes 如何助力“氛围编程”

性能注意事项

直接访问 SVG

API 参考

浏览器客户端

MCP 工具

独立矢量化 CLI

许可证

评论

第一次接触 MCP？

MCP（Model Context Protocol）是什么？

MCP 服务和客户端有什么区别？

本地服务与远程服务怎么选？

如何在 Claude、Cursor 等客户端中安装服务？

收录的项目经过审核吗？“认证”标识代表什么？

我维护的项目已被收录，怎样认领？

1. Vibe-Eyes MCP 服务（`mcp.js`）

3. 矢量化引擎（`vectorizer.js`）