【初心者向け】MCPサーバーで画像生成を自動化 — Claude Code for VS Code × Google AI Studio API

1. はじめに

Claude Coadeはプログラミングや文章作成能力はものすごいのですが、文章を図入りで作成したいときは、Pythonで図を生成したり、Marmadeを使っていたり、見た目には、少し見劣りしたものになってしまいます。

「Claude Code のチャットに 『この記事のアイキャッチ画像を作って』 と頼むだけで、AI が画像を生成して記事に挿入してくれたら便利ですよね？」

それを実現するのが MCP（Model Context Protocol）サーバー です。

本記事では、Google AI Studio API の画像生成機能を MCP サーバーとしてラップし、Claude Code for VS Code のチャットから直接呼び出せるようにする方法を、ゼロから解説します。

この記事でできるようになること

1. MCP の基本概念を理解する
2. Python で 画像生成 MCP サーバーを構築する
3. Claude Code for VS Code に MCP サーバーを接続する
4. チャットから指示するだけで 画像を生成して記事に挿入する

---

2. MCP とは（初心者向け解説）

2-1. MCP の概要

MCP（Model Context Protocol） は、AI アシスタント（Claude など）と外部ツールを接続するための標準規格です。

わかりやすく言うと、USB のようなものです。

• USB があれば、どのパソコンでもキーボードやマウスが使える
• MCP があれば、どの AI クライアントでも外部ツール（画像生成、データベース検索など）が使える

MCP サーバーを作れば、Claude Code のチャットから 「画像を生成して」 と指示するだけで、裏側で Python スクリプトが動いて画像を生成してくれます。

2-2. MCP のアーキテクチャ

MCP は 3 つの要素で構成されています。

要素	役割	今回の例
ホスト	MCP を動かすアプリケーション	VS Code
クライアント	MCP サーバーと通信する AI	Claude Code
サーバー	実際の処理を行うプログラム	今回作る Python スクリプト

通信の流れ:

1. ユーザーが Claude Code のチャットで指示を出す
2. Claude が「MCP サーバーのツールを使うべき」と判断する
3. MCP プロトコル（JSON-RPC）でサーバーにリクエストを送信
4. サーバーが Google AI Studio API を呼び出して画像を生成
5. 結果を Claude に返す → ユーザーに表示

2-3. なぜ MCP サーバーを作るのか？

	MCP なし	MCP あり
画像生成の方法	Python スクリプトを手動で実行	チャットで指示するだけ
エラー対応	自分でログを確認	Claude が自動でリトライ・対処
記事への挿入	手動でパスを書く	ツールが自動挿入
プロンプト作成	自分で英語プロンプトを考える	Claude が最適なプロンプトを生成

---

3. 事前準備

3-1. 必要な環境

• Python 3.10 以上（python --version で確認）
• VS Code + Claude Code 拡張機能
• Google AI Studio API キー（https://aistudio.google.com/ で取得）

⚠️ 注意: API キーの取得方法は Google AI Studio の公式サイト で「Get API key」→「API キーを作成」で発行できます。発行したキーは安全な場所に保管してください。

3-2. パッケージのインストール

pip install "mcp[cli]" google-genai python-dotenv Pillow

パッケージ	用途
mcp[cli]	MCP サーバーフレームワーク（FastMCP 含む）
google-genai	Google AI Studio API（Gemini）との通信
python-dotenv	.env ファイルから環境変数を読み込み
Pillow	画像の保存・処理

✅ 確認ポイント: 以下のコマンドでインポートエラーが出なければ OK です。

python -c "from mcp.server.fastmcp import FastMCP; print('OK')"

3-3. API キーの設定

プロジェクトフォルダに .env ファイルを作成します。

GOOGLE_API_KEY=ここにAPIキーを貼り付け

⚠️ 注意: .env ファイルは .gitignore に追加して、Git で公開しないようにしましょう。

---

4. MCP サーバーの実装（メインコンテンツ）

