STARWARCLOUD STARWAR.AI
返回市场
振动监测系统

振动监测系统

作者：monteslu44 星标更新：2025-10-01
安装使用来源：spider==github.com

项目介绍

MseeP.ai 安全评估徽章

Vibe-Eyes

smithery 徽章

一个MCP服务器，通过向量化画布可视化和调试信息，使大型语言模型（LLMs）能够“看到”基于浏览器的游戏和应用程序中发生的事情。

<a href="https://glama.ai/mcp/servers/@monteslu/vibe-eyes"> <img width="380" height="200" src="https://gips1.baidu.com/it/u=3784620010,2129056640&fm=3081&app=3081&f=PNG?w=760&h=400" alt="Vibe-Eyes MCP服务器" /> </a> <img src="./happy.jpg" width="50%" alt="Vibe-Eyes 标志">

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

flowchart LR
    A["浏览器游戏/应用<br/>(画布+JavaScript)"] -->|"捕获"| B["Vibe-Eyes 客户端<br/>(vibe-eyes-client)"]
    B -->|"WebSocket<br/>(无CORS)"| C["Socket.IO 服务器"]
    
    subgraph server["Vibe-Eyes 服务器 (mcp.js)"]
        C -->|"处理"| D["向量化<br/>(vectorizer.js)"]
        C -->|"存储"| E["调试数据<br/>(日志、错误、异常)"]
        D -->|"粗略SVG"| F["MCP工具：getGameDebug()"]
        E --> F
    end
    
    F -->|"SVG+调试信息"| G["Claude/LLM<br/>(MCP客户端)"]
    G -->|"调试协助"| 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的“氛围编码”会话。

视频解释

Vibe-Eyes 视频解释

主要功能

  • 捕获并向量化浏览器游戏中画布元素
  • 实时收集控制台日志和错误
  • 捕获带有完整堆栈跟踪的未处理异常
  • 通过MCP使视觉和调试信息可供LLMs使用
  • 为与LLMs合作的开发者创建无缝调试体验

工作原理

  1. 轻量级客户端在浏览器游戏/应用中运行
  2. 客户端捕获画布快照、控制台日志/错误以及未处理异常
  3. 数据通过WebSocket发送到Vibe-Eyes服务器（避免CORS问题）
  4. 服务器向量化画布图像，并与调试信息一起存储
  5. LLMs通过模型上下文协议连接以访问最新数据
  6. 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安装

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

npx -y @smithery/cli install @monteslu/vibe-eyes --client claude

手动安装

# 克隆仓库
git clone https://github.com/monteslu/vibe-eyes.git
cd vibe-eyes

# 安装依赖
npm install

与LLM代理配合使用

注册MCP服务器与您的AI代理：

# 对于Claude Code
claude mcp add

这允许Claude通过MCP使用Vibe-Eyes的功能。

集成到游戏/应用

通过包含所需的脚本将客户端添加到您的浏览器应用：

<!-- 包含Socket.IO客户端 -->
<script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>

<!-- 包含Vibe-Eyes客户端 -->
<script src="https://cdn.jsdelivr.net/npm/vibe-eyes-client/dist/index.min.js"></script>

<!-- 初始化客户端 -->
<script>
  // 如果作为模块导入初始化函数
  // import { initializeVibeEyes } from 'vibe-eyes-client';
  
  // 使用配置初始化
  const vibeEyes = initializeVibeEyes({
    // 到Vibe-Eyes服务器的WebSocket URL
    serverUrl: 'ws://localhost:8869',
    // 捕获间隔（毫秒）
    captureDelay: 1000,
    // 连接后自动开始捕获
    autoCapture: true
  });
</script>

与Claude或其他LLMs配合使用

MCP服务器暴露了一个工具，让LLMs可以通过模型上下文协议（MCP）访问最新的视觉和调试信息：

getGameDebug({ includeSvg: true/false })

LLM将收到：

  • 应用程序的最近控制台日志和错误
  • 带有完整堆栈跟踪的未处理异常（如果有）
  • 画布的向量化SVG近似（如果includeSvg为true）
  • 时间戳和关联信息，用于将视觉状态与日志相关联

这使得LLM能够“看到”应用程序中发生的事情，并提供更好的帮助。

