Package Exports

@alchain/mcp-flux-web-image-generator
@alchain/mcp-flux-web-image-generator/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@alchain/mcp-flux-web-image-generator) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

使用示例

生成Hero横幅图片:

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

生成产品展示图片:

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

查看支持的图片类型:

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

API密钥获取

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

技术架构

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

错误处理

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

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

开发和调试

开发模式

npm run dev

构建

npm run build

测试连接

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

贡献

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

许可证

MIT License

注意事项

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