imgx-mcp 使い方ガイド
AI と作業する流れの中で、画像の生成・編集・調整・保存まで完結する MCP サーバー。記事を書いている途中で「ここにカバー画像が欲しい」と思ったとき、別のサービスに切り替える必要はない。AI はそれまでの会話——記事の内容、対象読者、プロジェクトの方針——をすべて把握した状態で対応する。コンテキストが途切れない。Claude Code、Gemini CLI、Claude Desktop、Cursor、Windsurf など MCP 対応ツールで動作する。
1. クイックスタート
Step 1: MCP 設定
プロジェクトルートの .mcp.json に以下を追加する。
{
"mcpServers": {
"imgx": {
"command": "npx",
"args": ["--package=imgx-mcp", "-y", "imgx-mcp"],
"env": { "GEMINI_API_KEY": "your-key" }
}
}
}Windows の場合:
"command"を"cmd"に、"args"の先頭に"/c"を追加する。
{
"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 | 無料枠あり |
| OpenAI | OpenAI Platform | 有料 |
取得したキーを .mcp.json の env セクションに設定する。または 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_image の output_dir パラメータでセッションの出力先を指定できる。指定すると、そのセッション内の edit_last も同じディレクトリに出力する。
「カバー画像を ./content/images に保存して生成して」
→ generate_image: output_dir="./content/images"
→ edit_last でも ./content/images/s-xxxx/ に保存されるプロジェクト単位で出力先を固定したい場合は .imgxrc を使う。
{
"defaults": {
"outputDir": "./assets/images"
}
}出力先の優先順位:
| 優先度 | 指定方法 | 例 |
|---|---|---|
| 1(最高) | output パラメータ | output="./cover.png" |
| 2 | output_dir パラメータ | output_dir="./images" |
| 3 | .imgxrc | defaults.outputDir |
| 4 | set_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:
{
"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-dirsyour-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:
{
"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:
{
"mcpServers": {
"imgx": {
"command": "npx",
"args": ["--package=imgx-mcp", "-y", "imgx-mcp"],
"env": { "GEMINI_API_KEY": "your-key", "OPENAI_API_KEY": "your-key" }
}
}
}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 ファイルをアップロードする方式で追加する。
- GitHub リポジトリまたは npm パッケージの
dist/からimage-generation-skill.zipをダウンロード - Claude Desktop で Settings > Profile > Customize > Skills > Add Skill
- ZIP をアップロード
新しいバージョンがリリースされたら、ZIP を再ダウンロードして再アップロードすることで更新できる。
Codex CLI
.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 を配置することで、プロジェクト固有のデフォルト値を設定できる。
{
"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.json の env セクションで環境変数を渡せる。
{
"env": {
"GEMINI_API_KEY": "your-key",
"IMGX_MODEL": "gemini-2.5-flash-image",
"IMGX_OUTPUT_DIR": "./generated-images"
}
}7. プロバイダ比較
Gemini vs OpenAI
| 機能 | Gemini | OpenAI |
|---|---|---|
| テキストから画像生成 | 対応 | 対応 |
| テキスト指示による編集(マスク不要) | 対応 | 対応 |
反復編集(edit_last) | 対応 | 対応 |
| 解像度指定(1K / 2K / 4K) | 対応 | 非対応 |
| 複数枚同時生成 | 非対応 | 対応(最大 4 枚) |
| 出力フォーマット選択 | PNG のみ | PNG / JPEG / WebP |
| 無料枠 | あり | なし |
Gemini モデル比較
| 項目 | gemini-3-pro-image-preview | gemini-2.5-flash-image |
|---|---|---|
| 画質 | 高い | 良好 |
| 速度 | 遅め | 速い |
| コスト | 約 $0.134/枚 | 低い |
| 解像度 | 1K, 2K, 4K | 1K, 2K |
使い分け
- Gemini: デフォルトプロバイダ。無料枠がある。解像度指定が必要な場合に適している
- OpenAI: 複数枚の同時生成、フォーマット選択が必要な場合に使用する
- gemini-3-pro: 高画質が必要なとき(カバー画像、OGP 等)
- gemini-2.5-flash: 速度とコストを優先するとき(ラフ案、繰り返しの試行)
8. CLI(補足)
imgx-mcp は MCP サーバーとしての利用が主な用途だが、コマンドラインツールとしても使える。
インストール
npm install -g imgx-mcpNode.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 を参照。

