🚀 AI 视觉 MCP 服务器

AI 视觉 MCP 服务器是一个提供人工智能驱动视觉分析功能的模型上下文协议（MCP）服务器，它支持 Claude 和其他与 MCP 兼容的人工智能助手，能为用户提供强大的视觉分析和文件操作能力。

🚀 快速开始

安装

# 克隆仓库
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"
      }
    }
  }
}

✨ 主要特性

• 截图 URL：通过提供一个 URL 捕获任意网站的屏幕快照。
• 视觉分析：分析屏幕快照中的用户界面元素、布局和内容。
• 文件操作：按行精确读取和修改文件。
• 报告生成：生成全面的 UI/UX 分析报告。
• 调试会话：在多个分析步骤之间保持上下文。

💻 使用示例

基础用法

示例工作流程

1. 捕获网站的屏幕快照：

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

2. 分析屏幕快照：

   analyze_screen()
   

3. 根据分析生成报告：

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

高级用法

可用工具详细说明

• 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 索引）
    • endLine (数字)：结束行号（1 索引）
• modify_file：修改指定行号范围的内容。
  • 参数：
    • path (字符串)：文件路径
    • startLine (数字)：要替换的起始行号（1 索引）
    • endLine (数字)：要替换的结束行号（1 索引）
    • content (字符串)：要替换的新内容
• generate_report：根据分析结果生成全面的 UI/UX 分析报告。
  • 参数：
    • testUrl (字符串)：要测试的应用程序的 URL
    • appName (字符串，可选)：正在分析的应用程序名称
    • date (字符串，可选)：分析日期（YYYY-MM-DD）
    • observations (对象)：按组件、数据状态、交互等结构化的观察结果

📚 详细文档

要求

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

📄 许可证

本项目采用 MIT 许可证。