MCP

🚀 img-src MCP 服務器

這是用於 img-src.io 圖像託管 API 的模型上下文協議（MCP）服務器。該服務器使像 Claude 這樣的 AI 助手能夠與你的 img-src.io 賬戶進行交互，可直接通過自然語言上傳、搜索、列出和管理圖像。

🚀 快速開始

本 MCP 服務器允許 AI 助手（如 Claude）與 img-src.io 賬戶交互，實現圖像的上傳、搜索、管理等功能。下面將詳細介紹安裝、配置和使用方法。

📦 安裝指南

你可以通過以下兩種方式安裝 @img-src/mcp-server：

pnpm add -g @img-src/mcp-server

或者使用 pnpm dlx 直接運行：

pnpm dlx @img-src/mcp-server

⚙️ 配置說明

環境變量

獲取 API 密鑰

1. 登錄 img-src.io。
2. 進入“設置”>“API 密鑰”。
3. 創建一個新的 API 密鑰。
4. 複製該密鑰（以 imgsrc_ 開頭）。

💻 使用示例

與 Claude Desktop 配合使用

將以下配置添加到你的 Claude Desktop 配置文件（在 macOS 上為 ~/Library/Application Support/Claude/claude_desktop_config.json）中：

{
  "mcpServers": {
    "img-src": {
      "command": "npx",
      "args": ["@img-src/mcp-server"],
      "env": {
        "IMG_SRC_API_KEY": "imgsrc_your_api_key_here"
      }
    }
  }
}

與 Claude Code 配合使用

將以下配置添加到項目的 .mcp.json（項目範圍）或 ~/.claude/mcp.json（全局）中：

{
  "mcpServers": {
    "img-src": {
      "command": "npx",
      "args": ["@img-src/mcp-server"],
      "env": {
        "IMG_SRC_API_KEY": "imgsrc_your_api_key_here"
      }
    }
  }
}

或者通過 CLI 添加：

claude mcp add img-src -- npx @img-src/mcp-server

然後在你的環境或 .env 文件中設置 API 密鑰：

export IMG_SRC_API_KEY=imgsrc_your_api_key_here

與 Cursor 配合使用

1. 打開 Cursor 設置（在 macOS 上按 Cmd+,，在 Windows/Linux 上按 Ctrl+,）。
2. 導航到 功能 > MCP 服務器。
3. 點擊 “添加新的 MCP 服務器”。
4. 輸入以下配置：
   • 名稱：img-src
   • 類型：command
   • 命令：npx @img-src/mcp-server
5. 添加環境變量 IMG_SRC_API_KEY 並設置你的 API 密鑰。

或者，在項目根目錄下創建或編輯 .cursor/mcp.json：

{
  "mcpServers": {
    "img-src": {
      "command": "npx",
      "args": ["@img-src/mcp-server"],
      "env": {
        "IMG_SRC_API_KEY": "imgsrc_your_api_key_here"
      }
    }
  }
}

與 VS Code（GitHub Copilot）配合使用

在工作區創建 .vscode/mcp.json：

{
  "servers": {
    "img-src": {
      "type": "stdio",
      "command": "npx",
      "args": ["@img-src/mcp-server"],
      "env": {
        "IMG_SRC_API_KEY": "imgsrc_your_api_key_here"
      }
    }
  }
}

或者通過 CLI 添加：

code --add-mcp '{"name":"img-src","command":"npx","args":["@img-src/mcp-server"],"env":{"IMG_SRC_API_KEY":"imgsrc_your_api_key_here"}}'

⚠️ 重要提示：VS Code 使用 "servers"（而非 "mcpServers"），並且需要 "type": "stdio"。

與 Windsurf 配合使用

將以下配置添加到 ~/.codeium/windsurf/mcp_config.json 中：

{
  "mcpServers": {
    "img-src": {
      "command": "npx",
      "args": ["@img-src/mcp-server"],
      "env": {
        "IMG_SRC_API_KEY": "imgsrc_your_api_key_here"
      }
    }
  }
}

與 Cline 配合使用

在 VS Code 中打開 Cline 擴展，點擊 MCP 服務器 圖標 > 配置 MCP 服務器，然後添加：

{
  "mcpServers": {
    "img-src": {
      "command": "npx",
      "args": ["@img-src/mcp-server"],
      "env": {
        "IMG_SRC_API_KEY": "imgsrc_your_api_key_here"
      }
    }
  }
}

與 Zed 配合使用

將以下配置添加到你的 Zed 設置文件（~/.config/zed/settings.json）中：

{
  "context_servers": {
    "img-src": {
      "command": "npx",
      "args": ["@img-src/mcp-server"],
      "env": {
        "IMG_SRC_API_KEY": "imgsrc_your_api_key_here"
      }
    }
  }
}

⚠️ 重要提示：Zed 使用 "context_servers" 作為鍵，嵌入在主 settings.json 中。

