VS Codeで画像生成：Copilot MCPセットアップガイド

VS Code用のMCPサーバーは、GitHub Copilotのagentモードがチャットから呼び出せる外部の道具箱のようなものです。リポジトリにJSONファイルを1つ置くだけで、Copilotはその背後にあるモデル自身が持っていないツール（画像生成を含む）を手に入れることができます。Copilotは1日中コンポーネントを書き、テストをリファクタリングしてくれますが、裏にあるモデル単体では画像ファイルを生成することはできません。そこに生成サーバーを追加すれば、「このREADME用に16:9のバナーを作って」とチャットで指示するだけで、最終的に本物のファイルがassets/に保存されるようになります。

セットアップ方法だけが目的であれば、以下が全設定です。BananaBananaプロフィールでAPIキーを作成し、リポジトリのルートにある.vscode/mcp.jsonに以下を記述します。

{
  "inputs": [
    {
      "type": "promptString",
      "id": "bb-api-key",
      "description": "BananaBanana API key (bb_live_...)",
      "password": true
    }
  ],
  "servers": {
    "bananabanana": {
      "type": "http",
      "url": "https://bananabanana.pro/api/mcp",
      "headers": {
        "Authorization": "Bearer ${input:bb-api-key}"
      }
    }
  }
}

サーバーを起動し（VS Codeはファイル内に直接「Start」のヒントを表示します）、プロンプトが表示されたらキーを一度貼り付けるだけで完了です。ファイルには秘密情報が含まれていないため、コミットしても安全です。ローカルプロセスも、Google Cloudアカウントも、サブスクリプションも不要。画像生成はプリペイド残高から1枚$0.03から、ビデオは$0.10から課金されます。以下の2つのデモ画像は、私がこの記事を書いている最中に、この設定が指し示すのと同じHTTPエンドポイント経由で、有効なキーを使って生成されたものです。トレース（実行ログ）と合計$0.55のメディア利用料金の詳細は下部をご覧ください。

なぜGitHub Copilotに画像を生成させるのか？

なぜなら、リポジトリはいつも最も不便なタイミングで画像を必要とするからです。プロジェクトページを開いたときにシールド（バッジ）の壁だけで始まらないようにするためのREADMEのヒーロー画像や、ドキュメントサイト用のバナーなど。スクリーンショットは別として、これらを用意するのはいつも手間に満ちていました。ブラウザのタブを開き、プロンプトを入力し、ダウンロードして、名前を変更し、リポジトリにドラッグ＆ドロップし、そしてエディタに戻る。何も問題が起きなくても、アセット1つにつき10分はかかっていました。

MCPサーバーを使用すると、Copilotがagentモードでその一連のループを実行します。プロンプトを作成し、generate_imageを呼び出し、指定したフォルダにファイルをダウンロードして、markdownの参照リンクを編集します。あなたは差分（diff）を確認するだけです。

さらに大きな理由は「チームでの共有」にあります。これこそが、本ガイドがCursor用のガイドの一段落ではなく、独立した記事として存在する理由です。.vscode/mcp.jsonはワークスペースファイルです。これを一度コミットしておけば、リポジトリをクローンしたすべての開発者が最初の起動時に画像生成ツールボックスを利用でき、VS Codeが各人にそれぞれのキーの入力を求めます。設定は1つ、キーは人ごとに1つ、gitには一切の秘密情報が残りません。

画像生成用のローカルMCPサーバーも存在し、独自のNodeプロセスを実行し、制限付きの独自のGoogle APIキーを用意して動かしたい場合は、それらも悪くありません。しかし、リモートオプションであれば、これらすべてをスキップできます。エンドポイントはすでに当社のサーバー側で動いており、BananaBananaのウェブジェネレーターと同じパイプラインを使用しています。必要な資格情報は、いつでも失効可能なbb_live_キーのみです。

VS Codeでmcp.jsonをセットアップする方法

設定の詳細は、2026年7月11日時点のVS Code公式MCPドキュメントに基づいて確認されています。ステップは3つです。

