To generate images in Claude Code through a creative MCP, begin with the page in the repository—not with a free-form image prompt. Claude Code can inspect the component, turn its constraints into a structured asset brief, discover the connected server's tools, and coordinate an approved request. Pixel creation happens in the external image service. A person still approves the spend, checks the visual, and decides whether the file belongs in the site.
That division of work is what makes the workflow useful. The result is not merely “an AI image.” It is a hero, feature graphic, background, or placeholder with a known purpose, size, crop, filename, alt-text decision, reviewer, and destination.
Host disclosure: Claude Code is an Anthropic product. Oakgen is not affiliated with or endorsed by Anthropic.
Oakgen has not published a production MCP endpoint, public authentication instructions, or a dated Claude Code compatibility result. Its planned first MCP scope is image-only. This draft explains the production workflow without inventing connection details.
Use the repository brief below to shape a concrete direction today. After Agent Chat passes release approval, you can structure that direction there; create the reviewed source now with the current AI image generator.
The useful division of responsibility
| Stage | Claude Code coordinates | Connected image service provides | Human owns | |---|---|---|---| | Context | Reads the page, component, content, and project rules | Nothing | Confirms the business goal | | Specification | Drafts the asset brief and supported request | Tool and model schemas | Accepts visual constraints | | Preflight | Compares options and requests a quote | Authoritative availability and pricing | Approves spend | | Production | Submits the approved request and keeps its identity | Runs the image job and returns a result | Decides whether to wait or stop | | Review | Checks the result against measurable requirements | The source asset or asset reference | Judges truth and brand fit | | Placement | Proposes a path, markup, and alt text | Nothing | Approves repository mutation |
MCP is the connection layer. Claude Code is the coding host. Neither should be described as the pixel creator. The connected image system performs that work.
This distinction also creates better failure handling. If the host times out, that does not prove the external job failed. If a result appears in a conversation, that does not prove it has been optimized or saved in the correct project directory. Each state needs evidence.
Who this is for
This guide is for a developer, technical marketer, founder, or product team already maintaining a website with Claude Code. The immediate job might be:
- a 1600×900 product hero with a quiet left safe area for copy;
- a square integration graphic used in a responsive card grid;
- a wide editorial cover with no text baked into the image;
- a subtle background that must preserve foreground contrast;
- a temporary launch visual that still needs a truthful product representation.
The workflow earns its overhead when the repository contains information the image request needs: the real slot dimensions, CSS crop behavior, page copy, brand tokens, existing filenames, or an asset build step.
If the task is broad visual exploration, work in a visual environment first. Generate options, choose a direction, and bring the approved source into the repository. A coding agent is strongest when the job has explicit constraints and a verifiable destination.
Methodology and evidence boundary
Methodology date: 2026-07-27.
We checked Anthropic's official Claude Code MCP documentation, Anthropic's Claude image-capability guidance, and the official Model Context Protocol tools specification. Anthropic documents that Claude Code can connect to MCP servers and provides local, project, and user configuration scopes. The MCP specification allows tool results to contain text, image content, resource links, embedded resources, and structured content.
Those protocol and host facts do not establish Oakgen compatibility. They also do not establish that a returned binary is automatically downloaded, named, optimized, or placed in a repository. Those steps require a dated clean-account test after Oakgen publishes release documentation.
For the conceptual layer, read what an AI image generation MCP server does. For setup intent, keep the release-gated Oakgen MCP and Claude connection guide separate from this production tutorial.
Start by reading the real image slot
Open the page component and answer five questions before discussing style:
- What job does this image perform?
- What space does it occupy at each breakpoint?
- Does CSS crop it with
cover, contain it, or preserve intrinsic dimensions? - Will text, navigation, or a call to action overlap it?
- Which repository rule controls path, format, optimization, and naming?
A desktop viewport width is not automatically the correct export width. A 1440-pixel browser can contain a 640-pixel image column. A full-bleed mobile crop may require the subject to stay inside the center 40 percent. Read the component, container, and responsive behavior.
Then inspect nearby assets. Existing files often reveal the actual convention better than a generic best-practice article: kebab-case names, a public/images/blog/ hierarchy, WebP production derivatives, or source files kept outside public assets.
Here is where this breaks: a technically valid 16:9 image can still fail if the subject sits beneath the headline at one breakpoint. Safe area belongs in the brief, not in a note added after generation.
Repository image asset brief
Copy this brief into the issue, working note, or generation record. Do not start until every required field has a real value.
| Field | What to record | Example |
|---|---|---|
| Page role | Hero, feature support, background, social proof, placeholder, or decorative | Product hero |
| Subject | Exact person, product, object, scene, or abstract concept | Handheld analytics device on a studio table |
| Aspect ratio | Ratio derived from the component and responsive crop | 16:9 with center-safe mobile crop |
| Dimensions | Target display size and export size | Display 1280×720; export 1600×900 |
| Safe area | Region kept quiet for overlays and cropping | Left 42% low-detail; subject in center-right |
| File format | Project-approved source and production format | WebP production derivative |
| Filename | Stable descriptive name including extension | analytics-device-hero-v01.webp |
| Alt text | Functional draft, or empty when truly decorative | “Analytics device showing weekly sales trend” |
| Brand constraints | Palette, reference assets, logo/text policy, factual invariants | Warm charcoal; no invented UI; no baked-in copy |
| Approval owner | Named role accepting spend and visual output | Growth design lead |
| Repository destination | Staging path first, then final approved path | Staging outside public/; final public/images/home/ |
The brief separates facts from taste. Dimensions, filename, product invariants, and text policy are testable. “Premium” is not. Translate taste words into direction: low-key studio lighting, restrained palette, generous negative space, no glossy stock-photo treatment.
The approval owner is not administrative decoration. If no one owns acceptance, the agent can generate endless variants without knowing when the work is done.
Brief-to-visual CTA: When the brief is stable, compare a second visual direction in Oakgen's Image Arena before choosing a source.
The preflight-to-placement workflow
Use this sequence:
page context → asset brief → model discovery → schema inspection → cost approval → one start → status and asset retrieval → human visual review → repository placement → build, crop, and accessibility check
1. Plan before selecting a model
Ask Claude Code to summarize the slot and fill the brief from repository evidence. Require it to list unknowns instead of guessing. A missing product reference, unclear crop rule, or undecided text policy should stop generation.
Model choice comes after the job definition. A model suited to artistic concepts may be poor at reference fidelity. A strong product renderer may be unnecessary for a subtle abstract background.
2. Discover tools and inspect schemas
Once a compatible server is actually connected, inspect what it exposes. Do not assume a parameter named width, quality, or reference_strength exists. MCP tools publish input schemas; the host should use those schemas rather than importing fields from another product.
The schema is the request contract. Validate required references, allowed aspect ratios, output count, format, and any limits before pricing.
3. Quote the exact request
Cost approval should describe the same payload that will start generation. If the prompt, model, dimensions, output count, or references change after the quote, request a new quote.
Record:
- selected model or workflow;
- exact input payload;
- number of outputs;
- quoted cost and currency or credits;
- approver and time;
- stable request identity, if supported.
Do not let “approve tool” silently combine several decisions. Approval to inspect a schema is not approval to spend. Approval to spend is not approval to change repository files.
4. Start once and preserve identity
Submit one approved start. Save the durable job identity returned by the service. If the host reports a timeout, query that identity before retrying.
The dangerous recovery pattern is starting the same paid job again because no finished image appeared immediately. Long-running work may be accepted while the client waits. A stable request identity and job handle make recovery possible.
5. Check status and retrieve the result
Treat “accepted” and “complete” as different states. Poll or re-check according to the server's documented behavior. A completed tool result might contain inline image data, a resource link, structured metadata, an asset identifier, or another documented shape.
Do not promise a specific Oakgen result shape before release testing. Do not say the image automatically lands in the repository. Retrieve it according to the released contract, verify its media type, and stage it outside the production asset path.
6. Review before repository placement
The minimum review covers:
- product shape, label, UI, and other factual invariants;
- unwanted or malformed text;
- subject position at desktop and mobile crops;
- dimensions, ratio, format, and file size;
- brand palette and visual direction;
- reference-image rights and usage policy;
- whether the proposed alt text matches the final use.
This is good enough for testing, not final hero creative, if the product is approximate or the crop only works at one breakpoint. Mark it as rejected or keep it in a non-production working area.
7. Approve the repository change separately
After visual approval, request a separate filesystem change. Move or convert the asset into its final destination, update markup, and run the project's checks.
Review git status and the relevant diff. Binary content is not readable like source code, so record dimensions, format, byte size, checksum if useful, and the generation identity. Verify the production build and inspect the page at target breakpoints.
For broader permission design, use the MCP security checklist for creative teams.
A prompt that produces an inspectable plan
Use a planning prompt before any paid request:
Read the target component, its responsive styles, nearby image conventions, and project instructions. Draft a Repository Website Image Brief containing page role, subject, aspect ratio, export dimensions, responsive safe area, approved format, filename, alt-text decision, brand constraints, approval owner, staging location, and final destination. List unknowns. Do not generate, spend, download, or modify repository files.
After the brief is approved:
Discover the connected image tools and inspect the exact schema for a suitable image workflow. Prepare one request matching the approved brief and obtain a price. Show the complete payload and quote. Stop for explicit spend approval. Do not start a job or change repository files.
The stop conditions matter more than eloquence. A useful prompt makes unauthorized actions difficult.
When to use Claude Code, Oakgen, or a designer
| Situation | Best starting point | Why | |---|---|---| | Exact component, path, crop, and build rules already exist | Claude Code workflow | Repository context shapes the specification | | You need to explore several visual directions | Oakgen image generator or Image Arena | Visual comparison is the primary job | | Product fidelity, campaign concept, or art direction is high stakes | Designer-led workflow | Human craft and accountability dominate | | You need one temporary, low-risk visual | Oakgen web workflow | Less coordination overhead | | You need repeatable repository asset records | Coding-agent workflow after compatibility testing | Provenance and placement are part of delivery |
Decision CTA: If the matrix points to visual exploration, create the first direction in Oakgen's image generator. If it points to repository automation, keep the MCP route gated until compatibility testing is complete.
What I would do: explore in Oakgen until one direction survives review, then use Claude Code to integrate the approved asset. I would only run generation from the coding host when the brief, approvals, and result-handling path are already tested.
Common mistakes
Asking for “a cool hero image”
It supplies taste but omits purpose, crop, safe area, product truth, and destination. Fill the asset brief first.
Treating the viewport as the export size
Inspect the actual image container, device pixel needs, build pipeline, and responsive crop.
Changing inputs after cost approval
The quote no longer represents the job. Re-price the final payload.
Retrying a slow job with a new start
Check the saved job handle. A client timeout does not prove the service discarded the work.
Writing directly into production assets
Stage, inspect, optimize, and approve first. Generation permission and repository mutation are separate.
Using alt text as a prompt recap
Alt text describes the image's function in its page context. Decorative images should normally have empty alt text.
Crediting the wrong system
Claude Code coordinates the workflow; pixel creation happens in the connected image service.
Guessing Oakgen connection details
No public endpoint, authentication flow, or named-host compatibility result should appear until Oakgen publishes and tests them.
Frequently Asked Questions
Can Claude Code generate images by itself?
Claude Code can plan, invoke tools, and work with repository context. A connected external image service performs image rendering. Keep those responsibilities clear in documentation and reviews.
How does Claude Code use an image MCP server?
Claude Code connects to a configured MCP server, discovers exposed tools, reads input schemas, and requests operations subject to host permissions. The precise result experience depends on both the server and the Claude Code version and configuration.
What belongs in a website image brief?
At minimum: page role, subject, aspect ratio, dimensions, safe area, file format, filename, alt-text decision, brand constraints, approval owner, and repository destination.
Should generated images go directly into the repository?
No. Put the first returned asset in a staging location. Review truth, crop, quality, rights, dimensions, and format. Approve final placement as a separate action.
How do I prevent duplicate image-generation charges?
Keep the approved payload stable, use one start with stable identity where available, save the returned job handle, and query status after interruptions.
Can Claude Code review a generated image?
It may help check a result that the host can access against written criteria. Human review remains necessary for factual product details, brand acceptance, and publication.
Which format should I use?
Follow project rules. WebP is often effective for photographic site assets, PNG is useful for transparency, and SVG suits authored vector graphics—not arbitrary generated raster art. Test build support and quality.
Is Oakgen MCP available in Claude Code?
Oakgen is not claiming a released public MCP endpoint or Claude Code compatibility today. The planned V1 is image-only, and publication requires a clean-account compatibility test.
Official Sources
- Claude Code MCP documentation
- Anthropic guidance on whether Claude produces images
- Model Context Protocol tools specification
Create and review the source image now with Oakgen's AI image generator. Treat the MCP path as release-gated until Oakgen publishes its endpoint, authentication flow, and dated compatibility evidence.
