Quick Start

Create an account

Go to flowappstudio.com  and sign up. You can sign in with email and password, or enable TOTP two-factor authentication from your profile for extra security.

Create an organisation

After signing in, create an Organisation. All your projects, team members, and billing live under an organisation.

Get your API key

Open Organisation Settings and copy your API Key. You’ll pass this to the FlowStudio component as api_key.

Install the SDK

pnpm add flowstudio

npm install flowstudio

yarn add flowstudio

bun add flowstudio

Mount the component

Add FlowStudio to a page in your app. Import the styles too:

import { FlowStudio } from 'flowstudio'
import 'flowstudio/dist/styles.css'
 
export default function StudioPage() {
  return (
    <div style={{ height: '100vh' }}>
      <FlowStudio
        api_key={process.env.NEXT_PUBLIC_FLOWSTUDIO_API_KEY!}
        theme="light"
        primaryColor="#7c3aed"
      />
    </div>
  )
}

Create your first project

Inside the Flow App Studio builder, click New Project. Give it a name and optionally choose a template or category. Templates let you start from a pre-built flow pattern instead of a blank canvas.

Design your flow

The canvas opens in Draft mode. Add nodes from the toolbar:

• Start Node — the entry point, automatically created
• Normal Node — a step in your interaction (message + optional response options)
• End Node — terminates the conversation
• API Node — calls an external API mid-flow
• Go-To Node — redirects to another node without creating a new step

Connect nodes by dragging from an output handle to an input handle. See Design for the full reference.

Simulate before deploying

Click Simulate in the top toolbar to open the built-in simulator. Type responses as if you were a user and trace the flow step by step. Fix any logic issues before going live. See Simulate.

Set up a provider

Go to Providers and add a channel (e.g. Telegram, WhatsApp, USSD). Each provider gets a webhook URL from Flow App Studio. For Telegram, Line, and Viber, Flow App Studio can auto-register the webhook. For others, copy the URL and paste it in the provider’s developer console. See Deploy.

Publish and go live

When your flow is ready, click Publish. This promotes your draft to Live and the Flow Engine will start routing real user sessions through it. Your draft remains editable without affecting live traffic.