AI Interactive Image Editor with FLUX Generative Fill

Unlock On-Demand AI Image Editing with this AI Agent

This n8n workflow transforms into an AI-powered image editing assistant. It serves a dynamic web interface where users can upload images, mask areas for modification, and provide text prompts to guide the FLUX generative fill AI. Ideal for solopreneurs, founders, and marketing teams needing to quickly iterate on visuals, create product mockups, or generate unique ad creatives without complex software.

Key Features & Benefits

• Interactive Web Editor: Provides a user-friendly browser-based editor with image loading (pre-defined or local upload), masking tools (Konva.js powered), and prompt input.
• AI Generative Fill: Leverages an external FLUX Fill API for powerful inpainting and outpainting capabilities, allowing users to seamlessly add, remove, or replace elements in images based on text prompts.
• Asynchronous AI Processing: Intelligently handles the AI image generation, polling for results and updating the user when the image is ready.
• Before & After Comparison: The editor includes an image comparison slider to easily contrast the original image with the AI-generated version.
• Customizable Parameters: Allows adjustment of AI generation settings like steps and guidance for finer control over the output.
• Direct Image Output: Serves the final generated image directly back to the editor for immediate use or download.

• An n8n instance (Cloud or self-hosted).
• Credentials for the FLUX Fill API (e.g., https://api.bfl.ml/). This workflow expects an API key to be configured in an n8n HTTP Header Auth credential named 'bfl-FLUX'.
• Web browser for accessing the editor interface.
• Internet access for the n8n instance (to call the FLUX API) and for the end-user's browser (to load editor assets like Konva.js and custom scripts from CDNs).

1. Download the n8n workflow JSON file.
2. Import the workflow into your n8n instance.
3. Configure the 'FLUX Fill' and 'Check FLUX status' HTTP Request nodes: Edit these nodes and for the 'Authentication' parameter (set to 'Header Auth'), select your 'bfl-FLUX' credential. If it doesn't exist, click 'Create New', name it 'bfl-FLUX', and add the necessary HTTP header for your FLUX API authentication (e.g., Name: Authorization, Value: Bearer YOUR_FLUX_API_KEY).
4. (Optional) Customize the default images offered in the editor by modifying the 'Mockups' Set node. Update the URLs and titles in the Images array.
5. Ensure your n8n instance's webhook URL is publicly accessible if you plan to use the editor from different devices or locations.
6. Activate the workflow.
7. Access the editor by opening the production webhook URL found in the 'Webhook' node (e.g., YOUR_N8N_INSTANCE_URL/webhook/flux-fill). The editor will use this same base URL to send image data for processing.