AI Vision Debug MCP Server 使用说明

项目简介

AI Vision Debug MCP Server 是一个基于 Model Context Protocol (MCP) 构建的后端服务器，旨在为 Claude 等兼容 MCP 协议的 AI 助手提供强大的视觉分析能力。它利用 Gemini API 的图像识别技术，结合文件操作和报告生成工具，帮助用户进行 UI 界面调试、分析和自动化测试等任务。

主要功能点

网页截图: 通过 URL 捕获任何网站的屏幕截图。
视觉分析: 使用 AI 分析屏幕截图中的 UI 元素、布局和内容。
文件操作: 精确读取和修改文件特定行的内容。
报告生成: 创建全面的 UI/UX 分析报告。
调试会话: 在多个分析步骤中保持上下文信息。

安装步骤

克隆仓库

git clone https://github.com/samihalawa/mcp-server-ai-vision.git
cd mcp-server-ai-vision

安装依赖
```
npm install
```
构建服务器
```
npm run build
```

服务器配置

要将 AI Vision Debug MCP Server 集成到 MCP 客户端，您需要在客户端的 MCP 配置文件中添加以下服务器配置信息。请根据您的实际环境修改路径和 API 密钥。

{
  "servers": {
    "ai-vision": {
      "command": "/path/to/node",
      "args": ["/path/to/mcp-server-ai-vision/build/index.js"],
      "enabled": true,
      "port": 3005,
      "environment": {
        "NODE_PATH": "/path/to/node_modules",
        "PATH": "/usr/local/bin:/usr/bin:/bin",
        "GEMINI_API_KEY": "your-gemini-api-key"
      }
    }
  }
}

配置参数说明:

'server name': 'ai-vision' (服务器名称，客户端配置中用于引用)
'command': '/path/to/node' (Node.js 解释器的路径，请替换为您的 Node.js 安装路径)
'args': '["/path/to/mcp-server-ai-vision/build/index.js"]' (服务器启动脚本路径，请替换为您的 'mcp-server-ai-vision' 仓库的构建输出路径)
'enabled': 'true' (启用此服务器)
'port': '3005' (服务器监听端口，可自定义)
'environment': 环境变量配置
- 'NODE_PATH': '/path/to/node_modules' (Node.js 模块路径，根据您的环境配置)
- 'PATH': '/usr/local/bin:/usr/bin:/bin' (系统 PATH 环境变量，确保包含 Node.js 和其他必要的命令)
- 'GEMINI_API_KEY': 'your-gemini-api-key' (Gemini API 密钥，请务必替换为您自己的 API 密钥)

基本使用方法

启动服务器 在 'mcp-server-ai-vision' 仓库目录下，运行以下命令启动服务器：
```
npm start
```

在 MCP 客户端中使用工具 启动服务器后，您可以在 MCP 客户端中使用以下工具与服务器交互，例如：

网页截图 (screenshot_url): 捕获指定 URL 的网页截图。

screenshot_url(url: "https://example.com")

视觉分析 (analyze_screen): 分析最近一次截图 (可以使用 'screenshot_url' 工具先截图)。
```
analyze_screen()
```

生成报告 (generate_report): 根据分析结果生成 UI/UX 报告。

generate_report(testUrl: "https://example.com", observations: {...})

文件读取 (read_file): 读取指定文件特定行的内容。

read_file(path: "/path/to/your/file.txt", startLine: 10, endLine: 20)

文件修改 (modify_file): 修改指定文件特定行的内容。

modify_file(path: "/path/to/your/file.txt", startLine: 5, endLine: 8, content: "新的文件内容")

请参考仓库 'README.md' 文件和代码了解更多工具的参数和使用细节。

关键词