MCP 图像生成器

![npm version](https://badge.fury.io/js/mcp-image-generator)
![License: MIT](https://opensource.org/licenses/MIT)

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

功能特性

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

安装

$3

bash

全局安装

npm install -g mcp-image-generator



或者本地安装

npm install mcp-image-generator

$3

bash

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

cd mcp-image-generator

pnpm install





快速开始



$3



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



$3



#### 方式一：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

 - 生成占位图片



$3



#### Windows



%APPDATA%\Cursor\User\settings.json





#### macOS



~/Library/Application Support/Cursor/User/settings.json





#### Linux



~/.config/Cursor/User/settings.json





$3



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:*"

         }

       }

     }

   }





可用工具



$3

基础图片生成工具，需要提供英文提示词。



$3

智能占位图片生成工具，根据用途自动优化提示词。



支持的用途：

-

hero-banner

 - 首页横幅

-

product-showcase

 - 产品展示

-

user-avatar

 - 用户头像

-

background

 - 背景图

-

logo

 - 标志设计

-

icon

 - 图标

-

illustration

 - 插图

-

photo

 - 摄影



支持的风格：

-

modern

 - 现代简约

-

minimal

 - 极简主义

-

corporate

 - 企业风格

-

colorful

 - 多彩活力

-

elegant

 - 优雅奢华

-

casual

 - 休闲友好



使用示例



$3



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

$3

javascript

{

  "purpose": "background",              // 图片用途

  "description": "现代办公室环境",      // 中文描述

  "style": "modern",                    // 风格

  "width": 1920,                        // 宽度

  "height": 1080                        // 高度

}

技术栈

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

许可证

MIT License