gpt-image-2-mcp-server

English · 中文

You don't need a specialist design AI anymore. gpt-image-2 can draw any UI you can describe — landing pages, dashboards, mobile screens, components — and your coding agent reads the result and ships the code. One MCP, one model, one round-trip.

prompt → gpt-image-2 → your agent reads the image → working code

The era of paying for separate "AI design tools" is over. Hand the picture straight to Claude Code (or Cursor / Cline / any MCP-aware agent) and let it build the real thing.

Works out of the box with a free key from openai-hub.com, or point it at any OpenAI/Gemini-compatible endpoint you control.

---

Features

• Replaces specialist design tools. Anything you'd ask Figma AI, v0, or Galileo for — just describe it. gpt-image-2 produces a real high-fidelity image, your agent turns it into code.
• Two models, auto-routed: gpt-image-2 (OpenAI schema) and gemini-3.1-flash-image-preview (Gemini schema). Routes by model name, no extra config.
• Two tools:
  • generate-image — text → image
  • edit-image — image + prompt → image (file path, URL, or base64 input)
• Design presets baked in: web-landing, mobile-app, dashboard, component, wireframe. Saves you from rewriting "modern Tailwind aesthetic, mobile-first…" every time.
• Returns the image inline so the agent can read it and write code in the same turn.
• Configurable: bring your own BASE_URL and API_KEY, or use the defaults.

---

Install

# In your MCP client config — no global install needed
npx -y gpt-image-2-mcp-server

Claude Code

claude mcp add gpt-image-2 \
  --env API_KEY=sk-xxxxx \
  -- npx -y gpt-image-2-mcp-server

Cursor / Cline / generic MCP client

Add to your mcp.json / settings:

{
  "mcpServers": {
    "gpt-image-2": {
      "command": "npx",
      "args": ["-y", "gpt-image-2-mcp-server"],
      "env": {
        "API_KEY": "sk-xxxxx"
      }
    }
  }
}

---

Get a key

Default BASE_URL is https://api.openai-hub.com — a multi-model hub that proxies both OpenAI and Gemini.

👉 Get a free key here

You can also point it at:

• OpenAI directly: BASE_URL=https://api.openai.com
• Google directly: BASE_URL=https://generativelanguage.googleapis.com
• Any other OpenAI/Gemini-compatible proxy

---

Configuration

Env var	Default	Description
API_KEY	(required)	Your provider key
BASE_URL	https://api.openai-hub.com	Provider endpoint
DEFAULT_MODEL	gpt-image-2	Used when the tool call omits model
DEFAULT_OUTPUT_DIR	./generated_images	Where images are saved

---

Tool reference

generate-image

Param	Type	Default	Notes
prompt	string	(required)	Image description
model	enum	gpt-image-2	gpt-image-2 or gemini-3.1-flash-image-preview
aspect_ratio	enum	1:1	1:1, 16:9, 9:16, 4:3, 3:4, 3:2, 2:3, 21:9
quality	enum	auto	auto, low, medium, high (gpt-image-2 only)
resolution	enum	2K	1K, 2K, 4K
n	int	1	1–4
template	enum	—	web-landing, mobile-app, dashboard, component, wireframe
output_dir	string	env default	Save directory
filename	string	timestamp	Custom filename prefix (no extension)

edit-image

Same as above plus:

Param	Type	Notes
source_image	string	Local path / URL / data:image/...;base64,...
mask	string	Optional mask (gpt-image-2 only)

---

The design → code workflow

In Claude Code:

You: Generate a landing page hero for a B2B SaaS analytics tool.
     Use the web-landing template, 16:9, then build the React +
     Tailwind component matching that design.

Claude: [calls generate-image with template=web-landing, aspect_ratio=16:9]
        [reads the returned image]
        [writes Hero.tsx that matches]

Iterate by editing:

You: The headline is too small in the mockup. Edit the image to make it
     larger, then update the component.

Claude: [calls edit-image with source_image=./generated_images/...png]

---

Why a hub?

api.openai-hub.com lets one key reach gpt-image-2, Gemini, Grok image, and the rest. If you prefer to bring your own keys for each provider, set BASE_URL per-provider and run multiple instances of this MCP under different names — that works too.

---

Local development

git clone https://github.com/openai-hub/gpt-image-2-mcp-server.git
cd gpt-image-2-mcp-server
npm install
npm run build
node dist/index.js   # speaks MCP over stdio — wire it into your client

Verifying your provider

Two smoke scripts live at the repo root:

# Hits the raw OpenAI + Gemini endpoints directly — confirms the hub
# accepts both schemas at the URLs this MCP routes to.
API_KEY=sk-xxx node smoke.mjs

# End-to-end MCP test: spawns dist/index.js, calls generate-image,
# verifies a PNG lands on disk.
API_KEY=sk-xxx node smoke-mcp.mjs

Use these when adding a new model or swapping in a different BASE_URL.

---

License

MIT

---

✨ Powered by openai-hub.com — multi-model image gen for AI agents.