Practical Guide: Integrating Claude Code with NanoBanana MCP for Image Generation and Editing

If your AI coding assistant can reason about a UI bug but cannot help you create or adjust the actual image asset, the workflow still breaks at the handoff between code and design.

Claude Code plus NanoBanana MCP is a practical way to keep that loop inside the terminal. Instead of opening a separate image tool, exporting files, and manually describing the same task again, you can ask Claude Code to generate, edit, or compose images through an MCP server.

This guide walks through what the integration does, how the MCP connection is configured, and a few developer-focused image workflows that are useful in real projects.

What you can do

NanoBanana MCP exposes image generation and image editing capabilities to Claude Code.

The document describes two tools:

• 
  nanobanana_generate_image for text-to-image generation


• 
  nanobanana_edit_image for image editing, including multi-image input

That means you can use natural language inside a Claude Code session to do things like:

• generate a custom illustration for an empty state or 404 page


• remove unwanted text from an image and fill the background


• combine objects from multiple images, such as placing a phone from one image onto a desk in another image

The interesting part is not just that images can be generated. NanoBanana is described as using Google's Gemini model for image understanding, which makes it useful for editing instructions where the model needs to understand the relationship between multiple images.

For builders, this matters because many image tasks are not pure generation. They are usually small workflow tasks: “reuse this object”, “match this scene”, “clean up this screenshot”, or “create an illustration that fits this page”.

How it works

The integration is a Claude Code MCP configuration.

The MCP endpoint is:

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

Claude Code connects to that endpoint over HTTP and sends an authorization header:

Authorization: Bearer YOUR_TOKEN

Once connected, Claude Code can call the NanoBanana MCP tools during a terminal session. You still describe what you want in natural language, but the image work is routed through the MCP server instead of staying as plain text advice.

The core pieces are:

• Claude Code as the terminal interface


• NanoBanana MCP as the connected MCP server


• 
  nanobanana_generate_image for creating images from prompts


• 
  nanobanana_edit_image for editing and multi-image composition


• a Bearer token passed with the Authorization header

Configure NanoBanana MCP in Claude Code

From your terminal, add the MCP server with the claude mcp add command:

claude mcp add nanobanana --transport http https://nanobanana.mcp.acedata.cloud/mcp \

  -H "Authorization: Bearer YOUR_TOKEN"

Replace YOUR_TOKEN with your own token.

One small detail is easy to miss: the header flag must be uppercase -H. Lowercase -h is help, not a header parameter.

By default, the configuration is local to the directory where you run the command. The documentation describes three scope options:

• 
  local, the default, with no -s or with -s local
  


• 
  user, using -s user
  


• 
  project, using -s project
  

For local and user, the configuration is stored in ~/.claude.json. For project, it is stored in .mcp.json in the project root.

Project scope is useful when a team wants to share the MCP setup through the repository. If you do that, avoid committing real tokens. Use environment variable placeholders instead, so the shared config describes the integration without leaking credentials.

After adding the server, verify the connection:

claude mcp list

You should see nanobanana marked as connected.

Example 1: Generate a small 404 page illustration

A good first use case is a low-risk asset: an illustration for a 404 page, empty state, or internal tool.

In Claude Code, you can ask:

Generate an illustration of a small dinosaur crouching next to a crack in the ground looking down, for use on a 404 page.

This maps naturally to nanobanana_generate_image because the task starts from text only.

For web projects, this is useful when you need a custom visual that is specific enough to fit the page, but not important enough to justify a long design cycle. You can keep the prompt near the code that needs the asset, iterate in context, and then decide whether the generated image is good enough for the current stage of the project.

Example 2: Clean up text in a screenshot

Another common developer task is preparing screenshots for documentation, changelogs, or internal demos.

If an image contains unwanted text in the bottom-right corner, you can ask:

Edit this image to remove the text watermark in the bottom right corner, filling the background.

This uses nanobanana_edit_image, because the source image already exists and the task is an edit rather than a new generation.

The important habit here is to describe both the object to remove and the desired repair behavior. “Remove the text” is less precise than “remove the text watermark in the bottom right corner, filling the background.” The second instruction gives the image model a clearer target and a clearer expectation for the missing area.

Example 3: Compose two images

The most interesting workflow is multi-image composition.

The documentation gives this kind of prompt:

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

This is also an editing task, but it depends on understanding both images. The model needs to identify the phone in the first image, understand the desk scene in the second image, and then adjust the placement so the result looks coherent.

This can be handy for product mockups, landing page drafts, documentation visuals, or quick experiments where you want to test whether a concept works before asking a designer to polish it.

A few practical notes

I would treat this kind of setup as a workflow accelerator, not as a replacement for judgment.

For production assets, review the final image carefully. For team usage, prefer -s project only when the configuration is meant to be shared, and keep tokens out of the repository. For one-off experiments, the default local scope is often enough.

The main advantage is that Claude Code can stay in the same loop as your implementation work. You can reason about a UI state, generate an asset, edit a screenshot, and continue coding without switching tools.

If you want the original setup reference, the Ace Data Cloud documentation is here: https://platform.acedata.cloud/documents/claude-code-mcp-nano-banana