Flow App Studio

Flow App Studio is a platform for building, deploying, and managing interactive flow-based applications — USSD menus, chatbots, surveys, voting systems, WhatsApp bots, and more. You design your flow visually, connect it to a channel provider, and the Flow Engine handles all user sessions at scale.

The platform has three parts that work together:

Installation

Install the flowstudio builder SDK into your JavaScript project:

pnpm add flowstudio

npm install flowstudio

yarn add flowstudio

bun add flowstudio

Then import the stylesheet alongside the component:

import { FlowStudio } from 'flowstudio'
import 'flowstudio/dist/styles.css'

Basic Usage

Mount FlowStudio anywhere in your React application. At minimum you need an api_key:

import { FlowStudio } from 'flowstudio'
import 'flowstudio/dist/styles.css'
 
export default function App() {
  return (
    <FlowStudio
      api_key="your-api-key-here"
    />
  )
}

All Props

QuotaData shape

interface QuotaData {
  plan?: string           // e.g. 'Free', 'Basic', 'Gold', 'Diamond'
  max_apps?: number       // maximum projects allowed
  max_team_members?: number
  max_sessions?: number   // monthly session limit
  current_apps?: number   // how many projects currently exist
  current_sessions?: number
}

Full example with quota enforcement

import { FlowStudio } from 'flowstudio'
import 'flowstudio/dist/styles.css'
 
export default function StudioPage() {
  return (
    <FlowStudio
      api_key={process.env.NEXT_PUBLIC_FLOWSTUDIO_API_KEY!}
      theme="dark"
      primaryColor="#7c3aed"
      quota={{
        plan: 'Basic',
        max_apps: 5,
        max_sessions: 10000,
        current_apps: 3,
        current_sessions: 4200,
      }}
    />
  )
}

Supported Channels

Flow App Studio connects to 9 channel types:

Why Flow App Studio?

• Visual, no-code design — build multi-step flows with a drag-and-drop node editor; no programming required for simple flows.
• Multi-channel — one flow engine handles USSD, chatbots, and messaging platforms under a single model.
• Custom logic — write JavaScript functions and external API calls directly inside your flow for when you need code.
• Team collaboration — invite team members, assign roles, and manage access with built-in RBAC.
• Scalable sessions — the Flow Engine is built for high concurrency with Redis-backed session state and Celery async processing.
• Draft and live versions — iterate on a flow in draft mode without affecting live users.

FAQ