AI Image Generation

Flowmo's AI Image Generator lets you create brand-new images from text descriptions or edit existing images using natural language -- all without leaving the designer. Whether you need a hero illustration, a product mockup, or a quick background, you can generate it in seconds and drop it straight onto your canvas.

The Image Generator is available in two places: as a standalone chat assistant (called "Image Gen") inside the AI sidebar, and as part of the Media Gen visual flow canvas. This article covers both workflows.

---

Prerequisites

Before you start generating images, make sure you have:

• An active Flowmo project open in the designer. The Image Generator works within the context of a project so it can save generated assets to your media library.
• A signed-in account. You must be authenticated to use AI generation features.
• A clear idea of what you want. The more descriptive your prompt, the better the result. Include details like style, mood, composition, and subject matter.

---

How It Works

Under the hood, Flowmo uses Nano Banana -- a custom image-generation pipeline powered by Google's Gemini models. Two model tiers are available:

Model	Label in UI	Best for
Nano Banana	Nano Banana	Fast generation, everyday images
Nano Banana Pro	Nano Banana Pro	Higher-fidelity output

When you attach an existing image to your prompt, the assistant switches to edit mode automatically. It uses the same model but instructs it to modify the attached image rather than create one from scratch.

---

Method 1: Image Gen Chat Assistant

The Image Gen assistant lives in the AI sidebar alongside all other Flowmo assistants. It gives you a simple chat-based workflow -- type a prompt, get an image.

Step 1: Open the AI Sidebar and Select Image Gen

1. Open your project in the Flowmo designer.
2. Open the AI sidebar on the right side of the screen.
3. Click the assistant type dropdown at the top of the chat panel. The dropdown button shows the currently active assistant name (for example, "Smart Agent" or "HTML").
4. In the popover menu, click Image Generator (shown with a wand icon).

The assistant header updates to show "Image Gen" as the active mode. The description reads: "Generate and edit images with Gemini 2.5 Flash!"

Step 2: Write Your Prompt

Type a description of the image you want into the chat input. Be specific about:

• Subject: What should appear in the image (a person, product, landscape, abstract pattern, etc.)
• Style: Photorealistic, illustration, flat design, watercolor, 3D render, etc.
• Mood/Lighting: Warm, moody, bright, cinematic, soft natural light, etc.
• Composition: Close-up, wide shot, centered, rule-of-thirds, etc.

Example prompts:

"A modern SaaS dashboard mockup on a dark background with purple accent lighting, photorealistic 3D render"

"Flat illustration of a person working at a standing desk, pastel color palette, minimalist style"

"Abstract gradient background, deep blue to violet, with subtle noise texture"

Press Enter or click the send button to submit.

Step 3: Edit an Existing Image (Optional)

To edit an image rather than generate one from scratch:

1. Click the attachment button in the chat input area.
2. Upload the image you want to modify.
3. Write your editing instruction as the prompt (for example, "Remove the background and replace it with a soft gradient" or "Change the shirt color to blue").

The assistant detects the attached image and switches to edit mode. It blends your changes seamlessly with the original image while maintaining its style and quality.

Note: You can attach multiple images, but the assistant uses the first image as the base for editing.

Step 4: Use Your Generated Image

Once generation is complete, the assistant displays a success message: "Image Generation Complete! Your image has been generated successfully using Nano Banana 2."

Below the message you will see your generated image along with action buttons:

• Add -- Inserts the image as a new element on your canvas.
• Replace -- Replaces the currently selected element's image source with the generated image (useful when you have an image placeholder selected on the canvas).
• Download -- Saves the image file to your computer.

The generated image is also automatically uploaded to your project's media library for future use.

---

Method 2: Media Gen Flow Canvas

The Media Gen canvas gives you a node-based visual workflow for more complex image operations. It is especially powerful when you want to chain multiple operations together -- for example, generate an image, remove its background, then edit a specific region.

Opening Media Gen

1. In the AI sidebar, click the assistant type dropdown.
2. Select Media Gen (Beta) at the bottom of the list (shown with a film reel icon and a rose/pink accent).

The interface switches from a chat panel to a visual flow canvas powered by React Flow, where you connect nodes with wires.

Image Generation Node (Image Generator)

The Image Generator node creates images from text prompts.

