Samihalawa MCP Server Ai Vision

🚀 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 許可證。