How to Use NanoBanana MCP in Claude Code for Practical Image Workflows

How to Use NanoBanana MCP in Claude Code for Practical Image Workflows

When you are building a product, a docs site, or a launch page, image work often becomes the part that pulls you out of the terminal: find a source image, open another tool, describe the change, download the result, then come back to your project. NanoBanana MCP gives Claude Code a way to handle image generation and image editing from the same terminal workflow you already use for code.

What you can do

The NanoBanana MCP server is useful when the task is not just “make a nice picture,” but “understand this image and change it in a specific way.” The documentation describes NanoBanana as an image tool backed by Google Gemini, with strong image comprehension capabilities. In practice, that means Claude Code can ask it to work with multiple image URLs, combine objects from one image with the scene of another, remove unwanted text, or create page illustrations for common product needs.

  • Generate a new image from a text prompt with nanobanana_generate_image.
  • Edit an existing image with nanobanana_edit_image.
  • Pass multiple image URLs to nanobanana_edit_image for composition workflows.
  • Keep the image task inside Claude Code instead of switching between tools.

How it works

The integration uses a managed remote MCP endpoint:

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

Claude Code connects to that endpoint over HTTP. Authentication is provided through an Ace Data Cloud API token in the Authorization header. The important detail from the setup guide is that the header flag must be uppercase -H; lowercase -h is interpreted as --help by the CLI.

You can add the server at three scopes: local, user, or project. Use local when you are testing in one project, user when you want the same MCP server available across projects, and project when a team project should carry the MCP configuration. For project scope, avoid committing real tokens to public repositories; use placeholders or have each teammate configure credentials locally.

Configure NanoBanana MCP for one project

For a trial run, start with the local scope. Replace YOUR_ACEDATACLOUD_API_KEY with your own token, but do not paste the real token into public issues, screenshots, or repositories.

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

This binds the configuration to the current project directory in Claude Code’s local configuration. It is a good default when you are validating whether image tools belong in a specific repository workflow.

Make it available across projects

If you expect to use image editing while writing docs, landing pages, and examples across multiple repositories, use the user scope:

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

After this, any project opened with Claude Code can see the NanoBanana MCP server. That is useful for builders who frequently need README illustrations, product screenshots, background changes, or quick page graphics.

Share configuration with a team project

For a private team repository, you can write the configuration into the project root with:

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

When Claude Code reads a project-level MCP configuration for the first time, it may show Pending approval. That is a normal trust prompt. Confirm it only when you trust the project configuration.

Verify the connection

Once configured, run:

claude mcp list

If nanobanana appears with ✓ Connected, the handshake succeeded. If it fails, check three things before changing anything else: the token, the endpoint URL, and the configuration scope. The guide also notes that you should not rely on old client versions or fixed historical tool counts to judge the current state.

Practical prompts to try

Compose two images

Use this when you have a product object and a target scene. The documented example is the kind of task where image understanding matters:

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

This is a good fit for product mockups, feature screenshots, or contextual visuals for docs.

Remove unwanted text

For screenshots, watermarks, or annotated images where the text is no longer wanted, ask for a direct edit:

Edit this image to remove the text watermark in the lower right corner, filling it with the background.

Generate a page illustration

For product states such as 404 pages, empty states, or onboarding screens, use nanobanana_generate_image from Claude Code:

Generate an illustration of a small dinosaur squatting next to a crack in the ground looking down, to be used for a 404 page.

A simple builder workflow

  1. Open the repository in Claude Code.
  2. Add NanoBanana MCP with -s local for the first test.
  3. Run claude mcp list and confirm ✓ Connected.
  4. Ask Claude Code to generate or edit an image for a concrete file you are working on: README, docs page, landing page, or empty state.
  5. Review the generated asset before committing it to the project.

The main benefit is not that image generation exists; it is that your coding agent can request the image in the same context where the asset will be used. Start small, keep the token private, and use the local scope until you know the workflow belongs in your daily setup.

For the original setup commands and tool list, read the Claude Code with 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