1. Add an Image Generator node to the canvas.
2. Connect a Text Prompt node to its "Prompt" input handle.
3. Optionally connect a reference image to the "Ref Images" input handle.
4. Expand the node to configure settings:

• Model: Choose between Nano Banana 2 (Fast) or nano banana pro (4K).
• Aspect Ratio: 1:1, 3:4, 4:3, 16:9, or 9:16.
• Resolution: 0.5K (512px), 1K (1024px), 2K (2048px), or 4K (4096px). The 0.5K option is only available with Nano Banana 2.

1. Under Advanced Options, you can set:

• Negative Prompt: Describe what you do not want in the image (for example, "blurry, low quality, watermark").
• Images per Generation: Generate 1 to 4 images at once.

1. Click Generate (or the generation button) to start.

When the image appears in the node's output area, hover over it to reveal action buttons:

• Zoom (magnifying glass) -- Opens a fullscreen lightbox view.
• More options (three dots) -- Opens a menu with Add to canvas, Paste to Replace, and Download.

AI Editor Node (Masked Edit)

The AI Editor node lets you make targeted edits to an image using a brush mask. It has two modes:

• Remove BG -- Removes the background from the connected image. Simply connect an image and click "Remove Background."
• Brush Edit -- Paints a mask over the area you want to change, then applies an AI edit based on a connected text prompt.

To use Brush Edit:

1. Connect an image to the "Image" input and a text prompt to the "Prompt" input.
2. Switch to Brush Edit mode using the tab toggle at the top of the node.
3. Click the image preview or the Paint Mask button to open the Mask Editor.
4. In the Mask Editor, paint over the area you want the AI to change. You can adjust the Brush Size slider (5px to 150px), use the Invert Mask toggle to flip which area gets edited, or click Clear to start over.
5. Click Save Mask to confirm your selection.
6. Back in the node, click Generate Edit to apply the change.

If you skip painting a mask, the AI edits the entire image (whole-image mode).

Remove BG Node

The standalone Remove BG node is a simpler, dedicated background-removal node. Connect an image to its input, click Remove Background, and the output is a transparent-background PNG. This node uses the same Nano Banana 2 model.

Chaining Nodes

The real power of Media Gen comes from chaining nodes together. For example:

1. Text Prompt -> Image Generator (create an image from a description)
2. Image Generator -> Remove BG (strip the background)
3. Remove BG -> AI Editor with a new text prompt (composite the subject onto a new scene)

Each node's output handle connects to the next node's input handle. Results flow through the chain automatically.

---

Tips for Better Results

• Be specific with your prompts. Instead of "a cat", try "a fluffy orange tabby cat sitting on a windowsill, golden hour sunlight, shallow depth of field, photorealistic."
• Use negative prompts in Media Gen. Adding "blurry, distorted, low resolution, watermark" as a negative prompt helps the model avoid common artifacts.
• Start at lower resolution for iteration. Generate at 0.5K or 1K to explore ideas quickly, then re-generate your favorite at 2K or 4K for production use.
• Leverage edit mode for refinements. Rather than re-generating from scratch, attach your best result and ask for specific changes like "make the sky more dramatic" or "add a subtle reflection on the floor."
• Use the Mask Editor for precision. When you only want to change one part of an image (swap a background, recolor an object, add an element), the Brush Edit mask keeps the rest of the image untouched.

---

Common Issues

Issue	Solution
"Please authenticate to use the Image Generation Assistant."	Sign in to your Flowmo account before generating images.
"Please provide a description of the image you want to generate or edit."	You submitted an empty prompt. Type a description before pressing Enter.
Image quality is not what you expected	Try a more detailed prompt, increase the resolution, or add a negative prompt to exclude unwanted artifacts.
Edit mode is not detecting your attached image	Make sure the image file is valid and fully uploaded before submitting. The assistant checks the first attached image.
Media Gen node says "Connect Image Source"	Wire an output handle from another node (Image Generator, or an image upload) into the node's image input handle on the left side.

---

Related Articles

• Getting Started with Vibe Mode -- Overview of the AI-powered design workspace.
• AI Smart Router -- How the Main Agent automatically routes your requests to the right assistant.
• AI Video Generation -- Generate video clips with AI using similar workflows.