4-1. サーバーの骨格を作る

まず、最小限の MCP サーバーを作ってみましょう。image_gen_server.py という名前で保存します。

from mcp.server.fastmcp import FastMCP

# サーバーを初期化（名前は自由）
mcp = FastMCP("image-gen-server")

@mcp.tool()
def hello(name: str) -> str:
    """挨拶を返すテストツール"""
    return f"こんにちは、{name}さん！"

if __name__ == "__main__":
    mcp.run(transport="stdio")

たった 10 行 で MCP サーバーが作れます。ポイントは 3 つ。

1. FastMCP("名前") でサーバーを初期化
2. @mcp.tool() デコレーターで関数をツールとして公開
3. mcp.run(transport="stdio") でサーバーを起動

💡 ヒント: @mcp.tool() を付けた関数の型ヒントとdocstring（説明文）は必須です。FastMCP はこれらを使って、Claude に「このツールは何ができるか」を伝えます。

4-2. stdio 通信の重要な注意点

MCP サーバーは stdio（標準入出力）で Claude Code と通信します。これは stdout（標準出力）を JSON-RPC メッセージの送受信に使うということです。

つまり、print() を使うと通信が壊れます。

# ❌ 絶対NG — stdout が壊れて MCP が動かなくなる
print("デバッグ中です")

# ✅ OK — stderr に出力すれば MCP に影響しない
import logging, sys
logging.basicConfig(stream=sys.stderr)
logger = logging.getLogger(__name__)
logger.info("デバッグ中です")

⚠️ 注意: これは MCP サーバー開発で最もよくあるハマりポイントです。print() を一つでも書くとサーバーが正常に動作しなくなります。ログは必ず logging モジュールで stderr に出力してください。

4-3. 画像生成ツールを追加する

Google AI Studio API を呼び出す画像生成ツールを追加します。

import logging
import os
import sys
from pathlib import Path

from dotenv import load_dotenv
from google import genai
from google.genai import types
from mcp.server.fastmcp import FastMCP

# ログ設定（stderr に出力）
logging.basicConfig(
    level=logging.INFO,
    format="%(asctime)s [%(levelname)s] %(message)s",
    stream=sys.stderr,
)
logger = logging.getLogger(__name__)

# 環境変数の読み込みとクライアント初期化
load_dotenv()
client = genai.Client(api_key=os.getenv("GOOGLE_API_KEY"))
MODEL = "gemini-2.0-flash-exp-image-generation"

mcp = FastMCP("image-gen-server")


@mcp.tool()
def generate_image(prompt: str, filename: str) -> str:
    """Google AI Studio API で画像を生成し、images/ フォルダに保存します。

    Args:
        prompt: 画像生成のプロンプト（英語推奨）
        filename: 保存するファイル名（例: "output.png"）

    Returns:
        保存した画像のパスと結果メッセージ
    """
    output_dir = Path.cwd() / "images"
    output_dir.mkdir(exist_ok=True)
    output_path = output_dir / filename

    logger.info(f"画像生成開始: {filename}")

    try:
        response = client.models.generate_content(
            model=MODEL,
            contents=prompt,
            config=types.GenerateContentConfig(
                response_modalities=["TEXT", "IMAGE"],
            ),
        )

        for part in response.candidates[0].content.parts:
            if part.inline_data is not None:
                image = part.as_image()
                image.save(str(output_path))
                logger.info(f"画像保存完了: {output_path}")
                return f"画像を保存しました: {output_path}"

        return "エラー: 画像が生成されませんでした。プロンプトを変更して再試行してください。"

    except Exception as e:
        logger.error(f"画像生成エラー: {e}")
        return f"エラー: {e}"

ポイント:

• response_modalities=["TEXT", "IMAGE"] — これがないとテキストしか返ってきません
• part.as_image() — レスポンスから PIL Image オブジェクトとして取得
• Path.cwd() / "images" — VS Code のワークスペースフォルダ配下に保存
• エラーは文字列で返す — 例外を投げるのではなく、Claude が対処できるようメッセージで返す

