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.
NanoBanana MCP exposes image generation and image editing capabilities to Claude Code.
The document describes two tools:
nanobanana_generate_image
for text-to-image generationnanobanana_edit_image
for image editing, including multi-image inputThat means you can use natural language inside a Claude Code session to do things like:
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”.
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:
nanobanana_generate_image
for creating images from promptsnanobanana_edit_image
for editing and multi-image compositionAuthorization
headerFrom 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.
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.
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.
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.
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