@alchain/mcp-flux-web-image-generator/README.md

MCP服务器，用于生成web设计图片，支持多种网页图片类型

# 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（推荐）

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

### 方法二：全局安装

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

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

### 方法三：本地开发

```bash
# 克隆仓库
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密钥：

```bash
export MODELSCOPE_API_KEY="your_api_key_here"
```

## MCP工具说明

### 1. generate-web-image
生成网页设计图片的主要工具。

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

**示例:**
```json
{
  "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`: 图片用途描述（可选）

**示例:**
```json
{
  "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的配置文件中添加：

```json
{
  "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配置文件中添加：

```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](https://www.modelscope.cn/)
2. 注册并登录账户
3. 进入个人中心 -> API密钥
4. 创建新的API密钥
5. 复制密钥并设置为环境变量

## 技术架构

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

## 错误处理

服务器包含完善的错误处理机制：
- API密钥验证
- 网络请求错误处理
- 响应数据验证
- 用户友好的错误消息

## 开发和调试

### 开发模式
```bash
npm run dev
```

### 构建
```bash
npm run build
```

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

## 贡献

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

## 许可证

MIT License

## 注意事项

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