Claude代码映像生成MCP服务器
一个开源的本地MCP服务器，用于为您的vibe编码开发生成AI驱动的图像
 ](https://nodejs.org/) 
Claude Code Image Generation Workflow
一个本地MCP服务器，允许Claude Code（或其他工具）在您感知代码时直接生成图像并将其保存到您的项目中。它连接到 谷歌双子座（Nano Banana） 默认情况下，或者Azure OpenAI作为替代方案。Gemini速度很快，有一个慷慨的免费层，对大多数用例都很有效。如果您需要更多控制，Azure支持Flux 1.1 Pro和gpt-image 1。
它是什么，为什么它有帮助
- 编辑器中的一个流程，您要求提供页面或功能，还要求提供背景、图标或插图，服务器将资产写入您的仓库，Claude在代码中使用它们。
- 更少的开关，无需在设计工具和文件管理器之间来回切换，您可以保持专注。
- 一致的资产，提示和文件夹是您工作流程的一部分，因此结果保持有序。
- 可复现的，资产与您的代码共存，易于查看和更新。
你可以构建一个有英雄背景和剖面图的完整网站，创建应用程序图标和入职插图，或者发布看起来干净专业的内部工具。
______________________________________________________________________
快速启动，安装程序
Linux/MOSC/WSL
git clone https://github.com/TamerinTECH/claude-code-generate-images-mcp.git
cd claude-code-generate-images-mcp
./install.shWindows PowerShell
git clone https://github.com/TamerinTECH/claude-code-generate-images-mcp.git
cd claude-code-generate-images-mcp
.\install.ps1Windows PowerShell（如果脚本被阻止）
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
.\install.ps1安装程序检查先决条件、安装依赖关系、创建或保留 .env，并且可以为Claude Code注册MCP服务器。
______________________________________________________________________
手动设置
如果你愿意，可以手工做。
- 安装依赖项
npm install- 创建环境文件
cp .env.example .env- 在中设置Azure变量
.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- 在Claude Code中注册MCP服务器
添加一个条目，例如，
{
"mcpServers": {
"image-generator": {
"command": "node",
"args": ["/claude-code-generate-images-mcp/src/index.js"]
}
}
}- 快速检查
node src/index.js______________________________________________________________________
在克劳德代码中工作
用通俗易懂的语言描述你希望在项目中做出的改变。如果更改需要图像或图形，请简要提及，例如教室背景、功能图标、入职说明。
- 您可以描述功能或进行编辑，例如添加定价页面、改进入职流程、创建时间表视图。
- 如果需要视觉效果，请高层次地说明它们是什么，例如教室背景、三个功能图标、一个空状态插图。
- Claude代理扩展您的描述，选择大小和格式，然后使用此MCP服务器生成图像。
- 服务器使用稳定的路径将文件保存到您的存储库中，Claude会更新您的代码以引用它们。
- 您查看更改，运行应用程序并提交。
您不需要详细的图像提示。简短的描述就足够了，代理会增强并执行它们。
新应用或现有应用的提示示例
简单的提示，特定的用例，没有大小。代理人将填写技术细节。
创建新的web应用程序
* Build a landing page for a study platform, add a classroom background with students working at desks, and three icons for practice, feedback, and progress.
* Create a marketing page for a banana-import startup, add photos or illustrations of banana stock warehouses and shipping crates, include icons for sourcing, logistics, and quality.
* Build a site for a local sports club, add a background with a weights rack in a gym, and icons for classes, trainers, and timetable.创建新的全栈应用程序
* Scaffold a study planner with a simple dashboard, add a blackboard style background for the dashboard, and category icons for homework, tests, and notes.
* Build an inventory app for a small bookstore, add a bookshelf background, and icons for fiction, science, and children sections.
* Create a fitness tracking app with a basic analytics view, add a training hall background, and an empty state illustration that shows no recent workouts yet.扩展现有应用程序
* Add a settings page with sections for profile, notifications, and privacy, generate matching icons for each section, and a light paper texture background for the page.
* Improve onboarding, add three illustrations, student learning at home on a tablet, teacher guiding a group in class, celebration of first milestone.
* Add a help center, generate a header image with a support agent at a laptop, and small icons for articles, step by step guides, and contact.店铺和品牌任务
* Prepare store materials for a language learning app, generate a simple wordmark app icon, and backgrounds that show classroom scenes and flashcards.
* Add a branded header to a personal finance tool, create a clean wordmark and a background with a soft line chart motif.
* Create a set of user avatars that represent roles, teacher, student, and parent, keep the style consistent with the app.______________________________________________________________________
模型
- 默认值（推荐）: 谷歌双子座 （又名Nano Banana）-快速、慷慨的免费套餐，非常适合大多数用例。非常适合原型制作和生产。
- Azure替代方案: Flux 1.1专业版 -当您需要Azure的基础架构或特定的大小控制（256x256-1440x1440，32的倍数）时。
- Azure替代方案: gpt图像1 -针对特定合规性或区域要求的Azure OpenAI本机模型。
- 可扩展：为其他提供程序或自定义终结点添加适配器。
通过更改来切换提供商 IMAGE_PROVIDER 在 .env (google 或 azure).
______________________________________________________________________
配置参考
.env 钥匙：
提供商选择：
IMAGE_PROVIDER-选择google（默认）或azure
谷歌双子座（当IMAGE_PROVIDER=谷歌时）：
GEMINI_API_KEY-获取免费钥匙https://aistudio.google.com/app/apikey
Azure OpenAI（当IMAGE_PROVIDER=Azure时）：
AZURE_OPENAI_ENDPOINT-您的Azure资源端点AZURE_OPENAI_API_KEY-你的Azure API密钥AZURE_OPENAI_DEPLOYMENT-模型部署名称（flux-1-1-pro或gpt-image 1）AZURE_OPENAI_API_VERSION-API版本（默认：2025-04-01-评审）
可选：
OUTPUT_DIR-生成图像的自定义输出目录
您可以调整服务器代码中的输出文件夹和文件命名，以适应您的仓库布局。
______________________________________________________________________
如何获得Google Gemini API密钥
按照以下步骤为Google的Gemini模型（Nano Banana）创建您自己的API密钥。
1.创建或选择Google帐户
使用您现有的Google帐户，或在以下网址创建一个新帐户 accounts.google.com.
2.打开谷歌人工智能工作室
- 首选 谷歌人工智能工作室: https://aistudio.google.com
- 使用您的Google帐户登录。
3.创建一个新的API密钥
- 在AI Studio中，单击 API密钥 在左侧菜单中（或 获取API密钥 按钮）。
- 点击 创建API密钥.
- 如果被问到，请选择一个Google Cloud项目或创建一个新项目。
- 确认并 复制生成的API密钥.
此键可用于调用Gemini模型，包括 gemini-2.0-flash-exp （纳米香蕉）。
4.如果需要，启用计费
- 谷歌双子座有一个慷慨的免费等级（每分钟15个请求）。
- 某些使用级别可能需要在连接的Google Cloud项目上计费。
- 如果AI Studio要求您启用计费，请按照步骤操作并附上付款方式。
- 典型成本：付费层每张图片约0.039美元（按需付费）。
5.将密钥添加到MCP服务器
在运行MCP服务器的计算机上：
- 创建或编辑您的
.env项目文件夹中的文件。
- 按如下方式添加密钥：
IMAGE_PROVIDER=google
GEMINI_API_KEY=your_api_key_here- 保存文件并重新启动MCP服务器（或重新启动Claude Code）。
您的API密钥在您的系统上保持本地。 MCP项目不会将其发送给任何其他人，也不会将其包含在存储库中。
______________________________________________________________________
故障排除
- PowerShell阻止脚本，跑
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser- Claude Code未列出服务器，验证
mcpServers路径并重新启动编辑器。
- 图像未保存，检查
.env输出文件夹的值和写入权限。
______________________________________________________________________
贡献
欢迎社区贡献，关注实际的开发人员流程。好的区域、更好的默认值、新的输出文件夹、模型适配器和测试。
______________________________________________________________________
免责声明
该项目由TamerinTECH GmbH开源提供。它不是Anthropic、谷歌、微软或Azure的官方产品。使用风险自负。您负责API的使用和成本（Google Gemini或Azure OpenAI）。无保修。
许可证
麻省理工学院，见 LICENSE.