MCP Server Ai Vision

🚀 AI 視覺 MCP 服務器

這是一個提供 AI 視覺分析功能的 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

使用網絡瀏覽器捕獲 URL 的屏幕快照。

analyze_screen

使用 AI 視覺分析屏幕快照。

read_file

讀取文件指定行號之間的內容。

modify_file

修改文件指定行號之間的內容。

generate_report

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

示例工作流程

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