@teamflojo/floimg-claude

Claude Code plugin for floimg - Universal image generation and workflows.

Generate charts, diagrams, QR codes, screenshots, and AI images directly from Claude Code.

Full Documentation →

Quick Start

Install the plugin and simple commands work immediately:

npm install -g @teamflojo/floimg-claude

Then try:

/floimg:qr https://floimg.com
/floimg:chart bar chart with Q1: 100, Q2: 150, Q3: 200

That's it! Simple commands use npx under the hood - no additional setup required.

Architecture

| Command Type | Method | Works Immediately? | | ------------------------------------------------------------------------------- | ----------- | ------------------ | | Simple (/floimg:qr, /floimg:chart, /floimg:diagram, /floimg:screenshot) | CLI via npx | Yes | | Complex (/floimg:image, /floimg:workflow) | MCP | After restart |

Simple commands work out of the box via CLI.

Complex workflows (multi-step transforms, iteration) use MCP for session state. Restart Claude Code once to enable MCP.

Slash Commands

| Command | Description | Method | | -------------------- | ---------------------------------------- | ------ | | /floimg:qr | Create QR codes | CLI | | /floimg:chart | Data visualizations with QuickChart | CLI | | /floimg:diagram | Mermaid diagrams (flowcharts, sequences) | CLI | | /floimg:screenshot | Capture webpages | CLI | | /floimg:image | Generate any image with transforms | MCP | | /floimg:workflow | Multi-step pipelines | MCP |

Usage Examples

Simple Tasks (Work Immediately)

/floimg:qr https://floimg.com
/floimg:chart pie chart: Desktop 60%, Mobile 30%, Tablet 10%
/floimg:diagram user login flow: user -> form -> auth -> dashboard
/floimg:screenshot https://github.com

Complex Workflows (After MCP Enabled)

For multi-step workflows with iteration:

/floimg:workflow Create a hero image, resize to 1200x630, add caption, save to S3

Or iterate naturally:

User: "Create a hero image for my tech blog"
Claude: [generates image]

User: "Make it more vibrant"
Claude: [transforms the same image]

User: "Add our tagline at the bottom"
Claude: [adds caption]

Session state enables referencing previous images without file paths.

MCP Setup (For Complex Workflows)

MCP unlocks:

• Multi-step transforms: generate → resize → caption → save
• Iterative refinement: "make it bluer", "add more contrast"
• Session state: reference images by ID, not file paths

After installing the plugin, restart Claude Code once. The MCP server auto-configures.

Or manually add to your MCP config:

{
  "mcpServers": {
    "floimg": {
      "command": "npx",
      "args": ["-y", "@teamflojo/floimg", "mcp"]
    }
  }
}

Configuration

Set environment variables for optional features:

# For AI image generation (DALL-E)
export OPENAI_API_KEY=sk-...

# For cloud storage
export AWS_ACCESS_KEY_ID=...
export AWS_SECRET_ACCESS_KEY=...
export S3_BUCKET=my-bucket

Image Architect Agent

A specialized agent for complex image tasks:

• Choosing the right generator for each task
• Planning multi-step image workflows
• Optimizing image pipelines

Auto-Discovery Skill

Claude automatically detects image-related tasks when you mention:

• Charts, graphs, visualizations
• Diagrams, flowcharts, sequences
• QR codes, screenshots
• Images, photos, illustrations

Just describe what you need in natural language.

Supported Generators

| Generator | Triggered By | Requires | | ------------- | ---------------------------- | ---------------- | | OpenAI/DALL-E | photo, illustration, scene | OPENAI_API_KEY | | QuickChart | chart, graph, bar, pie | (included) | | Mermaid | flowchart, diagram, sequence | (included) | | QR | qr code, barcode | (included) | | Screenshot | screenshot, capture | (included) |

Transform Operations

With MCP enabled, transform images:

• resize - Scale to specific dimensions
• blur - Apply Gaussian blur
• sharpen - Sharpen edges
• grayscale - Remove color
• roundCorners - Add border radius
• addText - Overlay text
• addCaption - Add caption bar
• preset - Apply filters (vintage, vibrant, dramatic, soft)

Save Destinations

• Local: ./output/image.png
• S3: s3://bucket/path/image.png
• R2: r2://bucket/path/image.png
• Tigris: tigris://bucket/path/image.png

Requirements

• Node.js >= 18.0.0
• Claude Code >= 1.0.0

Documentation

• Getting Started - Setup and configuration
• Commands - Slash command reference
• Agent - Image Architect agent
• Skills - Auto-discovery behavior

Links

• floimg Website
• floimg Documentation
• GitHub Repository
• Report Issues

License

MIT