4-4. Markdown 挿入ツールを追加する

画像生成と同時に、Markdown ファイルへの挿入も行うツールを追加します。

@mcp.tool()
def generate_and_insert_image(
    prompt: str, filename: str, alt_text: str, markdown_file: str
) -> str:
    """画像を生成して Markdown ファイルに挿入します。

    画像を生成し images/ フォルダに保存した上で、
    指定した Markdown ファイルの末尾に画像参照を追加します。

    Args:
        prompt: 画像生成のプロンプト（英語推奨）
        filename: 保存するファイル名（例: "diagram.png"）
        alt_text: Markdown の alt テキスト（例: "アーキテクチャ図"）
        markdown_file: 挿入先の Markdown ファイルパス

    Returns:
        処理結果のメッセージ
    """
    # 1. 画像を生成（上で定義した generate_image を再利用）
    result = generate_image(prompt, filename)
    if result.startswith("エラー"):
        return result

    # 2. Markdown ファイルに画像参照を追加
    md_path = Path(markdown_file)
    if not md_path.exists():
        return f"エラー: {markdown_file} が見つかりません。"

    image_ref = f"\n![{alt_text}](images/{filename})\n"

    try:
        with open(md_path, "a", encoding="utf-8") as f:
            f.write(image_ref)
        logger.info(f"Markdown に挿入完了: {markdown_file}")
        return (
            f"画像を生成して記事に挿入しました。\n"
            f"画像: images/{filename}\n"
            f"記事: {markdown_file}"
        )
    except Exception as e:
        return f"画像は生成しましたが、記事への挿入に失敗しました: {e}"

4-5. 完成版コード

上記をまとめた完成版の image_gen_server.py です。

"""
MCP Server: Google AI Studio API を使った画像生成サーバー
Claude Code for VS Code から呼び出して、画像を生成・記事に挿入する
"""
import logging
import os
import sys
from pathlib import Path

from dotenv import load_dotenv
from google import genai
from google.genai import types
from mcp.server.fastmcp import FastMCP

# ============================================================
# 重要: stdio 通信では stdout を絶対に使わない！
# stdout は JSON-RPC メッセージ専用。print() は使用禁止。
# すべてのログは stderr に出力する。
# ============================================================
logging.basicConfig(
    level=logging.INFO,
    format="%(asctime)s [%(levelname)s] %(message)s",
    stream=sys.stderr,
)
logger = logging.getLogger(__name__)

# .env から環境変数を読み込み
env_path = Path(__file__).parent / ".env"
load_dotenv(dotenv_path=env_path if env_path.exists() else None)

# Google AI Studio クライアント初期化
api_key = os.getenv("GOOGLE_API_KEY")
if not api_key:
    logger.error("GOOGLE_API_KEY が設定されていません。")
    logger.error(".env ファイルまたは環境変数に設定してください。")
    sys.exit(1)

client = genai.Client(api_key=api_key)
MODEL = "gemini-2.0-flash-exp-image-generation"

# MCP サーバー初期化
mcp = FastMCP("image-gen-server")


@mcp.tool()
def generate_image(prompt: str, filename: str) -> str:
    """Google AI Studio API で画像を生成し、images/ フォルダに保存します。

    Args:
        prompt: 画像生成のプロンプト（英語推奨）
        filename: 保存するファイル名（例: "output.png"）

    Returns:
        保存した画像のパスと結果メッセージ
    """
    output_dir = Path.cwd() / "images"
    output_dir.mkdir(exist_ok=True)
    output_path = output_dir / filename

    logger.info(f"画像生成開始: {filename}")
    logger.info(f"プロンプト: {prompt[:80]}...")

    try:
        response = client.models.generate_content(
            model=MODEL,
            contents=prompt,
            config=types.GenerateContentConfig(
                response_modalities=["TEXT", "IMAGE"],
            ),
        )

        for part in response.candidates[0].content.parts:
            if part.inline_data is not None:
                image = part.as_image()
                image.save(str(output_path))
                logger.info(f"画像保存完了: {output_path}")
                return f"画像を保存しました: {output_path}"

        return "エラー: 画像が生成されませんでした。プロンプトを変更して再試行してください。"

    except Exception as e:
        logger.error(f"画像生成エラー: {e}")
        return f"エラー: {e}"


