Claude Code Images: How to Paste Them In and Generate Them Out

Two completely different questions hide behind "Claude Code images."

The first is getting an image in: you have a screenshot of a broken layout and you want Claude to look at it. The second is getting an image out: you need an OG image, an app icon, or a launch graphic and you'd rather not context-switch into a design tool to make it.

Almost everything written about this covers the first question and stops. This covers both, because the second one has a real answer now and hardly anyone knows it.

Quick disambiguation first: if you searched this looking for Docker container images, you want a different page. This is about pictures.

Getting Images Into Claude Code

Three ways in, and which one you use mostly depends on where the image currently lives.

Step 1: Paste from your clipboard

Take a screenshot, then paste it straight into the prompt. On macOS that's Ctrl+V rather than Cmd+V, which catches out almost everyone the first time. Cmd+V pastes the file path as text instead of the image itself, so if you've been getting a useless string where you expected an attachment, that's why.

This is the fastest path and the one you'll use most. Screenshot a broken component, paste, ask what's wrong.

Step 2: Drag and drop the file

Drag an image file directly into the terminal window. Works well when the image is already saved somewhere, like a design export or a screenshot you took earlier.

On some terminal setups you need to hold Shift while dragging for the drop to register as an image rather than a path. If a plain drag isn't working, try that before assuming the feature is broken.

Step 3: Point at a file path

Just reference the file in your prompt:

Look at ./designs/dashboard-mockup.png and tell me which components I need to build

The least flashy option and often the most useful, because it works in scripts, it survives being written into a longer prompt, and it doesn't depend on your terminal handling clipboard images correctly.

What Claude Code actually does with an image

Vision is genuinely strong here, and it's worth knowing what's realistic. Claude Code reads screenshots of UI and tells you what's misaligned. It converts a design mockup into component structure. It reads error output from a screenshot when copying the text would be a pain. It interprets diagrams and whiteboard photos as architecture context.

One practical note: images cost tokens, roughly proportional to their dimensions. A full-resolution retina screenshot is meaningfully more expensive than a cropped one. If you're pasting a lot of images in a long session, cropping to the relevant region is a real saving.

Can Claude Code Generate Images?

Not on its own. Claude has no built-in text-to-image model, so nothing you type will make it render a photo or an illustration directly.

What it can do without help is draw with code. SVG, HTML and CSS are well within reach, which covers diagrams, charts, simple icons, and UI mockups. For a system diagram that's often the better output anyway, since it's precise and version-controllable rather than approximate.

But for anything that needs real design work, an OG image, a launch graphic, an app store screenshot, a set of social cards for a release, code-drawn SVG stops being the right tool quickly.

The answer there is a connector.

Setting Up Image Generation in Claude Code

Claude Code supports remote MCP servers with native OAuth, which means you can connect a design tool and have it produce real assets without leaving your terminal.

Step 4: Add the server

One command. Using Krumzi as the example:

claude mcp add --transport http krumzi https://www.krumzi.com/api/mcp

HTTP is the transport you want for a remote server. Claude Code also supports SSE, but it's deprecated in favour of HTTP, and stdio is for local servers running as a subprocess on your machine.

If you want the connector available across all your projects rather than just this one, add a scope flag:

claude mcp add --scope user --transport http krumzi https://www.krumzi.com/api/mcp

Scope is fixed when you add the server, so if you get it wrong you'll need to remove and re-add rather than edit it.

Step 5: Authenticate

Run claude mcp list and you'll see the server marked as needing authentication. That's expected, not an error.

Start a session and run:

/mcp

Select the server, press Enter, and choose Authenticate. Your browser opens to the sign-in page, you approve, and the status flips to connected when you come back.

If you're on a remote machine or over SSH where a browser can't open, there's a headless path:

claude mcp login krumzi --no-browser

That prints an auth URL for you to open elsewhere and paste the redirect back.

