Cursorで画像生成：MCPサーバーの導入・設定ガイド

Cursor用のMCPサーバーは、エディタのAIエージェントがチャットから呼び出せる外部ツールボックスのようなものです。mcp.jsonにJSONブロックを1つ追加するだけで、Cursorのベースモデルにはない画像生成などの機能を拡張できます。Cursorのエージェントはファイルの編集やターミナルコマンドの実行は得意ですが、背後にあるAIモデル自体は画像ファイルを生成できません。そこで画像生成サーバーを連携させれば、「このランディングページ用に16:9のヒーロー画像を生成して」とチャットで指示するだけで、レポジトリ内に実際の画像ファイルを直接保存できるようになります。

お急ぎの方のために、まずは設定手順の全体像を紹介します。BananaBananaのプロフィールでAPIキーを作成し、グローバル設定用の~/.cursor/mcp.json、またはプロジェクト固有の.cursor/mcp.jsonに以下の記述を追加します。

{
  "mcpServers": {
    "bananabanana": {
      "url": "https://bananabanana.pro/api/mcp",
      "headers": {
        "Authorization": "Bearer ${env:BB_API_KEY}"
      }
    }
  }
}

環境変数にBB_API_KEY=bb_live_YOUR_KEYをエクスポートすれば設定は完了です。ローカルサーバーの起動も、Google Cloudアカウントの作成も、月額サブスクリプションも不要です。料金はプリペイド残高からの都度支払いで、画像は$0.03から、動画は$0.10から利用できます。本ガイドに掲載している2つのデモ画像は、執筆中にこの設定と有効なAPIキーを使って実際に生成したものです。その際の実行ログと合計$0.55の利用明細は、この記事の後半で公開しています。

なぜCursorに画像生成機能を追加するのか？

フロントエンドの開発中、コードを書いているまさにその瞬間に画像が必要になることがよくあるからです。ランディングページのヒーロー画像、グリッドが灰色一色にならないようにするための製品カード用プレースホルダー、作成したばかりのブログ記事のOGP画像など。どれも難しい作業ではありませんが、今までは同じような回り道が必要でした。ブラウザを開いて画像生成ツールを起動し、プロンプトを入力してダウンロード。名前を変更し、public/フォルダにドラッグ＆ドロップしてコードに戻り、<img>タグを書く――。素材1つあたり10分ほどの雑務が発生し、せっかく集中していたコンポーネントの実装作業が中断されてしまいます。

MCPサーバーを導入すれば、エージェントがこの一連の作業をすべて代行してくれます。プロンプトを作成し（大抵、自分が適当に書く最初のアイデアよりも優れたものになります）、generate_imageを呼び出し、生成されたファイルを適切なフォルダにダウンロードし、適切な代替テキスト（alt属性）とともにマークアップを記述します。デベロッパーは退屈な雑務をする代わりに、差分（diff）を確認するだけで済みます。

もう一つの大きなメリットは、ローカルに何もインストールする必要がない点です。画像生成用のローカルMCPサーバーも存在し、正常に機能しますが、それらは独自のNode.jsやPythonのプロセスを起動し、自分自身のGoogle APIキーを用意してGoogleアカウントのクォータや請求を管理する必要があります。リモートサーバーを利用すれば、これ上すべてを省略できます。エンドポイントはすでに弊社側で稼働しており、BananaBanana generatorと同じパイプラインを使用しているため、必要なのは1つのbb_live_キーだけです。

雲の上の小さなアートスタジオと光るケーブルで接続されたノートPCのイラスト（Cursorからリモートの画像生成MCPサーバーを呼び出すイメージ）

CursorにMCPサーバーを追加する方法

ステップは3つ、時間は2分ほどです。以下の設定詳細は、2026年7月11日時点のCursor公式MCPドキュメントに基づいて検証されています。

まずは新規登録を行い、「Profile」→「MCP API Keys」を開きます。APIキーを作成します。キーは一度しか表示されず、プレフィックスとしてbb_live_が付きます。セキュリティのため弊社側ではハッシュ化して保存されるため、作成したらすぐにコピーしてください。新規アカウント登録時には$0.20の残高が付与されるため、最も安価なモデルで6枚のテスト画像を試すことができます。
次に、設定ファイルを配置する場所を決めます。Cursorは以下の2つのパスを読み込みます。

~/.cursor/mcp.json — グローバル設定。すべてのプロジェクトでサーバーが有効になります。
リポジトリのルートにある .cursor/mcp.json — プロジェクト個別設定。APIキーを直接書き込まない限り、リポジトリにコミットしても安全です。

