Bot Have: Visual Chatbot Builder

From Canvas to State Machine

The core challenge was turning a graph anyone could draw into something a server could execute deterministically, at scale, without surprises. We solved this with a three-layer pipeline:

Visual Authoring (React Flow): Product managers drag logic nodes — message, condition, API call, capture — onto a canvas and wire them together. No syntax, no code; the graph itself is the source of truth.
Compilation (Node.js): On save, the graph is validated and compiled into a finite state machine: each node becomes a state, each connection a transition. Dangling nodes and unreachable branches are caught here, before they ever reach a live conversation.
Execution (Redis + PostgreSQL): Redis holds the hot path — the current state and short-term context for every in-flight conversation — so responses stay fast no matter how complex the flow gets. PostgreSQL persists the compiled flow definitions plus conversation history, which is what powers the drop-off and completion views teams actually use to improve a flow.

Handling the Unscripted

Real conversations don't stay on the happy path. Any node can hand off to the OpenAI API for free-text understanding — reading intent well enough to route back into the right branch of the graph — so a scripted flow doesn't collapse into "sorry, I didn't understand that" the moment someone phrases things differently than expected.

Key Innovations

A Live Testing Pane: every edit to the graph is instantly testable in an embedded chat panel, with no deploy step between authoring and seeing the bot respond.
A State Machine, Not Prompt Chaining: because behavior compiles down to explicit states and transitions, non-technical builders get the reliability of a real state machine without writing one.
One-Click Multi-Platform Deploy: the same compiled flow ships to a web widget, SMS, or WhatsApp without redoing the logic per channel.

The same principle runs through this project as our Photo Editor work: let AI handle ambiguity, and let deterministic engineering handle everything that has to work every time.

From Canvas to State Machine

The core challenge was turning a graph anyone could draw into something a server could execute deterministically, at scale, without surprises. We solved this with a three-layer pipeline:

Visual Authoring (React Flow): Product managers drag logic nodes — message, condition, API call, capture — onto a canvas and wire them together. No syntax, no code; the graph itself is the source of truth.
Compilation (Node.js): On save, the graph is validated and compiled into a finite state machine: each node becomes a state, each connection a transition. Dangling nodes and unreachable branches are caught here, before they ever reach a live conversation.
Execution (Redis + PostgreSQL): Redis holds the hot path — the current state and short-term context for every in-flight conversation — so responses stay fast no matter how complex the flow gets. PostgreSQL persists the compiled flow definitions plus conversation history, which is what powers the drop-off and completion views teams actually use to improve a flow.

Handling the Unscripted

Key Innovations

A Live Testing Pane: every edit to the graph is instantly testable in an embedded chat panel, with no deploy step between authoring and seeing the bot respond.
A State Machine, Not Prompt Chaining: because behavior compiles down to explicit states and transitions, non-technical builders get the reliability of a real state machine without writing one.
One-Click Multi-Platform Deploy: the same compiled flow ships to a web widget, SMS, or WhatsApp without redoing the logic per channel.

The same principle runs through this project as our Photo Editor work: let AI handle ambiguity, and let deterministic engineering handle everything that has to work every time.