まず、登録して「Profile」→「MCP API Keys」を開きます。キーは一度だけ表示され、サーバー側にはハッシュ化されて保存されるため、すぐにコピーしてください。新規アカウント登録時は残高に$0.20が付与されており、最も安いモデルで6枚のテスト画像を生成できます。

次に、設定ファイルを作成します。以下の2つの場所が利用可能です。

• リポジトリ内の.vscode/mcp.json（コミットに最適です）
• ユーザーレベルのmcp.json（コマンドパレット → MCP: Open User Configuration：すべてのワークスペースに適用されます）

冒頭のコードスニペットはinputsメカニズムを使用していますが、これは私がこれまでに設定したどのMCPクライアントよりも、秘密情報の処理方法として最も優れています。${input:bb-api-key}は、サーバーの初回起動時に値を入力するようVS Codeに指示します。"password": trueは入力内容をマスクし、入力された値はファイルではなく暗号化されたストレージに保存されます。Cursorでは、${env:…}による展開がエディタから実際にシェル環境変数が見えているかどうかに依存する（GUIから起動されたアプリにありがちな典型的なサイレントエラーの原因）のと比べ、VS Codeはこの問題を完全に回避しています。

3つ目に、サーバーを起動します。コマンドパレット → MCP: List Servers → 「bananabanana」 → 「Start」を選択するか、JSONファイル内のインラインヒントをクリックします。agentモードでCopilot Chatを開き、ツールピッカーを確認すると、list_modelsからlist_generationsまでの7つのツールが表示されているはずです。当社のMCPサーバー解説ページでは、検証済みのすべてのクライアントの互換性テーブルを掲載しています。VS Codeの行は、この記事で詳しく解説している設定に対応しています。

何も表示されませんか？注意点（quirks）のセクションでよくある3つの原因を解説しています。そのうち1つは、エディタ内部からは修正できないGitHub組織（Org）のポリシーによるものです。

ユースケース：READMEやドキュメント用のアセットをリポジトリに直接生成

この記事で想定しているシナリオは、チームでCLIツールをオープンソース化し、リポジトリにREADME用のヒーロー画像と、ドキュメントのクイックスタート用の画像が必要になった場面です。Copilot Chat（agentモード）でバナーを依頼すると、エージェントは写真風のプロンプトを構成し、ツールを呼び出します。以下は、実際のジョブIDを含む本物の実行トレースです。

→ generate_image {"prompt": "A wide photorealistic hero banner for a GitHub
   README of an open-source terminal application: a sleek dark laptop on a
   light oak desk showing colorful command-line output, soft morning window
   light from the left, shallow depth of field, 50mm lens, generous clean
   negative space on the right side for a project title, no text, no logos",
   "model": "nano-banana-pro", "aspect_ratio": "16:9"}
← {"job_id": "cmrgq90ou00036k7f86f0y54w", "status": "processing",
   "cost_charged_usd": 0.11, "balance_remaining_usd": 1554.18}
→ get_result {"job_id": "cmrgq90ou00036k7f86f0y54w"}
← {"status": "completed", "files": [{"url": "https://bananabanana.pro/api/files/…"}]}

呼び出しからファイル生成まで約20秒。以下がそのとき実際に出力された、最初のテイク（1発目）の画像です。

このような画像を公開する前に、正直に1つだけ注意点をお伝えします。ズームしてみると、画面上の「ターミナルの出力」はそれっぽく見えるだけの文字化け（でたらめ）です。READMEの幅であれば誰も気づきませんが、テキストが読み取れるフルサイズのドキュメントのヒーロー画像としては、気になる人がいるかもしれません。生成画像における可読性の高いUIテキストは、どのリアル系写真モデルにとっても依然として弱点です。そのため、画面を小さく表示させるか、代わりに抽象的な画面をリクエストするようにしてください。

ドキュメントのクイックスタート用画像も同様の手順ですが、より落ち着いた構成で依頼しました。真上からの俯瞰（flat-lay）、キーボード、付箋が貼られた印刷済みの構成図、お茶。1回の呼び出しで、費用は$0.11です。

