Flux Web Image Generator MCP Server

这是一个专门用于生成web设计图片的MCP（Model Context Protocol）服务器。当用户在使用AI设计网页时，如果网页涉及到占位图片等图片信息的展示，就可以通过该MCP调用AI文生图模型，提供对应的英文prompt生成图片，并且图片填充到对应的网站区域。

功能特性

• 🎨 专业网页图片生成: 支持8种常见的网页图片类型
• 🚀 FLUX模型支持: 使用ModelScope的FLUX模型生成高质量图片
• 🔧 灵活配置: 支持预设模板和自定义prompt
• 🔐 安全认证: API密钥通过环境变量传入，不会硬编码
• 📋 丰富工具: 提供3个核心工具和1个资源

支持的图片类型

| 类型 | 名称 | 描述 | |------|------|------| | hero_banner | Hero横幅图片 | 网站首页的主要横幅图片 | | product_showcase | 产品展示图片 | 产品或服务的展示图片 | | team_photo | 团队照片 | 团队成员或公司文化展示图片 | | blog_featured | 博客特色图片 | 博客文章的特色图片 | | service_icon | 服务图标 | 服务或功能的图标式图片 | | background_pattern | 背景图案 | 网站背景或装饰图案 | | call_to_action | 行动号召图片 | 鼓励用户采取行动的图片 | | testimonial_bg | 客户评价背景 | 客户评价部分的背景图片 |

安装和设置

方法一：使用npx（推荐）

# 直接使用npx运行（无需安装）
npx @alchain/mcp-flux-web-image-generator

方法二：全局安装

# 全局安装
npm install -g @alchain/mcp-flux-web-image-generator

# 运行
mcp-flux-web-image-generator

方法三：本地开发

# 克隆仓库
git clone https://github.com/alchain/mcp-flux-web-image-generator.git
cd mcp-flux-web-image-generator

# 安装依赖
npm install

# 构建项目
npm run build

# 运行服务器
npm start

设置API密钥

无论使用哪种方法，都需要设置ModelScope API密钥：

export MODELSCOPE_API_KEY="your_api_key_here"

MCP工具说明

1. generate-web-image

生成网页设计图片的主要工具。

参数:

• type: 图片类型（必选），从8种预设类型中选择
• description: 图片内容描述（必选），中文或英文均可
• customPrompt: 自定义英文prompt（可选），会覆盖默认模板

示例:

{
  "type": "hero_banner",
  "description": "科技公司首页，展示AI和未来科技感",
  "customPrompt": "A futuristic AI technology hero banner, cyberpunk style, neon lights, high-tech atmosphere"
}

2. generate-custom-web-image

使用完全自定义prompt生成网页图片。

参数:

• prompt: 英文图片生成prompt（必选）
• description: 图片用途描述（可选）

示例:

{
  "prompt": "A minimalist e-commerce product photo, white background, professional lighting",
  "description": "电商产品页面使用"
}

3. list-image-types

列出所有支持的图片类型和说明。

参数: 无

MCP资源说明

image-templates

提供所有网页图片类型模板的JSON数据。

URI: templates://web-image-types

在MCP客户端中使用

Claude Desktop配置

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

{
  "mcpServers": {
    "flux-web-image-generator": {
      "command": "npx",
      "args": ["-y", "@alchain/mcp-flux-web-image-generator"],
      "env": {
        "MODELSCOPE_API_KEY": "your_api_key_here"
      }
    }
  }
}

Cursor配置

在Cursor的mcp.json配置文件中添加：

{
  "mcpServers": {
    "flux-web-image-generator": {
      "command": "npx",
      "args": ["-y", "@alchain/mcp-flux-web-image-generator"],
      "env": {
        "MODELSCOPE_API_KEY": "your_api_key_here"
      }
    }
  }
}

使用示例

1. 生成Hero横幅图片:

   请使用generate-web-image工具生成一个科技公司的Hero横幅图片，描述为"现代科技公司，展示AI和机器学习服务"

2. 生成产品展示图片:

   请生成一个产品展示图片，类型为product_showcase，描述为"智能手机，黑色，现代设计"

3. 查看支持的图片类型:

   请使用list-image-types工具查看所有支持的图片类型

API密钥获取

1. 访问 ModelScope
2. 注册并登录账户
3. 进入个人中心 -> API密钥
4. 创建新的API密钥
5. 复制密钥并设置为环境变量

技术架构

• MCP SDK: 使用官方TypeScript SDK
• 图片生成: ModelScope FLUX模型
• HTTP客户端: Axios
• 类型验证: Zod
• 传输协议: stdio

错误处理

服务器包含完善的错误处理机制：

• API密钥验证
• 网络请求错误处理
• 响应数据验证
• 用户友好的错误消息

开发和调试

开发模式

npm run dev

构建

npm run build

测试连接

您可以使用MCP客户端测试工具来验证服务器是否正常工作。

贡献

欢迎提交Issue和Pull Request来改进这个项目。

许可证

MIT License

注意事项

1. 请确保您的ModelScope API密钥有足够的额度
2. 生成的图片链接可能有时效性，建议及时下载并保存
3. 请遵守ModelScope的使用条款和API限制
4. 建议在生产环境中实施适当的缓存机制