imgX-MCP-ja – 導入方法・使い方

imgx-mcp 使い方ガイド

AI と作業する流れの中で、画像の生成・編集・調整・保存まで完結する MCP サーバー。記事を書いている途中で「ここにカバー画像が欲しい」と思ったとき、別のサービスに切り替える必要はない。AI はそれまでの会話——記事の内容、対象読者、プロジェクトの方針——をすべて把握した状態で対応する。コンテキストが途切れない。Claude Code、Gemini CLI、Claude Desktop、Cursor、Windsurf など MCP 対応ツールで動作する。


1. クイックスタート

Step 1: MCP 設定

プロジェクトルートの .mcp.json に以下を追加する。

.mcp.json
{
  "mcpServers": {
    "imgx": {
      "command": "npx",
      "args": ["--package=imgx-mcp", "-y", "imgx-mcp"],
      "env": { "GEMINI_API_KEY": "your-key" }
    }
  }
}

Windows の場合: "command""cmd" に、"args" の先頭に "/c" を追加する。

.mcp.json (Windows)
{
  "mcpServers": {
    "imgx": {
      "command": "cmd",
      "args": ["/c", "npx", "--package=imgx-mcp", "-y", "imgx-mcp"],
      "env": { "GEMINI_API_KEY": "your-key" }
    }
  }
}

Step 2: API キー取得

いずれか1つのプロバイダの API キーが必要。

プロバイダ取得先備考
Gemini(デフォルト)Google AI Studio無料枠あり
OpenAIOpenAI Platform有料

取得したキーを .mcp.jsonenv セクションに設定する。または CLI で設定することもできる。

npx imgx-mcp config set api-key YOUR_KEY --provider gemini

キーは ~/.config/imgx/config.json(Linux/macOS)または %APPDATA%\imgx\config.json(Windows)に保存される。

Step 3: 最初の画像生成

設定が完了したら、AI に「画像を生成して」と伝えるだけで動作する。

「コーヒーカップの画像を生成して」

AI が generate_image ツールを呼び出し、画像を生成する。ファイルパスが返され、対応クライアントではインライン表示もされる。

生成された画像は ~/Pictures/imgx/ に保存される(デフォルト)。


2. 出力先の仕組み

セッション別ディレクトリ

generate_image を呼ぶたびに新しいセッションが作成され、セッション固有のディレクトリに画像が保存される。同じセッション内の edit_last は、同じディレクトリに出力する。

~/Pictures/imgx/
  s-a1b2c3d4/          ← セッション 1(generate → edit → edit)
    imgx-001.png
    imgx-002.png
    imgx-003.png
  s-9f8e7d6c/          ← セッション 2(generate → edit)
    imgx-004.png
    imgx-005.png

セッションごとにディレクトリが分かれるため、異なる画像チェーンのファイルが混在しない。

出力先のカスタマイズ

generate_imageoutput_dir パラメータでセッションの出力先を指定できる。指定すると、そのセッション内の edit_last も同じディレクトリに出力する。

「カバー画像を ./content/images に保存して生成して」
→ generate_image: output_dir="./content/images"
→ edit_last でも ./content/images/s-xxxx/ に保存される

プロジェクト単位で出力先を固定したい場合は .imgxrc を使う。

.imgxrc
{
  "defaults": {
    "outputDir": "./assets/images"
  }
}

出力先の優先順位:

優先度指定方法
1(最高)output パラメータoutput="./cover.png"
2output_dir パラメータoutput_dir="./images"
3.imgxrcdefaults.outputDir
4set_output_dir で設定ユーザー設定に保存
5(最低)デフォルト~/Pictures/imgx/

3. MCP ツール一覧

imgx-mcp は 10 の MCP ツールを提供する。Bash コマンドは不要で、AI エージェントが直接呼び出す。

generate_image

テキストプロンプトから画像を生成する。

