Claude Code · one command · 11 tools

Your coding agent should not have to ask you for the artwork.

Claude Code can already write the component, the styles and the tests. Connect this server and it can also produce the hero image, cut out the product shot, generate the icon set and compress everything before it commits.

~/projects/site
$ claude mcp add --transport http imagemcp \
    https://mcp.imagemcpserver.com/mcp \
    --header "x-api-key: sk-img-gen-your_key_here"

Added MCP server "imagemcp"

$ claude
> /mcp
  imagemcp   connected   11 tools

> add a hero image to the pricing page

  ⏺ generate_image(aspectRatio: "21:9") …
  ⏺ compress_image(quality: 80) …
  ⏺ Write(public/hero-pricing.webp)

Two ways in. Pick one.

Both expose the same operations and bill the same credits. The difference is whether the tools arrive over the Model Context Protocol or as a command the agent runs.

MCP server

recommended

Tools appear natively in the agent’s tool list with their full schemas, so it knows the parameters without being told. Add once, available in every session.

claude mcp add --transport http imagemcp \
  https://mcp.imagemcpserver.com/mcp \
  --header "x-api-key: $IMAGEMCP_API_KEY"

Add --scope project to write a .mcp.json your whole team shares.

Skill & CLI

A skill directory plus a zero-dependency Node CLI that prints structured JSON. Nothing to keep running, and it works anywhere the agent can execute a shell command — including CI.

npx skills add imagemcp/skill

export IMAGEMCP_API_KEY=sk-img-gen-…
node imagemcp.js generate \
  --prompt "isometric server rack" \
  --aspect 4:3
Command reference →

What changes in day-to-day work

The interesting part is not that the agent can generate an image. It is that generating one stops being a context switch — the asset appears in the same turn as the code that uses it.

“Build the marketing page from this brief.”

Without image tools

Ships with grey placeholder boxes and a TODO for design.

With them connected

Generates the hero, the three feature illustrations and the OG image, compresses them to WebP and references them from the JSX.

“Our icons are inconsistent — fix them.”

Without image tools

Suggests an icon library and leaves the migration to you.

With them connected

Generates a matching SVG set with one style prompt, writes each as a component, and deletes the mismatched PNGs.

“Every product image in /public is a 4MB PNG.”

Without image tools

Explains what a WebP is.

With them connected

Runs a batch compression over the folder, rewrites the references, and reports the before-and-after page weight.

Keeping an autonomous agent honest

An agent with a spending tool needs the same treatment as an agent with a deploy tool. These are the three habits worth putting in your project instructions.

  1. 1

    Check the balance first

    get_user_info is free. Telling the agent to call it before a batch means it can stop rather than fail halfway through forty images.

  2. 2

    Draft cheap, finish expensive

    Iterate on a fast model, then re-run the approved prompt on a premium one. Upscaling and compression happen once, at the end.

  3. 3

    Read the log afterwards

    Every call is recorded with its cost in the dashboard. A run that cost more than expected is a question you can answer with data.

drop this in CLAUDE.md

## Images

Image assets come from the imagemcp MCP
server. Before generating a batch, call
get_user_info and stop if credits are low.

- Draft on a fast model, finalise on a
  premium one only after I approve.
- Always compress to WebP before writing
  an image into /public.
- Never commit a PNG over 500 KB.

Claude Code questions

MCP server or the skill — which should I use?

The MCP server if you want the tools available in every session automatically. The skill and CLI if you prefer the agent to shell out to a command, which is also what you want on machines where you would rather not run a bridge process.

Can I scope the server to one project?

Yes. Adding it with project scope writes a .mcp.json in the repository, which means everyone who clones it gets the same tools. User scope keeps it to your machine across every project.

Should the API key go in the repo?

No. Keep the key in your environment and reference it, or add the server at user scope so the credential never enters a file that gets committed. A committed key should be revoked from the dashboard immediately.

Will the agent burn credits without asking?

It calls tools the same way it calls any other. get_user_info and list_models are free, so a well-prompted agent can check the balance before it starts. Every call also lands in the request log with its exact cost, so nothing is invisible after the fact.

Does it work in a headless or CI run?

Yes — the CLI is a plain Node script that prints JSON and reads the key from IMAGEMCP_API_KEY, so a non-interactive run can generate assets exactly like an interactive one.

Related guides