How to Edit Images from Claude Code with NanoBanana MCP

How to Edit Images from Claude Code with NanoBanana MCP

You are in the terminal, deep inside a project, and you need one practical image edit: place an object from one reference image into another scene, clean up a watermark, or make a small illustration for a page. The usual flow is to leave the IDE, open an image tool, upload files, copy results back, and lose context. NanoBanana MCP lets you keep that loop inside Claude Code.

What you can do

The Ace Data Cloud NanoBanana MCP integration for Claude Code exposes image generation and image editing directly in a Claude Code session. The documented tools are nanobanana_generate_image for text-to-image generation and nanobanana_edit_image for editing existing images, including multi-image input.

The most useful pattern is not “make me a pretty picture.” It is a builder workflow:

  • compose multiple images, such as putting the object from image A into the environment from image B;
  • remove unwanted text or watermark-like marks from a screenshot while filling the background;
  • generate a small product, empty-state, or error-page illustration without leaving the terminal;
  • iterate with natural-language instructions while Claude Code still has your project context.

How it works

Claude Code can connect to external tools through MCP servers. For NanoBanana, the MCP server URL in the documentation is https://nanobanana.mcp.acedata.cloud/mcp. Once configured, Claude Code can call the NanoBanana tools from a normal coding conversation.

The setup uses an Ace Data Cloud API token passed as an HTTP authorization header. The important detail is that the Claude Code command uses uppercase -H for headers. Lowercase -h is the help flag, so using the wrong case will not attach your token.

Configure the MCP server in Claude Code

Start from a terminal where you use Claude Code. Replace YOUR_TOKEN with your Ace Data Cloud API token:

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

By default, without an explicit scope, Claude Code treats the configuration as local. The documentation describes three scopes:

  • local: the default behavior, stored in ~/.claude.json, effective for the current project directory;
  • user: configured with -s user, stored in ~/.claude.json, available across projects;
  • project: configured with -s project, stored in .mcp.json in the project root, suitable for team sharing.

If you want every project on your machine to have access, use a user scope:

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

If you want a team project to carry the MCP configuration, use project scope, but do not commit real tokens to a public repository. The documentation recommends using environment-variable placeholders for shared project configuration.

Verify the connection before you rely on it

After adding the server, check that Claude Code sees it:

claude mcp list

You are looking for nanobanana to appear as connected. This small verification step saves time later: if the tool is not connected, the problem is usually configuration, scope, or the authorization header rather than your image prompt.

Use case 1: multi-image composition

The documentation highlights multi-image editing as a core reason to use NanoBanana. A practical prompt might be:

Use nanobanana_edit_image with these two image URLs. Put the phone from the first image onto the desk in the second image. Match the desk angle and lighting so it looks natural.

This is useful for product mockups, app screenshots placed into device frames, or quick concept images for a landing page. The key is to describe the role of each image clearly: what should be taken from the first image, what should remain from the second image, and what visual constraints matter.

Use case 2: clean up screenshots

For documentation and tutorials, screenshots often include text overlays or distracting marks. The documented workflow includes removing text from an image and filling the background. A concise instruction is usually enough:

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

For builder content, this is especially handy when you need clean visuals for a README, docs page, changelog, or blog post but do not want to open a separate editor.

Use case 3: generate small page illustrations

NanoBanana can also generate images from text through nanobanana_generate_image. The documentation gives the example of creating a small dinosaur illustration for a 404 page. In practice, you can keep the prompt tied to your UI:

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

Because this runs in Claude Code, you can ask for a visual that matches the page you are building, then continue editing copy, component states, or docs in the same session.

A few habits that make the workflow safer

  • Use -s user when the tool is personal to your machine; use -s project only when the team needs the same MCP server entry.
  • Keep real tokens out of committed files. If the configuration is shared, use environment variables instead of literal secrets.
  • Verify with claude mcp list before debugging prompts.
  • When editing with multiple images, describe each image’s role explicitly.

The win is simple: image generation and editing become part of the terminal workflow instead of a separate browser task. If you already use Claude Code for implementation, NanoBanana MCP gives you a practical way to create, adjust, and compose visuals while staying in the same builder loop. 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

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