パラメータ必須説明
promptはい画像の説明
aspect_ratioいいえ1:1, 16:9, 9:16, 4:3, 3:4, 2:3, 3:2
resolutionいいえ1K, 2K, 4K
countいいえ生成枚数(OpenAI のみ、最大 4)
modelいいえモデル名
providerいいえgemini(デフォルト)または openai
outputいいえ出力ファイルパス
output_dirいいえ出力ディレクトリ

edit_image

既存の画像をテキスト指示で編集する。マスク不要。モデルがテキストから変更箇所を判断する。

パラメータ必須説明
inputはい編集する画像のパス
promptはい編集の指示
aspect_ratioいいえ出力アスペクト比
resolutionいいえ出力解像度
outputいいえ出力ファイルパス

edit_last

直前に生成または編集した画像を編集する。入力パスの指定は不要で、前回の出力が自動的に使われる。

パラメータ必須説明
promptはい編集の指示
aspect_ratioいいえ出力アスペクト比
resolutionいいえ出力解像度
outputいいえ出力ファイルパス

undo_edit

アクティブセッション内で直前の編集を取り消し、1つ前の画像に戻る。パラメータなし。

redo_edit

取り消した編集をやり直す。パラメータなし。

edit_history

全セッションとそのエントリ(プロンプト、プロバイダ、モデル、タイムスタンプ)を一覧表示する。パラメータなし。

switch_session

別のセッションに切り替える。切り替え後、edit_last はそのセッションの現在位置の画像を入力として使う。

パラメータ必須説明
session_idはい切り替え先のセッション ID

clear_history

全セッションの履歴を消去する。