示例MCP配置（针对Claude Code）

要从Claude访问Vibe-Eyes：

{
  "name": "vibe-eyes",
  "url": "http://localhost:8869",
  "tools": [
    {
      "name": "getGameDebug",
      "description": "从浏览器游戏或应用中检索最近的画布可视化和调试信息"
    }
  ]
}

Vibe-Eyes如何帮助“氛围编码”

传统的“氛围编码”会话需要开发人员手动截屏并描述应用程序中发生的事情。Vibe-Eyes通过以下方式自动化这一过程：

  1. 提供视觉上下文：LLMs可以看到游戏/应用的实际视觉状态
  2. 关联视觉和代码问题：控制台日志与视觉状态配对
  3. 减少手动工作：无需手动截屏并上传
  4. 实现实时调试：LLMs可以观察变化实时发生
  5. 优化数据传输：向量化表示比截图更紧凑

性能考虑

  • 浏览器客户端设计为最小化对应用性能的影响
  • 创建画布数据URL可能非常耗CPU，因此捕获频率可配置
  • WebSocket传输避免了跨域设置中的CORS问题
  • 服务器顺序处理图像以防止过载
  • SVG向量化平衡了视觉准确性与大小优化

直接SVG访问

对于希望重用向量化SVG输出的应用：

  1. WebSocket响应：服务器直接在WebSocket响应中包含SVG：

    socket.on('debugCapture', (data, callback) => {
  // 捕获并处理...
  callback({
    success: true,
    id: "capture_123",
    svg: "<svg>...</svg>",  // 向量化SVG 
    stats: { /* 统计数据 */ }
  });
});

  2. HTTP端点：通过/latest端点访问最新捕获：

    fetch('http://localhost:8869/latest')
  .then(res => res.json())
  .then(data => {
    const svg = data.vectorized?.svg;
    // 使用SVG...
  });

API参考

浏览器客户端

// 初始化客户端
const vibeEyes = initializeVibeEyes({
  serverUrl: 'ws://localhost:8869',
  captureDelay: 1000, // 捕获之间的毫秒数
  maxLogs: 10,        // 存储的最大console.log条目数
  maxErrors: 10,      // 存储的最大console.error条目数
  autoCapture: true   // 自动开始捕获
});

// 手动控制
vibeEyes.startCaptureLoop(); // 开始自动捕获
vibeEyes.stopCaptureLoop();  // 停止自动捕获
vibeEyes.captureAndSend();   // 立即触发一次捕获

// 服务器响应：
// {
//   success: true,
//   id: "capture_1234567890",
//   processedAt: 1616161616161,
//   svg: "<svg>...</svg>",  // 可直接使用的向量化SVG
//   stats: {
//     vectorizeTime: 120,
//     optimizeTime: 30,
//     originalSize: 50000,
//     finalSize: 15000,
//     sizeReduction: 70
//   }
// }

MCP工具

// 可供LLMs使用的MCP工具
getGameDebug({
  includeSvg: true  // 是否包括SVG可视化
})

// 返回
{
  success: true,
  capture: {
    id: "capture_123456789",
    timestamp: 1616161616161,
    console_logs: [
      { timestamp: 1616161616000, data: ["玩家位置：", {x: 10, y: 20}] },
      // 更多日志...
    ],
    console_errors: [
      // 捕获的任何错误
    ],
    unhandled_exception: {
      timestamp: 1616161616100,
      message: "意外的分号符号",
      stack: "SyntaxError: 意外的分号符号\n    在game.js:42:10\n...",
      type: "SyntaxError",
      source: "game.js",
      line: 42,
      column: 10
    },
    vectorized: {
      svg: "<svg>...</svg>",  // 如果includeSvg为true（粗略近似）
      imageType: "png",
      stats: {
        vectorizeTime: 120,
        optimizeTime: 30,
        originalSize: 50000,
        finalSize: 15000,
        sizeReduction: 70
      }
    }
  }
}

独立向量化CLI

该项目还包括一个独立的CLI工具，用于向量化单个文件：

# 全局安装CLI
npm install -g vibe-eyes

# 使用CLI
vibe-eyes-vectorize input.png output.svg

# 带选项
vibe-eyes-vectorize photo.jpg --color-precision 10 --max-iterations 100

许可证

ISC