tamerintech/claude-code-generate-images-mcp

このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。原文を見る

12 stars 3 forks 品質 66 トレンド 9MIT

Auto generate and insert image assets during UI coding in Claude Code, using an MCP server for Azure OpenAI gpt-image-1 and Flux-1.1 Pro

概要

A local MCP server that lets Claude Code (or other tools) to generate and save images directly into your project, while you vibe code. It connects to by default, or Azure OpenAI as an alternative. Gemini is fast, has a generous free tier, and works great for most use cases. Azure supports Flux 1.1 Pro and gpt-image-1 if you need more control. * , you ask for a page or a feature, also ask for backgrounds, icons, or illustrations, the server writes assets into your repo, Claude uses them in code. * , no shuffling between design tools and file managers, you keep focus. * , prompts and folders are part of your workflow, so results stay organized. * , assets live with your code, easy to review and update. You can build a full website with hero background and section art, create app icons and onboarding illustrations, or ship internal tools that still look clean and professional. The installer checks prerequisites, installs dependencies, creates or keeps .

README

以下は原文 README の抜粋です。原文を見る。

Claude Code Image Generation MCP Server

An open-source local MCP server for AI-powered image generation for your vibe coding development

A local MCP server that lets Claude Code (or other tools) to generate and save images directly into your project, while you vibe code. It connects to Google Gemini (Nano Banana) by default, or Azure OpenAI as an alternative. Gemini is fast, has a generous free tier, and works great for most use cases. Azure supports Flux 1.1 Pro and gpt-image-1 if you need more control.

What it is, and why it helps

One flow in your editor, you ask for a page or a feature, also ask for backgrounds, icons, or illustrations, the server writes assets into your repo, Claude uses them in code.
Fewer switches, no shuffling between design tools and file managers, you keep focus.
Consistent assets, prompts and folders are part of your workflow, so results stay organized.
Reproducible, assets live with your code, easy to review and update.

You can build a full website with hero background and section art, create app icons and onboarding illustrations, or ship internal tools that still look clean and professional.

Quick start, installer

Linux / macOS / WSL

git clone https://github.com/TamerinTECH/claude-code-generate-images-mcp.git
cd claude-code-generate-images-mcp
./install.sh

Windows PowerShell

git clone https://github.com/TamerinTECH/claude-code-generate-images-mcp.git
cd claude-code-generate-images-mcp
.\install.ps1

Windows PowerShell (if scripts are blocked)

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
.\install.ps1

The installer checks prerequisites, installs dependencies, creates or keeps .env, and can register the MCP server for Claude Code.

Manual setup

Do it by hand if you prefer.

Install dependencies

npm install

Create environment file

cp .env.example .env

Set Azure variables in .env

AZURE_OPENAI_ENDPOINT=https://your-resource.openai.azure.com
AZURE_OPENAI_API_KEY=your-api-key
AZURE_OPENAI_DEPLOYMENT=flux-1-1-pro
AZURE_OPENAI_API_VERSION=2025-04-01-preview

Register the MCP server in Claude Code Add an entry like,

{
  "mcpServers": {
    "image-generator": {
      "command": "node",
      "args": ["/claude-code-generate-images-mcp/src/index.js"]
    }
  }
}

Run a quick check

node src/index.js

Working in Claude Code

GitHub で README 全文を見る

インストール

This server does not publish a one-line install command.

Open the repository installation guide MCP 初心者？mcpskill.org のガイドから始めましょう →

設定

{
  "mcpServers": {
    "image-generator": {
      "command": "node",
      "args": ["<absolute-path>/claude-code-generate-images-mcp/src/index.js"]
    }
  }
}