パラメータ必須説明
delete_filesいいえtrue で画像ファイルも削除(デフォルト: false

set_output_dir

デフォルトの出力先ディレクトリを変更する。

パラメータ必須説明
pathはい新しい出力先ディレクトリのパス
move_filesいいえtrue で既存ファイルを新ディレクトリに移動

list_providers

利用可能なプロバイダとその機能を一覧表示する。パラメータなし。


4. 実用ワークフロー

imgx-mcp の特徴は、AI との会話の中で画像の生成から完成まで完結すること。AI は会話の文脈——記事の内容、プロジェクトの目的、これまでの編集方針——を保持したまま、画像生成の指示を組み立てる。ユーザーがプロンプトを直接書く必要はない。

以下の例はすべて、AI に自然言語で伝えるだけで実行される。

ブログカバー画像を作る

記事を書いている途中で、カバー画像が必要になった場面。AI は記事の内容をすでに把握している。

あなた: 「この記事にカバー画像が欲しい。16:9で。記事の内容に合った画像をお任せで」

AI: (記事の内容から「開発者がターミナルに向かう朝のデスク、コーヒーカップ」を判断)
    → generate_image を実行

あなた: 「いいね。もう少し暖かい色味にして」

AI: → edit_last を実行

あなた: 「よさそう。ビネット効果を軽くかけて完成にしよう」

AI: → edit_last を実行、最終画像のパスを返す

ユーザーは「暖かい色味にして」と言うだけでよい。AI がプロンプトの言語や画像サービスの仕様を考慮して指示文を組み立てる。

出力先を指定して生成する

プロジェクトのアセットディレクトリに直接保存したい場合。

あなた: 「OGP画像を ./content/images に保存して。1200x630くらいのサイズ感で」

AI: → generate_image を output_dir="./content/images", aspect_ratio="2:3" で実行

あなた: 「テキストが目立つように背景をもう少しシンプルにして」

AI: → edit_last を実行(同じ ./content/images 内に保存される)

edit_last は生成時に指定した出力先を引き継ぐ。編集するたびに保存先を指定し直す必要はない。

編集を undo して別の方向を試す

3回編集した結果が意図と違った場合。途中の状態に戻って、別のアプローチを試せる。

あなた: 「コーヒーショップの内装のイメージ画像を作って」

AI: → generate_image を実行

あなた: 「照明を暖かくして」        → edit_last(1回目)
あなた: 「窓際にお客さんを追加して」  → edit_last(2回目)
あなた: 「人物が不自然。照明を変えた状態まで戻して」

AI: → undo_edit を実行(照明変更後の状態に戻る)

あなた: 「人物の代わりに、窓の外に雨を降らせて」

AI: → edit_last を実行(undo 地点から新しい方向へ)

undo 後に edit_last を呼ぶと、その時点から新しいブランチが始まる。元の編集が消えることはなく、redo で戻ることもできる。

複数の画像を並行して進める

カバー画像と OGP 画像を同じセッション内で交互に作業する場合。

あなた: 「まずブログのカバー画像を作ろう。16:9で」

AI: → generate_image を実行(セッション s-aaa が作成)

あなた: 「色味を調整して」 → edit_last
あなた: 「OGP画像も必要。1200x630で、タイトルが映える構図で」

AI: → generate_image を実行(セッション s-bbb が作成)

あなた: 「OGPはこれでいい。さっきのカバー画像に戻って、もう少し明るくして」

AI: → switch_session で s-aaa に切り替え
    → edit_last を実行(カバー画像の続きから編集)

edit_history で全セッションの作業内容を確認できる。どのセッションで何を試したかが記録されている。

プロバイダを使い分ける

AI がコンテキストから適切なプロバイダを判断することもできるし、ユーザーが明示的に指定することもできる。

あなた: 「同じ構図で Gemini と OpenAI 両方試して比較したい」

AI: → generate_image を provider="gemini" で実行
    → generate_image を provider="openai" で実行
    → 両方の結果を提示

あなた: 「Gemini の方がいい。これをベースに調整して」

AI: → switch_session で Gemini のセッションに切り替え
    → edit_last を実行
あなた: 「アイコンのバリエーションを4パターン生成して」

AI: → generate_image を provider="openai", count=4 で実行
    (OpenAI は複数枚同時生成に対応)

完成した画像をすぐ使う

画像はファイルとして保存されるため、生成直後からコードや記事で参照できる。

あなた: 「記事のフロントマターに今のカバー画像のパスを設定して」

AI: (直前に生成した画像のパス ./content/images/s-aaa/imgx-003.png を把握している)
    → フロントマターを更新

AI が画像の生成から記事への組み込みまで、同じ会話の中で一貫して対応する。コンテキストが途切れないため、手作業のファイル管理が不要になる。


5. 各環境の設定

各ツールの MCP 設定ファイルに imgx-mcp を追加する。設定内容はどのツールでも同じ構造。

Claude Code

プロジェクトルートの .mcp.json:

.mcp.json
{
  "mcpServers": {
    "imgx": {
      "command": "npx",
      "args": ["--package=imgx-mcp", "-y", "imgx-mcp"],
      "env": { "GEMINI_API_KEY": "your-key", "OPENAI_API_KEY": "your-key" }
    }
  }
}

使用するプロバイダのキーだけ設定すればよい。

Skill — AI が画像ワークフローを自動で判断する仕組み

MCP サーバーは AI に「画像を生成・編集する能力」を与える。Skill はその上に「どう使うべきかの知識」を加える。

Skill がインストールされた環境では、ユーザーは画像生成サービスの仕様やプロンプトの書き方を知る必要がない。プロバイダごとの対応機能の違い、アスペクト比の指定方法、反復編集の手順、undo/redo の活用——こうした専門的な知識を AI が Skill から読み取り、自動的に最適な判断を行う。

ユーザーは「ここにカバー画像が欲しい」と言うだけでよい。

Skill は Claude Code で最初に導入された仕組みだが、AI ツールがドメイン知識を参照ファイルから読み取る仕組みは急速に広がりつつある。imgx-mcp の Skill ファイルは Claude Code 以外の環境でもカスタムプロンプトとして利用できる。

インストール方法(Claude Code):

# GitHub から取得
curl -sL https://raw.githubusercontent.com/somacoffeekyoto/imgx-mcp/main/skills/image-generation/SKILL.md \
  -o .claude/skills/image-generation/SKILL.md --create-dirs
curl -sL https://raw.githubusercontent.com/somacoffeekyoto/imgx-mcp/main/skills/image-generation/references/providers.md \
  -o .claude/skills/image-generation/references/providers.md --create-dirs
your-project/
  .mcp.json                              ← MCP サーバー設定
  .claude/
    skills/
      image-generation/
        SKILL.md                         ← Skill 本体
        references/
          providers.md                   ← プロバイダリファレンス

全プロジェクト共通で使う場合: ~/.claude/skills/ に配置する。

MCP サーバーと Skill の役割:

MCP サーバーSkill
役割AI に画像ツールの能力を与えるツールの最適な使い方を AI に教える
効果画像の生成・編集が可能になるユーザーがサービス仕様を知らなくても AI が自動判断する
対応ツール全 MCP 対応ツールClaude Code(他ツールでもカスタムプロンプトとして利用可)

MCP サーバー + Skill の両方を設定するのが推奨。

Plugin 経由の一括インストール: Claude Code では /plugin install imgx-mcp で MCP サーバーと Skill を同時にインストールできる。

Gemini CLI

~/.gemini/settings.json:

~/.gemini/settings.json
{
  "mcpServers": {
    "imgx": {
      "command": "npx",
      "args": ["--package=imgx-mcp", "-y", "imgx-mcp"],
      "env": { "GEMINI_API_KEY": "your-key", "OPENAI_API_KEY": "your-key" }
    }
  }
}

Claude Desktop

claude_desktop_config.json:

macOS / Linux:

claude_desktop_config.json
{
  "mcpServers": {
    "imgx": {
      "command": "npx",
      "args": ["--package=imgx-mcp", "-y", "imgx-mcp"],
      "env": { "GEMINI_API_KEY": "your-key", "OPENAI_API_KEY": "your-key" }
    }
  }
}

Windows:

claude_desktop_config.json (Windows)
{
  "mcpServers": {
    "imgx": {
      "command": "cmd",
      "args": ["/c", "npx", "--package=imgx-mcp", "-y", "imgx-mcp"],
      "env": { "GEMINI_API_KEY": "your-key", "OPENAI_API_KEY": "your-key" }
    }
  }
}

設定ファイルの場所:

  • Windows: %APPDATA%\Claude\claude_desktop_config.json
  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

編集後、Claude Desktop を再起動する。

補足: Claude Desktop は MCP サーバーをアプリ自身のディレクトリから実行する。画像の出力先を指定したい場合は env セクションに "IMGX_OUTPUT_DIR": "C:\\Users\\you\\Pictures" を追加するか、事前に imgx config set output-dir <path> を実行する。

Skill(Claude Desktop)

Claude Desktop でも Skill を使える。ZIP ファイルをアップロードする方式で追加する。

  1. GitHub リポジトリまたは npm パッケージdist/ から image-generation-skill.zip をダウンロード
  2. Claude Desktop で Settings > Profile > Customize > Skills > Add Skill
  3. ZIP をアップロード

新しいバージョンがリリースされたら、ZIP を再ダウンロードして再アップロードすることで更新できる。

Codex CLI

.codex/config.toml:

.codex/config.toml
[mcp_servers.imgx]
command = "npx"
args = ["--package=imgx-mcp", "-y", "imgx-mcp"]
env = { GEMINI_API_KEY = "your-key", OPENAI_API_KEY = "your-key" }

その他のツール(Cursor、Windsurf 等)

同じ npx パターンが Cursor、Windsurf、Continue.dev、Cline、Zed など MCP 対応ツールで使える。Windows では npx の代わりに cmd /c npx を使用する。


6. 設定の管理

imgx-mcp の設定は 5 つのレイヤーで解決される。上位が優先される。

優先度レイヤー
1(最高)ツールパラメータ / CLI フラグ--model, --output-dir
2環境変数IMGX_MODEL, IMGX_OUTPUT_DIR
3プロジェクト設定.imgxrc(カレントディレクトリ)
4ユーザー設定~/.config/imgx/config.json
5(最低)プロバイダデフォルト各プロバイダの初期値

プロジェクト設定(.imgxrc

プロジェクトルートに .imgxrc を配置することで、プロジェクト固有のデフォルト値を設定できる。

.imgxrc
{
  "defaults": {
    "model": "gemini-2.5-flash-image",
    "outputDir": "./assets/images",
    "aspectRatio": "16:9"
  }
}

.imgxrc は Git で共有できる。API キーは .imgxrc に含めず、ユーザー設定または環境変数で管理する。

ユーザー設定

imgx config コマンドで設定を管理できる。

imgx config set model gemini-2.5-flash-image    # デフォルトモデルの変更
imgx config set output-dir ./images              # 出力先の変更
imgx config set aspect-ratio 16:9                # アスペクト比の変更
imgx config list                                 # 全設定の表示
imgx config path                                 # 設定ファイルの場所

MCP サーバーでの環境変数

.mcp.jsonenv セクションで環境変数を渡せる。

{
  "env": {
    "GEMINI_API_KEY": "your-key",
    "IMGX_MODEL": "gemini-2.5-flash-image",
    "IMGX_OUTPUT_DIR": "./generated-images"
  }
}

7. プロバイダ比較

Gemini vs OpenAI

機能GeminiOpenAI
テキストから画像生成対応対応
テキスト指示による編集(マスク不要)対応対応
反復編集(edit_last対応対応
解像度指定(1K / 2K / 4K)対応非対応
複数枚同時生成非対応対応(最大 4 枚)
出力フォーマット選択PNG のみPNG / JPEG / WebP
無料枠ありなし

Gemini モデル比較

項目gemini-3-pro-image-previewgemini-2.5-flash-image
画質高い良好
速度遅め速い
コスト約 $0.134/枚低い
解像度1K, 2K, 4K1K, 2K

使い分け

  • Gemini: デフォルトプロバイダ。無料枠がある。解像度指定が必要な場合に適している
  • OpenAI: 複数枚の同時生成、フォーマット選択が必要な場合に使用する
  • gemini-3-pro: 高画質が必要なとき(カバー画像、OGP 等)
  • gemini-2.5-flash: 速度とコストを優先するとき(ラフ案、繰り返しの試行)

8. CLI(補足)

imgx-mcp は MCP サーバーとしての利用が主な用途だが、コマンドラインツールとしても使える。

インストール

npm install -g imgx-mcp

Node.js 18 以上が必要。

基本コマンド

# 画像生成
imgx generate -p "木製テーブルの上のコーヒーカップ、朝の光" -o output.png

# 画像編集
imgx edit -i photo.png -p "背景を夕焼けに変更" -o edited.png

# 反復編集(--last で前回の出力を入力として使用)
imgx edit -i photo.png -p "背景を暗くする"
imgx edit --last -p "暖かい照明を追加"
imgx edit --last -p "16:9 にクロップ" -o final.png

# undo / redo
imgx undo               # 直前の編集を取り消し
imgx redo               # 取り消した編集をやり直し

# 履歴管理
imgx history            # 全セッション・全エントリを一覧
imgx history switch <session-id>  # セッション切り替え
imgx history clear      # 全履歴を消去(対話的に確認)
imgx history clear --yes          # 確認なしで消去
imgx history clear --keep-files   # 画像ファイルは残して履歴のみ消去

# プロバイダ確認
imgx providers

主なフラグ

フラグ短縮説明
--prompt-p画像の説明または編集の指示(必須)
--output-o出力ファイルパス(省略時は自動生成)
--input-i編集する入力画像(edit コマンドのみ)
--last-l前回の出力を入力として使用(edit コマンドのみ)
--aspect-ratio-aアスペクト比
--resolution-r解像度
--count-n生成枚数
--providerプロバイダ名(デフォルト: gemini
--model-mモデル名

詳細は README を参照。