TC

tamerintech/claude-code-generate-images-mcp

Developer tools

이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요. 원문 보기

12 stars 3 forks 품질 66 트렌드 9MIT

Azure OpenAI gpt-image-1 및 Flux-1.1 Pro를 위한 MCP 서버를 사용하여 Claude Code에서 UI 코딩 중에 자동 생성 및 삽입 이미지 자산

개요

Claude Code (또는 다른 도구)를 작성하고 프로젝트에 이미지를 직접 저장 할 수있는 로컬 MCP 서버는 vibe 코드입니다. 그것은 기본적으로 연결, 또는 Azure OpenAI 대안으로. Gemini는 빠르고 관대 한 무료 계층을 가지고 있으며 대부분의 사용 사례에 적합합니다. Azure는 플럭스 1.1 지원 당신이 더 많은 통제를 필요로 하는 경우에 직업과 gpt-image-1. * , 당신은 페이지 또는 기능을 요청, 또한 배경을 요청, 아이콘, 또는 일러스트, 서버는 당신의 repo에 자산을 작성, Claude 코드를 사용하여. *, 디자인 공구와 파일 매니저 사이 shuffling 없음, 당신은 초점을 지킵니다. * , 신속한 및 폴더는 작업 흐름의 일부이므로 결과가 조직됩니다. * , 자산은 당신의 부호에 살고, 검토하고 갱신하게 쉬운. 당신은 영웅 배경 및 섹션 아트와 함께 전체 웹 사이트를 구축 할 수 있습니다, 앱 아이콘 및 온보드 일러스트를 만들, 또는 여전히 깨끗하고 전문적인 내부 도구를 배송. installer checks prerequisites, installs Dependencies, 생성 또는 유지.

개요(AI 번역)

**Audi-powered 이미지 생성을 위한 오픈 소스 로컬 MCP 서버 **

Claude Code (또는 다른 도구)를 작성하고 프로젝트에 이미지를 직접 저장 할 수있는 로컬 MCP 서버는 vibe 코드입니다. 기본적으로 Google Gemini (Nano Banana) 또는 Azure OpenAI를 대안으로 연결합니다. Gemini는 빠르고 관대 한 무료 계층을 가지고 있으며 대부분의 사용 사례에 적합합니다. Azure는 Flux 1.1을 지원합니다. 당신이 더 많은 통제를 필요로 하는 경우에 직업과 gpt-image-1.

그것이 무엇인지, 그리고 왜 도움이

  • ** 편집기의 한 흐름 **, 당신은 페이지 또는 기능을 요청, 또한 배경, 아이콘, 또는 일러스트, 서버는 당신의 repo에 자산을 작성, Claude는 코드를 사용합니다.
  • ** Fewer 스위치 **, 디자인 도구와 파일 관리자 사이에 shuffling, 당신은 초점을 유지.
  • ** 일관된 자산**, 신속한 및 폴더는 워크플로우의 일부이므로 결과가 조직됩니다. *Reproducible, 자산은 코드로 살고, 검토 및 업데이트가 쉽습니다.

당신은 영웅 배경 및 섹션 아트와 함께 전체 웹 사이트를 구축 할 수 있습니다, 앱 아이콘 및 온보드 일러스트를 만들, 또는 여전히 깨끗하고 전문적인 내부 도구를 배송.


빠른 시작, 설치

이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요.

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.

  1. Install dependencies
npm install
  1. Create environment file
cp .env.example .env
  1. 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
  1. 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"]
    }
  }
}
  1. 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"] } } }