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 deep in a terminal workflow, switching to a browser just to make or fix an image can break your rhythm. The NanoBanana MCP setup for Claude Code gives you a practical way to ask for image generation and image editing directly from the same place where you are already building.

What you can do

The documented NanoBanana MCP integration is focused on two concrete jobs: generating images from text and editing existing images. In Claude Code, those capabilities appear as MCP tools that can be called through natural language:

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

The interesting part is not only that it creates images. The underlying model is described as Google Gemini, and the documentation emphasizes its image understanding: you can give it multiple images and ask it to move an object from one image into the scene of another, while adjusting angle and lighting so the result feels coherent.

How it works

Claude Code talks to NanoBanana through an MCP server hosted by Ace Data Cloud. The server URL is:

https://nanobanana.mcp.acedata.cloud/mcp

You add that server to Claude Code with an HTTP transport and an authorization header. The documented command looks like this:

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

One small but important detail: the header flag must be uppercase -H. Lowercase -h means help, not an HTTP header, so the server will not receive your bearer token.

Choosing the right Claude Code scope

The setup command can be local, user-level, or project-level. If you do not pass -s, Claude Code uses the default local scope, which only applies in the directory where the command is run.

  • local: no -s or -s local; stored in ~/.claude.json; effective only in the current project directory.
  • user: -s user; stored in ~/.claude.json; available across projects.
  • project: -s project; stored in .mcp.json in the project root; useful when a team wants to share the MCP configuration.

For a solo experiment, local scope is fine. For a reusable personal workflow, user scope is more convenient:

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

For a team project, project scope can be useful, but do not commit a real token to a public repository. Use an environment-variable placeholder and keep the secret outside git.

Verifying the connection

After adding the server, verify it before you rely on it in a real workflow:

claude mcp list

The documented success state is that nanobanana appears as connected. If it does not, check the server URL, the uppercase -H flag, and whether the token was passed in the header.

Practical workflows

1. Compose two images

A common builder task is combining product or UI assets without opening a separate design tool. Because nanobanana_edit_image supports multiple image URLs, you can ask Claude Code for a composition such as:

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 useful for mockups, landing-page visuals, and internal prototypes where the goal is to communicate an idea quickly.

2. Clean up screenshots

The docs also describe removing unwanted text from an image. For example, if a screenshot has an extra watermark or label, you can ask:

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

That gives you a direct terminal-to-image cleanup loop: describe the edit, inspect the output, and iterate.

3. Generate illustrations for product states

For empty states, error pages, and small product moments, text-to-image generation can save time. The documented example is an illustration for a 404 page:

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

In practice, I would treat this as a first draft: generate a few directions, pick the one that fits your UI, then use editing prompts to align it with the page context.

A minimal setup checklist

  1. Get an Ace Data Cloud API token.
  2. Add the MCP server with claude mcp add nanobanana --transport http https://nanobanana.mcp.acedata.cloud/mcp.
  3. Pass authorization with uppercase -H "Authorization: Bearer YOUR_TOKEN".
  4. Choose local, user, or project scope intentionally.
  5. Run claude mcp list and confirm nanobanana is connected.
  6. Use nanobanana_generate_image for new images and nanobanana_edit_image for edits or multi-image composition.

Wrapping up

The most useful thing about this workflow is that it keeps image work close to the code and product context. You can stay in Claude Code, describe the asset you need, and keep iterating without opening a separate creative tool for every small visual task. If you want the original setup details, read the Claude Code + NanoBanana MCP documentation.

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

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

How to Build a Server-Side Image Editing Workflow with GPT-Image-2

Image
If your product needs image editing, the hard part is rarely the model call itself. The real challenge is building a reliable workflow around user images, reference assets, predictable output sizes, and slow-running jobs without forcing every file through a manual upload step. This guide walks through a practical server-side workflow using the OpenAI Images Edits API on Ace Data Cloud. The focus is gpt-image-2 , because the documented editing flow supports direct image URLs, base64 input, multiple reference images, high-resolution output through size , and asynchronous callbacks. What you can do The edits endpoint is designed for turning one or more input images plus an instruction into a modified output image. In practical terms, you can use it to: Convert an existing infographic or poster into a different visual theme while preserving its layout. Change a product, shelf, room, or object style while keeping the original arrangement stable. Pass image URLs directly f...
Read more