How to Edit Images from Claude Code with NanoBanana MCP

How to Edit Images from Claude Code with NanoBanana MCP

Image editing usually breaks the flow of a programming session: you leave the terminal, open a design tool, upload assets, copy results back, and then try to remember what you were building. NanoBanana MCP gives Claude Code a small but useful image arm, so image generation and image edits can become part of the same terminal workflow as code review, README updates, or release preparation.

What you can do

The NanoBanana MCP integration is focused on practical image work inside Claude Code. The documented server exposes two tools:

  • nanobanana_generate_image for text-to-image generation.
  • nanobanana_edit_image for image editing, including multiple image inputs.

The important part is not only that it can create pictures. The source guide describes NanoBanana as an image-aware editing tool built around Gemini’s image understanding: you can provide two images and ask the model to move an object from one image into the scene of another, while adapting angle and lighting. That makes it useful for builder tasks such as product mockups, page illustrations, quick README visuals, and cleaning up unwanted text in screenshots.

How it works

Claude Code already knows how to read code, modify files, run commands, and explain errors. MCP extends that session with external tools. In this setup, Ace Data Cloud hosts the remote NanoBanana MCP server, and Claude Code connects to it over HTTP using an Ace Data Cloud API token. You do not configure a local image service; you add a remote MCP endpoint and let Claude Code call it when your prompt needs image generation or editing.

The NanoBanana MCP endpoint used in the documentation is:

https://nanobanana.mcp.acedata.cloud/mcp

The command uses claude mcp add, --transport http, an uppercase -H header flag, and a scope selected with -s. The uppercase -H matters: lowercase -h is help.

Step 1: Add NanoBanana MCP to the current project

For a first test, I would start with the local scope. It binds the configuration to the project directory where you run the command, while the record is written into your local ~/.claude.json together with the current project path.

claude mcp add nanobanana --transport http https://nanobanana.mcp.acedata.cloud/mcp   -H "Authorization: Bearer YOUR_ACEDATACLOUD_API_KEY"   -s local

Keep the real token private. The documentation uses the placeholder YOUR_ACEDATACLOUD_API_KEY and explicitly warns against pasting a complete token into public repositories, issues, screenshots, or chat records.

Step 2: Choose the right configuration scope

Once the local test works, choose a scope based on how you actually work:

  • -s local: best for trial use in one project directory.
  • -s user: useful when you want NanoBanana MCP available across projects opened with Claude Code.
  • -s project: useful for team projects because Claude Code writes the configuration to .mcp.json in the project root.

For a team repository, be careful with project scope. The source guide recommends not committing the real token to public repositories; use an environment-variable placeholder or have each person add credentials locally. The first time Claude Code reads a project-level MCP configuration, it may show Pending approval, which is a normal trust prompt for the project configuration.

Step 3: Verify the connection

After adding the server, verify the handshake from the terminal:

claude mcp list

If nanobanana shows ✓ Connected, the server is reachable and Claude Code can call the tools. If it fails, check the token, the service URL, and the selected scope. Avoid debugging from old screenshots or assumed tool counts; the live connection state is what matters.

Step 4: Use natural-language editing prompts

After configuration, you can stay in Claude Code and describe the edit you want. For composition, the guide gives this style of request:

Place the phone from the first image onto the desk in the second image, adjusting the angle and lighting to make it look natural.

For cleanup work, the documented example is direct:

Edit this image to remove the text watermark in the lower right corner, filling it with the background.

And for a lightweight product or website illustration:

Generate an illustration of a small dinosaur squatting next to a crack in the ground looking down, to be used for a 404 page.

In practice, I would pair these prompts with concrete project context: the target page, the dimensions you need, and the files where the image will be referenced. That lets Claude Code help with the asset and then continue with the surrounding implementation work.

A small builder workflow

  1. Open a project that needs a visual asset, such as a landing page, README, or 404 page.
  2. Add NanoBanana MCP with -s local and verify it with claude mcp list.
  3. Ask Claude Code to generate or edit the image using nanobanana_generate_image or nanobanana_edit_image.
  4. Review the returned image, then ask Claude Code to wire it into the relevant page or documentation.

This is the main value of the integration: image work becomes a step in a development loop instead of a separate browser chore. For the full configuration reference, read the Claude Code with Nano Banana MCP guide.

Comments

Post a Comment

Popular posts from this blog

Artistic QR Code API Integration Guidance

Image
Artistic QR code is an innovative technological product that combines QR codes with beautiful background images, creating practical and visually appealing works. They not only possess the functionality of traditional QR codes, allowing quick scanning and recognition by smart devices, but also incorporate artistic elements to enhance visual appeal and brand recognition. Some artistic QR codes are even generated by artificial intelligence, fully leveraging modern technology to demonstrate unparalleled innovation and uniqueness. This makes artistic QR codes widely applicable in areas such as brand marketing and advertising. In simple terms, artistic QR codes are the perfect combination of QR code scanning and artistic aesthetics. They not only provide the function of information transmission, but also enhance the user's visual experience, making each scan a delightful artistic enjoyment. Overview of Artworks Let's take a look at a few QR code works: How are they? These are ar...
Read more

How to Configure Claude Code with CC Switch and Ace Data Cloud

Image
If you use Claude Code across a terminal, VS Code, or remote development setup, the awkward part is often not the model itself but the configuration: where should requests go, where should the token live, and how do you switch providers without editing files by hand? This guide walks through a practical setup using CC Switch as the graphical configuration manager and Ace Data Cloud as the Anthropic-compatible base URL. The goal is simple: configure Claude Code once, verify the active endpoint, and keep the setup easy to change later. What you can do With the setup described in the Ace Data Cloud documentation, you can: Manage Claude Code provider configuration through a desktop UI instead of manually editing settings.json . Store an Ace Data Cloud provider with ANTHROPIC_BASE_URL and ANTHROPIC_AUTH_TOKEN . Switch the active Claude Code provider from CC Switch without rewriting your configuration every time. Use the same provider configuration from the terminal an...
Read more

How to Build a Server-Side Image Editing Workflow with GPT-Image-2

Image
If your product needs image editing, the hard part is rarely the model call itself. The real challenge is building a reliable workflow around user images, reference assets, predictable output sizes, and slow-running jobs without forcing every file through a manual upload step. This guide walks through a practical server-side workflow using the OpenAI Images Edits API on Ace Data Cloud. The focus is gpt-image-2 , because the documented editing flow supports direct image URLs, base64 input, multiple reference images, high-resolution output through size , and asynchronous callbacks. What you can do The edits endpoint is designed for turning one or more input images plus an instruction into a modified output image. In practical terms, you can use it to: Convert an existing infographic or poster into a different visual theme while preserving its layout. Change a product, shelf, room, or object style while keeping the original arrangement stable. Pass image URLs directly f...
Read more