How I built a browser-based n8n workflow generator using Gemini AI

Source: Dev.to

I kept hitting the same friction point while working with n8n — every time I had a quick workflow idea, I had to open my n8n instance, hunt for the right nodes, wire them up manually, just to prototype something that might not even work. So I built a small tool to fix that.

What it does

• A single HTML file that runs entirely in your browser.
• Paste your free Gemini API key, describe your workflow in plain English, and it generates n8n‑compatible workflow JSON you can import directly.
• No server, no backend, no n8n instance needed to generate the workflow.

How it works

The tool sends your plain‑English prompt to the Gemini API with a system prompt engineered to output valid n8n workflow JSON — correct node types, parameters structure, and connections format.

The key challenge was getting Gemini to output JSON that n8n actually accepts on import. n8n’s workflow JSON has a specific structure — nodes need correct typeVersion, position arrays, and the connections object must map node names exactly.

After several iterations the output imports cleanly with nodes and connections intact. Credentials are intentionally excluded — n8n never stores credentials in workflow JSON anyway, so users connect their own after import as usual.

What’s included

• The HTML generator tool (BYOK Gemini API)
• 5 ready‑to‑import workflow JSON files:
  • Slack → Google Sheets logging
  • Gmail → Drive attachment backup
  • RSS → Twitter/X auto‑post
  • Typeform webhook router
  • Notion → email digest

Try it

If you’re an n8n user who wants a faster prototyping experience outside your instance, the pack is available here:
https://gum.new/gum/cmnbl4rwm000a04jicqkiatrf

This post was written with AI assistance.