Descriptions:
Stephanie Nyarko builds a complete AI-powered marketing flyer generator from scratch, covering the full stack: an n8n automation backend connected to a Firebase Studio frontend, with Google Gemini handling both flyer concept generation and final image creation. The finished application lets a user upload a product photo, enter details like brand name and key benefits, and receive a polished ad flyer automatically — no design software or manual layout required.
The n8n workflow walkthrough covers several concrete engineering decisions. A webhook node receives multipart input including a base64-encoded product image, which must be stripped of its data URI prefix and converted to a binary file before further processing. An image resizing step prevents oversized inputs from exceeding Gemini’s API limits. An AI Agents node — with explicit guard rules to constrain output format — generates a structured flyer concept prompt based on the product metadata, specifying layout, mood, and visual direction. That prompt, combined with the original product image as a visual reference, is then passed to the Gemini image generation endpoint. A cleanup node extracts only the relevant fields from Gemini’s verbose response before the final image is returned to the browser.
The Firebase Studio section covers frontend construction, including how the UI packages and sends product data and image uploads to the n8n webhook. Nyarko also addresses the security gap between tutorial-grade wildcard CORS settings and production-appropriate origin allowlists. Workflow templates with full prompt text are available for download through her community, making the build directly reproducible.
📺 Source: Stephanie Nyarko · Published January 22, 2026
🏷️ Format: Hands On Build
