How to Generate and Edit Images from Claude Code with NanoBanana MCP

How to Generate and Edit Images from Claude Code with NanoBanana MCP

When you are already working in a terminal with Claude Code, jumping out to a browser just to create, edit, or combine images can break the flow. The NanoBanana MCP integration gives Claude Code a small, practical bridge to image generation and image editing, so you can describe the visual operation in plain language and keep the work inside the same developer session.

What you can do

The documented NanoBanana MCP setup exposes two tools inside Claude Code:

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

The useful part is not just that it can make images. The guide describes NanoBanana as an image model that understands image content well enough to work with relationships between inputs. For example, you can provide two images and ask it to place an object from one image into the scene of another, adjusting the angle and lighting so the result looks natural.

That makes it a good fit for builder workflows such as composing product mockups, removing unwanted text from screenshots, generating small illustrations for empty states, or quickly exploring visual ideas while writing code or documentation.

How it works

The integration uses the Model Context Protocol server at https://nanobanana.mcp.acedata.cloud/mcp. Claude Code connects to that MCP endpoint over HTTP, and your Ace Data Cloud API token is passed through an HTTP authorization header.

Once configured, Claude Code can call the NanoBanana tools during a normal session. You do not have to write a separate image script for every small visual task; you can ask Claude Code to generate or edit an image, and the MCP server handles the actual tool call.

Configure NanoBanana MCP in Claude Code

The core command from the documentation is:

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

There are two details worth paying attention to:

  • -H must be uppercase. In Claude Code, lowercase -h is help, not a header parameter.
  • If you do not specify -s, Claude Code uses the local scope by default, which applies only to the current project directory.

If you want the MCP server available across all your projects, use 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-shared project configuration, use project scope:

claude mcp add nanobanana -s project --transport http https://nanobanana.mcp.acedata.cloud/mcp   -H "Authorization: Bearer ${ACEDATA_CLOUD_TOKEN}"

The documentation notes that project scope writes configuration to .mcp.json in the project root, which can be committed and shared with teammates. Do not commit a real token to a public repository; use an environment variable placeholder instead.

Check the connection before using it

After adding the MCP server, verify that Claude Code can see it:

claude mcp list

You should see nanobanana marked as ✓ Connected. This check is small, but it saves time: if the server is not connected, image prompts inside Claude Code will fail later in the conversation, when you are already thinking about the design task.

Use case 1: compose multiple images

A practical multi-image request might look like this:

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

This maps to the documented nanobanana_edit_image capability, which supports multiple image URLs as input. The important habit is to be explicit about the relationship between the inputs: which object should be taken from which image, what scene it should be placed into, and what should be adjusted to make the result believable.

Use case 2: clean up screenshots

The same editing tool can be used for screenshot cleanup. For example:

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

This is useful when you are preparing documentation and need a cleaner visual. Keep the instruction narrow. Ask for the exact removal or fill operation instead of turning it into a broad redesign request.

Use case 3: generate a small UI illustration

For a generated image, the documentation gives the example of a 404 illustration:

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

That kind of prompt works well because it includes subject, action, setting, and intended use. In a builder workflow, I would usually add size, style, and where the illustration will appear in the product, then iterate from the first result.

A simple workflow I would use

  1. Add the MCP server with the correct scope.
  2. Run claude mcp list and confirm nanobanana is connected.
  3. Start with a narrow generation or edit request.
  4. If editing, describe the source image, target image, and final composition clearly.
  5. Keep tokens out of committed configuration files.

This keeps the workflow boring in a good way: configure once, verify once, then use natural language from the terminal whenever you need a quick visual asset.

Where to go next

If your daily work already happens in Claude Code, NanoBanana MCP is a practical way to bring image generation and editing into the same loop as coding, writing, and reviewing. It is especially useful for small visual tasks where opening another tool would cost more attention than the task itself.

You can 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