Flow Designer
The Flow Designer is the visual editor that opens when you pick Flow Designer on any app. In v0.9.11 it is the main view for an app — the only place to wire up endpoints, configure providers, edit nodes, run test calls, and publish a flow. The app's Overview tab is now intentionally slim: it shows version history and recent conversations and nothing else.
Path: /apps/{appId}/flows/builder
What's on screen
| Area | What it does |
|---|---|
| Canvas | A React Flow graph showing how a session reaches an AI conversation, branching, and termination. Mixes virtual structural nodes with real flow nodes. |
| Toolbar | Test call, publish, source view, version history, import / export, flow settings. |
| Right-panel inspector | Opens when you click any node, edge, or endpoint. Different inspector for each thing you click. |
| AI Flow Builder panel | Optional panel on top that lets you brief the flow in natural language. See AI Flow Builder. |
Two ways to author the same flow
The Flow Designer can be driven manually or through an AI assistant — both edit the same flow definition.
| Mode | When to use |
|---|---|
| Manual on the canvas | Adjust an individual node, configure a provider, fine-tune a transition, or change endpoint settings. |
| AI Flow Builder panel (feature-gated) | Draft a flow from a brief, restructure several nodes at once, or migrate an idea into a concrete graph. See below. |
| Source view (JSON) | Diff two flows, hand-edit a field that the UI doesn't surface, or move a flow between apps / environments via copy + paste. |
Real flow vs the bits and pieces
The canvas mixes two kinds of nodes on purpose:
- Conversation nodes — what actually runs at call time. A
voice_agentstep, a webhook, a condition branch, anendnode, and so on. - Virtual / structural nodes — explanations of the surrounding plumbing that aren't directly executable on their own: the Start root, Entry Point chips, Default Provider chips, Surface groups that fan out into channels, and Action capability chips that summarise which actions an agent can take.
The virtual nodes are not "extra config you have to define" — they're rendered from the flow definition so the graph tells the whole story (where calls come in, which providers handle audio, what a voice agent can do). Clicking any of them opens the relevant settings drawer or inspector.
See Node catalogue for a complete reference.
Inspectors
The right panel switches based on what you select:
| You click on… | Inspector that opens |
|---|---|
| A conversation node | The Node Inspector for that node type (different tabs per type). |
| An Entry Point chip | The Endpoint Inspector (type, base number / slug, allowed origins). |
| The Start node or a default provider chip | The Flow Settings drawer (endpoints list, app settings, language, default provider). |
| An edge / transition | A small Transition popover for label, condition and target. |
| The Variables toolbar item | The Variable Catalogue panel. |
| The Version history icon | The Version History drawer. |
Details for each inspector are on Inspectors.
Draft and publish
Every flow lives in two states:
- Draft — your in-progress edits. Safe to mutate at will. Testable via a one-click test call (the Flow Designer creates a temporary WebRTC endpoint behind the scenes, gated by the
webrtcflag). - Published — the version currently synced to the real endpoint(s) on the platform. Conversations that reach the app run against this version.
The legacy "sync this app" button is gone. Publish is the only sync. See Draft and publish for the full lifecycle.