AI 视觉 MCP 服务器

一个提供AI视觉分析功能的MCP（模型上下文协议）服务器，支持Claude和其他兼容MCP的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

使用网络浏览器捕获URL的屏幕快照。

参数：

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

analyze_screen

使用AI视觉分析屏幕快照。

参数：无（使用最新的屏幕快照）

read_file

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

参数：

• path (字符串)：文件路径
• startLine (数字)：起始行号（1-based）
• endLine (数字)：结束行号（1-based）

modify_file

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

参数：

• path (字符串)：文件路径
• startLine (数字)：要替换的起始行号（1-based）
• endLine (数字)：要替换的结束行号（1-based）
• 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用于浏览器自动化
• Gemini API密钥用于AI视觉分析

许可证

MIT