mcp-image-generator

# MCP 图像生成器 [![npm version](https://badge.fury.io/js/mcp-image-generator.svg)](https://badge.fury.io/js/mcp-image-generator) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) 基于ModelScope API的MCP图像生成器服务器，支持生成AI图片用于web设计占位图片。 ## 功能特性 - 🎨 基于提示词生成AI图片 - 🖼️ 专为web设计优化的占位图片生成 - 📐 支持自定义图片尺寸 - 🎭 多种风格选择（现代、简约、企业、彩色等） - 📁 自动保存到本地文件 - 🚀 支持MCP协议，可与Claude Desktop等客户端集成 ## 安装 ### 从npm安装（推荐） ```bash # 全局安装 npm install -g mcp-image-generator # 或者本地安装 npm install mcp-image-generator ``` ### 从源码安装 ```bash git clone https://github.com/your-username/mcp-image-generator.git cd mcp-image-generator pnpm install ``` ## 快速开始 ### 1. 获取API密钥前往 [ModelScope](https://modelscope.cn) 注册账号并获取API密钥。 ### 2. 运行方式 #### 方式一：MCP服务器模式（推荐） ```bash # 如果全局安装 mcp-image-generator # 或者本地运行 node index.js ``` 然后在支持MCP的客户端（如Claude Desktop）中配置此服务器。 #### 方式二：Claude Desktop集成在Claude Desktop的配置文件中添加： ```json { "mcpServers": { "image-generator": { "command": "mcp-image-generator", "env": { "MODELSCOPE_API_KEY": "your-api-key-here" } } } } ``` #### 方式三：Cursor IDE集成在Cursor IDE中配置MCP服务器： 1. **创建MCP配置文件** 在你的项目根目录或全局配置目录创建 `mcp-config.json`： ```json { "mcpServers": { "image-generator": { "command": "mcp-image-generator", "args": [], "env": { "MODELSCOPE_API_KEY": "your-api-key-here" } } } } ``` 2. **在Cursor设置中配置** 打开Cursor IDE设置（`Ctrl+,` 或 `Cmd+,`），搜索"MCP"并添加配置： ```json { "mcp.servers": { "image-generator": { "command": "mcp-image-generator", "env": { "MODELSCOPE_API_KEY": "your-api-key-here" } } } } ``` 3. **或者使用本地路径** 如果你克隆了源码，可以直接指向本地文件： ```json { "mcp.servers": { "image-generator": { "command": "node", "args": ["path/to/mcp-image-generator/index.js"], "env": { "MODELSCOPE_API_KEY": "your-api-key-here" } } } } ``` 4. **重启Cursor IDE** 配置完成后，重启Cursor IDE以加载MCP服务器。 5. **使用MCP工具** 配置成功后，你可以在Cursor的AI助手中使用以下命令： - `@generate_image` - 生成基础图片 - `@generate_placeholder_image` - 生成占位图片 ### 配置文件位置 #### Windows ``` %APPDATA%\Cursor\User\settings.json ``` #### macOS ``` ~/Library/Application Support/Cursor/User/settings.json ``` #### Linux ``` ~/.config/Cursor/User/settings.json ``` ### 故障排除 1. **MCP服务器未启动** - 检查配置文件语法是否正确 - 确保API密钥设置正确 - 查看Cursor的开发者工具控制台错误信息 2. **命令行工具未找到** - 确保已全局安装: `npm install -g mcp-image-generator` - 检查PATH环境变量是否包含npm全局包路径 3. **API调用失败** - 验证ModelScope API密钥是否有效 - 检查网络连接是否正常 - 确保API密钥有足够的配额 4. **调试模式** 开启调试模式查看详细日志： ```json { "mcp.servers": { "image-generator": { "command": "mcp-image-generator", "env": { "MODELSCOPE_API_KEY": "your-api-key-here", "DEBUG": "mcp:*" } } } } ``` ## 可用工具 ### generate_image 基础图片生成工具，需要提供英文提示词。 ### generate_placeholder_image 智能占位图片生成工具，根据用途自动优化提示词。支持的用途： - `hero-banner` - 首页横幅 - `product-showcase` - 产品展示 - `user-avatar` - 用户头像 - `background` - 背景图 - `logo` - 标志设计 - `icon` - 图标 - `illustration` - 插图 - `photo` - 摄影支持的风格： - `modern` - 现代简约 - `minimal` - 极简主义 - `corporate` - 企业风格 - `colorful` - 多彩活力 - `elegant` - 优雅奢华 - `casual` - 休闲友好 ## 使用示例 ### 在Cursor IDE中使用 1. **生成现代办公室背景** ``` @generate_placeholder_image 用途: background 描述: 现代办公室，干净整洁的工作环境风格: modern 尺寸: 1920x1080 ``` 2. **生成产品展示图片** ``` @generate_placeholder_image 用途: product-showcase 描述: 笔记本电脑产品展示风格: minimal 尺寸: 1200x800 ``` 3. **生成自定义图片** ``` @generate_image 提示词: professional office workspace with natural lighting, modern furniture, clean desk setup 宽度: 1920 高度: 1080 ``` ### 参数说明 ```javascript { "purpose": "background", // 图片用途 "description": "现代办公室环境", // 中文描述 "style": "modern", // 风格 "width": 1920, // 宽度 "height": 1080 // 高度 } ``` ## 技术栈 - Node.js + ES Modules - ModelScope API - Sharp (图像处理) - Axios (HTTP客户端) - UUID (唯一标识生成) ## 许可证 MIT License