これらのデモは、このページで紹介するためにNano Banana Proで実行されました。社内用のWikiやIssueのテンプレート用であれば、迷わず1回$0.03のnano-banana-2-liteに下げるでしょう。Liteガイドには、この安価なモデルで十分に実用的なケースがまとめられています。署名付きのファイルURLは24時間有効で、新しくget_resultを呼び出すことで再発行されます。

同じチャットから動画の生成も可能です。generate_videoは最初の呼び出し時には課金されません。最初に見積もりが返され、エージェントは正確な金額を承諾するためにconfirm_costを付けて再度呼び出す必要があります。音声なしの720pクリップは$0.10から開始でき、音声付きのOmni Flashは1秒あたり$0.10（3秒のカットで$0.30）です。

導入前に知っておくべきVS Codeの注意点

上記のセットアップをテストする中で収集した、遭遇しやすい順番での注意点（quirks）です。

1. トップレベルのキー名は mcpServers ではなく servers です。 他の主要なクライアント（Claude、Cursor、Windsurf）はすべてmcpServersを使用しているため、他のツールのドキュメントからコピーした設定はVS Codeでは動作せず、JSONスキーマのヒントも見落としがちです。逆に、VS Codeのスニペットを他のツールにコピーする場合も同じ罠にハマります。また、リモートサーバーの場合はtype: "http"フィールドを明示しておくことをお勧めします。

2. 保存された入力値を変更するのは妙に困難です。 最初のプロンプトでキーが暗号化ストレージに保存されますが、その後「キーを編集する」といった分かりやすいボタンは表示されません。解決策：.vscode/mcp.jsonを開き、サーバーの上にホバーしてインラインコントロールを使用して「クリアされた入力値で再起動」するか、MCP: List Servers → サーバー → 「disconnect」を選択して再追加して保存値を消去します。Remote SSH経由では、VS Codeの問題トラッカーにあるように、再入力を促す処理に既知の問題があるため、さらに難しくなります。失効したキーをローテーションするだけでも、想定外の何回ものクリック操作が必要になります。

3. Copilot Business または Enterprise では、管理者がポリシーを有効にするまでMCPはオフです。 GitHubのポリシー管理ドキュメントによると、組織から割り当てられたライセンスでは「CopilotでのMCPサーバー」ポリシーがデフォルトで無効になっています。紛らわしいのはその失敗時の挙動で、サーバーは正常に起動し、設定も検証を通過するにもかかわらず、チャットにツールが全く表示されません。個人用のCopilotプラン（無料版を含む）であれば、この制約は関係ありません。

4. 1回のチャットリクエストにおけるツールのハード上限は128個です。 エージェントツールドキュメントによると、組み込みツール、拡張機能のツール、および有効化されているすべてのMCPサーバーのツールがこの上限にカウントされます。当社のサーバーが追加するのは7つだけで、これ単体では大したことはありませんが、おしゃべりな（ツールの多い）サーバーをいくつか重ねると、ツールピッカーでサーバーごと選択解除するまでリクエストが失敗し始める原因になります。VS Codeは溢れたツールを仮想ツールの後ろにグループ化できますが、私の経験上、実際に使用するサーバーのみを有効にしておくのがベストです。

5. ツールはagentモードで動作し、呼び出しごとに確認を求められます。 MCPツールは通常の質問（ask）モードからは起動しません。そのため、モデルが画像を生成せずに説明を続ける場合は、まずモードのドロップダウンを確認してください。確認ダイアログには、セッション、ワークスペース、または「常に許可（always）」を指定するドロップダウンがあります。list_models や get_result のような無料ツールの場合は「always」で問題ありませんが、generate_image については呼び出しごとに確認を求める設定を維持することをお勧めします。1回ごとに実際のお金がかかるためです。なお、ビデオについては、どちらにせよ当社側で confirm_cost による二重の確認ロックがかかります。

