使用说明

项目简介

Vibe-Eyes MCP服务器是一个实验性项目，旨在通过模型上下文协议 (MCP) 将浏览器游戏或应用的可视化画布内容和调试信息提供给大型语言模型 (LLM)。这使得LLM能够“看到”应用的状态，从而为开发者提供更有效的调试和辅助编程能力，尤其是在进行“Vibe Coding”时。服务器端负责接收客户端（浏览器端）捕获的画布快照、控制台日志、错误和异常，并将画布图像转换为紧凑的SVG矢量图形，然后通过MCP协议将这些信息以结构化的方式提供给LLM客户端。

主要功能点

画布内容向量化: 将浏览器画布内容转换为SVG矢量图形，减小数据传输量，使LLM能够理解游戏或应用的视觉状态。
实时调试信息: 收集并提供实时的控制台日志（logs和errors）以及未处理的异常信息，帮助LLM理解代码运行时的错误和状态。
MCP协议支持: 通过标准的模型上下文协议 (MCP) 与LLM客户端通信，提供结构化的上下文数据，方便LLM集成和使用。
工具 (Tool) 注册: 注册 'getGameDebugInfoWithLogsAndVisualization' 工具，允许LLM客户端通过该工具获取最新的游戏画布可视化和调试信息。
HTTP端点: 除了MCP协议，还提供HTTP端点 '/latest' 用于直接访问最新的捕获数据，方便开发者或应用集成。
WebSocket通信: 使用WebSocket协议接收来自浏览器客户端的数据，支持跨域 (CORS-free) 通信。

安装步骤

克隆仓库

git clone https://github.com/monteslu/vibe-eyes.git
cd vibe-eyes

安装依赖
```
npm install
```

服务器配置

MCP客户端需要配置以下信息以连接Vibe-Eyes MCP服务器。配置信息为JSON格式，例如Claude客户端的MCP配置：

{
  "name": "vibe-eyes",  // MCP服务器名称，可自定义
  "url": "http://localhost:8869", // Vibe-Eyes MCP服务器的URL，默认为 http://localhost:8869
  "tools": [
    {
      "name": "getGameDebugInfoWithLogsAndVisualization", // 工具名称，必须与mcp.js中定义的一致
      "description": "检索浏览器游戏或应用程序的最新画布可视化和调试信息" // 工具描述，用于LLM理解工具功能
    }
  ]
}

配置参数说明:

'name': MCP服务器的名称，用于在MCP客户端中标识和管理不同的MCP服务器连接。
'url': Vibe-Eyes MCP服务器的HTTP地址。默认情况下，服务器运行在 'http://localhost:8869'。如果需要更改端口，请修改 'mcp.js' 文件中的 'PORT' 变量。
'tools': 定义了Vibe-Eyes MCP服务器提供的工具列表。
- 'name': 工具的名称，LLM客户端通过此名称调用工具。这里是 'getGameDebugInfoWithLogsAndVisualization'，用于获取游戏调试信息和可视化。
- 'description': 工具的描述，帮助LLM理解工具的功能和使用场景。

启动命令: 在 'vibe-eyes' 仓库根目录下，使用以下命令启动Vibe-Eyes MCP服务器：

node mcp.js

或

npm start

(如果 'package.json' 中配置了 'start' 脚本)

基本使用方法

启动Vibe-Eyes MCP服务器：按照上述步骤启动服务器。
集成浏览器客户端: 将 'vibe-eyes-client' 集成到你的浏览器游戏或应用中。具体方法请参考 vibe-eyes-client repository 的说明文档。
配置LLM客户端: 在你的LLM客户端（例如Claude）中，添加并配置Vibe-Eyes MCP服务器，配置文件示例见 服务器配置 部分。
LLM调用工具: 配置完成后，LLM即可通过 'getGameDebugInfoWithLogsAndVisualization' 工具获取游戏或应用的画布可视化和调试信息。LLM可以根据返回的信息进行分析，辅助开发者进行调试或提供其他智能服务。

工具调用示例 ('getGameDebugInfoWithLogsAndVisualization'):

LLM客户端可以调用 'getGameDebugInfoWithLogsAndVisualization' 工具，并可以选择是否包含SVG可视化数据。

{
  "tool_code": "getGameDebugInfoWithLogsAndVisualization",
  "tool_input": {
    "includeSvg": true // 或 false，默认为 true，包含SVG数据会增加响应大小
  }
}

工具返回结果将包含最新的画布SVG矢量图（如果 'includeSvg' 为 true）、控制台日志、错误信息和未处理的异常信息，以文本和SVG (可选) 形式提供给LLM。

关键词