How vernamusic/flowai works
FlowAI is a browser-based visual workflow builder. Users create or select a saved workflow, add and connect nodes on the canvas, configure nodes and variables, run the workflow, and review execution logs. The editor and Zustand store coordinate the workflow UI; execution evaluates node order and uses variable resolution and HTTP-request handling. Persistence is browser localStorage, not a backend. The graph follows README descriptions and indexed imports; unsampled modules are included where their role is documented, without assuming unshown calls.
Main entry points: workflow.store.ts Workflow store · workflow-canvas.tsx Workflow canvas · workflow-editor.tsx Workflow editor · execution-engine.ts Execution engine
Components 23
Application
- Dashboard
src/components/dashboard/dashboard-overview.tsx - Workflow routes
src/app/(dashboard)/workflows/[id]/page.tsx - Workflow list
src/components/workflow/workflow-list.tsx - Create workflow
src/components/workflow/new-workflow-button.tsx
Workflow design
- Workflow editor
src/components/workflow/editor/workflow-editor.tsx - Workflow canvas
src/components/workflow/editor/workflow-canvas.tsx - Node library
src/components/workflow/sidebar/node-library.tsx - Node definitions
src/constants/nodes.ts - Canvas node
src/components/workflow/nodes/workflow-node.tsx - Workflow inspector
src/components/workflow/inspector/workflow-inspector.tsx - Node configuration
src/components/workflow/configuration/node-config-panel.tsx - Variable inputs
src/components/workflow/variables/variable-input.tsx
Execution runtime
- Execution engine
src/lib/workflow/execution/execution-engine.ts - HTTP requests
src/lib/workflow/execution/http-request.ts - Run workflow
src/lib/workflow/execution/run-workflow-button.tsx - Execution panel
src/components/workflow/execution/execution-panel.tsx - Execution logs
src/components/workflow/execution/execution-logs.tsx
State and persistence
- Workflow store
src/store/workflow.store.ts - Browser storage
src/lib/workflow/workflow-storage.ts
Variables
- Variable context
src/lib/workflow/variables/variable-context.ts - Variable parser
src/lib/workflow/variables/variable-parser.ts - Variable resolver
src/lib/workflow/variables/variable-resolver.ts
Other components
- User
Connections 29
- User → Dashboard: opens
- User → Workflow list: browses
- Dashboard → Browser storage: reads workflows
src/components/dashboard/dashboard-overview.tsx - Workflow list → Browser storage: reads workflows
src/components/workflow/workflow-list.tsx - Workflow list → Workflow store: deletes workflow
src/components/workflow/workflow-list.tsx - User → Create workflow: creates
src/components/workflow/new-workflow-button.tsx - Create workflow → Workflow store: initializes
src/components/workflow/new-workflow-button.tsx - Workflow routes → Workflow editor: renders
src/app/(dashboard)/workflows/[id]/page.tsx - Workflow editor → Workflow canvas: renders
src/components/workflow/editor/workflow-editor.tsx - Workflow editor → Workflow inspector: renders
src/components/workflow/editor/workflow-editor.tsx - Workflow editor → Node library: renders
src/components/workflow/editor/workflow-editor.tsx - Node library → Node definitions: uses definitions
src/components/workflow/sidebar/node-library.tsx - Workflow canvas → Canvas node: renders
src/components/workflow/editor/workflow-canvas.tsx - Workflow canvas → Workflow store: updates workflow
src/components/workflow/editor/workflow-canvas.tsx - Workflow canvas → Node library: accepts dropped nodes
- Workflow canvas → Node definitions: creates node
- Workflow inspector → Node configuration: configures node
- Node configuration → Workflow store: updates configuration
src/components/workflow/configuration/node-config-panel.tsx - Variable inputs → Workflow store: edits workflow values
- Workflow store → Browser storage: saves workflow
src/store/workflow.store.ts - Workflow store → Execution engine: runs workflow
src/store/workflow.store.ts - Run workflow → Workflow store: starts run
src/lib/workflow/execution/run-workflow-button.tsx - Execution engine → HTTP requests: executes requests
src/lib/workflow/execution/execution-engine.ts - Execution engine → Variable context: builds context
src/lib/workflow/execution/execution-engine.ts - Execution engine → Variable resolver: resolves config
src/lib/workflow/execution/execution-engine.ts - Variable resolver → Variable parser: parses expressions
src/lib/workflow/variables/variable-resolver.ts - Variable resolver → Variable context: reads values
src/lib/workflow/variables/variable-resolver.ts - Execution panel → Workflow store: reads execution state
src/components/workflow/execution/execution-panel.tsx - Execution logs → Workflow store: reads execution logs
src/components/workflow/execution/execution-logs.tsx