开源 AI Agent 助手，让 AI "看到" 它在做什么

Open source AI agent helper to let it SEE what its doing

Source | HN Comments

该项目名为 `vibe-eyes`，是一个开源的 AI Agent 助手，旨在让 LLM "看到" 浏览器游戏或应用程序的运行状态。它包含一个 MCP 服务器，通过轻量级浏览器客户端捕获画布内容和调试信息，并将其矢量化为 SVG 格式，同时收集控制台日志和错误信息。LLM 可以通过 Model Context Protocol (MCP) 访问这些信息，从而辅助调试，实现“vibe coding”。项目还提供独立的矢量化 CLI 工具。

monteslu/vibe-eyes

description: "一个 MCP 服务器，它使 LLM 能够通过矢量化画布可视化和调试信息来“看到”基于浏览器的游戏和应用程序中发生的事情。"

Notifications You must be signed in to change notification settings
Fork 0
Star 7

7 stars 0 forks Branches Tags Activity

Star Notifications You must be signed in to change notification settings

Additional navigation options

main Branches Tags Go to file Code

Folders and files

Name| Name| Last commit message| Last commit date
---|---|---|---

Latest commit

History

Repository files navigation

README

Vibe-Eyes

一个 MCP 服务器，它使 LLM 能够通过矢量化画布可视化和调试信息来“看到”基于浏览器的游戏和应用程序中发生的事情。 Vibe-Eyes 使用客户端-服务器架构，其中轻量级浏览器客户端捕获画布内容和调试信息，通过 WebSockets 将其发送到 Node.js 服务器，然后该服务器将图像矢量化为紧凑的 SVG 表示形式，并通过 Model Context Protocol (MCP) 使其可供 LLM 使用。

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

加载中

注意：这个项目是实验性的，旨在通过提供视觉上下文和丰富的调试信息来增强 LLM 的“vibe coding”会话。

视频说明

主要功能

捕获和矢量化来自浏览器游戏的画布元素
实时收集控制台日志和错误
捕获具有完整堆栈跟踪的未处理异常
通过 MCP 使视觉和调试信息可供 LLM 使用
为使用 LLM 的开发人员创建无缝的调试体验

工作原理

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

组件

1. Vibe-Eyes MCP 服务器 (`mcp.js`)

核心服务器，它：

通过 Socket.IO 接收画布快照
将图像矢量化为紧凑的 SVG 表示形式（粗略近似）
存储调试信息（日志、错误、异常、计时）
通过 Model Context Protocol (MCP) 公开数据
提供用于直接访问的 HTTP 端点
顺序处理图像以管理资源

2. 浏览器客户端

浏览器客户端位于 vibe-eyes-client repository。轻量级浏览器集成，它：

查找页面中的画布元素
将画布内容捕获为数据 URL
拦截控制台日志和错误
捕获具有堆栈跟踪的全局未处理异常
通过 WebSockets 将数据发送到 Vibe-Eyes 服务器
最大程度地减少对游戏性能的影响
支持显式初始化以控制何时开始捕获

3. 矢量化引擎 (`vectorizer.js`)

高质量的 SVG 矢量化库，它：

将栅格图像转换为矢量 SVG
优化 SVG 的大小和清晰度
在减少数据大小的同时保留视觉信息

快速入门

安装

# 克隆存储库
git clone https://github.com/monteslu/vibe-eyes.git
cd vibe-eyes
# 安装依赖项
npm install

与 LLM Agent 一起使用

向你的 AI Agent 注册 MCP 服务器：

# For Claude Code
claude mcp add

这使 Claude 能够通过 MCP 使用 Vibe-Eyes 功能。

与游戏/应用程序集成

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

<!-- Include Socket.IO client -->
<script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>
<!-- Include Vibe-Eyes client -->
<script src="https://cdn.jsdelivr.net/npm/vibe-eyes-client/dist/index.min.js"></script>
<!-- Initialize the client -->
<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 或其他 LLM 一起使用

MCP 服务器公开了一个工具，供 LLM 通过 Model Context Protocol (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": "Retrieves the most recent canvas visualization and debug information from a browser game or application"
  }
 ]
}

Vibe-Eyes 如何帮助进行 "Vibe Coding"

传统的“vibe coding”会话需要开发人员手动截取屏幕截图并描述他们的应用程序中发生的事情。 Vibe-Eyes 通过以下方式自动化此过程：

提供视觉上下文：LLM 可以看到游戏/应用程序的实际视觉状态
关联视觉和代码问题：控制台日志与视觉状态配对
减少手动工作：无需手动捕获和上传屏幕截图
启用实时调试：LLM 可以观察发生的更改
优化数据传输：矢量表示比屏幕截图更紧凑

性能考虑

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

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

关于

Releases

No releases published

Packages 0

No packages published

语言

JavaScript 100.0%

Terms
Privacy
Security
Status
Docs
Contact
Manage cookies
Do not share my personal informati