MCP 图像生成器

基于ModelScope API的MCP图像生成器服务器，支持生成AI图片用于web设计占位图片。

功能特性

• 🎨 基于提示词生成AI图片
• 🖼️ 专为web设计优化的占位图片生成
• 📐 支持自定义图片尺寸
• 🎭 多种风格选择（现代、简约、企业、彩色等）
• 📁 自动保存到本地文件
• 🚀 支持MCP协议，可与Claude Desktop等客户端集成

安装

从npm安装（推荐）

# 全局安装
npm install -g mcp-image-generator

# 或者本地安装
npm install mcp-image-generator

从源码安装

git clone https://github.com/your-username/mcp-image-generator.git
cd mcp-image-generator
pnpm install

快速开始

1. 获取API密钥

前往 ModelScope 注册账号并获取API密钥。

2. 运行方式

方式一：MCP服务器模式（推荐）

# 如果全局安装
mcp-image-generator

# 或者本地运行
node index.js

然后在支持MCP的客户端（如Claude Desktop）中配置此服务器。

方式二：Claude Desktop集成

在Claude Desktop的配置文件中添加：

{
  "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：

   {
     "mcpServers": {
       "image-generator": {
         "command": "mcp-image-generator",
         "args": [],
         "env": {
           "MODELSCOPE_API_KEY": "your-api-key-here"
         }
       }
     }
   }

2. 在Cursor设置中配置

   打开Cursor IDE设置（Ctrl+, 或 Cmd+,），搜索"MCP"并添加配置：

   {
     "mcp.servers": {
       "image-generator": {
         "command": "mcp-image-generator",
         "env": {
           "MODELSCOPE_API_KEY": "your-api-key-here"
         }
       }
     }
   }

3. 或者使用本地路径

   如果你克隆了源码，可以直接指向本地文件：

   {
     "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. 调试模式

   开启调试模式查看详细日志：

   {
     "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

参数说明

{
  "purpose": "background",              // 图片用途
  "description": "现代办公室环境",      // 中文描述
  "style": "modern",                    // 风格
  "width": 1920,                        // 宽度
  "height": 1080                        // 高度
}

技术栈

• Node.js + ES Modules
• ModelScope API
• Sharp (图像处理)
• Axios (HTTP客户端)
• UUID (唯一标识生成)

许可证

MIT License