Imagician

🚀 Imagician - MCP画像エディタ

画像のリサイズ、形式変換、切り抜き、圧縮など、包括的な画像編集操作を行うためのモデルコンテキストプロトコル（MCP）サーバーです。

✨ 主な機能

• リサイズ：さまざまなフィットオプションで画像の寸法を変更します。
• 形式変換：JPEG、PNG、WebP、AVIF間で画像形式を変換します。
• 切り抜き：画像から特定の領域を抽出します。
• 圧縮：品質をコントロールしながらファイルサイズを削減します。
• 回転：任意の角度で画像を回転させます。
• 反転：画像を水平または垂直方向に反転させます。
• バッチ処理：1つの画像から複数のサイズを生成します。
• メタデータ：画像の情報やプロパティを抽出します。

📦 インストール

npmからのインストール

npm install -g @flowy11/imagician

ソースからのインストール

git clone https://github.com/flowy11/imagician.git
cd imagician
npm install
npm run build

💻 使用例

Claude Codeでの使用

Claude Codeの設定ファイル（~/.config/claude/config/settings/mcp-servers.json）に以下を追加します。

{
  "imagician": {
    "command": "npx",
    "args": ["-y", "@flowy11/imagician"]
  }
}

Cursorでの使用

Cursorの設定ファイル（~/.cursor/mcp_settings.json）に以下を追加します。

{
  "mcpServers": {
    "imagician": {
      "command": "npx",
      "args": ["-y", "@flowy11/imagician"]
    }
  }
}

Claude Desktopでの使用

Claude Desktopの設定ファイル（~/Library/Application Support/Claude/claude_desktop_config.json）に以下を追加します。

npxを使ったクイックセットアップ（推奨）

{
  "mcpServers": {
    "imagician": {
      "command": "npx",
      "args": ["-y", "@flowy11/imagician"]
    }
  }
}

npmでグローバルにインストールした場合

{
  "mcpServers": {
    "imagician": {
      "command": "imagician"
    }
  }
}

ソースからインストールした場合

{
  "mcpServers": {
    "imagician": {
      "command": "node",
      "args": ["/path/to/imagician/dist/index.js"]
    }
  }
}

利用可能なツール

resize_image

さまざまなフィットオプションで画像を指定された寸法にリサイズします。

パラメータ:
- inputPath: 入力画像のパス
- outputPath: リサイズ後の画像を保存するパス
- width: 目標の幅（ピクセル単位、オプション）
- height: 目標の高さ（ピクセル単位、オプション）
- fit: リサイズ方法（cover, contain, fill, inside, outside）
- preserveAspectRatio: アスペクト比を維持する（デフォルト: true）

convert_format

品質をコントロールしながら画像形式を変換します。

パラメータ:
- inputPath: 入力画像のパス
- outputPath: 変換後の画像を保存するパス
- format: 目標の形式（jpeg, png, webp, avif）
- quality: 損失圧縮形式の品質（1-100、デフォルト: 80）

crop_image

画像から特定の領域を抽出します。

パラメータ:
- inputPath: 入力画像のパス
- outputPath: 切り抜き後の画像を保存するパス
- left: 左側のオフセット（ピクセル単位）
- top: 上側のオフセット（ピクセル単位）
- width: 切り抜き領域の幅
- height: 切り抜き領域の高さ

compress_image

品質設定を使って画像のファイルサイズを削減します。

パラメータ:
- inputPath: 入力画像のパス
- outputPath: 圧縮後の画像を保存するパス
- quality: 圧縮品質（1-100、デフォルト: 80）
- progressive: JPEGにプログレッシブエンコーディングを使用する（デフォルト: true）

rotate_image

任意の角度で画像を回転させます。

パラメータ:
- inputPath: 入力画像のパス
- outputPath: 回転後の画像を保存するパス
- angle: 回転角度（度単位、正の値は時計回り）
- background: 露出した領域の背景色（デフォルト: #000000）

flip_image

画像を水平または垂直方向に反転させます。

パラメータ:
- inputPath: 入力画像のパス
- outputPath: 反転後の画像を保存するパス
- direction: 反転方向（horizontal, vertical, both）

get_image_info

画像のメタデータや情報を抽出します。

パラメータ:
- inputPath: 画像ファイルのパス

戻り値: 形式、寸法、色空間、ファイルサイズなど

batch_resize

1つの画像から複数のサイズを生成します（レスポンシブ画像に最適）。

パラメータ:
- inputPath: 入力画像のパス
- outputDir: リサイズ後の画像を保存するディレクトリ
- sizes: {width, height?, suffix}の配列
- format: すべてのサイズの出力形式（オプション）

Claudeでの使用例

"image.jpgを800x600ピクセルにリサイズしてください"
"photo.pngを90%の品質でWebP形式に変換してください"
"avatar.jpgを(100, 100)から始まる200x200のサイズで切り抜いてください"
"サムネイルサイズを生成してください: 幅150px、300px、600px"

開発

# 依存関係のインストール
npm install

# TypeScriptのビルド
npm run build

# 開発モードで実行
npm run dev

📄 ライセンス

MIT