├── .gitignore
├── .env.example
├── package.json
├── Dockerfile
├── test.js
├── index.js
├── smithery.yaml
├── generateImage.js
├── readme.md
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | # files
2 | .env
3 | .DS_Store
4 | 
5 | # directories
6 | /node_modules
7 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | REPLICATE_API_TOKEN = "replicate api token"
2 | STORAGE_ENDPOINT = ""
3 | STORAGE_ACCESS_KEY = ""
4 | STORAGE_SECRET_KEY = ""
5 | STORAGE_BUCKET = ""
6 | STORAGE_DOMAIN = ""


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mcp-replicate-flux",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "@aws-sdk/client-s3": "^3.758.0",
14 |     "@modelcontextprotocol/sdk": "^1.4.1",
15 |     "dotenv": "^16.4.7",
16 |     "replicate": "^1.0.1",
17 |     "zod": "^3.24.1"
18 |   },
19 |   "devDependencies": {
20 |     "standardx": "^7.0.0"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | # Generated by https://smithery.ai. See: https://smithery.ai/docs/config#dockerfile
 2 | FROM node:18-slim
 3 | 
 4 | WORKDIR /app
 5 | 
 6 | # 复制package.json和package-lock.json
 7 | COPY package*.json ./
 8 | 
 9 | # 安装依赖
10 | RUN npm install
11 | 
12 | # 复制所有项目文件
13 | COPY . .
14 | 
15 | # 暴露端口（如果需要使用SSE模式）
16 | EXPOSE 3000
17 | 
18 | # 设置环境变量（这些将在运行时被覆盖）
19 | ENV REPLICATE_API_TOKEN=""
20 | ENV STORAGE_ENDPOINT=""
21 | ENV STORAGE_ACCESS_KEY=""
22 | ENV STORAGE_SECRET_KEY=""
23 | ENV STORAGE_BUCKET=""
24 | ENV STORAGE_DOMAIN=""
25 | 
26 | # 启动MCP服务器
27 | CMD ["node", "index.js"]
28 | 


--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
 1 | const generateImage = require('./generateImage')
 2 | 
 3 | async function test() {
 4 |   try {
 5 |     const prompt = 'a beautiful girl'
 6 |     const filename = `test-${Date.now()}.jpg`
 7 |     
 8 |     console.log(`Generating image with prompt: "${prompt}"`)
 9 |     console.log(`Filename: ${filename}`)
10 |     
11 |     const imageUrl = await generateImage({ prompt, filename })
12 |     
13 |     console.log('Image generated and uploaded successfully!')
14 |     console.log(`Image URL: ${imageUrl}`)
15 |   } catch (error) {
16 |     console.error('Test failed:', error)
17 |   }
18 | }
19 | 
20 | test() 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const { z } = require('zod')
 2 | const { McpServer } = require('@modelcontextprotocol/sdk/server/mcp.js')
 3 | const {
 4 |   StdioServerTransport
 5 | } = require('@modelcontextprotocol/sdk/server/stdio.js')
 6 | 
 7 | const generateImage = require('./generateImage')
 8 | 
 9 | const server = new McpServer({
10 |   version: '1.0.0',
11 |   name: 'Replicate-Flux'
12 | })
13 | 
14 | server.tool(
15 |   'generate-image',
16 |   { prompt: z.string(), filename: z.string() },
17 |   async ({ prompt, filename }) => {
18 |     try {
19 |       const imageUrl = await generateImage({ prompt, filename })
20 |       return {
21 |         content: [
22 |           { type: 'text', text: `Image successfully generated and uploaded to Cloudflare R2: ${imageUrl}` }
23 |         ]
24 |       }
25 |     } catch (error) {
26 |       console.error('Image generation failed:', error)
27 |       return {
28 |         content: [
29 |           { type: 'text', text: `Image generation failed: ${error.message}` }
30 |         ]
31 |       }
32 |     }
33 |   }
34 | )
35 | 
36 | const run = async () => {
37 |   const transport = new StdioServerTransport()
38 |   await server.connect(transport)
39 | }
40 | 
41 | run()
42 | 


--------------------------------------------------------------------------------
/smithery.yaml:
--------------------------------------------------------------------------------
 1 | # Smithery configuration file: https://smithery.ai/docs/config#smitheryyaml
 2 | 
 3 | startCommand:
 4 |   type: stdio
 5 |   configSchema:
 6 |     # JSON Schema defining the configuration options for the MCP.
 7 |     type: object
 8 |     required:
 9 |       - replicateApiToken
10 |       - storageEndpoint
11 |       - storageAccessKey
12 |       - storageSecretKey
13 |       - storageBucket
14 |       - storageDomain
15 |     properties:
16 |       replicateApiToken:
17 |         type: string
18 |         description: Token to authenticate with Replicate API
19 |       storageEndpoint:
20 |         type: string
21 |         description: Endpoint URL for the S3 compatible storage (e.g., Cloudflare R2)
22 |       storageAccessKey:
23 |         type: string
24 |         description: Access key for S3 storage
25 |       storageSecretKey:
26 |         type: string
27 |         description: Secret key for S3 storage
28 |       storageBucket:
29 |         type: string
30 |         description: Bucket name for storing the generated images
31 |       storageDomain:
32 |         type: string
33 |         description: Domain for accessing images from the storage
34 |   commandFunction:
35 |     # A JS function that produces the CLI command based on the given config to start the MCP on stdio.
36 |     |-
37 |     (config) => ({
38 |       command: 'node',
39 |       args: ['index.js'],
40 |       env: {
41 |         REPLICATE_API_TOKEN: config.replicateApiToken,
42 |         STORAGE_ENDPOINT: config.storageEndpoint,
43 |         STORAGE_ACCESS_KEY: config.storageAccessKey,
44 |         STORAGE_SECRET_KEY: config.storageSecretKey,
45 |         STORAGE_BUCKET: config.storageBucket,
46 |         STORAGE_DOMAIN: config.storageDomain
47 |       }
48 |     })
49 |   exampleConfig:
50 |     replicateApiToken: dummy-replicate-token
51 |     storageEndpoint: https://dummy-storage.endpoint
52 |     storageAccessKey: dummy-access-key
53 |     storageSecretKey: dummy-secret-key
54 |     storageBucket: dummy-bucket
55 |     storageDomain: dummy.storage.domain
56 | 


--------------------------------------------------------------------------------
/generateImage.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const Replicate = require('replicate')
 3 | const { S3Client, PutObjectCommand } = require('@aws-sdk/client-s3')
 4 | require('dotenv').config({ path: path.resolve(__dirname, '.env') })
 5 | 
 6 | const s3Client = new S3Client({
 7 |   endpoint: process.env.STORAGE_ENDPOINT,
 8 |   region: 'auto',
 9 |   credentials: {
10 |     accessKeyId: process.env.STORAGE_ACCESS_KEY,
11 |     secretAccessKey: process.env.STORAGE_SECRET_KEY,
12 |   },
13 | })
14 | 
15 | module.exports = async ({ prompt, filename }) => {
16 |   const replicate = new Replicate({
17 |     auth: process.env.REPLICATE_API_TOKEN
18 |   })
19 | 
20 |   try {
21 |     // 生成唯一文件名，避免覆盖
22 |     const timestamp = Date.now()
23 |     const fileNameWithoutExt = path.basename(filename, path.extname(filename))
24 |     const fileExt = path.extname(filename) || '.jpg'
25 |     const uniqueFilename = `${fileNameWithoutExt}-${timestamp}${fileExt}`
26 |     
27 |     // 创建基于日期的文件夹结构
28 |     const date = new Date()
29 |     const year = date.getFullYear()
30 |     const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要+1
31 |     const day = String(date.getDate()).padStart(2, '0')
32 |     const folderPath = `${year}/${month}/${day}`
33 |     
34 |     // 完整的文件路径，包含日期文件夹
35 |     const fullFilePath = `${folderPath}/${uniqueFilename}`
36 | 
37 |     // 使用 Replicate 生成图片
38 |     const output = await replicate.run('black-forest-labs/flux-schnell', {
39 |       input: {
40 |         prompt,
41 |         go_fast: true,
42 |         num_outputs: 1,
43 |         megapixels: '1',
44 |         output_quality: 80,
45 |         aspect_ratio: '16:9',
46 |         output_format: 'jpg',
47 |         num_inference_steps: 4
48 |       }
49 |     })
50 | 
51 |     if (!output || !output[0]) {
52 |       throw new Error('No image generated')
53 |     }
54 | 
55 |     const imageUrl = output[0]
56 |     
57 |     // 获取图片数据
58 |     const response = await fetch(imageUrl)
59 |     if (!response.ok) {
60 |       throw new Error('Failed to fetch generated image')
61 |     }
62 |     const imageBuffer = await response.arrayBuffer()
63 | 
64 |     // 上传到 R2，使用包含日期文件夹的路径
65 |     await s3Client.send(new PutObjectCommand({
66 |       Bucket: process.env.STORAGE_BUCKET,
67 |       Key: fullFilePath,
68 |       Body: Buffer.from(imageBuffer),
69 |       ContentType: 'image/jpeg'
70 |     }))
71 | 
72 |     // 返回可访问的图片链接
73 |     const r2ImageUrl = `https://${process.env.STORAGE_DOMAIN}/${fullFilePath}`
74 |     return r2ImageUrl
75 |   } catch (error) {
76 |     console.error('Error in generateImage:', error)
77 |     throw error
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | # MCP Replicate FLUX
  2 | 
  3 | [![smithery badge](https://smithery.ai/badge/@andylee20014/mcp-replicate-flux)](https://smithery.ai/server/@andylee20014/mcp-replicate-flux)
  4 | 
  5 | A Model Context Protocol (MCP) server that generates images using Replicate's FLUX model and stores them in Cloudflare R2.
  6 | 
  7 | 使用 Replicate 的 FLUX 模型生成图片并存储到 Cloudflare R2 的模型上下文协议（MCP）服务器。
  8 | 
  9 | ## Features 功能特点
 10 | 
 11 | - Generate images using Replicate's black-forest-labs/flux-schnell model
 12 | - Store generated images in Cloudflare R2
 13 | - Return accessible image URLs
 14 | - Support for custom prompts and filenames
 15 | 
 16 | - 使用 Replicate 的 black-forest-labs/flux-schnell 模型生成图片
 17 | - 将生成的图片存储到 Cloudflare R2
 18 | - 返回可访问的图片链接
 19 | - 支持自定义提示词和文件名
 20 | 
 21 | ## Prerequisites 前置要求
 22 | 
 23 | - Node.js (v16 or higher)
 24 | - Replicate API token
 25 | - Cloudflare R2 bucket and credentials
 26 | - npm or yarn
 27 | 
 28 | - Node.js（v16 或更高版本）
 29 | - Replicate API 令牌
 30 | - Cloudflare R2 存储桶和凭证
 31 | - npm 或 yarn
 32 | 
 33 | ## Environment Variables 环境变量
 34 | 
 35 | Required environment variables in `.env` file:
 36 | 
 37 | `.env` 文件中需要的环境变量：
 38 | 
 39 | ```env
 40 | REPLICATE_API_TOKEN=your_replicate_token
 41 | STORAGE_ENDPOINT=your_r2_endpoint
 42 | STORAGE_ACCESS_KEY=your_r2_access_key
 43 | STORAGE_SECRET_KEY=your_r2_secret_key
 44 | STORAGE_BUCKET=your_bucket_name
 45 | STORAGE_DOMAIN=your_domain
 46 | ```
 47 | 
 48 | ## Local Installation 本地安装
 49 | 
 50 | ### Installing via Smithery
 51 | 
 52 | To install MCP Replicate FLUX for Claude Desktop automatically via [Smithery](https://smithery.ai/server/@andylee20014/mcp-replicate-flux):
 53 | 
 54 | ```bash
 55 | npx -y @smithery/cli install @andylee20014/mcp-replicate-flux --client claude
 56 | ```
 57 | 
 58 | ### Installing manually
 59 | 
 60 | Follow these steps to set up the project locally:
 61 | 
 62 | 按照以下步骤在本地设置项目：
 63 | 
 64 | ```bash
 65 | # Clone the repository
 66 | git clone https://github.com/andylee20014/mcp-replicate-flux.git
 67 | cd mcp-replicate-flux
 68 | 
 69 | # Install dependencies
 70 | npm install
 71 | 
 72 | # Create .env file and add your credentials
 73 | cp .env.example .env
 74 | # Edit .env with your actual credentials
 75 | ```
 76 | 
 77 | Make sure your Cloudflare R2 bucket has appropriate CORS settings for public access to the uploaded images.
 78 | 
 79 | 确保您的 Cloudflare R2 存储桶具有适当的 CORS 设置，以允许公共访问上传的图片。
 80 | 
 81 | ## Running Locally 本地运行
 82 | 
 83 | To start the MCP server locally:
 84 | 
 85 | 在本地启动 MCP 服务器：
 86 | 
 87 | ```bash
 88 | node index.js
 89 | ```
 90 | 
 91 | The server will start and listen for MCP protocol messages on standard input/output.
 92 | 
 93 | 服务器将启动并通过标准输入/输出监听 MCP 协议消息。
 94 | 
 95 | ## Usage 使用方法
 96 | 
 97 | The server provides a `generate-image` tool that accepts two parameters:
 98 | - `prompt`: The text prompt for image generation
 99 | - `filename`: The desired filename for the generated image
100 | 
101 | 服务器提供了一个 `generate-image` 工具，接受两个参数：
102 | - `prompt`：用于生成图片的文本提示词
103 | - `filename`：生成的图片所需的文件名
104 | 
105 | ### Integration Example 集成示例
106 | 
107 | Here's an example of how to integrate with this MCP server using the MCP client library:
108 | 
109 | 以下是使用 MCP 客户端库与此 MCP 服务器集成的示例：
110 | 
111 | ```javascript
112 | const { McpClient } = require('@modelcontextprotocol/sdk/client/mcp.js')
113 | 
114 | async function generateImage(prompt, filename) {
115 |   const client = new McpClient()
116 |   // Connect to your running MCP server
117 |   await client.connect(yourTransport)
118 |   
119 |   const result = await client.tools.call('generate-image', {
120 |     prompt,
121 |     filename
122 |   })
123 |   
124 |   return result
125 | }
126 | ```
127 | 
128 | Example response 示例响应：
129 | ```json
130 | {
131 |   "content": [
132 |     { "type": "text", "text": "Image successfully generated and uploaded to Cloudflare R2" },
133 |     { "type": "image", "url": "https://your-domain.com/filename.jpg" }
134 |   ]
135 | }
136 | ```
137 | 
138 | ## Testing 测试
139 | 
140 | A test script is provided to verify the image generation and upload functionality.
141 | 
142 | 提供了一个测试脚本，用于验证图片生成和上传功能。
143 | 
144 | ### Running the test 运行测试
145 | 
146 | ```bash
147 | node test.js
148 | ```
149 | 
150 | The test script will:
151 | 1. Generate an image with a sample prompt
152 | 2. Upload the image to Cloudflare R2
153 | 3. Return the accessible URL
154 | 
155 | 测试脚本将：
156 | 1. 使用示例提示词生成图片
157 | 2. 将图片上传到 Cloudflare R2
158 | 3. 返回可访问的 URL
159 | 
160 | Example test output 测试输出示例：
161 | ```
162 | Generating image with prompt: "a beautiful girl"
163 | Filename: test-1234567890.jpg
164 | Image generated and uploaded successfully!
165 | Image URL: https://your-domain.com/test-1234567890.jpg
166 | ```
167 | 
168 | You can modify the prompt in `test.js` to test different image generation scenarios.
169 | 
170 | 您可以在 `test.js` 中修改提示词来测试不同的图片生成场景。
171 | 
172 | ## Cursor MCP Configuration Cursor MCP配置
173 | 
174 | There are two ways to configure the MCP server in Cursor:
175 | 
176 | 在Cursor中配置MCP服务器有两种方式：
177 | 
178 | ### Method 1: Complete Configuration 完整配置方式
179 | 
180 | Create a file at `~/.cursor/mcp.json` with all environment variables:
181 | 
182 | 在 `~/.cursor/mcp.json` 创建完整配置文件，包含所有环境变量：
183 | 
184 | ```json
185 | {
186 |   "mcpServers": {
187 |     "replicate-flux": {
188 |       "command": "node",
189 |       "args": ["C:\\Users\\YourUsername\\path\\to\\mcp-replicate-flux\\index.js"],
190 |       "description": "使用Replicate的FLUX模型生成图片并存储到Cloudflare R2的MCP服务器",
191 |       "env": {
192 |         "REPLICATE_API_TOKEN": "your_replicate_token",
193 |         "STORAGE_ENDPOINT": "your_r2_endpoint",
194 |         "STORAGE_ACCESS_KEY": "your_r2_access_key",
195 |         "STORAGE_SECRET_KEY": "your_r2_secret_key",
196 |         "STORAGE_BUCKET": "your_bucket_name",
197 |         "STORAGE_DOMAIN": "your_domain"
198 |       }
199 |     }
200 |   }
201 | }
202 | ```
203 | 
204 | ### Method 2: Minimal Configuration 最小配置方式
205 | 
206 | If you prefer to manage environment variables separately (using system environment variables or .env file), you can use a minimal configuration:
207 | 
208 | 如果你想单独管理环境变量（使用系统环境变量或.env文件），可以使用最小配置：
209 | 
210 | ```json
211 | {
212 |   "mcpServers": {
213 |     "replicate-flux": {
214 |       "command": "node",
215 |       "args": ["C:\\Users\\YourUsername\\path\\to\\mcp-replicate-flux\\index.js"]
216 |     }
217 |   }
218 | }
219 | ```
220 | 
221 | When using the minimal configuration, make sure your environment variables are properly set up either in:
222 | - System environment variables
223 | - `.env` file in the project directory
224 | - Cloud platform's environment variables (for deployed servers)
225 | 
226 | 使用最小配置时，请确保你的环境变量正确设置在以下位置之一：
227 | - 系统环境变量
228 | - 项目目录中的 `.env` 文件
229 | - 云平台的环境变量（对于已部署的服务器）
230 | 
231 | ### Notes 注意事项
232 | 
233 | - The `description` field is optional in both methods
234 | - Environment variables in the configuration file take precedence over system environment variables
235 | - After changing the configuration, restart Cursor to apply the changes
236 | 
237 | - `description` 描述字段在两种方式中都是可选的
238 | - 配置文件中的环境变量优先级高于系统环境变量
239 | - 更改配置后，需要重启Cursor以应用更改
240 | 
241 | ## Project Structure 项目结构
242 | 
243 | ```
244 | mcp-replicate-flux/
245 | ├── .env                  # Environment variables
246 | ├── index.js             # MCP server entry point
247 | ├── generateImage.js      # Image generation and R2 upload logic
248 | ├── test.js              # Test script
249 | └── README.md            # Project documentation
250 | ```
251 | 
252 | ## Troubleshooting 故障排除
253 | 
254 | ### Common Issues 常见问题
255 | 
256 | 1. **Image generation fails**: Check your Replicate API token and quota
257 | 2. **R2 upload fails**: Verify your R2 credentials and bucket permissions
258 | 3. **Cannot access generated images**: Ensure your R2 bucket has proper CORS configuration
259 | 
260 | 1. **图片生成失败**：检查您的 Replicate API 令牌和配额
261 | 2. **R2 上传失败**：验证您的 R2 凭证和存储桶权限
262 | 3. **无法访问生成的图片**：确保您的 R2 存储桶具有正确的 CORS 配置
263 | 
264 | ## MCP Protocol 协议说明
265 | 
266 | The Model Context Protocol (MCP) is a standard for AI model interaction that enables interoperability between different AI systems. This server implements an MCP tool that can be used with any MCP-compatible client.
267 | 
268 | 模型上下文协议（MCP）是一种 AI 模型交互标准，可实现不同 AI 系统之间的互操作性。此服务器实现了一个 MCP 工具，可与任何兼容 MCP 的客户端一起使用。
269 | 
270 | For more information about MCP, visit: [https://mcp.freeaigen.com/](https://mcp.freeaigen.com/)
271 | 
272 | ## References 参考链接
273 | 
274 | - [Model Context Protocol Documentation](https://mcp.freeaigen.com/)
275 | - [Replicate API Documentation](https://replicate.com/docs)
276 | - [Cloudflare R2 Documentation](https://developers.cloudflare.com/r2/)
277 | - [Flux AI Model](https://replicate.com/black-forest-labs/flux-schnell)
278 | 
279 | ## License 许可证
280 | 
281 | MIT
282 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>MCP Replicate FLUX - AI图像生成服务</title>
  7 |     <link rel="icon" type="image/png" href="http://freeaigen.com/favicon.ico">
  8 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
  9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 10 |     <style>
 11 |         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 12 |         
 13 |         body {
 14 |             font-family: 'Inter', sans-serif;
 15 |             background-color: #f8fafc;
 16 |         }
 17 |         
 18 |         .gradient-text {
 19 |             background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
 20 |             -webkit-background-clip: text;
 21 |             -webkit-text-fill-color: transparent;
 22 |         }
 23 |         
 24 |         .feature-card {
 25 |             transition: transform 0.2s ease-in-out;
 26 |         }
 27 |         
 28 |         .feature-card:hover {
 29 |             transform: translateY(-5px);
 30 |         }
 31 | 
 32 |         .code-block {
 33 |             background: #1a1a1a;
 34 |             border-radius: 8px;
 35 |             padding: 1rem;
 36 |             margin: 1rem 0;
 37 |             overflow-x: auto;
 38 |         }
 39 | 
 40 |         .code-block pre {
 41 |             color: #e2e8f0;
 42 |             font-family: 'Fira Code', monospace;
 43 |         }
 44 | 
 45 |         .demo-image {
 46 |             border-radius: 12px;
 47 |             box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 48 |         }
 49 |     </style>
 50 | </head>
 51 | <body>
 52 |     <!-- 导航栏 -->
 53 |     <nav class="bg-white shadow-sm fixed w-full z-10">
 54 |         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 55 |             <div class="flex justify-between h-16">
 56 |                 <div class="flex items-center">
 57 |                     <span class="text-2xl font-bold gradient-text hidden md:block">MCP Replicate FLUX</span>
 58 |                     <span class="text-lg font-bold gradient-text md:hidden">MCP Replicate FLUX</span>
 59 |                 </div>
 60 |                 <!-- 移动端汉堡菜单按钮 -->
 61 |                 <div class="md:hidden flex items-center">
 62 |                     <button id="mobile-menu-button" class="text-gray-600 hover:text-gray-900 focus:outline-none">
 63 |                         <i class="fas fa-bars text-xl"></i>
 64 |                     </button>
 65 |                 </div>
 66 |                 <!-- 桌面端菜单 -->
 67 |                 <div class="hidden md:flex items-center space-x-4">
 68 |                     <a href="#features" class="text-gray-600 hover:text-gray-900">特性</a>
 69 |                     <a href="#installation" class="text-gray-600 hover:text-gray-900">安装</a>
 70 |                     <a href="#usage" class="text-gray-600 hover:text-gray-900">使用</a>
 71 |                     <a href="#demo" class="text-gray-600 hover:text-gray-900">演示</a>
 72 |                     <a href="https://github.com/andylee20014/mcp-replicate-flux" target="_blank" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
 73 |                         <i class="fab fa-github mr-2"></i> GitHub
 74 |                     </a>
 75 |                 </div>
 76 |             </div>
 77 |         </div>
 78 |         <!-- 移动端下拉菜单 -->
 79 |         <div id="mobile-menu" class="hidden md:hidden bg-white shadow-md">
 80 |             <div class="px-2 pt-2 pb-3 space-y-1">
 81 |                 <a href="#features" class="block px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md">特性</a>
 82 |                 <a href="#installation" class="block px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md">安装</a>
 83 |                 <a href="#usage" class="block px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md">使用</a>
 84 |                 <a href="#demo" class="block px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md">演示</a>
 85 |                 <a href="https://github.com/andylee20014/mcp-replicate-flux" target="_blank" class="block px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md">
 86 |                     <i class="fab fa-github mr-2"></i> GitHub
 87 |                 </a>
 88 |             </div>
 89 |         </div>
 90 |     </nav>
 91 | 
 92 |     <!-- 主页横幅 -->
 93 |     <div class="pt-24 pb-8 md:pt-32">
 94 |         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 95 |             <div class="text-center">
 96 |                 <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
 97 |                     <span class="block">MCP Replicate FLUX</span>
 98 |                     <span class="block gradient-text mt-3">AI 图像生成服务</span>
 99 |                 </h1>
100 |                 <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
101 |                     基于 Model Context Protocol (MCP) 的图像生成服务，使用 Replicate 的 FLUX 模型生成高质量图片并存储到 Cloudflare R2
102 |                 </p>
103 |             </div>
104 |         </div>
105 |     </div>
106 | 
107 |     <!-- 特性部分 -->
108 |     <div id="features" class="py-12 bg-white">
109 |         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
110 |             <div class="text-center">
111 |                 <h2 class="text-3xl font-extrabold gradient-text sm:text-4xl">
112 |                     核心特性
113 |                 </h2>
114 |             </div>
115 |             <div class="mt-10">
116 |                 <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
117 |                     <!-- 特性卡片 1 -->
118 |                     <div class="feature-card bg-white overflow-hidden shadow rounded-lg">
119 |                         <div class="px-4 py-5 sm:p-6">
120 |                             <div class="text-center">
121 |                                 <i class="fas fa-image text-4xl text-indigo-600"></i>
122 |                                 <h3 class="mt-2 text-lg font-medium text-gray-900">高质量图像生成</h3>
123 |                                 <p class="mt-1 text-sm text-gray-500">
124 |                                     使用 Replicate 的 FLUX 模型生成高质量图片，支持多种风格和场景
125 |                                 </p>
126 |                             </div>
127 |                         </div>
128 |                     </div>
129 | 
130 |                     <!-- 特性卡片 2 -->
131 |                     <div class="feature-card bg-white overflow-hidden shadow rounded-lg">
132 |                         <div class="px-4 py-5 sm:p-6">
133 |                             <div class="text-center">
134 |                                 <i class="fas fa-cloud text-4xl text-indigo-600"></i>
135 |                                 <h3 class="mt-2 text-lg font-medium text-gray-900">云存储集成</h3>
136 |                                 <p class="mt-1 text-sm text-gray-500">
137 |                                     自动将生成的图片存储到 Cloudflare R2，确保高速访问和可靠存储
138 |                                 </p>
139 |                             </div>
140 |                         </div>
141 |                     </div>
142 | 
143 |                     <!-- 特性卡片 3 -->
144 |                     <div class="feature-card bg-white overflow-hidden shadow rounded-lg">
145 |                         <div class="px-4 py-5 sm:p-6">
146 |                             <div class="text-center">
147 |                                 <i class="fas fa-code text-4xl text-indigo-600"></i>
148 |                                 <h3 class="mt-2 text-lg font-medium text-gray-900">简单集成</h3>
149 |                                 <p class="mt-1 text-sm text-gray-500">
150 |                                     通过 MCP 协议轻松集成到任何支持 MCP 的应用中
151 |                                 </p>
152 |                             </div>
153 |                         </div>
154 |                     </div>
155 |                 </div>
156 |             </div>
157 |         </div>
158 |     </div>
159 | 
160 |     <!-- 安装说明 -->
161 |     <div id="installation" class="py-12 bg-gray-50">
162 |         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
163 |             <div class="text-center">
164 |                 <h2 class="text-3xl font-extrabold gradient-text sm:text-4xl">
165 |                     本地安装使用
166 |                 </h2>
167 |             </div>
168 |             <div class="mt-10">
169 |                 <div class="bg-white overflow-hidden shadow rounded-lg">
170 |                     <div class="px-4 py-5 sm:p-6">
171 |                         <h3 class="text-lg font-medium text-gray-900">1. 克隆项目</h3>
172 |                         <div class="code-block mt-4">
173 |                             <pre>git clone https://github.com/andylee20014/mcp-replicate-flux.git
174 | cd mcp-replicate-flux</pre>
175 |                         </div>
176 | 
177 |                         <h3 class="text-lg font-medium text-gray-900 mt-6">2. 安装依赖</h3>
178 |                         <div class="code-block mt-4">
179 |                             <pre>npm install</pre>
180 |                         </div>
181 | 
182 |                         <h3 class="text-lg font-medium text-gray-900 mt-6">3. 配置环境变量</h3>
183 |                         <p class="mt-2 text-sm text-gray-500">创建 .env 文件并添加以下配置：</p>
184 |                         <div class="code-block mt-4">
185 |                             <pre>REPLICATE_API_TOKEN=your_token
186 | STORAGE_ENDPOINT=your_endpoint
187 | STORAGE_ACCESS_KEY=your_key
188 | STORAGE_SECRET_KEY=your_secret
189 | STORAGE_BUCKET=your_bucket
190 | STORAGE_DOMAIN=your_domain</pre>
191 |                         </div>
192 | 
193 |                         <h3 class="text-lg font-medium text-gray-900 mt-6">4. 启动服务</h3>
194 |                         <div class="code-block mt-4">
195 |                             <pre>node index.js</pre>
196 |                         </div>
197 | 
198 |                         <div class="mt-6 bg-yellow-50 border-l-4 border-yellow-400 p-4">
199 |                             <div class="flex">
200 |                                 <div class="flex-shrink-0">
201 |                                     <i class="fas fa-exclamation-triangle text-yellow-400"></i>
202 |                                 </div>
203 |                                 <div class="ml-3">
204 |                                     <h3 class="text-sm font-medium text-yellow-800">环境要求</h3>
205 |                                     <div class="mt-2 text-sm text-yellow-700">
206 |                                         <ul class="list-disc pl-5 space-y-1">
207 |                                             <li>Node.js v16 或更高版本</li>
208 |                                             <li>Replicate API token</li>
209 |                                             <li>Cloudflare R2 存储配置</li>
210 |                                         </ul>
211 |                                     </div>
212 |                                 </div>
213 |                             </div>
214 |                         </div>
215 |                     </div>
216 |                 </div>
217 |             </div>
218 |         </div>
219 |     </div>
220 | 
221 |     <!-- 使用示例 -->
222 |     <div id="usage" class="py-12 bg-white">
223 |         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
224 |             <div class="text-center">
225 |                 <h2 class="text-3xl font-extrabold gradient-text sm:text-4xl">
226 |                     使用示例
227 |                 </h2>
228 |             </div>
229 |             <div class="mt-10">
230 |                 <div class="bg-white overflow-hidden shadow rounded-lg">
231 |                     <div class="px-4 py-5 sm:p-6">
232 |                         <div class="code-block">
233 |                             <pre>const { McpClient } = require('@modelcontextprotocol/sdk/client/mcp.js')
234 | 
235 | async function generateImage(prompt, filename) {
236 |   const client = new McpClient()
237 |   await client.connect(yourTransport)
238 |   
239 |   const result = await client.tools.call('generate-image', {
240 |     prompt,
241 |     filename
242 |   })
243 |   
244 |   return result
245 | }</pre>
246 |                         </div>
247 |                     </div>
248 |                 </div>
249 |             </div>
250 |         </div>
251 |     </div>
252 | 
253 |     <!-- Cursor配置说明 -->
254 |     <div class="py-12 bg-white">
255 |         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
256 |             <div class="text-center">
257 |                 <h2 class="text-3xl font-extrabold gradient-text sm:text-4xl">
258 |                     Cursor配置
259 |                 </h2>
260 |                 <p class="mt-4 text-lg text-gray-500">
261 |                     在Cursor中配置MCP服务器有两种方式
262 |                 </p>
263 |             </div>
264 |             <div class="mt-10">
265 |                 <div class="bg-white overflow-hidden shadow rounded-lg">
266 |                     <div class="px-4 py-5 sm:p-6">
267 |                         <h3 class="text-lg font-medium text-gray-900">方式一：完整配置</h3>
268 |                         <p class="mt-2 text-sm text-gray-500">在 ~/.cursor/mcp.json 创建完整配置文件，包含所有环境变量：</p>
269 |                         <div class="code-block mt-4">
270 |                             <pre>{
271 |   "mcpServers": {
272 |     "replicate-flux": {
273 |       "command": "node",
274 |       "args": ["C:\\Users\\YourUsername\\path\\to\\mcp-replicate-flux\\index.js"],
275 |       "description": "使用Replicate的FLUX模型生成图片并存储到Cloudflare R2的MCP服务器",
276 |       "env": {
277 |         "REPLICATE_API_TOKEN": "your_replicate_token",
278 |         "STORAGE_ENDPOINT": "your_r2_endpoint",
279 |         "STORAGE_ACCESS_KEY": "your_r2_access_key",
280 |         "STORAGE_SECRET_KEY": "your_r2_secret_key",
281 |         "STORAGE_BUCKET": "your_bucket_name",
282 |         "STORAGE_DOMAIN": "your_domain"
283 |       }
284 |     }
285 |   }
286 | }</pre>
287 |                         </div>
288 | 
289 |                         <h3 class="text-lg font-medium text-gray-900 mt-8">方式二：最小配置</h3>
290 |                         <p class="mt-2 text-sm text-gray-500">如果你想单独管理环境变量（使用系统环境变量或.env文件），可以使用最小配置：</p>
291 |                         <div class="code-block mt-4">
292 |                             <pre>{
293 |   "mcpServers": {
294 |     "replicate-flux": {
295 |       "command": "node",
296 |       "args": ["C:\\Users\\YourUsername\\path\\to\\mcp-replicate-flux\\index.js"]
297 |     }
298 |   }
299 | }</pre>
300 |                         </div>
301 | 
302 |                         <div class="mt-6 bg-blue-50 border-l-4 border-blue-400 p-4">
303 |                             <div class="flex">
304 |                                 <div class="flex-shrink-0">
305 |                                     <i class="fas fa-info-circle text-blue-400"></i>
306 |                                 </div>
307 |                                 <div class="ml-3">
308 |                                     <h3 class="text-sm font-medium text-blue-800">注意事项</h3>
309 |                                     <div class="mt-2 text-sm text-blue-700">
310 |                                         <ul class="list-disc pl-5 space-y-1">
311 |                                             <li>description 描述字段在两种方式中都是可选的</li>
312 |                                             <li>配置文件中的环境变量优先级高于系统环境变量</li>
313 |                                             <li>更改配置后，需要重启Cursor以应用更改</li>
314 |                                             <li>使用最小配置时，请确保环境变量已在系统中设置或在.env文件中配置</li>
315 |                                         </ul>
316 |                                     </div>
317 |                                 </div>
318 |                             </div>
319 |                         </div>
320 |                     </div>
321 |                 </div>
322 |             </div>
323 |         </div>
324 |     </div>
325 | 
326 |     <!-- 演示部分 -->
327 |     <div id="demo" class="py-12 bg-gray-50">
328 |         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
329 |             <div class="text-center">
330 |                 <h2 class="text-3xl font-extrabold gradient-text sm:text-4xl">
331 |                     生成效果展示
332 |                 </h2>
333 |                 <p class="mt-4 text-lg text-gray-500">
334 |                     以下是一些使用 MCP Replicate FLUX 生成的图片示例
335 |                 </p>
336 |             </div>
337 |             <div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
338 |                 <img src="https://r2.freeaigen.com/landscape-1742477313339.jpg" alt="示例图片1" class="demo-image w-full h-64 object-cover">
339 |                 <img src="https://r2.freeaigen.com/girl1-1742477313340.jpg" alt="示例图片2" class="demo-image w-full h-64 object-cover">
340 |                 <img src="https://r2.freeaigen.com/girl2-1742477313341.jpg" alt="示例图片3" class="demo-image w-full h-64 object-cover">
341 |             </div>
342 |         </div>
343 |     </div>
344 | 
345 |     <!-- 页脚 -->
346 |     <footer class="bg-white">
347 |         <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
348 |             <div class="mt-8 border-t border-gray-200 pt-8 md:flex md:items-center md:justify-between">
349 |                 <div class="flex items-center space-x-6 md:order-2">
350 |                     <a href="https://github.com/andylee20014/mcp-replicate-flux" class="text-gray-400 hover:text-gray-500">
351 |                         <i class="fab fa-github text-xl"></i>
352 |                     </a>
353 |                     <a href="https://x.com/Dalong_AI" class="text-gray-400 hover:text-gray-500">
354 |                         <i class="fab fa-twitter text-xl"></i>
355 |                     </a>
356 |                 </div>
357 |                 <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
358 |                     &copy; 2025 MCP Replicate FLUX. All rights reserved.
359 |                 </p>
360 |             </div>
361 |         </div>
362 |     </footer>
363 | 
364 |     <!-- 移动端菜单脚本 -->
365 |     <script>
366 |         document.addEventListener('DOMContentLoaded', function() {
367 |             const mobileMenuButton = document.getElementById('mobile-menu-button');
368 |             const mobileMenu = document.getElementById('mobile-menu');
369 |             
370 |             // 点击汉堡按钮切换菜单显示状态
371 |             mobileMenuButton.addEventListener('click', function() {
372 |                 mobileMenu.classList.toggle('hidden');
373 |             });
374 |             
375 |             // 点击菜单项后收起菜单
376 |             const mobileMenuItems = mobileMenu.querySelectorAll('a');
377 |             mobileMenuItems.forEach(item => {
378 |                 item.addEventListener('click', function() {
379 |                     mobileMenu.classList.add('hidden');
380 |                 });
381 |             });
382 |         });
383 |     </script>
384 | </body>
385 | </html> 


--------------------------------------------------------------------------------