{"id":"ca6f2c23-548f-4c2d-a15c-c2a31bf8b199","slug":"floimg","kind":"mcp","name":"FloImg","summary":"Composable image workflow engine - any source → any transforms → any destination","owner":"FlojoInc","repoUrl":"https://github.com/FlojoInc/FloImg","license":"MIT","licenseTier":"permissive","trust":"community","stars":3,"match":null,"fewStars":true,"format":"mcp","createdAt":"2025-12-20T04:58:48.000Z","addedAt":"2026-10-21T16:30:56.860Z","logoUrl":"https://avatars.githubusercontent.com/u/164281915?v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["design-media"],"tags":["ai","floimg","image-generation","image-processing","open-source","typescript","workflow"],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-27T20:23:26.137Z","sample":false,"url":"https://conduits.dev/tools/floimg","language":"TypeScript","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# FloImg\n\n> Composable image workflow engine — any source, any transforms, any destination\n\n[![npm version](https://img.shields.io/npm/v/@teamflojo/floimg.svg?style=flat)](https://www.npmjs.com/package/@teamflojo/floimg)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Discord](https://img.shields.io/badge/Discord-Join%20us-5865F2?logo=discord&logoColor=white)](https://discord.gg/ahb9FSGUzb)\n\n**FloImg** unifies image generation, transformation, and delivery into composable pipelines. Whether you're generating AI images, resizing for social media, or building complex multi-step workflows, FloImg handles it through one consistent interface.\n\n## Why FloImg?\n\n### Deterministic Transforms\n\nWhen you ask ChatGPT to modify an image, DALL-E generates a new image—it doesn't edit pixels. Even AI \"editing\" like inpainting is probabilistic. \"Change the colors\" might give you a completely different composition. FloImg applies deterministic transforms: adjust hue mathematically, resize to exact dimensions, add caption at precise position. The image stays intact except for exactly what you requested.\n\n### A Unified API\n\nFloImg models image manipulation as a series of composable steps—each transform takes an image and returns an image. This functional approach consolidates the patchwork of tools and SDKs into one abstraction layer.\n\nThe same workflow definition is portable across interfaces:\n\n- **SDK**: Embed in any JS/TS application\n- **CLI**: Terminal workflows and CI/CD pipelines\n- **Visual builder**: Prototyping and non-technical users\n- **MCP**: AI agents and LLM-driven automation\n\n| Workflow Type | Example |\n| --------------------- | ----------------------------------------------------------------- |\n| **AI + Professional** | Generate with DALL-E → resize for OG → add caption → upload to S3 |\n| **Purely Creative** | AI generate → AI refine → AI variations |\n| **Purely Practical** | Chart → resize → format convert → CDN |\n\n> **[Full Documentation →](https://floimg.com/docs)**\n\n## Features\n\n- **AI Image Generation** - DALL-E and other AI models via unified API\n- **Data Visualization** - Charts, graphs, and diagrams\n- **Image Processing** - Resize, crop, watermark, filters\n- **Pipeline Engine** - Chain operations into reusable workflows\n- **Multi-Interface** - SDK, CLI, YAML, and MCP\n- **Claude Code Ready** - Native plugin for AI-assisted workflows\n\n## Try It Instantly\n\n```bash\n# Resize and convert for social media\nnpx @teamflojo/floimg resize hero.png 1200x630 -o og-image.png\nnpx @teamflojo/floimg convert image.png -o image.webp\n\n# Add captions or watermarks\nnpx @teamflojo/floimg caption image.png \"© 2025 Acme Inc\" -o watermarked.png\n\n# Generate charts, diagrams, QR codes\nnpx @teamflojo/floimg chart bar --labels \"Q1,Q2,Q3,Q4\" --values \"10,20,30,40\" -o chart.png\nnpx @teamflojo/floimg qr \"https://floimg.com\" -o qr.png\n\n# Interactive mode - see all options\nnpx @teamflojo/floimg\n```\n\n[See all CLI commands →](https://floimg.com/docs/cli)\n\n## Claude Code Integration\n\nUse FloImg directly from Claude Code with the **floimg-claude** plugin:\n\n```bash\nnpm install -g @teamflojo/floimg-claude\n```\n\nThen just talk to Claude:\n\n- _\"Create a hero image for my blog, resize to 1200x630, and add a caption\"_\n- _\"Generate a product mockup with a subtle watermark\"_\n- _\"Resize this image to 800x600 and upload to S3\"_\n- _\"Create a bar chart of quarterly revenue\"_\n\nThe plugin includes slash commands, an Image Architect agent, and auto-discovery for image tasks.\n\n> **[Claude Code Documentation →](https://floimg.com/docs/claude-code)**\n\n## Install\n\n```bash\nnpm install @teamflojo/floimg\n\n# Add generators you need\nnpm install @teamflojo/floimg-quickchart # Charts\nnpm install @teamflojo/floimg-mermaid # Diagrams\nnpm install @teamflojo/floimg-qr # QR codes\nnpm install @teamflojo/floimg-openai # DALL-E + GPT-4 Vision\nnpm install @teamflojo/floimg-stability # Stability AI (SDXL, SD3) + AI transforms\nnpm install @teamflojo/floimg-google # Google Imagen\nnpm install @teamflojo/floimg-ollama # Ollama local AI\nnpm install @teamflojo/floimg-screenshot # Screenshots\n```\n\n## Quick Start\n\n```typescript\nimport createClient from \"@teamflojo/floimg\";\nimport quickchart from \"@teamflojo/floimg-quickchart\";\n\nconst floimg = createClient();\nfloimg.registerGenerator(quickchart());\n\n// Generate → Transform → Save\nconst chart = await floimg.generate({\n generator: \"quickchart\",\n params: {\n type: \"bar\",\n data: {\n labels: [\"Q1\", \"Q2\", \"Q3\", \"Q4\"],\n datasets: [{ label: \"Revenue\", data: [12, 19, 8, 15] }],\n },\n },\n});\n\nconst resized = await floimg.transform({\n blob: chart,\n op: \"resize\",\n params: { width: 800 },\n});\n\nawait floimg.save(resized, \"./chart.png\");\n// Or: await floimg.save(resized, 's3://bucket/chart.png');\n```\n\n## Fluent API\n\nChain operations with a clean, fluent syntax:\n\n```typescript\nimport { floimg } from \"@teamflojo/floimg\";\n\n// Load → Transform → Save\nawait floimg\n .from(\"./input.png\")\n .transform(\"resize\", { width: 800 })\n .transform(\"blur\", { sigma: 2 })\n .to(\"./output.png\");\n\n// Generate → Transform → Save to cloud\nawait floimg\n .generate(\"openai\", { prompt: \"A sunset over mountains\" })\n .transform(\"resize\", { width: 1920 })\n .to(\"s3://bucket/sunset.png\");\n\n// Get the final image as a blob\nconst blob = await floimg\n .from(\"./photo.jpg\")\n .transform(\"resize\", { width: 400 })\n .transform(\"convert\", { to: \"webp\" })\n .toBlob();\n```\n\nThe fluent API builds pipelines internally and executes them efficiently. For custom configurations, create your own client:\n\n```typescript\nimport createClient, { createFluent } from \"@teamflojo/floimg\";\nimport openai from \"@teamflojo/floimg-openai\";\n\nconst client = createClient();\nclient.registerGenerator(openai({ apiKey: process.env.OPENAI_API_KEY }));\n\nconst myFloimg = createFluent(client);\n\nawait myFloimg\n .generate(\"openai\", { prompt: \"A forest\" })\n .transform(\"resize\", { width: 1200 })\n .to(\"./forest.png\");\n```\n\n## Three Interfaces\n\n### SDK (TypeScript/JavaScript)\n\n```typescript\n// Fluent API (recommended for chained operations)\nawait floimg.from('./input.png').transform('resize', { width: 800 }).to('./output.png');\n\n// Imperative API (for fine-grained control)\nconst chart = await floimg.generate({ generator: 'quickchart', params: {...} });\nconst resized = await floimg.transform({ blob: chart, op: 'resize', params: { width: 800 } });\nawait floimg.save(resized, 's3://bucket/chart.png');\n```\n\n### CLI\n\n```bash\nfloimg qr \"https://example.com\" -o qr.png\nfloimg chart bar --labels \"A,B,C\" --values \"10,20,30\" -o chart.png\nfloimg resize image.png 800x600 -o resized.png\n```\n\n### MCP (AI Agents)\n\n```json\n{\n \"mcpServers\": {\n \"floimg\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@teamflojo/floimg-mcp\"]\n }\n }\n}\n```\n\nThen talk to Claude: _\"Create a QR code for example.com\"_\n\n## Packages\n\n### Core\n\n| Package | Description | npm |\n| ------------------------------------------------------------------------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| [`@teamflojo/floimg`](https://www.npmjs.com/package/@teamflojo/floimg) | Core engine and CLI | [![npm](https://img.shields.io/npm/v/@teamflojo/floimg.svg)](https://www.npmjs.com/package/@teamflojo/floimg) |\n| [`@teamflojo/floimg-mcp`](https://www.npmjs.com/package/@teamflojo/floimg-mcp) | MCP server | [![npm](https://img.shields.io/npm/v/@teamflojo/floimg-mcp.svg)](https://www.npmjs.com/package/@teamflojo/floimg-mcp) |\n| [`@teamflojo/floimg-claude`](https://www.npmjs.com/package/@teamflojo/floimg-claude) | Claude Code plugin | [![npm](https://img.shields.io/npm/v/@teamflojo/floimg-claude.svg)](https://www.npmjs.com/package/@teamflojo/floimg-claude) |\n\n### Generators\n\n| Package | Description | npm |\n| -------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |\n| [`@teamflojo/floimg-openai`](https://www.npmjs.com/package/@teamflojo/floimg-openai) | DALL-E image generation + vision | [![npm](https://img.shields.io/npm/v/@teamflojo/floimg-openai.svg)](https://www.npmjs.com/package/@teamflojo/floimg-openai) |\n| [`@teamflojo/floimg-stability`](https://www.npmjs.com/package/@teamflojo/floimg-stability) | Stability AI (SDXL, SD3) | [![npm](https://img.shields.io/npm/v/@teamflojo/floimg-stability.svg)](https://www.npmjs.com/package/@teamflojo/floimg-stability) |\n| [`@teamflojo/floimg-google`](https://www.npmjs.com/package/@teamflojo/floimg-google) | Google Imagen | [![npm](https://img.shields.io/npm/v/@teamflojo/floimg-google.svg)](https://www.npmjs.com/package/@teamflojo/floimg-google) |\n| [`@teamflojo/floimg-replicate`](https://www.npmjs.com/package/@teamflojo/floimg-replicate) | Replicate models (FLUX, GFPGAN) | [![npm](https://img.shields.io/npm/v/@teamflojo/floimg-replicate.svg)](https://www.npmjs.com/package/@teamflojo/floimg-replicate) |\n| [`@teamflojo/floimg-ollama`](https://www.npmjs.com/package/@teamflojo/floimg-ollama) | Ollama local AI (LLaVA, Llama) | [![npm](https://img.shields.io/npm/v/@teamflojo/floimg-ollama.svg)](https://www.npmjs.com/package/@teamflojo/floimg-ollama) |\n| [`@teamflojo/floimg-quickchart`](https://www.npmjs.com/package/@teamflojo/floimg-quickchart) | Chart.js charts | [![npm](https://img.shields.io/npm/v/@teamflojo/floimg-quickchart.svg)](https://www.npmjs.com/package/@teamflojo/floimg-quickchart) |\n| [`@teamflojo/floimg-d3`](https://www.npmjs.com/package/@teamflojo/floimg-d3) | D3 visualizations | [![npm](https://img.shields.io/npm/v/@teamflojo/floimg-d3.svg)](https://www.npmjs.com/package/@teamflojo/floimg-d3) |\n| [`@teamflojo/floimg-mermaid`](https://www.npmjs.com/package/@teamflojo/floimg-mermaid) | Mermaid diagrams | [![npm](https://img.shields.io/npm/v/@teamflojo/floimg-mermaid.svg)](https://www.npmjs.com/package/@teamflojo/floimg-mermaid) |\n| [`@teamflojo/floimg-qr`](https://www.npmjs.com/package/@teamflojo/floimg-qr) | QR codes | [![npm](https://img.shields.io/npm/v/@teamflojo/floimg-qr.svg)](https://www.npmjs.com/package/@teamflojo/floimg-qr) |\n| [`@teamflojo/floimg-screenshot`](https://www.npmjs.com/package/@teamflojo/floimg-screenshot) | Playwright screenshots | [![npm](https://img.shields.io/npm/v/@teamflojo/floimg-screenshot.svg)](https://www.npmjs.com/package/@teamflojo/floimg-screenshot) |\n\n### AI Transform Providers\n\nIn addition to generation, these packages provide AI-powered image transformations:\n\n| Package | Transforms |\n| ----------------------------- | ----------------------------------------------------- |\n| `@teamflojo/floimg-openai` | edit (inpaint), variations |\n| `@teamflojo/floimg-stability` | removeBackground, upscale, searchAndReplace, outpaint |\n| `@teamflojo/floimg-replicate` | faceRestore, colorize, realEsrgan, fluxEdit |\n\n```typescript\n// Example: Remove background with Stability AI\nconst noBg = await floimg.transform({\n blob: image,\n op: \"removeBackground\",\n provider: \"stability-transform\",\n});\n\n// Example: Restore faces with Replicate\nconst restored = await floimg.transform({\n blob: image,\n op: \"faceRestore\",\n provider: \"replicate-transform\",\n});\n```\n\n### FloImg Studio\n\n| Package | Description | npm |\n| -------------------------------------------------------------------------------------------------- | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |\n| [`@teamflojo/floimg-studio-ui`](https://www.npmjs.com/package/@teamflojo/floimg-studio-ui) | Visual editor components | [![npm](https://img.shields.io/npm/v/@teamflojo/floimg-studio-ui.svg)](https://www.npmjs.com/package/@teamflojo/floimg-studio-ui) |\n| [`@teamflojo/floimg-studio-shared`](https://www.npmjs.com/package/@teamflojo/floimg-studio-shared) | Shared types and utilities | [![npm](https://img.shields.io/npm/v/@teamflojo/floimg-studio-shared.svg)](https://www.npmjs.com/package/@teamflojo/floimg-studio-shared) |\n\n## FloImg Studio\n\nFloImg Studio is a visual workflow builder for FloImg. Design image pipelines with a drag-and-drop interface.\n\n### Self-Host\n\n```bash\ndocker run -d -p 5100:5100 -e OPENAI_API_KEY=sk-... ghcr.io/flojoinc/floimg-studio\n```\n\nThe Docker image supports **amd64** (Intel/AMD) and **arm64** (Apple Silicon, ARM servers).\n\nAccess at `http://localhost:5100`. See [apps/studio/DEPLOYMENT.md](./apps/studio/DEPLOYMENT.md) for more options.\n\n### Hosted Version\n\nA hosted version with cloud features is available at [studio.floimg.com](https://studio.floimg.com).\n\n## Documentation\n\n- **[Getting Started](https://floimg.com/docs/getting-started/quick-start)** - Installation and first steps\n- **[SDK Reference](https://floimg.com/docs/sdk/generate)** - TypeScript/JavaScript API\n- **[CLI Reference](https://floimg.com/docs/cli)** - Command-line usage\n- **[Claude Code](https://floimg.com/docs/claude-code)** - AI agent integration\n- **[Plugins](https://floimg.com/docs/plugins/quickchart)** - Generator documentation\n\n## Safety & Content Moderation\n\nFloImg Studio includes built-in content moderation to prevent harmful content:\n\n- **Scan Before Save** - All generated images pass through moderation before storage\n- **11 Categories** - Violence, hate, harassment, self-harm, sexual content, and more\n- **Powered by OpenAI** - Industry-standard moderation API\n- **Configurable** - Self-hosted users can disable or customize\n\nLearn more at [floimg.com/safety](https://floimg.com/safety).\n\n## Repository Structure\n\nThis is a **monorepo** containing multiple npm packages:\n\n```\npackages/\n├── floimg/ # Core engine and CLI (@teamflojo/floimg)\n├── floimg-mcp/ # MCP server for AI agents (@teamflojo/floimg-mcp)\n├── floimg-openai/ # DALL-E + GPT-4 Vision plugin\n├── floimg-stability/ # Stability AI plugin\n├── floimg-*/ # Other generator/transform plugins\n└── floimg-claude/ # Claude Code plugin\n\napps/\n└── studio/ # FloImg Studio visual workflow builder\n ├── frontend/ # React UI (@teamflojo/floimg-studio-ui)\n ├── backend/ # Fastify API server\n └── shared/ # Shared types (@teamflojo/floimg-studio-shared)\n```\n\nEach package in `packages/` is published to npm under `@teamflojo/*`. See the [Monorepo Guide](./vault/architecture/Monorepo-Guide.md) for development setup and creating new plugins.\n\n## For Developers\n\n### Quick Setup\n\n```bash\n# Verify prerequisites (Node 22+, pnpm 9+)\npnpm verify-setup\n\n# Install and build\npnpm install\npnpm -r build\npnpm -r test\n```\n\n### Architecture Docs\n\n- [Monorepo Guide](./vault/architecture/Monorepo-Guide.md) - Project structure and development\n- [Plugin Architecture](./vault/architecture/Plugin-Architecture.md) - Creating generators and transforms\n- [Development Setup](./vault/community/Development-Setup.md) - Local environment configuration\n\n### Community\n\n- [Contributing Guide](./vault/community/Contributing.md) - How to contribute\n- [Code of Conduct](./CODE_OF_CONDUCT.md) - Community standards\n- [Security Policy](./SECURITY.md) - Reporting vulnerabilities\n\n## Contributing\n\nWe welcome contributions—generators, storage backends, tests, docs.\n\n```bash\npnpm install && pnpm -r build && pnpm -r test\n```\n\nSee the [Contributing Guide](./vault/community/Contributing.md) for details.\n\n**Join our community:**\n\n- [Discord](https://discord.gg/ahb9FSGUzb) - Chat with the community\n- [GitHub Discussions](https://github.com/FlojoInc/floimg/discussions) - Ask questions, share ideas\n\n## Contributors\n\n\n \n\n\n## Star History\n\n[![Star History Chart](https://api.star-history.com/svg?repos=flojoinc/floimg&type=Date)](https://star-history.com/#flojoinc/floimg&Date)\n\n## License\n\nMIT - Maintained by [Flojo, Inc](https://goflojo.com)\n"}