Cline MCPサーバー：エディタから画像を直接生成する

ClineのリモートMCPサーバーとは、エージェントがHTTP経由で呼び出すクラウドホスト型ツールのセットです。MCP設定JSONに1つのブロックを追加するだけで、言語モデル単体では不可能な処理をClineが実行できるようになります。画像ファイルの生成はその最もわかりやすい例です。Clineはコンポーネントをリファクタリングし、テストを実行し、マイグレーションを作成しますが、「ここに商品写真を配置」という段階で完全に止まってしまいます。

お急ぎの方のための最短セットアップ手順。BananaBananaのプロフィールでAPIキーを作成し、ClineのMCP設定を開いて以下を追加します：

{
  "mcpServers": {
    "bananabanana": {
      "type": "streamableHttp",
      "url": "https://bananabanana.pro/api/mcp",
      "headers": {
        "Authorization": "Bearer bb_live_YOUR_KEY"
      },
      "disabled": false,
      "autoApprove": ["list_models", "get_account", "get_result"]
    }
  }
}

10種類のツールが利用可能になります。画像はプリペイド残高から1枚あたり$0.03〜、動画は$0.10〜課金されます。typeの行は省略不可であり、その理由は後述する厄介な接続エラーを防ぐためです。

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

Clineの基本設計は「結果を指示し、エージェントに反復作業を行わせる」ことです。これは結果に画像が含まれない限り非常にスムーズに機能します。しかし画像が必要になった瞬間ループが途切れ、手作業が発生します。ブラウザを開き、プロンプトを入力し、ダウンロードし、ファイル名を変更し、public/に移動し、エディタに戻って作業位置を思い出す。アセット1つにつき5分を要し、作業の中断による集中力の低下はその5分以上の損失となります。

MCPツールを使用すれば、エージェントがそのサイクル全体を自律実行します。プロンプトを記述し、generate_imageを呼び出し、完成したファイルを指定ディレクトリに保存してマークアップを更新します。ユーザーは差分（diff）を確認するだけです。

料金モデルもClineのユーザー層に合致しています。ClineはBYOM（モデル持ち込み）方式のため、利用者は月額サブスクリプションではなく従量課金に慣れています。画像生成の料金体系も全く同じです。固定プラン、シート料金、月額最低利用料はありません。必要な時にチャージできる残高から、画像は$0.03〜、動画は$0.10〜利用可能です。

ローカルの画像MCPサーバーを実行する代替案もありますが、マシン上でNodeやPythonのプロセスを動かし、独自の上流プロバイダーキーを用意してクォータや請求を管理する必要があります。ホスト型エンドポイントならその双方の手間が不要です。生成はWebジェネレーターと同じ当社のインフラ上で行われ、管理が必要な認証情報は失効可能なAPIキー1つだけです。

ClineにリモートMCPサーバーを追加する方法

同じ結果を得る3つの方法があります。以下の詳細は2026年8月20日時点のCline公式MCPドキュメントに基づいて確認されています。

UIから設定する。 ClineパネルのツールバーにあるMCP Serversアイコンをクリックし、Remote Serversタブを開き、サーバー名、URL https://bananabanana.pro/api/mcpを入力し、トランスポートとしてStreamable HTTPを選択します。Add Serverをクリックします。その後、Authorizationヘッダーを追加します（フォームは作成を迅速に行えますが、認証情報はJSON側に保持されます）。

JSONを直接編集する。 同じアイコンからConfigureタブを開き、Configure MCP Serversボタンをクリックすると、拡張機能の設定ファイルが開きます。このファイルはVS Codeのグローバルストレージ内にあるsaoudrizwan.claude-devフォルダに格納されています（拡張機能IDに初期作者名が含まれており、「cline」というフォルダを探す際に混同されがちです）。CLI版では単に~/.cline/mcp.jsonであり、cline mcpコマンドで対話型ウィザードが起動します。

ターミナルから確認する。 cline config mcp --jsonを実行すると現在読み込まれている設定が出力され、編集が反映されたかを即座に確認できます。

どの方法を選んでも、エンドポイントURLはhttps://bananabanana.pro/api/mcpです。人間用ドキュメントページである/mcpはPOSTリクエストにHTMLを返すため指定しないでください。MCPサーバーページには汎用スニペットと検証済みクライアントの互換性一覧を掲載しています：

課金が発生する前に無料の関数で動作確認を行いましょう。get_accountは残高、キー名、日次上限を返し、list_modelsは現在価格とともに全モデル一覧を返します。いずれも無料で約1秒で認証確認が完了します。

活用事例：Actモードでのカタログ用プレースホルダー画像の一括生成

