@antarose/mcp-vision

一個基於 Model Context Protocol (MCP) 的影像分析伺服器，整合 Cloudflare Workers AI (Llama 3.2 Vision) 提供結構化的圖片分析結果。

功能特色

• 🖼️ 支援多種圖片來源：本機檔案路徑、HTTP/HTTPS URL、data:URL
• 🤖 使用 Cloudflare Workers AI Llama 3.2 Vision 模型
• 📊 結構化 JSON 輸出包含：descriptions、tags、objects、OCR text、安全警告
• 🛠️ 支援多種分析任務：通用、UI 審核、發票分析、圖表分析、安全檢查
• 🔧 完整的 MCP 協議支援，可整合至 Claude Code、Cursor 等 IDE

快速開始

安裝

npm install @antarose/mcp-vision

環境設定

1. 取得 Cloudflare 憑證：

   • 登入 Cloudflare Dashboard
   • 取得你的 Account ID
   • 建立 API Token（需要 AI 相關權限）

2. 設定環境變數：

export CF_ACCOUNT_ID=your_cloudflare_account_id
export CF_API_TOKEN=your_cloudflare_api_token

或建立 .env 檔案：

CF_ACCOUNT_ID=your_cloudflare_account_id
CF_API_TOKEN=your_cloudflare_api_token

直接執行

CF_ACCOUNT_ID=xxx CF_API_TOKEN=xxx npx -y @antarose/mcp-vision

作為模組使用

const { spawn } = require('child_process');

// 設定環境變數
const env = {
  ...process.env,
  CF_ACCOUNT_ID: 'your_account_id',
  CF_API_TOKEN: 'your_api_token'
};

// 啟動 MCP 伺服器
const server = spawn('npx', ['-y', '@antarose/mcp-vision'], {
  env: env,
  stdio: ['pipe', 'pipe', 'pipe']
});

server.stdout.on('data', (data) => {
  console.log(`stdout: ${data}`);
});

server.stderr.on('data', (data) => {
  console.log(`stderr: ${data}`);
});

server.on('close', (code) => {
  console.log(`child process exited with code ${code}`);
});

Claude Code 整合

方法 1：全局安裝後使用 claude mcp add（推薦）

# 先全局安裝
npm install -g @antarose/mcp-vision

# 添加到 Claude Code
claude mcp add-json antarose-vision '{"command": "mcp-vision", "env": {"CF_ACCOUNT_ID": "你的帳號ID", "CF_API_TOKEN": "你的API Token"}}'

方法 2：使用 npx（實驗性）

claude mcp add antarose-vision npx @antarose/mcp-vision

注意：npx 方式在某些環境下可能不穩定

然後配置環境變數（需要手動添加到 ~/.claude.json）：

# 編輯 ~/.claude.json，在 antarose-vision 伺服器配置中添加 env 區段
{
  "mcpServers": {
    "antarose-vision": {
      "command": "npx",
      "args": ["@antarose/mcp-vision"],
      "env": {
        "CF_ACCOUNT_ID": "你的 Cloudflare 帳號 ID",
        "CF_API_TOKEN": "你的 Cloudflare API Token"
      }
    }
  }
}

方法 2：手動配置

在 claude.config.json 新增設定：

{
  "mcpServers": {
    "antarose-vision": {
      "command": "npx",
      "args": ["-y", "@antarose/mcp-vision"],
      "env": {
        "CF_ACCOUNT_ID": "你的 Cloudflare 帳號 ID",
        "CF_API_TOKEN": "你的 Cloudflare API Token",
        "MCP_VISION_PROVIDER": "cloudflare"
      }
    }
  }
}

配置步驟：

1. 獲取 Cloudflare 憑證：

   • 登入 Cloudflare Dashboard
   • 獲取你的 Account ID
   • 創建 API Token（需要 AI Gateway:Read 權限）

2. 配置 Claude Code：

   • 打開 Claude Code 設定檔 claude.config.json
   • 添加上述 MCP 服務器配置
   • 替換實際的 Account ID 和 API Token

3. 重新啟動 Claude Code，即可使用 analyze_image 工具

使用範例：

請分析這張圖片：/path/to/image.jpg

Cursor 整合

在 .cursor/config.json 或項目根目錄的 .mcp.json 新增設定：

{
  "mcpServers": {
    "antarose-vision": {
      "command": "npx",
      "args": ["-y", "@antarose/mcp-vision"],
      "env": {
        "CF_ACCOUNT_ID": "你的 Cloudflare 帳號 ID",
        "CF_API_TOKEN": "你的 Cloudflare API Token"
      }
    }
  }
}

分析任務類型

general - 通用分析（預設）

完整的圖片描述、物件識別和 OCR

uiAudit - UI 可用性檢查

專門分析 UI 截圖，檢查可用性問題

invoice - 發票/帳單分析

抽取發票號碼、日期、金額等結構化資訊

chart - 圖表分析

分析圖表數據、趨勢和異常

safety - 安全內容檢查

檢測 NSFW、暴力、個人隱私等敏感內容

API 回應格式

{
  "captions": {
    "short": "簡短描述",
    "detailed": "詳細描述"
  },
  "tags": ["標籤1", "標籤2"],
  "objects": [
    {
      "name": "物件名稱",
      "confidence": 0.95
    }
  ],
  "text_full": "OCR 識別的完整文字",
  "warnings": ["警告訊息"],
  "language": "文字語言"
}

開發

安裝依賴

npm install

開發模式

npm run dev

建置

npm run build

測試

npm test

授權

MIT

作者

Antarose