img-src-io

img-src MCP サーバー

img-src.io の画像ホスティング API 用 Model Context Protocol（MCP）サーバーです。

このサーバーを使うと、Claude などの AI アシスタントが自然言語を通じて img-src.io アカウントと直接やり取りし、画像のアップロード、検索、一覧表示、管理を行えます。

インストール

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 キーの取得

1. img-src.io にログインします
2. Settings > API Keys に移動します
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 Settings を開きます（macOS では Cmd+,、Windows/Linux では Ctrl+,）

2. Features > MCP Servers に移動します

3. "Add new MCP server" をクリックします

4. 次の設定を入力します。

   • Name: img-src
   • Type: command
   • Command: npx @img-src/mcp-server

5. API キーを指定して、環境変数 IMG_SRC_API_KEY を追加します。

または、プロジェクトのルートにある .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 では "mcpServers" ではなく "servers" を使用し、"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 Servers アイコン > Configure MCP Servers をクリックして、次を追加します。

{
  "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 IDE での使用

IntelliJ IDEA、WebStorm、PyCharm、またはその他の JetBrains IDE で、次の手順に従います。

1. Settings > Tools > AI Assistant > Model Context Protocol (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 アカウントに画像をアップロードします。

Upload ~/Photos/sunset.jpg to img-src as photos/vacation/sunset.jpg

パラメーター：

• file_path（任意）：アップロードするローカルファイルのパス（大きなファイルの場合に推奨）
• url（任意）：アップロードする画像の URL
• data（任意）：base64 でエンコードされた画像データ
• mimeType（任意）：画像の MIME タイプ（data を使用する場合は必須）
• target_path（任意）：画像を整理するための保存先パス

注：file_path、url、data のいずれかを指定する必要があります。

list_images

アカウント内の画像を一覧表示します。特定のフォルダー内に絞り込むこともできます。

List my img-src images in the photos/vacation folder

パラメーター：

• folder（任意）：一覧表示するフォルダーのパス
• limit（任意）：返す項目の最大数（デフォルト：50）
• offset（任意）：ページネーションのためにスキップする項目数

search_images

ファイル名またはパスで画像を検索します。

Search for img-src images containing "beach"

パラメーター：

• query（必須）：検索クエリ
• limit（任意）：結果の最大数（デフォルト：20）
• offset（任意）：スキップする結果数

get_image

特定の画像の詳細なメタデータを取得します。

Get details for my img-src image at photos/vacation/sunset.jpg

パラメーター：

• id（必須）：画像 ID（UUID）またはファイルパス

delete_image

画像を完全に削除します。

Delete my img-src image at photos/old/unused.jpg

パラメーター：

• id（必須）：削除する画像の ID（UUID）またはファイルパス

get_usage

現在の使用状況の統計情報を表示します。

Show my img-src usage stats

get_settings

アカウントの設定と構成を取得します。

What are my img-src account settings?

get_cdn_url

オプションの画像変換を適用して、CDN URL を生成します。

Generate an img-src CDN URL for john/photos/beach.jpg resized to 800x600

パラメーター：

• 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：［query "beach" で search_images を使用］

ビーチの写真が 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% — プランのアップグレードをご検討ください！）

開発

# Install dependencies
pnpm install

# Build
pnpm build

# Run locally
IMG_SRC_API_KEY=imgsrc_xxx pnpm start

# Type check
pnpm type-check

# Run tests
pnpm test

ライセンス

MIT