@mcp.tool()
def generate_and_insert_image(
    prompt: str, filename: str, alt_text: str, markdown_file: str
) -> str:
    """画像を生成して Markdown ファイルに挿入します。

    画像を生成し images/ フォルダに保存した上で、
    指定した Markdown ファイルの末尾に画像参照を追加します。

    Args:
        prompt: 画像生成のプロンプト（英語推奨）
        filename: 保存するファイル名（例: "diagram.png"）
        alt_text: Markdown の alt テキスト（例: "アーキテクチャ図"）
        markdown_file: 挿入先の Markdown ファイルパス

    Returns:
        処理結果のメッセージ
    """
    result = generate_image(prompt, filename)
    if result.startswith("エラー"):
        return result

    md_path = Path(markdown_file)
    if not md_path.exists():
        return f"エラー: {markdown_file} が見つかりません。"

    image_ref = f"\n![{alt_text}](images/{filename})\n"

    try:
        with open(md_path, "a", encoding="utf-8") as f:
            f.write(image_ref)
        logger.info(f"Markdown に挿入完了: {markdown_file}")
        return (
            f"画像を生成して記事に挿入しました。\n"
            f"画像: images/{filename}\n"
            f"記事: {markdown_file}"
        )
    except Exception as e:
        logger.error(f"Markdown 挿入エラー: {e}")
        return f"画像は生成しましたが、記事への挿入に失敗しました: {e}"


if __name__ == "__main__":
    mcp.run(transport="stdio")

✅ 確認ポイント: ファイルを保存したら、以下のコマンドで構文エラーがないか確認しましょう。

python -c "import image_gen_server; print('構文OK')"

---

5. Claude Code for VS Code への接続

5-1. 設定ファイルの作成

プロジェクトフォルダに .vscode/mcp.json を作成します。

{
  "inputs": [
    {
      "type": "promptString",
      "id": "google-api-key",
      "description": "Google AI Studio API Key",
      "password": true
    }
  ],
  "servers": {
    "image-gen": {
      "type": "stdio",
      "command": "python",
      "args": ["image_gen_server.py"],
      "env": {
        "GOOGLE_API_KEY": "${input:google-api-key}"
      }
    }
  }
}

各フィールドの説明:

フィールド	説明
inputs	VS Code 起動時に入力を求めるパラメータ（API キーなど）
type: "stdio"	通信方式。ローカル実行は stdio
command	サーバーの実行コマンド
args	コマンドの引数（スクリプトのパス）
env	環境変数。${input:google-api-key} で入力値を参照

⚠️ 注意: Windows で python コマンドが動作しない場合は、"command" を "py" に変更してください。

環境変数の設定方法（2パターン）

パターン A: VS Code に毎回入力する（上記の方法）

• inputs で定義した google-api-key を起動時に入力
• API キーがファイルに残らないのでセキュリティが高い

パターン B: .env ファイルで自動読み込みする

.env ファイルに API キーを書いておけば、サーバーが python-dotenv で自動読み込みします。この場合、mcp.json の inputs と env は不要です。

{
  "servers": {
    "image-gen": {
      "type": "stdio",
      "command": "python",
      "args": ["image_gen_server.py"]
    }
  }
}

💡 ヒント: 個人利用なら パターン B（.env ファイル）が手軽です。チーム開発やセキュリティが重要な場合は パターン A（毎回入力）がおすすめです。

5-2. 接続確認

