If your coding agent can write the feature but you still leave the terminal to make screenshots, page illustrations, or product mockups, MCP is a practical way to close that loop.
What you can do
NanoBanana is useful when the image task depends on understanding an existing image, not just generating something from scratch. In the Ace Data Cloud documentation, the examples are deliberately developer-friendly: put a phone from one image onto a desk in another image, remove a text watermark from an image, or generate an illustration for a 404 page.
The workflow is simple: configure a remote MCP server once, then ask Claude Code for image work in natural language while it is already inside your project. The two exposed tools are:
| Tool | What it does |
|---|---|
nanobanana_generate_image |
Text-to-image generation |
nanobanana_edit_image |
Image editing with support for multiple image inputs |
The most important configuration details are:
- MCP server URL:
https://nanobanana.mcp.acedata.cloud/mcp - Transport:
http - Auth header:
Authorization: Bearer YOUR_ACEDATACLOUD_API_KEY - Claude Code command:
claude mcp add nanobanana - Verification command:
claude mcp list
A small but important detail: the docs call out that -H must be uppercase. Lowercase -h is interpreted as help, which is exactly the kind of tiny CLI mistake that makes MCP setup feel more mysterious than it really is.
How it works
Claude Code can read your repo, modify files, and run commands. MCP adds external tools to that same terminal-centered session. In this case, the external tool is NanoBanana, an image generation and editing MCP server backed by Google's Gemini image-understanding capabilities.
You do not run the server locally. You register the remote MCP endpoint with Claude Code and pass an Ace Data Cloud API token through an HTTP authorization header. After that, Claude Code can discover the nanobanana_* tools and call them when your prompt asks for image generation, image editing, or multi-image composition.
That makes the pattern feel natural for builder workflows. You can work on a landing page, ask for a matching 404 illustration, save the generated asset, and keep going without switching contexts.
Step 1: Get an API token
The documentation says to open the Ace Data Cloud console application list and copy an API token. Keep the real token out of public repos, screenshots, issues, and chat logs. In examples, use a placeholder like this:
YOUR_ACEDATACLOUD_API_KEY
One token can be used across Ace Data Cloud MCP servers, so you do not need a separate token just for NanoBanana.
Step 2: Add the MCP server to Claude Code
For a quick trial in the current project, use the local scope:
claude mcp add nanobanana --transport http https://nanobanana.mcp.acedata.cloud/mcp \
-H "Authorization: Bearer YOUR_ACEDATACLOUD_API_KEY" \
-s local
Use local when you are testing the setup in one repo. Claude Code writes the record into your local ~/.claude.json together with the current project path.
If you expect to use NanoBanana from many projects, use the user-level scope:
claude mcp add nanobanana --transport http https://nanobanana.mcp.acedata.cloud/mcp \
-H "Authorization: Bearer YOUR_ACEDATACLOUD_API_KEY" \
-s user
For team projects, there is also a project-level option:
claude mcp add nanobanana --transport http https://nanobanana.mcp.acedata.cloud/mcp \
-H "Authorization: Bearer YOUR_ACEDATACLOUD_API_KEY" \
-s project
The project scope writes configuration into .mcp.json in the project root. That can be useful for private team repositories, but do not commit a real token. Use a placeholder or let each teammate add their own local secret.
Step 3: Verify the connection
After adding the server, run:
claude mcp list
A healthy setup should show nanobanana as ✓ Connected. If it does not, check three things before changing anything else: the token, the remote service URL, and the scope you used when adding the server.
Step 4: Use it in real project tasks
Once connected, you can ask Claude Code for image work the same way you ask it for code changes.
For multi-image composition:
Use NanoBanana to place the phone from the first image onto the desk in the second image. Match the angle and lighting so it looks natural.
For cleanup work:
Edit this image to remove the text watermark in the lower-right corner, filling the area with the surrounding background.
For a small web asset:
Generate an illustration of a small dinosaur squatting next to a crack in the ground, looking down. Use it as a 404 page illustration.
The point is not to replace design judgment. It is to keep asset iteration close to the code. When you are building a docs page, prototype, README, or empty state, the fastest useful image is often the one you can request without leaving the terminal.
A few practical notes
Start with local until you confirm that the server connects. Move to user only when you know you want it available across projects. Use project when the configuration itself is part of how your team works, and treat secrets carefully.
Also, avoid hardcoding assumptions about the number of tools or older client behavior. The docs recommend checking the current connection state with claude mcp list rather than relying on memory.
If you want the exact setup reference, the Ace Data Cloud guide is here: https://platform.acedata.cloud/documents/claude-code-mcp-nano-banana
Top comments (1)
I'd judge the phone-on-desk edit differently from the dinosaur 404 illustration: matching lighting matters for the first, while the second has to leave the error message and recovery action easy to find. For the 404 workflow, I'd have the agent render the actual page at mobile size before accepting the generated asset. Keeping image edits beside the code speeds up iteration, but a nice standalone illustration can still make the page harder to use.