How to Add Image Generation and Editing to Claude Code with NanoBanana MCP

How to Add Image Generation and Editing to Claude Code with NanoBanana MCP

If your image workflow starts in a terminal but ends in a pile of browser tabs, an MCP server is a cleaner way to keep the loop inside your coding session. This guide shows how to connect Claude Code to NanoBanana MCP so you can generate images, edit existing assets, and combine multiple image inputs without leaving the command line.

What you can do

NanoBanana MCP is useful when you want Claude Code to act as a practical image assistant during development work. According to the Ace Data Cloud documentation, the server exposes two tools:

  • nanobanana_generate_image for text-to-image generation.
  • nanobanana_edit_image for image editing, including multi-image input.

The interesting part is not just that it can create images. The documented use cases focus on image understanding: placing an object from one image into the scene of another, removing unwanted text from an image, or generating a page illustration for something like a 404 screen. That makes it a good fit for builders who need quick visual iterations while already working in Claude Code.

How it works

The connection is made through Claude Code's MCP support. You add a remote HTTP MCP server named nanobanana, point it at https://nanobanana.mcp.acedata.cloud/mcp, and pass an Ace Data Cloud API token as an authorization header. After that, Claude Code can discover the NanoBanana tools and call them from natural-language instructions inside a session.

The document notes that NanoBanana is based on Google's Gemini model and emphasizes image comprehension. In practical terms, that means your prompt can describe relationships between images instead of only asking for a brand-new picture. For example, you can ask it to move the phone from one input image onto the desk in another input image and adjust angle and lighting so the result looks natural.

Step 1: Add the MCP server to Claude Code

Start from a terminal where the claude command is available. Replace YOUR_TOKEN with your Ace Data Cloud API token. The documentation is explicit that -H must be uppercase because lowercase -h means help, not a header parameter.

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

By default, if you do not pass -s, Claude Code uses the local scope. That means the server is only effective in the current project directory. For a personal setup across projects, use -s user. For a team-shared project configuration, use -s project, which writes the configuration to .mcp.json in the project root.

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

If you choose -s project, be careful with secrets. The documentation recommends using environment-variable placeholders rather than committing real tokens to public repositories.

Step 2: Verify the connection

After adding the server, list configured MCP servers:

claude mcp list

The expected result is that nanobanana appears as ✓ Connected. If it does not, check three things first: the server URL, the uppercase -H header flag, and whether the token was copied correctly into the authorization header.

Step 3: Use it for real builder tasks

Once connected, you do not need to remember the exact tool invocation every time. You can describe the job in Claude Code and let the assistant choose the NanoBanana tool. Here are practical prompts grounded in the documented examples:

Compose two product images

Use this when you have an object image and a scene image:

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 the kind of task where nanobanana_edit_image is more useful than plain generation because it can work with multiple image URLs as input.

Clean up a screenshot

For UI mockups, docs, or internal demos, you may need to remove distracting text:

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

The value here is speed. Instead of exporting the image, opening a separate editor, and manually painting over the region, you keep the request inside the same coding conversation.

Create a small page illustration

For placeholder states, error pages, and internal tools, generation can be enough:

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

That request maps naturally to nanobanana_generate_image.

A few implementation notes

  • local scope is best for testing inside one project directory.
  • user scope is convenient if you want NanoBanana available across your projects.
  • project scope is useful for teams, but do not commit real tokens.
  • Use claude mcp list after changes so you know whether Claude Code can actually reach the server.

Wrapping up

The practical win is a shorter feedback loop: image generation, image editing, and multi-image composition become part of the same terminal workflow where you already plan, code, and review changes. If you want the original setup reference, read the Ace Data Cloud documentation for Claude Code integration with NanoBanana MCP.

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
Image
Nexior is an open-source project on GitHub that allows us to deploy our AI application site with one click, including AI Q&A, Midjourney drawing, knowledge base Q&A, artistic QR codes, and more. There is no need to develop AI systems, purchase AI accounts, worry about API support, or configure payment systems. It comes with zero startup costs and allows you to earn income through AI without risk. This article will introduce the deployment process of the Nexior project on Vercel. Without any programming skills, you can deploy your AI site in a few minutes and easily generate revenue. Preparation First, open the Nexior GitHub repository at: https://github.com/AceDataCloud/Nexior , then register or log in to your GitHub account. Click Fork to clone the code to your local repository, as shown below: After completing the Fork, we will get our personal repository, as shown below: In this example, the account is Germey, so we can see that we have Forked to the Germey user, wit...
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