When curiosity Struck, I ended up building a workflow builder.

Recently, I came across React Flow and decided to give it a try and it’s such a powerful library for building interactive node-based UIs!

Through this, I learned a lot about:
  • How React Flow handles nodes, edges, and state management
  • Dynamically adding/removing nodes and updating connections
  • Customizing node components to create interactive UI elements
  • Managing workflow logic behind the scenes while keeping the UI intuitive

This experiment really helped me understand how tools like n8n or Zapier structure their flows under the hood — and how React Flow simplifies building something similar.

I got so excited that I decided to build something similar to n8n (that workflow automation tool). My version has four types of nodes:

  • Start Node - Where every workflow begins
  • AI Node - Does AI stuff like text processing, summarization, sentiment analysis, content generation
  • API Node - Makes HTTP requests to external services, handles webhooks, processes responses
  • End Node - Outputs the final result and formats data

The idea is simple: drag these nodes around, connect them, and create workflows where data flows from AI processing to API calls and back.

The Tricky Parts

  • Node Communication: Getting nodes to actually pass data to each other was harder than I thought. React Flow handles the visual connections, but you have to build the data pipeline yourself.

  • Dynamic Configuration: Each AI task and API call needs different settings. I had to figure out how to make the configuration panel change based on what type of operation you select - whether it's an AI node with prompt settings or an API node with headers and endpoints.