How We Built a Visual AI Workflow Builder — Lessons from Connecting Gemini, OpenAI, and Grok in One Canvas

We built NODLES -- a visual AI workflow builder where you drag nodes onto a canvas, connect multiple AI providers into a single pipeline, and execute everything with one click. No glue code. No SDK juggling. Just a graph you can see and reason about. This post covers what we learned building it: the architecture decisions that worked, the multi-provider challenges that almost broke us, and why we chose BYOK (Bring Your Own Keys) as our business model instead of charging per generation. The Problem We Were Solving If you've ever built an AI pipeline, you know the pattern: write a Python script, call one API, parse the response, feed it to the next API, handle errors, manage rate limits, repeat. Switch providers and you rewrite half of it. We wanted a tool where you could visually compose AI workflows -- text generation, image creation, video synthesis, quality checks -- from different providers, in one place, without writing code. The result is a React + TypeScript app built on React Fl