Workflow composer

A React block (a whole screen) in Beamline's AI workspace app.

A workflow drafted from a sentence and finished by hand. The prompt drafts steps that arrive one by one on the graph (a draft cut short keeps what came and says where it stopped; a failed one says nothing was drafted). Each step is checked on the graph (how many things it needs) and changed in the inspector: required fields; a filter written in words whose reading is a proposal (each condition editable, ambiguous words and resolved dates said with their zone and now) that becomes the conditions in use only when applied, with the sample count following the conditions in use; variables with upstream sources tried in order and a typed fallback, a source from a later step or of the wrong type named, and a sample run showing each source's value, the one used, and when the fallback steps in. Publish is off until nothing is left to fix; a version is called live only after the app says so, and a refusal keeps the draft with nothing running from it.

Use it for

A CRM or ops tool where an assistant drafts a workflow the person checks and publishes.
Filters written in plain words that must become visible, editable conditions before they act.

Not for

Drawing a workflow graph by hand (workflow-builder).
Watching an automation's runs (email-automation).

Anatomy

bar: the workflow, draft or live version, things to fix or ready, Publish
prompt: describe it, Draft it or Draft again, how many steps arrived, stop or failure notes, ideas
graph: the steps with how many things each needs
inspector: the step's fields; a filter's phrase, Make conditions, the proposal (how words were read, dates and zone, editable conditions, Use these conditions) and the conditions in use with the sample count; variables with their sources, sample values, fallback and problems

States

empty prompt, drafting, partly drafted, drafting failed
filter: suggestions, reading, proposal ready, ambiguous word, no sample matches, reading failed, proposal differs from the conditions in use
variable: bound, missing upstream output, wrong type, fallback used, no value and no fallback
invalid draft, publishing, publish refused, published
narrow room: columns stack

Keyboard

Tab reaches the prompt, each step on the graph (arrows move between steps) and every field; Enter applies a button

Motion

Drafted steps arrive one by one, the step being drafted marked running; nothing else moves. Nothing runs at rest.

Props

Prop	Type	Default	Description
`defaultWorkflow` (required)	`Workflow`	—	The workflow as it starts (an empty draft, or one being finished).
`onWorkflowChange`	`((w: Workflow) => void)`	—
`onGenerate`	`((prompt: string, onStep: (step: DraftStep) => void) => Promise<void>)`	—	Drafts steps from a prompt, one at a time through `onStep`; reject to stop (the steps so far stay).
`onInterpret`	`((phrase: string, ctx: FilterContext) => Promise<FilterProposal>)`	—	Turns a filter phrase into proposed conditions.
`onPublish`	`((w: Workflow) => Promise<number>)`	—	Publishes the draft; resolve with the live version, reject to keep it a draft.
`filterContext` (required)	`FilterContext`	—	Fields, sample records, zone and "now" for filter steps.
`sampleRun` (required)	`SampleRun`	—	Values from one sample run, for trying variables.
`ideas`	`string[]`	—	Prompts offered to start from.
`defaultPrompt`	`string`	—
`defaultStep`	`string`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

textarea
button
flowchart
input
query-builder
select

Dependencies

lucide-react

Import

import { WorkflowComposer } from "@beamline/workflow-composer";

Get it

Workflow composer is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent