{"_id":"@alchain/mcp-flux-web-image-generator","_rev":"5-71bf716c09906b4596e4c06064d077ad","name":"@alchain/mcp-flux-web-image-generator","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@alchain/mcp-flux-web-image-generator","version":"1.0.0","keywords":["mcp","model-context-protocol","image-generation","web-design","flux","ai","modelscope","web-images","ecommerce","hero-banner","product-showcase"],"author":{"name":"alchain"},"license":"MIT","_id":"@alchain/mcp-flux-web-image-generator@1.0.0","maintainers":[{"name":"alchain","email":"alchaincyf@gmail.com"}],"homepage":"https://github.com/alchain/mcp-flux-web-image-generator#readme","bugs":{"url":"https://github.com/alchain/mcp-flux-web-image-generator/issues"},"bin":{"mcp-flux-web-image-generator":"dist/index.js"},"dist":{"shasum":"070a0d410d11ba2f314a2d053c18b1923e1394f3","tarball":"https://registry.npmjs.org/@alchain/mcp-flux-web-image-generator/-/mcp-flux-web-image-generator-1.0.0.tgz","fileCount":7,"integrity":"sha512-Adr357AA+b8oQRe+WcKMi2pJ4dEy89I2PHk0kbp9sc0h0jwn7adq+iHYQ/hjnVtOcLxJuG0ERETGbsIsqzP5Zg==","signatures":[{"sig":"MEQCIDyIHyDJczrXwKmbC9KseGAf9ynbrbD1ssVB/YMEFHyNAiBL7+b/lbn6tX3j0MWdZvKfSnWvU38P0WT5agoyGY0CUA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":23111},"main":"dist/index.js","type":"module","types":"./dist/index.d.ts","engines":{"node":">=18.0.0"},"scripts":{"dev":"tsx src/index.ts","test":"node test/test-server.js","build":"tsc","start":"node dist/index.js","postinstall":"echo '🎉 MCP Flux Web Image Generator 安装成功！请设置 MODELSCOPE_API_KEY 环境变量。'","prepublishOnly":"npm run build","publish-package":"./scripts/publish.sh"},"_npmUser":{"name":"alchain","actor":{"name":"alchain","type":"user","email":"alchaincyf@gmail.com"},"email":"alchaincyf@gmail.com"},"repository":{"url":"git+https://github.com/alchain/mcp-flux-web-image-generator.git","type":"git"},"_npmVersion":"10.9.2","description":"MCP服务器，用于生成web设计图片，支持多种网页图片类型","directories":{},"_nodeVersion":"23.9.0","dependencies":{"zod":"^3.22.0","axios":"^1.6.0","@modelcontextprotocol/sdk":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.0.0","typescript":"^5.0.0","@types/node":"^20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mcp-flux-web-image-generator_1.0.0_1751677047335_0.5509389173154371","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@alchain/mcp-flux-web-image-generator","version":"1.0.1","keywords":["mcp","model-context-protocol","image-generation","web-design","flux","ai","modelscope","web-images","ecommerce","hero-banner","product-showcase"],"author":{"name":"alchain"},"license":"MIT","_id":"@alchain/mcp-flux-web-image-generator@1.0.1","maintainers":[{"name":"alchain","email":"alchaincyf@gmail.com"}],"homepage":"https://github.com/alchain/mcp-flux-web-image-generator#readme","bugs":{"url":"https://github.com/alchain/mcp-flux-web-image-generator/issues"},"bin":{"mcp-flux-web-image-generator":"dist/index.js"},"dist":{"shasum":"4f254e6623a3c8b937073d3f6bfce7a36f1f0484","tarball":"https://registry.npmjs.org/@alchain/mcp-flux-web-image-generator/-/mcp-flux-web-image-generator-1.0.1.tgz","fileCount":7,"integrity":"sha512-h1j/8KjjOGt7t8mzAymZ5RcY5JLAmy73gqlQcATSOOgd4jyhgcl7m5lD1Y4eRJeJquWi2Y9OPx+9JSmgyMswNg==","signatures":[{"sig":"MEQCIFUaMPFlHINAiRHBHKCvTN5xUuzDw5e/wrxFdi85xTKaAiARvSs2w16R2AJxZs+623NatJsljwLQfa2ai0UhFxg1/Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":23111},"main":"dist/index.js","type":"module","types":"./dist/index.d.ts","engines":{"node":">=18.0.0"},"scripts":{"dev":"tsx src/index.ts","test":"node test/test-server.js","build":"tsc","start":"node dist/index.js","postinstall":"echo '🎉 MCP Flux Web Image Generator 安装成功！请设置 MODELSCOPE_API_KEY 环境变量。'","prepublishOnly":"npm run build","publish-package":"./scripts/publish.sh"},"_npmUser":{"name":"alchain","actor":{"name":"alchain","type":"user","email":"alchaincyf@gmail.com"},"email":"alchaincyf@gmail.com"},"repository":{"url":"git+https://github.com/alchain/mcp-flux-web-image-generator.git","type":"git"},"_npmVersion":"10.9.2","description":"MCP服务器，用于生成web设计图片，支持多种网页图片类型","directories":{},"_nodeVersion":"23.9.0","dependencies":{"zod":"^3.22.0","axios":"^1.6.0","@modelcontextprotocol/sdk":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.0.0","typescript":"^5.0.0","@types/node":"^20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mcp-flux-web-image-generator_1.0.1_1751677213391_0.6586334047388078","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@alchain/mcp-flux-web-image-generator","version":"1.0.2","keywords":["mcp","ai","image-generation","flux","modelscope","typescript","claude","cursor","image-ai","webpage-analysis","article-images","web-image-generator","ai-image-mcp"],"author":{"name":"Alchain","email":"alchain@example.com"},"license":"MIT","_id":"@alchain/mcp-flux-web-image-generator@1.0.2","maintainers":[{"name":"alchain","email":"alchaincyf@gmail.com"}],"homepage":"https://github.com/alchaincyf/AIpic#readme","bugs":{"url":"https://github.com/alchaincyf/AIpic/issues"},"bin":{"mcp-flux-web-image-generator":"dist/index.js"},"dist":{"shasum":"b52ce18242152ddc1b80aefe836d3d9e61d9cade","tarball":"https://registry.npmjs.org/@alchain/mcp-flux-web-image-generator/-/mcp-flux-web-image-generator-1.0.2.tgz","fileCount":21,"integrity":"sha512-g9XxxytwRAdnyBxV/RAyIs2I2RwLw3+aovBfM9pGILNMeskOrWy9XqaSnPAI9b+JbbltiPxb3seT1+qjcGp1fw==","signatures":[{"sig":"MEUCIQC/D40rLqrK7w7uVMSw8WLeMRzxzRtmyfz7nWi2F9n4agIgJLvKBwW4R7qEtCfDZSm1ImeeC/OV/pq3CJQDH+8a1uE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":78058},"main":"dist/index.js","type":"module","types":"./dist/index.d.ts","engines":{"node":">=18.0.0"},"gitHead":"13b1b55140636127dce6b9b408cf5fe01ca7b03c","scripts":{"dev":"tsx src/index.ts","test":"echo \"Error: no test specified\" && exit 1","build":"tsc","start":"node dist/index.js","prepublishOnly":"npm run build"},"_npmUser":{"name":"alchain","actor":{"name":"alchain","type":"user","email":"alchaincyf@gmail.com"},"email":"alchaincyf@gmail.com"},"repository":{"url":"git+https://github.com/alchaincyf/AIpic.git","type":"git"},"_npmVersion":"10.9.2","description":"MCP Server for AI image generation using ModelScope FLUX model. Supports webpage analysis, article image generation, and intelligent prompt translation.","directories":{},"_nodeVersion":"23.9.0","dependencies":{"zod":"^3.22.4","uuid":"^9.0.0","axios":"^1.6.0","sharp":"^0.32.0","cheerio":"^1.0.0-rc.12","@modelcontextprotocol/sdk":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.0.0","typescript":"^5.0.0","@types/node":"^20.0.0","@types/uuid":"^9.0.0"},"peerDependencies":{"node":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mcp-flux-web-image-generator_1.0.2_1751717705517_0.10843031050622343","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@alchain/mcp-flux-web-image-generator","version":"1.0.3","keywords":["mcp","model-context-protocol","image-generation","web-design","flux","ai","modelscope","web-images","ecommerce","hero-banner","product-showcase"],"author":{"name":"alchain"},"license":"MIT","_id":"@alchain/mcp-flux-web-image-generator@1.0.3","maintainers":[{"name":"alchain","email":"alchaincyf@gmail.com"}],"homepage":"https://github.com/alchain/mcp-flux-web-image-generator#readme","bugs":{"url":"https://github.com/alchain/mcp-flux-web-image-generator/issues"},"bin":{"mcp-flux-web-image-generator":"dist/index.js"},"dist":{"shasum":"7144ef154874136f8a77c818e892f0a8b645edf1","tarball":"https://registry.npmjs.org/@alchain/mcp-flux-web-image-generator/-/mcp-flux-web-image-generator-1.0.3.tgz","fileCount":7,"integrity":"sha512-nLEQ3eUwMMoF89UchTNa0i+L0FEhFuml5P6feBqtnheFAqu1dUDhiqz64HGvnUFLr8Exw1uCZoOdKa9YFSAung==","signatures":[{"sig":"MEUCIB42ljV/LMI3u1rmRBh8VneFYnxUdag7AbT1YqPpWQXZAiEA7lKA392/C1Gr6Qs5QWjzD3BgPqY/42HxfF8XFC+1itI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27640},"main":"dist/index.js","type":"module","types":"./dist/index.d.ts","engines":{"node":">=18.0.0"},"scripts":{"dev":"tsx src/index.ts","test":"node test/test-server.js","build":"tsc","start":"node dist/index.js","postinstall":"echo '🎉 MCP Flux Web Image Generator 安装成功！请设置 MODELSCOPE_API_KEY 环境变量。'","prepublishOnly":"npm run build","publish-package":"./scripts/publish.sh"},"_npmUser":{"name":"alchain","actor":{"name":"alchain","type":"user","email":"alchaincyf@gmail.com"},"email":"alchaincyf@gmail.com"},"repository":{"url":"git+https://github.com/alchain/mcp-flux-web-image-generator.git","type":"git"},"_npmVersion":"10.9.2","description":"MCP服务器，用于生成web设计图片，支持多种网页图片类型","directories":{},"_nodeVersion":"23.9.0","dependencies":{"zod":"^3.22.0","axios":"^1.6.0","@modelcontextprotocol/sdk":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.0.0","typescript":"^5.0.0","@types/node":"^20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mcp-flux-web-image-generator_1.0.3_1751967337468_0.9522213918460627","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@alchain/mcp-flux-web-image-generator","version":"1.1.0","description":"MCP服务器，用于生成web设计图片，支持多种网页图片类型","main":"dist/index.js","type":"module","bin":{"mcp-flux-web-image-generator":"dist/index.js"},"scripts":{"build":"tsc","start":"node dist/index.js","dev":"tsx src/index.ts","test":"node test/test-server.js","prepublishOnly":"npm run build","postinstall":"echo '🎉 MCP Flux Web Image Generator 安装成功！请设置 MODELSCOPE_API_KEY 环境变量。'","publish-package":"./scripts/publish.sh"},"keywords":["mcp","model-context-protocol","image-generation","web-design","flux","ai","modelscope","web-images","ecommerce","hero-banner","product-showcase"],"author":{"name":"alchain"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/alchain/mcp-flux-web-image-generator.git"},"bugs":{"url":"https://github.com/alchain/mcp-flux-web-image-generator/issues"},"homepage":"https://github.com/alchain/mcp-flux-web-image-generator#readme","engines":{"node":">=18.0.0"},"dependencies":{"@modelcontextprotocol/sdk":"^1.0.0","axios":"^1.6.0","form-data":"^4.0.0","zod":"^3.22.0"},"devDependencies":{"@types/node":"^20.0.0","tsx":"^4.0.0","typescript":"^5.0.0"},"_id":"@alchain/mcp-flux-web-image-generator@1.1.0","types":"./dist/index.d.ts","_nodeVersion":"23.9.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-PQurgKs56cH17zPETxNv/EkOqWeWvd/e47DsoAZOuAvWkaPgIQZ0SvbH3CZ9UU1uiopcVmcBQNlxtcj+g26t5A==","shasum":"42ddddb1f9a7612356703d7dfa53c1613a092d18","tarball":"https://registry.npmjs.org/@alchain/mcp-flux-web-image-generator/-/mcp-flux-web-image-generator-1.1.0.tgz","fileCount":7,"unpackedSize":40631,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC8+vZWrUT4kl4crzaMiZvEGtzYTTPIvT5bh8lH0HjHMAIhAKJi2zthTdN07hcL8H+GE1XwfcBJ94PmYJR4eiZexUbp"}]},"_npmUser":{"name":"alchain","email":"alchaincyf@gmail.com","actor":{"name":"alchain","email":"alchaincyf@gmail.com","type":"user"}},"directories":{},"maintainers":[{"name":"alchain","email":"alchaincyf@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mcp-flux-web-image-generator_1.1.0_1751968069154_0.3350324983108759"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-05T00:57:27.277Z","modified":"2025-07-08T09:47:49.531Z","1.0.0":"2025-07-05T00:57:27.543Z","1.0.1":"2025-07-05T01:00:13.590Z","1.0.2":"2025-07-05T12:15:05.760Z","1.0.3":"2025-07-08T09:35:37.662Z","1.1.0":"2025-07-08T09:47:49.342Z"},"bugs":{"url":"https://github.com/alchain/mcp-flux-web-image-generator/issues"},"author":{"name":"alchain"},"license":"MIT","homepage":"https://github.com/alchain/mcp-flux-web-image-generator#readme","keywords":["mcp","model-context-protocol","image-generation","web-design","flux","ai","modelscope","web-images","ecommerce","hero-banner","product-showcase"],"repository":{"type":"git","url":"git+https://github.com/alchain/mcp-flux-web-image-generator.git"},"description":"MCP服务器，用于生成web设计图片，支持多种网页图片类型","maintainers":[{"name":"alchain","email":"alchaincyf@gmail.com"}],"readme":"# Flux Web Image Generator MCP Server\n\n这是一个专门用于生成web设计图片的MCP（Model Context Protocol）服务器。当用户在使用AI设计网页时，如果网页涉及到占位图片等图片信息的展示，就可以通过该MCP调用AI文生图模型，提供对应的英文prompt生成图片，并且图片填充到对应的网站区域。\n\n## 功能特性\n\n- 🎨 **专业网页图片生成**: 支持8种常见的网页图片类型\n- 🚀 **FLUX模型支持**: 使用ModelScope的FLUX模型生成高质量图片\n- 🔧 **灵活配置**: 支持预设模板和自定义prompt\n- 🔐 **安全认证**: API密钥通过环境变量传入，不会硬编码\n- 📋 **丰富工具**: 提供3个核心工具和1个资源\n\n## 支持的图片类型\n\n| 类型 | 名称 | 描述 |\n|------|------|------|\n| `hero_banner` | Hero横幅图片 | 网站首页的主要横幅图片 |\n| `product_showcase` | 产品展示图片 | 产品或服务的展示图片 |\n| `team_photo` | 团队照片 | 团队成员或公司文化展示图片 |\n| `blog_featured` | 博客特色图片 | 博客文章的特色图片 |\n| `service_icon` | 服务图标 | 服务或功能的图标式图片 |\n| `background_pattern` | 背景图案 | 网站背景或装饰图案 |\n| `call_to_action` | 行动号召图片 | 鼓励用户采取行动的图片 |\n| `testimonial_bg` | 客户评价背景 | 客户评价部分的背景图片 |\n\n## 安装和设置\n\n### 方法一：使用npx（推荐）\n\n```bash\n# 直接使用npx运行（无需安装）\nnpx @alchain/mcp-flux-web-image-generator\n```\n\n### 方法二：全局安装\n\n```bash\n# 全局安装\nnpm install -g @alchain/mcp-flux-web-image-generator\n\n# 运行\nmcp-flux-web-image-generator\n```\n\n### 方法三：本地开发\n\n```bash\n# 克隆仓库\ngit clone https://github.com/alchain/mcp-flux-web-image-generator.git\ncd mcp-flux-web-image-generator\n\n# 安装依赖\nnpm install\n\n# 构建项目\nnpm run build\n\n# 运行服务器\nnpm start\n```\n\n### 设置API密钥\n\n无论使用哪种方法，都需要设置ModelScope API密钥：\n\n```bash\nexport MODELSCOPE_API_KEY=\"your_api_key_here\"\n```\n\n## MCP工具说明\n\n### 1. generate-web-image\n生成网页设计图片的主要工具。\n\n**参数:**\n- `type`: 图片类型（必选），从8种预设类型中选择\n- `description`: 图片内容描述（必选），中文或英文均可\n- `customPrompt`: 自定义英文prompt（可选），会覆盖默认模板\n\n**示例:**\n```json\n{\n  \"type\": \"hero_banner\",\n  \"description\": \"科技公司首页，展示AI和未来科技感\",\n  \"customPrompt\": \"A futuristic AI technology hero banner, cyberpunk style, neon lights, high-tech atmosphere\"\n}\n```\n\n### 2. generate-custom-web-image\n使用完全自定义prompt生成网页图片。\n\n**参数:**\n- `prompt`: 英文图片生成prompt（必选）\n- `description`: 图片用途描述（可选）\n\n**示例:**\n```json\n{\n  \"prompt\": \"A minimalist e-commerce product photo, white background, professional lighting\",\n  \"description\": \"电商产品页面使用\"\n}\n```\n\n### 3. list-image-types\n列出所有支持的图片类型和说明。\n\n**参数:** 无\n\n## MCP资源说明\n\n### image-templates\n提供所有网页图片类型模板的JSON数据。\n\n**URI:** `templates://web-image-types`\n\n## 在MCP客户端中使用\n\n### Claude Desktop配置\n\n在Claude Desktop的配置文件中添加：\n\n```json\n{\n  \"mcpServers\": {\n    \"flux-web-image-generator\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@alchain/mcp-flux-web-image-generator\"],\n      \"env\": {\n        \"MODELSCOPE_API_KEY\": \"your_api_key_here\"\n      }\n    }\n  }\n}\n```\n\n### Cursor配置\n\n在Cursor的mcp.json配置文件中添加：\n\n```json\n{\n  \"mcpServers\": {\n    \"flux-web-image-generator\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@alchain/mcp-flux-web-image-generator\"],\n      \"env\": {\n        \"MODELSCOPE_API_KEY\": \"your_api_key_here\"\n      }\n    }\n  }\n}\n```\n\n### 使用示例\n\n1. **生成Hero横幅图片:**\n   ```\n   请使用generate-web-image工具生成一个科技公司的Hero横幅图片，描述为\"现代科技公司，展示AI和机器学习服务\"\n   ```\n\n2. **生成产品展示图片:**\n   ```\n   请生成一个产品展示图片，类型为product_showcase，描述为\"智能手机，黑色，现代设计\"\n   ```\n\n3. **查看支持的图片类型:**\n   ```\n   请使用list-image-types工具查看所有支持的图片类型\n   ```\n\n## API密钥获取\n\n1. 访问 [ModelScope](https://www.modelscope.cn/)\n2. 注册并登录账户\n3. 进入个人中心 -> API密钥\n4. 创建新的API密钥\n5. 复制密钥并设置为环境变量\n\n## 技术架构\n\n- **MCP SDK**: 使用官方TypeScript SDK\n- **图片生成**: ModelScope FLUX模型\n- **HTTP客户端**: Axios\n- **类型验证**: Zod\n- **传输协议**: stdio\n\n## 错误处理\n\n服务器包含完善的错误处理机制：\n- API密钥验证\n- 网络请求错误处理\n- 响应数据验证\n- 用户友好的错误消息\n\n## 开发和调试\n\n### 开发模式\n```bash\nnpm run dev\n```\n\n### 构建\n```bash\nnpm run build\n```\n\n### 测试连接\n您可以使用MCP客户端测试工具来验证服务器是否正常工作。\n\n## 贡献\n\n欢迎提交Issue和Pull Request来改进这个项目。\n\n## 许可证\n\nMIT License\n\n## 注意事项\n\n1. 请确保您的ModelScope API密钥有足够的额度\n2. 生成的图片链接可能有时效性，建议及时下载并保存\n3. 请遵守ModelScope的使用条款和API限制\n4. 建议在生产环境中实施适当的缓存机制 ","readmeFilename":"README.md"}