# Directory Structure
```
├── .env.example
├── .gitignore
├── Dockerfile
├── generateImage.js
├── index.html
├── index.js
├── package-lock.json
├── package.json
├── readme.md
├── smithery.yaml
└── test.js
```
# Files
--------------------------------------------------------------------------------
/.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:
--------------------------------------------------------------------------------
```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 |
```
--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
```javascript
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:
--------------------------------------------------------------------------------
```javascript
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:
--------------------------------------------------------------------------------
```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 |
```
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
```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/[email protected]/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 | © 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>
```