これこそがClineの本領を発揮する場面であり、単一のヒーロー画像を1枚作成する作業とは根本的に異なります。まずPlanモードでカタログの構成（統一されたブランドスタイルのプレースホルダー画像を必要とする12商品）を指示し、ファイルを変更する前にClineにループ処理を設計させます。その後、Actモードで実行に移ります。

統一されたスタイルは、商品名のみを差し替えて各呼び出しで再利用される固定フレーズによって定義されます。一連のアセットの一貫性は、モデルが前回の出力を覚えているからではなく、プロンプトの不変部分から生まれます：

→ generate_image {"prompt": "A photorealistic overhead product shot of a
   small monstera in a matte terracotta pot on a pale linen backdrop, soft
   diffused window light from the left, 50mm lens, subtle natural shadow,
   generous empty space around the subject, no text",
   "model": "nano-banana-pro", "aspect_ratio": "4:5"}
← {"job_id": "…", "status": "processing", "cost_charged_usd": 0.11,
   "balance_remaining_usd": 1110.65}

同じスタイル構文を用い、植物とアングルを変更した2つ目の商品画像：

Nano Banana Proでこれら12枚を生成した場合の費用は$1.32です。標準のnano-banana-2-liteであれば$0.36となり、後でデザイナーが差し替える仮画像であればライトモデルで十分対応可能です。格安モデルの適用範囲についてはLiteモデル解説記事をご参照ください。本記事ではフルサイズ表示の品質を示すためProを採用しています。

一括生成を行う際には安全装置の設定が不可欠です。本環境には2つの保護機能があります。プロフィール → MCP API Keysでキーごとに日次USD利用上限を設定でき、万一ループ処理が暴走しても指定額で自動停止します。また、複数枚の画像生成リクエスト（number_of_imagesが2以上）は動画と同様に機能し、初回呼び出しでは見積もりのみを返して課金せず、エージェントがconfirm_costを付与して再実行した時点で初めて課金されます。

動画生成も同じチャット内から同じ確認手順で実行可能です。Veo 3.1 Liteの4秒間音声なし720p動画は$0.10〜、Omni Flashは音声付きで秒あたり$0.10（3秒クリップで$0.30）です。レンダリングには1〜10分程度かかりますが、generate_videoは即座にジョブIDを返すため、Clineはコード編集を続行し、完了時にバックグラウンドでget_resultをポーリングします。

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

トラブルを防ぐために把握しておくべき5つの重要事項です。

1. "type": "streamableHttp"の記述は必須であり、省略すると原因の分かりにくいエラーになります。 公式ドキュメントの通り、この項目を省略すると下位互換性のためレガシーなsseトランスポートにフォールバックします。旧式SSEではクライアントがGETリクエストを開いてイベントストリームを待機します。当社のエンドポイントはステートレスなStreamable HTTPであるため、GETリクエストには405 Method Not Allowedを返します（執筆時にも再確認済み：curl -i https://bananabanana.pro/api/mcpで405が返ります）。Cline上では設定項目の欠落に触れずに単に接続不能と表示されます。ハイフン区切りのstreamable-httpでも同様にエラーになります。

2. APIキーは設定ファイル内に平文で保存されます。 Clineのドキュメントでは環境変数の利用が推奨されていますが、リモートサーバーのheadersオブジェクト内での変数展開はCursorの${env:…}やWindsurfの${file:…}とは異なり公式ドキュメントに記載がありません。利点として、設定ファイルはプロジェクトリポジトリではなくVS Codeのグローバル領域にあるため、Gitに誤ってコミットする危険はありません。ただしローカルの認証情報として適切に管理し、日次上限を設定するとともに端末を手放す際はプロフィールから即座に失効させてください。

3. Auto Approveの設定範囲は想定より広範です。 ClineのAuto Approveパネルにある「Use MCP servers」はMCPツール全体を一括で許可するスイッチであるため、有効化すると課金ツールも無料ツールも同時に自動承認されます。ツールごとの制御はJSON設定内のautoApprove配列で行います。無料の3関数（list_models、get_account、get_result）のみをホワイトリストに登録することで、一括処理中の不要なダイアログをなくしつつ、有料生成のみ確認を求める運用が可能です。

4. YOLOモードと有料ツールの併用には注意が必要です。 ClineのYOLOモードはファイル変更、ターミナルコマンド、ブラウザ操作、MCPツール呼び出しのすべてを自動承認します。ドキュメントで危険と記載されている通り、自律型エージェントは見積もりと確認の双方を自動承認してしまうため、料金確認ステップだけでは支出を防げません。確実な防御策はキーごとの日次上限設定です。YOLOモードを有効にする前に必ず上限を設定してください。