與 JetBrains IDEs 配合使用

在 IntelliJ IDEA、WebStorm、PyCharm 或其他 JetBrains IDE 中：

1. 轉到 設置 > 工具 > AI 助手 > 模型上下文協議（MCP）。
2. 點擊 +（添加）並粘貼：

{
  "mcpServers": {
    "img-src": {
      "command": "npx",
      "args": ["@img-src/mcp-server"],
      "env": {
        "IMG_SRC_API_KEY": "imgsrc_your_api_key_here"
      }
    }
  }
}

🛠️ 可用工具

upload_image

將本地文件、URL 或 base64 數據的圖像上傳到你的 img-src.io 賬戶。

將 ~/Photos/sunset.jpg 作為 photos/vacation/sunset.jpg 上傳到 img-src

參數：

• file_path（可選）：要上傳的本地文件路徑（推薦用於大文件）
• url（可選）：要上傳的圖像的 URL
• data（可選）：Base64 編碼的圖像數據
• mimeType（可選）：圖像的 MIME 類型（使用 data 時必需）
• target_path（可選）：用於組織圖像的目標路徑

注意：必須提供 file_path、url 或 data 中的一個。

list_images

列出你賬戶中的圖像，可選擇在特定文件夾內列出。

列出我在 photos/vacation 文件夾中的 img-src 圖像

參數：

• folder（可選）：要列出的文件夾路徑
• limit（可選）：返回的最大項目數（默認值：50）
• offset（可選）：用於分頁的跳過項目數

search_images

按文件名或路徑搜索圖像。

搜索包含 "beach" 的 img-src 圖像

參數：

• query（必需）：搜索查詢
• limit（可選）：最大結果數（默認值：20）
• offset（可選）：跳過的結果數

get_image

獲取特定圖像的詳細元數據。

獲取我在 photos/vacation/sunset.jpg 的 img-src 圖像的詳細信息

參數：

• id（必需）：圖像 ID（UUID）或文件路徑

delete_image

永久刪除圖像。

刪除我在 photos/old/unused.jpg 的 img-src 圖像

參數：

• id（必需）：要刪除的圖像 ID（UUID）或文件路徑

get_usage

查看你當前的使用統計信息。

顯示我的 img-src 使用統計信息

get_settings

獲取你的賬戶設置和配置。

我的 img-src 賬戶設置是什麼？

get_cdn_url

生成帶有可選圖像轉換的 CDN URL。

為 john/photos/beach.jpg 生成一個調整為 800x600 大小的 img-src CDN URL

參數：

• username（必需）：圖像所有者的用戶名
• filepath（必需）：圖像路徑
• width（可選）：調整寬度
• height（可選）：調整高度
• fit（可選）：cover、contain、fill、scale-down
• quality（可選）：1 - 100（默認值：80）
• format（可選）：webp、avif、jpeg、png、jxl

📚 資源說明

MCP 服務器將你的圖像作為資源公開，Claude 可以直接訪問這些資源：

• URI 格式：imgsrc://images/{imageId}
• 內容：包含尺寸、格式和 CDN URL 的 JSON 元數據

Claude 可以列出和讀取這些資源，以瞭解你擁有的圖像及其屬性。

💬 預建提示

以下是常見工作流程的預建提示：

upload-and-share

上傳圖像並獲取可共享的 CDN URL。

• 參數：imageUrl（必需），width（可選）

check-usage

檢查賬戶使用情況和存儲狀態。

• 無需參數

find-images

按關鍵字搜索圖像。

• 參數：query（必需）

🗣️ 示例對話

上傳並共享圖像

用戶：將 ~/Photos/sunset.jpg 上傳到 img-src 並給我一個調整大小後的 URL

Claude：我將上傳該圖像併為你生成一個 CDN URL。

[使用 upload_image 工具]

圖像上傳成功！這是一個調整大小後的 CDN URL： https://img-src.io/i/yourname/sunset.webp?w=1200&q=85

搜索並整理

用戶：查找我所有的海灘照片

Claude：[使用 search_images 工具，查詢 "beach"]

找到 5 張海灘照片：

1. photos/vacation/beach-sunset.jpg
2. photos/summer/beach-party.png ...

檢查使用情況

用戶：我使用了多少存儲空間？

Claude：[使用 get_usage 工具]

你的 img-src.io 使用情況：

• 存儲：245 MB / 500 MB（49%）
• 上傳：本月 67 / 100 次
• 帶寬：1.2 GB / 1 GB（120% - 考慮升級！）

🛠️ 開發指南

# 安裝依賴
pnpm install

# 構建
pnpm build

# 本地運行
IMG_SRC_API_KEY=imgsrc_xxx pnpm start

# 類型檢查
pnpm type-check

# 運行測試
pnpm test

📄 許可證

本項目採用 MIT 許可證。