Step 6: Ask for the asset

Now you can ask for design work in the same session where you're writing code:

Generate an OG image for this release, dark background, our brand colours, headline "v2.0 is live" Make me a five-slide carousel explaining this feature for LinkedIn Design a one-page print handout for the conference booth

What comes back is a layered design rather than a flat file, so the headline is real editable text. When the version number changes, you edit the text rather than regenerating the whole image and hoping the background comes back the same.

Worth knowing up front: this route covers static work. Single images, carousels, and multi-page print documents. Video isn't available over the connector, so a motion asset means going into the app itself.

Why This Is Better Than It Sounds

The obvious reaction is that switching to a design tool for ten minutes isn't that expensive. Sometimes true. But the cost isn't the ten minutes, it's the context switch and what gets skipped because of it.

The assets that suffer are the ones that are individually small and collectively constant. OG images for every new page. A social card per release. A diagram for the docs. Screenshots dressed up for the changelog. Each one is a five-minute job that never quite happens, which is why so many good projects ship with a default grey preview card.

When the design tool is reachable from the same prompt as the code, those assets get made, because asking is cheaper than switching. That's the actual win, and it's a workflow argument rather than a quality one.

Troubleshooting

Paste isn't working. On macOS use Ctrl+V, not Cmd+V. If you're getting a file path as text, that's the wrong shortcut rather than a broken feature.

Drag and drop does nothing. Try holding Shift while you drag. Terminal emulators differ in how they handle drops.

The connector says it needs authentication. That's the normal state right after adding a server. Run /mcp in a session and authenticate from there.

The server won't initialise. Check you used the full server URL including its path, not just the domain. This is the single most common cause.

Sessions are burning tokens fast. Crop screenshots before pasting. Token cost scales with image dimensions, and a full retina screenshot is a lot of pixels you probably don't need.

Frequently Asked Questions

Can I show Claude Code an image?

Yes, three ways. Paste from your clipboard with Ctrl+V (not Cmd+V, even on macOS), drag the file into the terminal window, or reference the file path directly in your prompt. Claude Code reads screenshots, mockups, diagrams and photos, and vision is one of its stronger capabilities.

Can Claude Code create images?

Not natively, since Claude has no built-in image generation model. It can draw with code, which covers SVG diagrams, charts, and HTML mockups well. For real design output like OG images or social graphics, you connect a design tool as a remote MCP server and ask for the asset in your normal session.

Why can't Claude generate images?

Anthropic never built a text-to-image model into Claude, and hasn't published a reason. The widely held view is a mix of cost at scale, the safety and rights complexity around generated imagery, and a product focus on reasoning and agentic work. The company's answer was to build the Model Context Protocol so Claude can use external tools instead.

How do I add an MCP server to Claude Code?

Use claude mcp add --transport http <name> <url> for a remote server. Then run /mcp inside a session, select the server, and choose Authenticate to complete the OAuth flow in your browser. Add --scope user if you want the server available across all your projects rather than just the current one.

Is Claude bad at generating images?

It isn't bad at it, it doesn't attempt it. That distinction matters when comparing assistants, because Claude is genuinely strong at the visual work around generation: reading and critiquing images, producing precise code-drawn diagrams, and driving a connected design tool. Judging it as a weak image generator measures it against something it never claimed to do.

The Takeaway

Getting images into Claude Code is a keyboard shortcut most people have wrong. Ctrl+V, even on a Mac.

Getting images out is a one-line command and an OAuth approval, and it turns the terminal into a place where marketing assets actually get made instead of postponed.

If you want the setup, the Krumzi MCP page has the server URL and connection details, and our guide to Claude connectors covers the equivalent flow in the Claude desktop and web apps. For the wider question of what Claude can and can't do with images, we went through it properly in can Claude generate images.

Anthropic's Claude Code MCP documentation is the authoritative reference for the command syntax and transport options if you want to go deeper.