JinDaGe - mcp MCP Details

article

README

🚀 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

⚙️ 配置说明

环境变量

| 变量 | 是否必需 | 描述 | |------|----------|-------------| | IMG_SRC_API_KEY | 是 | 你的 img-src.io API 密钥（以 imgsrc_ 开头） | | IMG_SRC_API_URL | 否 | API 基础 URL（默认值：https://api.img-src.io） |

获取 API 密钥

登录 img-src.io。
进入“设置”>“API 密钥”。
创建一个新的 API 密钥。
复制该密钥（以 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 配合使用

打开 Cursor 设置（在 macOS 上按 Cmd+,，在 Windows/Linux 上按 Ctrl+,）。
导航到功能 > MCP 服务器。
点击 “添加新的 MCP 服务器”。
输入以下配置：
- 名称：img-src
- 类型：command
- 命令：npx @img-src/mcp-server
添加环境变量 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 中：

转到设置 > 工具 > AI 助手 > 模型上下文协议（MCP）。
点击 +（添加）并粘贴：

{
  "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 张海滩照片：

photos/vacation/beach-sunset.jpg

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 许可证。

mcp