MCP

🚀 img-src MCPサーバー

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

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

🚀 クイックスタート

このサーバーを使用することで、ClaudeなどのAIアシスタントがimg-src.ioアカウントとやり取りでき、自然言語で画像を操作できます。

📦 インストール

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アカウントにアップロードします。

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 (必須)

会話例

画像のアップロードと共有

ユーザー: Upload ~/Photos/sunset.jpg to img-src and give me a resized URL

Claude: 画像をアップロードし、CDN URLを生成します。

[upload_imageツールを使用]

画像のアップロードに成功しました！ これがリサイズされたCDN URLです。 https://img-src.io/i/yourname/sunset.webp?w=1200&q=85

検索と整理

ユーザー: Find all my beach photos

Claude: [query "beach"でsearch_imagesを使用]

5枚のビーチ写真が見つかりました。

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

使用状況の確認

ユーザー: How much storage am I using?

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