Visual AI Workflow Builder using Next.js, React Flow, Zustand & Tailwind. Drag-and-drop nodes, connect steps, and simulate AI agent execution in real time.
- Node-based Editor: Create and manage AI workflows with an intuitive drag-and-drop interface.
- Real-time Simulation: Test and visualize AI agent execution instantly.
- Connect Steps: Easily link nodes to define complex workflows.
- State Management: Powered by Zustand for fast and reactive state handling.
- Modern Design: Built with TailwindCSS for responsive, clean, and professional UI.
- Frontend: Next.js (React)
- Visual Workflow: React Flow
- State Management: Zustand
- Styling: TailwindCSS
- Fonts: Poppins & Montserrat
-
Add Nodes
Click anywhere on the canvas to add new workflow nodes. -
Connect Nodes
Drag from a node’s handle to another node to define the workflow sequence. -
Simulate Execution
Preview how your AI agents execute the workflow in real time, helping you identify issues or optimize steps.
- Fonts: Easily switch typography by updating the
layout.tsxGoogle Fonts configuration. - Theme: TailwindCSS makes it simple to change colors, spacing, and enable dark mode.
- Nodes: Extend or create custom React Flow node components for advanced functionality.
- State Management: Modify Zustand stores to adjust workflow logic, node data, or simulation behavior.
FlowForge AI was designed for:
- Developers looking to visualize complex AI processes.
- Data Scientists who want to experiment with AI workflows without writing extensive code.
- AI Enthusiasts seeking a drag-and-drop interface to prototype and simulate agent behavior.
It aims to make AI workflow creation intuitive, visual, and interactive, bridging the gap between concept and execution.