この「書き込まない限り」を解決するのが、先ほどのスニペットで紹介した ${env:BB_API_KEY} による環境変数の展開です。Cursorは読み込み時に mcp.json 内の環境変数を自動で置換するため、ファイル自体に機密情報を含める必要はありません。公式ドキュメントによると、この構文では ${workspaceFolder} などの他の変数もサポートされています。

最後に、Cursorを再起動またはリロードし、「Cursor Settings」→「MCP」を開きます。緑色のインジケータが表示され、list_modelsからlist_generationsまでの7つのツールが表示されれば完了です。弊社のMCPサーバー用ドキュメントページには、同じ設定スニペットに加え、検証済みの他のすべてのクライアントとの互換性テーブルを掲載しています。

BananaBananaのMCPドキュメントページに掲載されている、環境変数展開を用いたmcp.jsonブロックのCursor設定スニペット

もしサーバーが表示されない場合は、後半の注意点（注意すべき挙動）のセクションを参照してください。多くの場合、原因は設定自体ではなく環境変数の読み込みにあります。

ユースケース：チャットを離れずにランディングページのヒーロー画像や製品モックアップを生成する

この記事の執筆にあたって想定したシナリオは、次のようなものです。あなたはアウトドアギアブランドのランディングページを構築しているフロントエンドデベロッパーで、デザイン上、全幅（フルワイド）の「夜明けのキャンプ」のヒーロー画像が必要になりました。Cursorのチャットでこれを依頼すると、エージェントがプロの写真家のようなプロンプトを作成し、ツールを呼び出します。以下は、筆者のセクションから取得した実際の実行ログ（ジョブID等もそのまま）です：

