Architecture

Flow App Studio is composed of four main components that work together to provide a complete flow-building and execution platform.

Components

flowstudio npm package

Package: flowstudio (MIT, published to npm)

The FlowStudio React component is the visual editor. It embeds into any React application and communicates with the Core API using your organisation’s API key.

Key internal parts:

• Canvas — XYFlow-based node graph editor with drag-and-drop
• Home pane — project browser and creation
• Studio pane — the flow design canvas with toolbar
• Simulator — in-editor flow testing panel
• App analytics — per-project session stats
• AI Creator — natural-language flow generation
• Zustand store — client-side state management with devtools and persistence

Flow Engine

Endpoint: https://engine.flowappstudio.com/v1

The engine is the runtime component. When a channel provider delivers a user message (via webhook), the engine:

1. Reads the incoming payload and maps fields using the Access Point’s request_map
2. Looks up or creates the session in Redis
3. Pre-indexes the flow’s nodes and edges for O(1) lookups
4. Evaluates the current node’s content — resolving variables ({{...}}), expressions (<<...>>), and pagination
5. Executes any Function or API Call nodes
6. Advances the session to the next node based on the user’s input
7. Formats the response using the Access Point’s response_map and response_template
8. Returns the formatted response to the provider

WebSocket support: The engine also exposes WebSocket consumers for real-time session updates.

Flow App Studio Web App

Stack: Next.js 14+, React 19, TypeScript, TailwindCSS, NextAuth 5

The hosted web app at flowappstudio.com  embeds the flowstudio SDK and provides:

• Authentication (sign up, sign in, TOTP 2FA, OTP)
• Organisation and team management
• Billing and subscription management
• Internationalisation (i18n, multi-language)

Security

• API keys are hashed at rest using FLSAPIKeyAuthentication
• Secrets are encrypted at rest and decrypted only at execution time
• IP whitelisting is available per provider to restrict webhook sources
• TOTP 2FA is available for user accounts
• RBAC enforces per-resource access control across all API endpoints