Getting Started with NanoBanana MCP in Claude Code

Getting Started with NanoBanana MCP in Claude Code

If your image workflow keeps pulling you out of the terminal, NanoBanana MCP gives Claude Code a practical way to generate, edit, and compose images without switching tools.

What you can do

The NanoBanana MCP integration described in the Ace Data Cloud documentation connects Claude Code to a NanoBanana MCP server backed by Google Gemini image understanding. The useful part is not only text-to-image generation. The workflow is designed for image-aware editing, including cases where you provide multiple images and ask the model to combine or modify them in a natural way.

  • Generate an image from a plain-language prompt using nanobanana_generate_image.
  • Edit an existing image using nanobanana_edit_image.
  • Use multiple image URLs as input for composition, such as placing an object from one image into the scene of another.
  • Run the whole workflow from a Claude Code session instead of opening a separate image editor.

A typical use case is a builder working on a product page, documentation site, or internal tool who needs one-off visual assets: a 404 illustration, a cleaned screenshot, or a quick mockup that combines a product object with a new background.

How it works

Claude Code talks to external capabilities through MCP servers. For this integration, the MCP server name used in the docs is nanobanana, and the server URL is https://nanobanana.mcp.acedata.cloud/mcp. You add it with the Claude Code CLI, pass an Ace Data Cloud API token as an authorization header, and then call the NanoBanana tools from a normal Claude Code conversation.

The important mental model is simple: Claude Code remains the interface where you describe the task, while the MCP server exposes concrete image tools that can execute generation or editing. That means you can keep the surrounding work in the same place: inspect files, draft copy, ask for an illustration, then continue editing the page or documentation.

Configure the MCP server

After you have an Ace Data Cloud API token, add the NanoBanana MCP server from your terminal. The command in the documentation is:

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

One small detail matters: -H must be uppercase. In Claude Code, lowercase -h is treated as --help, not as a header parameter. If the command appears to show help instead of adding the server, check that flag first.

Once configured, verify the connection:

claude mcp list

The expected result is that nanobanana appears as connected. From there, the tools become available inside Claude Code sessions.

Choose the right scope

The docs call out three configuration scopes, and this is worth deciding before you copy the command into every project.

  • local: the default if you do not pass -s. It applies only to the directory where you run the command and is stored in ~/.claude.json.
  • user: pass -s user to make the server available globally across your projects, also stored in ~/.claude.json.
  • project: pass -s project to write configuration to .mcp.json in the project root, which can be shared with a team.

For a personal setup, -s user is convenient. For a team repository, -s project is usually clearer because the dependency is visible in the repo. The docs also include the right warning: do not commit real tokens to public repositories. Use environment-variable placeholders such as ${ENV_VAR} plus local environment variables instead.

Try a multi-image edit

The most interesting workflow is multi-image composition. The documentation gives the example of taking the phone from a first image and placing it on the desk in a second image, with angle and lighting adjusted so the result looks natural.

Inside Claude Code, the request can stay human-readable:

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

Because nanobanana_edit_image supports multiple image URLs as input, this style of prompt is useful for product mockups, landing page visuals, and before/after examples. The key is to describe the role of each image clearly: which one contains the object, which one is the scene, and what should be preserved.

Clean screenshots and generate small illustrations

The same tool is useful for smaller documentation tasks. If a screenshot contains unwanted text or a watermark in a corner, the doc suggests asking NanoBanana to remove the text and fill the background. For UI and docs teams, that can be faster than opening a separate editor for simple cleanup.

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

For new assets, use nanobanana_generate_image. The docs include a 404-page illustration prompt:

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

That is the kind of prompt that works well in a builder workflow: specific enough to guide the image, but not overloaded with art-direction details that are unrelated to the page.

A practical way to use it

I would start with one narrow task: add the MCP server, verify it with claude mcp list, and ask for a single documentation illustration or screenshot cleanup. Once that works, move to multi-image composition, where NanoBanana’s image understanding becomes more valuable.

The integration is small, but the workflow change is meaningful: Claude Code becomes not only a place to write code, but also a place to ask for visual assets that support the code and docs you are already building. Read the source documentation here: 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

A Small Tip for Using AI Agents: Don’t Ask for the Plan Too Soon

Image
A Small Tip for Using AI Agents: Don’t Ask for the Plan Too Soon Recently, while using AI agents to think through product and technical designs, I found a small but useful habit. It is not a complicated prompt trick. It is much simpler than that. Instead of asking the agent to immediately produce a plan, I first ask it to understand my requirement. If anything is unclear, I ask it to question me before writing the final proposal. In other words: Don’t generate the solution yet. First understand what I want. If anything is unclear, ask me questions. After we clarify the details, then give me the plan. This sounds ordinary, but it has improved the quality of the output quite a lot. 1. The problem with asking for a plan too early I used to work with agents in a very direct way. I would describe a rough idea and say something like: Help me design a solution. The agent would usually respond quickly with a complete-looking proposal. The structure was often clean. The logic lo...
Read more