AI Vision MCP 服务器

一个模型上下文协议 (MCP) 服务器，为 Claude 和其他 MCP 兼容的 AI 助手提供 AI 驱动的视觉分析能力。

功能

• 截图 URL: 通过提供 URL 捕获任何网站的屏幕截图
• 视觉分析: 分析屏幕截图中的 UI 元素、布局和内容
• 文件操作: 以行级精度读取和修改文件
• 报告生成: 创建全面的 UI/UX 分析报告
• 调试会话: 在多个分析步骤中保持上下文

安装

# 克隆仓库
git clone https://github.com/samihalawa/mcp-server-ai-vision.git
cd mcp-server-ai-vision

# 安装依赖
npm install

# 构建服务器
npm run build

使用

启动服务器

npm start

配置

将服务器添加到您的 MCP 配置中：

{
  "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"
      }
    }
  }
}

可用工具

screenshot_url

使用 Web 浏览器拍摄 URL 的屏幕截图。

参数：

• url (字符串, 必需): 要捕获屏幕截图的 URL (例如，http://localhost:4999, https://google.com)
• fullPage (布尔值, 可选): 是否捕获完整页面或仅捕获视口。默认值：false
• waitForSelector (字符串, 可选): 在拍摄屏幕截图之前要等待的 CSS 选择器
• waitTime (数字, 可选): 拍摄屏幕截图前等待的时间（以毫秒为单位）。默认值：1000

analyze_screen

使用 AI 视觉分析屏幕截图。

参数：无（使用最新的屏幕截图）

read_file

从指定行号之间的文件中读取内容。

参数：

• path (字符串): 文件路径
• startLine (数字): 起始行号（从 1 开始）
• endLine (数字): 结束行号（从 1 开始）

modify_file

修改指定行号之间的文件内容。

参数：

• path (字符串): 文件路径
• startLine (数字): 要替换的起始行号（从 1 开始）
• endLine (数字): 要替换的结束行号（从 1 开始）
• content (字符串): 用于替换指定行的新内容

generate_report

生成全面的 UI/UX 分析报告。

参数：

• testUrl (字符串): 被测应用程序的 URL
• appName (字符串, 可选): 被分析应用程序的名称
• date (字符串, 可选): 分析日期 (YYYY-MM-DD)
• observations (对象): 观察结果，结构化为组件、数据状态、交互等。

示例工作流程

1. 拍摄网站的屏幕截图：

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

2. 分析屏幕截图：

   analyze_screen()
   

3. 根据分析生成报告：

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

要求

• Node.js 14+
• 用于浏览器自动化的 Playwright
• 用于 AI 视觉分析的 Gemini API 密钥

许可证

MIT