5. マーケットプレイス経由の追加はなく、組織向け設定は別経路になります。 公式SDKを採用したVS Code拡張機能ではMCP MarketplaceのGUIが廃止されたため、手動でのJSON編集が標準です。企業管理者向けには、組織のリモート設定でremoteMCPServersを用いて全ユーザーに一括配布し、blockPersonalRemoteMCPServersで個人の独自サーバー追加を制限する仕組みが用意されています。チーム導入時は中央から配布し、開発者ごとに個別のキーを付与してください。

当社の現状における仕様上の注意点として、generate_speechはClineパネル内で直接再生できる形式ではなくWAVの署名付きURLを返すため、試聴にはファイルを開く必要があります。一方、画像はURLの横にインラインサムネイルが表示されます。Clineは2025年よりツール実行結果での画像表示に対応しており、現行バージョンで正常にプレビューが表示されます。

ClineはリモートMCPサーバーのOAuth認証に対応しているか？

公式ドキュメント上は対応していません。クライアントによって仕様が異なるため明記しておきます。Clineのドキュメントにはstdio、SSE、Streamable HTTPが記載されており、認証はカスタムヘッダーによるものとされています。OAuth対応の機能リクエストは2025年8月からClineのリポジトリに起票されており、2026年8月20日現在もオープンの状態です。

実用上は問題ありません。当社のサーバーはOAuth 2.1トークンとBearer APIキーの双方を受け付けており、ClineはAPIキーでの運用に適した設計になっています。キーの発行は無料であり、複数保持できるほか、キーごとに利用履歴（ツール、モデル、利用額、プロンプト抜粋）と日次上限を管理できます。外部委託者の作業終了時には対象キーのみを失効させれば他の環境に影響を与えません。

プロジェクトごとにキーを分けることで、請求時に社内管理画面用とプロモーションサイト用の生成コストを明確に切り分けることができます。

本記事のデモ画像の生成コスト

list_modelsで返される標準の生成料金は以下の通りです：

残高チャージ時のボーナス：$50以上の入金で+5%、$100以上で+10%が付与され、有効なプロモコードでさらに+10%が上乗せされます。いずれも基本金額に対して加算されるため、プロモコード適用で$100入金すると$120分がチャージされます。

同じキーはCursorやVS Codeなど他のクライアントでもそのまま利用でき、残高と履歴は共有されます。Cursor向けガイドやVS Code設定手順も併せてご確認ください。APIキーを発行して、Clineでの自動画像生成をお試しください。

よくある質問

ClineはStreamable HTTP経由のリモートMCPサーバーに対応していますか？

対応しており、公式ドキュメントで推奨されている通信方式です。リモートサーバーはurl、streamableHttpを指定したtype、認証用のheadersで設定します。typeを明記しない場合、下位互換性のため旧式SSEとなり、最新のステートレスエンドポイントへの接続に失敗します。2026年8月20日時点の公式仕様に基づき検証済みです。

ClineのMCP設定ファイルはどこにありますか？

実行環境によって異なります。VS Code拡張機能ではエディタのグローバルストレージ内にあるsaoudrizwan.claude-devフォルダに配置されます。MCPパネルのConfigureタブにあるConfigure MCP Serversボタンから開くのが最も確実です。CLI環境では~/.cline/mcp.jsonに保存されます。両者とも同一のmcpServers構文を使用します。

Clineで画像を生成するために独自のクラウド契約は必要ですか？

不要です。ローカルMCPサーバーとは異なり、当社のホスト型サーバーがマネージドインフラ上で生成を実行するため、プロファイル画面から取得したbb_live_キーのみで動作します。新規登録時には$0.20の初期残高が付与され、課金前に廉価モデルで最大6枚の画像をテスト生成できます。

エージェントによる過度な残高消費を防ぐにはどうすればよいですか？

3つの対策を組み合わせてご利用ください。autoApproveを無料ツールのみに制限し、有料生成時には必ず確認ダイアログを表示させます。プロフィール → MCP API Keysでキーごとに日次USD上限を設定してください（YOLOモード時も有効な唯一の保護策です）。また、動画や複数枚画像の一括リクエスト時は初回に見積もりが返され、confirm_costを付与して再実行するまで課金されない仕組みになっています。

ClineのMCPサーバーが接続できない原因は何ですか？

次の点をご確認ください。"type": "streamableHttp"がcamelCaseで正確に記述されているか（未設定時はGETに405が返るSSE通信を試みます）。URLの末尾が/mcpではなく/api/mcpになっているか。Authorizationヘッダーが余計な空白を含まずBearer bb_live_...になっているか（無効なキーは401を返します）。接続済みでもツールが表示されない場合はMCPパネルからサーバーを再起動してください。企業ネットワークをご利用の場合は、組織ポリシーにより個人のリモートサーバー追加が制限されていないかご確認ください。