gpt-image-2-mcp-server

English · 中文

不再需要专业设计 AI。 gpt-image-2 能画出任何你能描述的 UI —— 落地页、看板、移动端界面、单组件 —— 你的编程 Agent 看图就能写出对应代码。一个 MCP，一个模型，一次往返。

prompt → gpt-image-2 → Agent 读图 → 真实可运行代码

为单独的"AI 设计工具"付费的时代结束了。把图直接交给 Claude Code（或 Cursor / Cline / 任何 MCP 客户端），让它真正去把界面落成代码。

开箱即用：用 openai-hub.com 免费 key，或指向任何兼容 OpenAI / Gemini 协议的端点。

特性

• 替代专业设计工具。 你会问 Figma AI、v0、Galileo 的需求，直接描述就行。gpt-image-2 出真实高保真图，Agent 转代码。
• 双模型自动路由：gpt-image-2（OpenAI schema）+ gemini-3.1-flash-image-preview（Gemini schema）。按模型名识别，零额外配置。
• 两个工具：
  • generate-image —— 文生图
  • edit-image —— 图生图（接受本地路径 / URL / base64）
• 内置设计预设：web-landing、mobile-app、dashboard、component、wireframe，省去每次重写"现代 Tailwind 风格、mobile-first……"。
• 图片直接 inline 返回，Agent 同一轮就能读图写代码。
• 可配置：可以用默认 BASE_URL/API_KEY，也可以全部换成你自己的。

安装

# 写进 MCP 客户端配置，无需全局安装
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 / 任意 MCP 客户端

在 mcp.json 或对应配置里加：

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

获取 API Key

默认 BASE_URL 指向 https://api.openai-hub.com —— 一个聚合 OpenAI、Gemini、Grok 等多模型的中转 hub。

👉 免费注册一个 key

也可以指向：

• OpenAI 直连：BASE_URL=https://api.openai.com
• Google 直连：BASE_URL=https://generativelanguage.googleapis.com
• 任何兼容 OpenAI / Gemini 协议的代理

配置

| 环境变量 | 默认值 | 说明 | |---|---|---| | API_KEY | （必填） | 你的 provider key | | BASE_URL | https://api.openai-hub.com | 服务端点 | | DEFAULT_MODEL | gpt-image-2 | 工具调用未指定 model 时使用 | | DEFAULT_OUTPUT_DIR | ./generated_images | 图片保存目录 |

工具参数

generate-image

| 参数 | 类型 | 默认 | 说明 | |---|---|---|---| | prompt | string | （必填） | 图片描述 | | model | enum | gpt-image-2 | gpt-image-2 或 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） | | resolution | enum | 2K | 1K、2K、4K | | n | int | 1 | 1–4 | | template | enum | — | web-landing、mobile-app、dashboard、component、wireframe | | output_dir | string | 取环境变量 | 保存目录 | | filename | string | 时间戳 | 自定义文件名前缀（无后缀） |

edit-image

在 generate-image 的基础上加：

| 参数 | 类型 | 说明 | |---|---|---| | source_image | string | 本地路径 / URL / data:image/...;base64,... | | mask | string | 可选蒙版（仅 gpt-image-2） |

设计稿 → 代码 工作流

在 Claude Code 里：

你：帮我生成一个 B2B SaaS 数据分析工具的落地页 hero。
    用 web-landing 模板、16:9，然后照这个设计写一个
    React + Tailwind 组件。

Claude：[调用 generate-image，template=web-landing，aspect_ratio=16:9]
        [读取返回的图片]
        [写出对应的 Hero.tsx]

通过编辑迭代：

你：标题太小，把图片里的标题改大一点，然后更新组件。

Claude：[调用 edit-image，source_image=./generated_images/...png]

为什么用 hub？

api.openai-hub.com 让一个 key 同时打到 gpt-image-2、Gemini、Grok 等。如果你想给每家自带 key，把 BASE_URL 指过去、起多个 MCP 实例就行。

本地开发

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   # 标准输入输出跑 MCP，接到你的客户端里

验证你的 provider

仓库根目录有两个 smoke 脚本：

# 直打 OpenAI + Gemini 原始接口，确认 hub 在我们路由的 URL 上
# 接受这两套 schema。
API_KEY=sk-xxx node smoke.mjs

# 端到端 MCP 测试：起 dist/index.js、调 generate-image，
# 确认 PNG 真的落到磁盘。
API_KEY=sk-xxx node smoke-mcp.mjs

加新模型或换 BASE_URL 时跑一遍这个。

许可证

MIT

✨ 由 openai-hub.com 驱动 —— 给 AI Agent 用的多模型图像生成 hub。