この記事のデモメディアの費用はいくらでしたか？

標準的な生成ごとの料金であり、list_modelsがエージェントにレポートするのと同じ数値です。

今回はすべて最初の試行（ファーストテイク）で決定しました。いつもこうなるとは限らないため、ディスプレイ画面が写り込むものや、複雑な物体の幾何学形状が含まれるものを生成する場合はリロール（再生成）の予算を考慮し、メインブランチにマージする前にフルサイズで結果を確認するようにしてください。

すでに別のエディタでこのサーバーを使用している場合、上記の .vscode/mcp.json が唯一の新しい部分です。同じキー、同じ残高、同じ生成履歴を使用できます。全くのゼロから始める場合は、Claude Codeのチュートリアルに、ほぼそのまま活用できるユースケースがさらに4つ紹介されています。準備ができたら、キーを作成して、Copilotに最初のREADMEバナーの作成を依頼しましょう。

FAQ

VS CodeはAuthorizationヘッダー付きのリモートMCPサーバーをサポートしていますか？

はい、ネイティブでサポートしています。リモートサーバーは mcp.json 内で type: "http"、url、およびオプションの headers オブジェクトとして定義でき、${input:…} の参照を使用することで秘密情報をファイルから除外できます（2026年7月11日時点のVS Code公式MCPドキュメントで検証済み）。VS CodeはリモートサーバーのOAuthもサポートしています。当社のエンドポイントは現在Bearerキーで認証しますが、2番目のオプションとしてOAuth 2.1を計画しています。

.vscode/mcp.json を git にコミットしても安全ですか？

はい、キーがファイル自体ではなく inputs 参照に存在している場合は安全です。コミットされるJSONにはプレースホルダーのみが含まれ、VS Codeは初回起動時に各開発者にそれぞれの値の入力を求め、暗号化ストレージに保存します。この開発者ごとの分割設定は非常に実用的です。「Profile」→「MCP API Keys」で、各キーが独自の利用履歴ログと、オプションとして日次のドル上限（daily cap）を持つことができるため、チームからの離脱時にも他の誰にも影響を与えることなくワンクリックで失効させることができます。

なぜMCPツールがCopilot Chatに表示されないのですか？

ほとんどの場合、3つの原因が考えられます。1つ目は、agentモードになっていないことです。他のチャットモードではMCPツールが公開されません。2つ目は、サーバーが起動されていないことです。MCP: List Servers を実行して状態を確認してください。3つ目は、お使いのCopilotアカウントが組織から提供されたものであり、「CopilotでのMCPサーバー」ポリシーが依然として無効になっていることです（これはサイレントエラーになります）。これを有効にできるのは組織の管理者のみです。もしツールが表示されているにもかかわらず呼び出しが401エラーを返す場合は、キー自体が間違っているか失効しています。MCPサーバー解説ページにあるスニペットから直接リクエストを送信することで、数秒でそれを確認できます。

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

いいえ、不要です。ローカルで動作する画像生成MCPサーバーはGemini APIと直接通信するため、独自のGoogleキー、クォータ制限、および課金管理が必要になります。一方でリモートサーバーは、BananaBananaが管理するVertex AIキーのプール上で生成処理を実行します。必要な資格情報はプロフィールの bb_live_ キーのみであり、生成ごとの料金、最低利用額なし、そしてウェブアプリと共有される1つのプリペイド残高で利用可能です。

GitHub Copilotは同じサーバー経由で動画を生成できますか？

はい、コスト確認ステップを踏むことで可能です。generate_videoは最初に見積もりを返し、エージェントは請求が発生する前に正確な金額と一致する confirm_cost を指定して呼び出しを繰り返す必要があります。料金は、短い無音の720pクリップの$0.10から、オーディオ付きの最上位Veo 3.1レンダリングの$4.40まで。音声付きのOmni Flashは1秒あたり$0.10（1クリップあたり$0.30〜$1.00）です。動画の生成には1〜10分かかるため、エージェントはコード作成を継続しながら、並行して get_result をポーリングします。