Last year I was prototyping a tool to estimate carbon footprint for companies based on their accounting and supporting documents. The process involved many steps, including various AI utilities, from simple text extraction to more advanced OCR tools, from regex-based data extraction to LLM chains of thought, from document classification using computer vision models to question-answering techniques with vision-language models, and from basic SQL queries to embedding retrieval strategies. There were countless combinations to validate, and a purely code-based approach to manage all these steps quickly felt cumbersome. A low-code/no-code solution seemed like an ideal way to enable non-technical colleagues to configure and oversee these workflows without depending on developers for every adjustment.
Over the last couple of years, workflow management applications have emerged as powerful tools to bridge this gap, offering visual interfaces to define and monitor complex processes. Alongside established solutions like Apache Airflow for DAG automation, Camunda or n8n for BPMN-based workflows, newer tools have surfaced with powerful and polished UIs, leveraging frameworks like ReactFlow or its alternatives. These frameworks have enabled tools like LangFlow and FlowiseAI for LLM applications, or ComfyUI and others for image generation, to deliver intuitive visual editors that simplify the creation and management of workflows. Inspired by this trend, I started experimenting with building a tailored solution, resulting in Flowizer and its companion UI, Flowizer-UI.
Diving into React and ReactFlow without prior experience in JavaScript, Node.js, and only basic frontend development quickly highlighted the challenges of building a fully-featured interface from scratch. The initial vision of crafting a comprehensive UI, with dedicated nodes for every utility—be it OCR tools, regex extraction modules, or LLM integrations—soon proved overly ambitious. Each node would require tailored frontend logic, backend communication, and UI design, demanding far more development time than I could afford for this project. At the same time, it became evident that a solid, flexible backend was not just a nice-to-have but an urgent necessity. Without a reliable system to orchestrate the complex logic of workflow execution, even the most polished frontend would fall short.
This realization shifted the focus: the initial UI experiment, dubbed workflowbuilder, evolved into Flowizer, a Python API backend designed to handle the core logic, task orchestration, and data flow seamlessly. With the backend in place, the focus then returned to Flowizer-UI, but this time with a clearer goal: to prioritize visual workflow manipulation over an exhaustive library of empty, pre-built nodes. The result was a more pragmatic interface, one that emphasized clarity, configurability, and smooth interaction with the backend rather than attempting to replicate every possible node type upfront.
Apache Airflow
FlowiseAI
ComfyUI
n8n
WorkFlowBuilder
flowizer-ui
Why Build Custom Tools?
In the evolving landscape of AI and workflow automation, off-the-shelf tools like FlowiseAI, n8n, ..., have become popular for their intuitive drag-and-drop interfaces. While these platforms are powerful, they often come with assumptions about workflow structure and constraints that may not align perfectly with every use case, or they require steep learning curves.
Flowizer and its companion interface, Flowizer-UI, emerged as an experimental attempt to address these problems. These projects were built to prototype workflows where AI, machine learning models, and traditional data processing pipelines intersect. By focusing on adaptability and simplicity, the goal was to create a toolchain that could handle dynamic data flows and decision-making processes without the overhead of fully-featured production systems.
Many existing frameworks are either highly specialized or overly complex for prototyping early-stage workflows. A lightweight, modular approach can often provide clarity during experimentation. Flowizer uses a Directed Acyclic Graph (DAG) structure to manage tasks, while Flowizer-UI serves as a visual layer to simplify the configuration and execution of these tasks.
React, Next.js, and TypeScript in Flowizer-UI
Flowizer-UI is built using the Next.js framework, which provides server-side rendering and optimized performance for web applications. The decision to use TypeScript instead of JavaScript was driven by the need for better type safety and clearer code documentation. This choice made it easier to manage complex state transitions in the ReactFlow-based interface and reduced runtime errors during development.
Adjustments to Flowizer for UI Integration
Integrating Flowizer with Flowizer-UI required key adjustments on the backend. Pydantic classes were introduced to define clear data models for API communication, enabling seamless interactions between the Python backend and the React frontend. Additionally, CORS middleware was configured to allow cross-origin requests, ensuring smooth communication during workflow execution and visualization.
ReactFlow: A Flexible UI Framework
At the heart of Flowizer-UI lies ReactFlow, a customizable React component for building node-based editors and interactive diagrams. With a clean and well-structured documentation, ReactFlow provides clear explanations, practical examples, and step-by-step guides, making it accessible even to developers who are new to building interactive graph-based UIs. Beyond the documentation, ReactFlow boasts a rich ecosystem of open-source projects showcasing diverse use cases—from data visualization dashboards to dynamic workflow editors. These projects not only serve as inspiration but also provide ready-made patterns and best practices that developers can leverage. Its declarative API and highly customizable components make it a robust choice for creating tailored visual representations of workflows while maintaining flexibility and scalability.
Core Features of Flowizer-UI
- YAML Workflow Import: Load and parse YAML workflow configurations into interactive visual graphs.
- Sidebar with Contextual Tabs:
- Workflow: Edit YAML configurations directly in a code editor.
- Node: Inspect and modify the Python code defining specific tasks.
- DTO (Data Transfer Object): View real-time data being exchanged between nodes.
- Interactive Node Management: Add, edit, or remove nodes directly from the UI.
- Execution Control: Trigger workflows and monitor execution via API calls.
Lessons Learned
Building Flowizer-UI was as much about learning as it was about solving a specific problem. The combination of YAML-based configurations, ReactFlow diagrams, and Python backend logic provided a flexible playground for testing workflow ideas. Flowizer-UI is not a production-grade tool but a proof of concept—a space to experiment with complex AI workflows in a more approachable and visual way. Sometimes, building something custom is the best way to explore the boundaries of what's possible.