Claude Code + Banana Art Lab
Claude Codeで画像を生成し、キャンバスで確認
コマンド1つでBanana Art LabをClaude Codeに連携。開発中の会話の中でそのまま、GPT Image 2やNano Banana Proをはじめとする全7種類のモデルを使って、ヒーロー画像、商品写真、アイコン、イラストの生成をリクエストできます。生成結果はすべてBanana Art Labのキャンバスに配置されます。
› GPT Image 2 Saverで旅行ポスターを3枚作って、「ポスター」というキャンバスに配置して
● banana-art-lab · generate_image
model: gpt-image-2-saver · ratio 3:4 · 3 images
画像3枚 · 6クレジット · キャンバス「ポスター」に配置済み
完了しました。trynanobanana.net/canvas を開いて比較するか、どれを調整したいか教えてください。
セットアップ
Claude Code を Banana Art Lab に接続
サーバーを追加
ターミナルで一度だけ実行：
claude mcp add --transport http banana-art-lab https://trynanobanana.net/mcpサインイン
Claude Codeで /mcp と入力し、banana-art-lab を選択してサインインします。ブラウザで trynanobanana.net が開くので、そこでアクセスを承認してください。APIキーをコピーする必要はありません。
画像の生成をリクエスト
必要な画像を伝えるだけ。Claude Codeが generate_image を呼び出して画像リンクを取得し、指定した名前のキャンバスにプロンプトと結果を配置できます。
キャンバスを自動同期
Claude Code が画像を生成し、そのまま作業を継続。
キャンバスに名前を付けると、Claude Code がプロンプトと各生成結果をワークフローのようにつなげて配置します。trynanobanana.net/canvas で開けば、並べてバージョン比較したり、自由に移動したり、同じプロンプトから再生成したりできます。開いているキャンバスには約10秒で新しい結果が反映されます。
逆方向の連携も可能です。作成したキャンバスのテキストや画像を Claude Code に読み込ませ、各画像をストーリー形式に仕立てるなど、さらに作業を発展させられます。
指示の例
- “Nano Banana ProでこのLP用の16:9ヒーロー画像を作成し、public/images/hero.webpにダウンロードしてヒーローセクションに適用して。”
- “GPT Image 2 Saverでセラミックマグの商品写真を3枚生成して、「Mug launch」という新しいキャンバスに追加して。”
- “「App icons」キャンバスを読み込んで、各アイコンをフラットな2色スタイルで再生成して。”
- “ブランドカラーのイエローを使ったダッシュボード用のエンプティステートのイラストを1:1で作成して、componentsフォルダに追加して。”
モデルと料金
7種類の画像モデルを1つのクレジット残高で
Claude Code から Banana Art Lab のすべてのモデルをウェブサイトと同じ料金で利用できます。1枚あたりのクレジット：
| モデル | モデルID | 画像1枚あたりのクレジット |
|---|---|---|
| GPT Image 2 Saver | gpt-image-2-saver | 全解像度 2 |
| Z-Image Turbo | z-image-turbo | 1Kまたは2Kで 6 |
| Nanobanana | nanobanana | 1Kで 13 |
| Seedream 5 Lite | seedream-5-lite | 2Kで 14 |
| Nanobanana 2 | nanobanana2 | 1Kで 22、4Kで 49 |
| Nanobanana Pro | nanobananapro | 1Kで 44、4Kで 77 |
| GPT Image 2 | gpt-image-2 | 画質と解像度に応じて 2〜228 |
クレジットパック：4,000クレジットで$9.99、12,000クレジットで$29.99。料金プランとモデルをご覧ください。
よくある質問
Claude Codeに画像生成機能を追加するにはどうすればよいですか？
「claude mcp add --transport http banana-art-lab https://trynanobanana.net/mcp」を実行し、Claude Codeで /mcp と入力してBanana Art Labにサインインします。これでClaude Codeが generate_image ツールを使って画像を生成できるようになります。
Claude CodeはBanana Art Lab経由でどのモデルを利用できますか？
GPT Image 2 Saver、GPT Image 2、Nanobanana Pro、Nanobanana 2、Nanobanana、Seedream 5 Lite、Z-Image Turboを利用できます。Claude Codeは list_models を呼び出して各モデルの解像度や1画像あたりの消費クレジットを確認したり、編集や参照用の画像を渡したりできます。
料金はいくらですか？
連携は無料です。画像の生成にはWebサイトの料金プランに応じたBanana Art Labクレジットが消費され、GPT Image 2 Saverなら全解像度で2クレジットから利用できます。新規登録時に10クレジットが無料で付与されるほか、クレジットパックは4,000クレジットを$9.99から購入できます。
生成された画像はどこに保存されますか？
AIアシスタントは各画像のリンクを取得し、プロジェクト内にダウンロードできます。キャンバス名を指定すると、trynanobanana.net/canvas 上のキャンバスにもプロンプトと画像が配置され、並べ替えや比較、再生成が行えます。開いているキャンバスには、約10秒で新しい結果が反映されます。
アシスタントは私のキャンバスを閲覧できますか？
trynanobanana.netで承認した後にのみ、承認したアカウントに対してのみ許可されます。キャンバスの一覧表示、閲覧、編集、クレジットを使用した画像生成が可能です。Banana Art Lab経由でお使いのコンピューター内のファイルにアクセスすることはありません。連携は「Canvas Settings → AI tools」からいつでも解除できます。