1. VS Code でプロジェクトフォルダを開く
2. Claude Code のチャットパネルを開く
3. MCP サーバーが自動的に検出・起動される

✅ 確認ポイント: Claude Code のチャットで以下のように聞いてみましょう。

使えるMCPツールを教えて

generate_image と generate_and_insert_image の 2 つのツールが表示されれば成功です。

---

6. 実際に使ってみよう

6-1. 画像を 1 枚生成する

Claude Code のチャットに以下のように入力してみましょう。

generate_image ツールを使って、プログラミングをしている猫のイラストを生成してください。
英語プロンプトで、ファイル名は cat_coding.png にしてください。

Claude が自動的に英語プロンプトを作成し、generate_image ツールを呼び出します。成功すると images/cat_coding.png が生成されます。

6-2. 記事に画像を挿入する

generate_and_insert_image ツールを使って、
この記事のまとめセクション用の画像を生成してください。
テーマは「MCPサーバーの活用イメージ」です。
ファイル名: summary.png
altテキスト: まとめ画像
挿入先: article.md

これで画像の生成と Markdown への挿入が一度に完了します。

6-3. 自然言語で指示する（上級）

ツール名を明示しなくても、Claude は文脈から適切なツールを選んでくれます。

この記事に「APIの処理フローを示す図」を追加してください。
図はシンプルなインフォグラフィックスタイルで、英語のプロンプトを使ってください。
図中の言語は日本語にしてください。

Claude が自動的に:

1. 英語プロンプトを作成
2. generate_and_insert_image ツールを選択
3. 画像を生成して記事に挿入

というワークフローを実行してくれます。

※画像生成: Google AI Studio API (gemini-2.0-flash-exp-image-generation) で、APIの処理フロー図を生成しました。使用したモデルでは、日本語の生成能力が弱かった。。

---

7. トラブルシューティング

エラー・症状	原因	対処法
サーバーが起動しない	パッケージ未インストール	pip install "mcp[cli]" google-genai python-dotenv Pillow
Connection closed	Windows で python が見つからない	mcp.json の command を "py" に変更
ツールが表示されない	mcp.json の設定ミス	パスと JSON 構文を確認
画像が生成されない	response_modalities の設定漏れ	サーバーコードの ["TEXT", "IMAGE"] を確認
429 RESOURCE_EXHAUSTED	API レート制限	しばらく待ってから再実行
print() でサーバーが壊れる	stdout に出力している	logging + stream=sys.stderr に変更
API キーが認識されない	.env のパスが違う	サーバーと同じフォルダに .env を配置

---

8. まとめ

この記事で紹介した内容

ステップ	内容
1. MCP とは	AI と外部ツールを接続する標準規格
2. 事前準備	mcp[cli], google-genai などのインストール
3. サーバー実装	generate_image と generate_and_insert_image の 2 ツール
4. VS Code 接続	.vscode/mcp.json で設定
5. 実際に使う	チャットから指示するだけで画像生成 + 挿入

ファイル構成

プロジェクトフォルダ/
├── image_gen_server.py     # MCP サーバー本体
├── .env                    # API キー（Git に含めない）
├── .vscode/
│   └── mcp.json            # VS Code MCP 設定
└── images/                 # 生成した画像の保存先

今後の応用例

• 他の画像生成 API の追加: DALL-E（OpenAI）や Stable Diffusion なども同じパターンで MCP ツール化できます
• 画像編集ツールの追加: 既存画像のリサイズ、トリミング、フィルター適用などもツールとして公開可能
• HTTP transport でリモートサーバー化: mcp.run(transport="sse") に変更すれば、複数の端末から共有できるリモートサーバーになります
• 他の MCP ツールとの組み合わせ: データベース検索、Web スクレイピングなど、他の MCP サーバーと組み合わせて高度なワークフローを構築できます

---

MCP サーバーは一度作ってしまえば、チャットから自然言語で呼び出せるので、日々の開発が大幅に効率化されます。ぜひ試してみてください！