→ generate_image {"prompt": "A photorealistic wide hero shot for an outdoor
   gear brand landing page: a lone orange tent glowing softly on the shore of
   a still alpine lake at dawn, mist over the water, sharp granite peaks
   catching the first pink light, generous empty sky for headline text, low
   angle, 35mm lens, no text", "model": "nano-banana-pro", "aspect_ratio": "16:9"}
← {"job_id": "cmrgox3xj000s…", "status": "processing",
   "cost_charged_usd": 0.11, "balance_remaining_usd": 1554.40}
→ get_result {"job_id": "cmrgox3xj000s…"}
← {"status": "completed", "files": [{"url": "https://bananabanana.pro/api/files/…"}]}

呼び出しからファイル完成までわずか18秒。こちらがその際、一発で生成された実際の出力です（リテイクなし）：

BananaBanana MCPサーバーを経由してCursor内で作成された、霧が立ち込める夜明けの高山湖とオレンジ色のテントのAI生成ランディングページ用ヒーロー画像

その後、エージェントは署名付きURLからファイルを public/ にダウンロードし、コンポーネントを記述します。リンクの有効期限は24時間です。期限が切れた後は、新たに get_result を呼び出すことで再発行されます。

製品カード用のプレースホルダー画像も、正方形（1:1）のアスペクト比を指定するだけで同様に作成できます。カードグリッド用に、写真家に依頼するような感覚で、被写体、背景、ライティング、レンズを指定して水筒の画像を依頼しました。1回の呼び出し、費用は$0.11、所要時間は20秒でした：

この記事に掲載するため、両方のデモは Nano Banana Pro を使用して作成しました。ただ、使い捨てのグリッド用プレースホルダーであれば、個人的には$0.03の nano-banana-2-lite を使い、デザインレビューを通過した本番用画像だけをアップグレードすることをお勧めします。安価なモデルで十分に対応できるユースケースについては、弊社のLiteモデルガイドで詳しく紹介しています。また、一連の画像で同じマスコットキャラクターを使用したい場合は、クライアントの設定よりもプロンプトのテクニックが重要になります。詳細はキャラクター一貫性フィールドガイドをご参照ください。

動画生成も同じチャットから可能です。generate_videoツールは最初の呼び出しで課金されることはありません。まずは見積もり額（料金）を返し、エージェントが正確な金額を承認する confirm_cost を指定して再度呼び出すことで課金が発生します。音声なしの720pの Veo 3.1 Liteクリップは$0.10から、音声付きの Omni Flashは1秒あたり$0.10で、3秒間のテイクなら$0.30になります。

本番導入前に知っておくべきCursor固有の注意点

どのクライアント（エディタ）にも、それぞれ特有の「落とし穴」があります。以下は、上記の設定をテストする中で見つかった、チームメンバーに事前に伝えておきたい実用的な注意点です。

家、フォルダ、南京錠が描かれた3つの道標を調べる小さなロボットのイラスト（Cursorの設定スコープと機密情報管理を表現）

1. ${env:…} はCursorのプロセスが環境変数を認識できる場合のみ機能します。 .zshrcなどでエクスポートした環境変数は、ターミナルからCursorを起動した場合には認識されますが、macOSのDockやデスクトップのランチャーからGUIアプリとして起動した場合にはシェルプロファイルが読み込まれないため、同じ設定が静かに失敗します。筆者の経験上、これはmacOSで「サーバーに接続できない」という問題が発生する最大の原因です。解決策としては、OSレベルで環境変数を設定するか（macOSの場合は launchctl setenv、Windowsの場合はシステムの環境変数設定）、一旦ターミナルからCursorを起動して設定自体に問題がないか確認してください。

2. プロジェクトごとの設定は、メンバー全員で個別キーを使えるチーム向けの機能です。 ${env:BB_API_KEY} のプレースホルダーを含んだ .cursor/mcp.json をコミットしておけば、チームのメンバーはリポジトリをクローンした瞬間から、それぞれの個人キーを用いてサーバーを利用できるようになります。このアカウントの分離は想像以上に重要です。キーは無料で作成でき、それぞれが独自の利用ログ（使用したツール、モデル、コスト、プロンプトのプレビュー）を記録でき、「Profile」→「MCP API Keys」から1日あたりの米ドル（USD）上限を設定することも可能です。誰かがチームを抜けた場合でも、該当するAPIキーを1つ無効化するだけで、他のメンバーに一切影響を与えずに対応できます。Cursorのビジネスプランでは、チームダッシュボードからMCPサーバーを配布することもできますが、コミットされた設定ファイルはどのプランでも問題なく動作します。

3. Cursorは各ツールを呼び出す前に承認を求めますが、この設定は有効のままにしておくのが賢明です。 デフォルトでは、各MCPの呼び出しはユーザーの承認待ちになり、ツール名のアロー（矢印）アイコンを展開すると引数を確認できます。自動実行モードを有効にすれば、ホワイトリストに登録したツールを即座に実行することも可能です。バッチ処理中に20回も承認ボタンをクリックするのは確かに面倒ですが、実際に料金が発生するツールに関しては承認を有効にしたままにし、無料のツール（list_models や get_result）のみを自動実行に設定することをお勧めします。なお、動画生成に関しては、見積もり金額以上の料金は confirm_cost による最終確認なしで課金されることはないため、二重の安全策が施されています。

4. チャット内で生成結果を確認できます。 Cursorのドキュメントに記載されている通り、MCPツールから返された画像はチャットの会話に添付され、画像認識能力を持つモデルによって分析されます。弊社の get_result は、URLに加えて軽量な webp 形式のプレビュー画像も返すため、エージェントとあなたの双方がブラウザを開くことなく結果を評価できます。これにより、エージェント自身が生成結果を自己補正することも可能です。例えば「生成された画像を確認して、テントがキャッチコピーを配置する領域に重なってしまっている場合は再生成して」と指示することができます。

5. ワンクリックインストール用のリンクは用意されていますが、そこにAPIキーを書き込まないでください。 インストールリンクに関するドキュメントに記載されているように、Cursorはbase64でエンコードされた設定からMCPサーバーをインストールできる cursor:// ディープリンクをサポートしています。これは認証のないオープンなサーバーには便利ですが、認証が必要なサーバーには適していません。エンコードされた設定に実際のAPIキーが含まれてしまうため、リンクを入手した第三者があなたのプリペイド残高を使用できてしまうからです。そのため、弊社のサイト上のボタンは「Cursorに追加」のようなディープリンクではなく、環境変数のプレースホルダーを含んだコピペ用の設定スニペットになっています。貼り付けて、環境変数をエクスポートするだけで完了します。

製品の現状について率直にお伝えすると、1点だけ制約があります。現在のMCP generate_image ツールはまだインプット画像（参照画像）の入力を受け付けていないため、参照画像に基づく生成やImage-to-Video機能の利用には、引き続きWeb上のジェネレーターを使用していただく必要があります。ただし、Text-to-Image（テキストからの画像生成）、複数ターンの対話による edit_image （画像編集・調整）、およびText-to-Video（テキストからの動画生成）はすべて本日からMCP経由で利用可能です。

この記事のデモ素材にかかった費用は？

スタッフ割引なしの通常料金（list_models がエージェントに返すものと同じ料金）を適用した利用明細は以下の通りです：

素材	モデル	料金
ヒーロー画像デモ（MCP経由、本番キー）	Nano Banana Pro, 1K	$0.11
製品プレースホルダー画像デモ（MCP経由）	Nano Banana Pro, 1K	$0.11
カバー画像＋挿絵イラスト2枚	Nano Banana Pro, 1K	$0.33
ドキュメントページのスクリーンショット	browser, not a generation	$0.00
合計		$0.55

今回はすべての画像が一発で思い通りに生成されましたが、常にそううまくいくとは限りません。特に製品撮影風の画像では、オブジェクトの形状（ジオメトリ）の崩れがリアル系モデルで最も頻繁に発生する問題であるため、実際に使う前に画像を拡大して確認し、1〜2回のリテイク（生成し直し）が発生する予算をあらかじめ見積もっておくことをお勧めします。

すでに Claude でこのサーバーをご利用中の場合、上記のCursor設定を追加するだけで、同じAPIキー、同じ残高、同じ生成履歴をそのまま引き継ぐことができます。もし今回が初めての利用であれば、Cursorでもほぼそのまま活用できる4つの具体的なユースケースを解説したClaude Code導入・活用ガイドもぜひご覧ください。さあ、始めてみましょう。APIキーを作成して、Cursorに最初のヒーロー画像をリクエストしてみてください。

よくある質問（FAQ）

CursorはAuthorizationヘッダーを使用したリモートMCPサーバーをサポートしていますか？

はい、ネイティブでサポートしています。CursorにStreamable HTTPトランスポートが追加されて以来、リモートサーバーの設定は mcp.json に url と任意の headers オブジェクトを追加するだけになり、ローカルのブリッジ（中継）プロセスを起動する必要はありません。また、${env:VAR} による展開機能のおかげで、ファイル内に機密情報を記述せずに済みます。これは本ガイドで使用し、2026年7月11日時点でCursorの公式MCPドキュメントに照らし合わせて検証した設定です。Cursorはリモートサーバー用のOAuthもサポートしています。弊社のエンドポイントは現在Bearerキーによる認証を採用していますが、第2の認証オプションとしてOAuth 2.1のサポートも計画しています。

Cursorで画像を生成するためにGoogleのAPIキーは必要ですか？

いいえ、不要です。ローカルで動作する画像生成MCPサーバーはGemini APIを直接呼び出すため、あなた自身のGoogle APIキーの用意と、独自のクォータおよび課金の管理が必要です。しかし、弊社のリモートサーバーを利用する場合、画像生成はBananaBananaが管理するVertex AIキーのプール上で処理されるため、必要なのはプロフィール画面から取得した bb_live_ キーのみです。Googleの生のAPIへ直接アクセスする代わりに、初期費用や最低利用額なしの画像1枚ごとの都度支払い、統合された1つのプリペイド残高、そしてワンクリックで無効化できるAPIキーの利便性を得ることができます。

MCPの設定はグローバルとプロジェクトごとのどちらにするべきですか？

どちらでも正常に動作します。違いは適用範囲（スコープ）と共有方法です。~/.cursor/mcp.json はすべてのリポジトリに適用されるため、個人の環境に適しています。リポジトリのルートにある .cursor/mcp.json はコードとともに管理されるため、リポジトリをクローンしたチームメンバー全員がそのサーバーをすぐに利用可能になります。APIキーを ${env:…} の変数参照にしておけば、ファイルをリポジトリにコミットしても安全です。チームで取り組む開発においては、コミットされた設定ファイルと開発者ごとの個別キーを用意することで、個人ごとの利用ログ確認やキー無効化が可能になるため、個人的にはプロジェクトレベルでの設定を基本にしています。

Cursorから同じサーバーを経由して動画を生成することは可能ですか？

はい、費用（料金）の確認ステップを踏むことで生成可能です。generate_videoツールは常に最初に見積もり額を返し、課金が発生する前に、エージェントがその見積もり額と完全に一致する confirm_cost を指定して再度呼び出す必要があります。料金は、4秒間の音声なし720pの Veo 3.1 Liteクリップの$0.10から、音声付きの最高品質の Veo 3.1 レンダリングの$4.40、そして音声付きの Omni Flashは1秒あたり$0.10で、クリップあたり$0.30～$1.00になります。動画の生成には1分から10分ほどかかるため、エージェントはコードの編集作業を続けながらバックグラウンドで get_result をポーリングして結果を取得します。

mcp.jsonを編集したのに、Cursorにサーバーが表示されないのはなぜですか？

可能性の高い順に、次の3つの原因が考えられます。1つ目は、環境変数がCursorのプロセスから見えていないこと。GUIから起動されたアプリはシェルのプロファイルを読み込まないため、OSレベルで環境変数を設定するか、ターミナルからCursorを起動してください。2つ目は、設定がリロードされていないこと。Cursorを完全に再起動するか、MCP設定画面の更新ボタン（リフレッシュ）を押してください。3つ目は、JSONファイルの構文エラー。末尾の余分なカンマ（,）などが典型例です。もしサーバー自体は表示されているのにツールの呼び出しが「401（未認証）」エラーで失敗する場合は、APIキー自体に誤りがあるか、キーが無効化されています。MCPサーバーページに掲載されているスニペットを使い、生のAPIリクエストを送ってテストしてみてください。