Step picker
Adds a step to a workflow: search or browse triggers, actions, logic and agents, then drop it where you clicked.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/step-picker-palette.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/step-picker-palette.json
Usage & API
Example
import { StepMark } from "@/components/ai/step-picker-palette"
<StepMark
template={template}
/>Props StepMark
| Prop | Type & description | Required |
|---|---|---|
template | StepTemplate | Required |
size | number | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The palette is a dialog titled as adding a step, and it names the step it will follow when you pass one. Search steps filters the list, and clear wipes the query. Category tabs are All, Triggers, Actions, Logic, AI and Apps. With an empty query, a Recent group leads, then the categories. Each row is the mark, the name, the app and the blurb. Enter picks the active row. Nothing matching the query says so. The preview shows a short canvas fragment, a draft workflow, and the palette opening from a plus after the last step. Recent ids are remembered only in that preview's state, capped at three.
Example
import { InlineStepList } from "@/components/ai/step-picker-inline"
<InlineStepList
steps={[]}
templates={[]}
suggest={() => {}}
onInsert={() => {}}
onRemove={() => {}}
boundary={null}
/>Props InlineStepList
| Prop | Type & description | Required |
|---|---|---|
steps | InlineStep[] | Required |
templates | InlineTemplate[] | Required |
suggest | (prev: InlineStep) => Suggestion[]Ranked suggestions for a step added after `prev`. | Required |
onInsert | (index: number, template: InlineTemplate) => void | Required |
onRemove | (id: string) => void | Required |
highlightId | string | nullStep to briefly highlight, e.g. the one just added. | Optional |
boundary | RefObject<HTMLElement | null>Frame used to keep the popover inside the visible area. | Required |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The inline list is the steps of a workflow with a plus after each one, labeled as inserting a step after that row. The popover repeats search, and it leads with suggestions for the previous step. Each suggestion shows a percent and a bar, with a title that says how often it is picked at that spot. Choosing one calls onInsert with the index. A step can be removed. The one you just added can be highlighted. The popover is kept inside the boundary element you pass, so it does not paint off the canvas. The preview is a live billing workflow, and the empty search still offers the suggested rows.
Choosing a layout
Use the palette when the canvas is open and the person is browsing, or when recent steps should be one keystroke away. Use the inline list when the workflow is a vertical sequence and the natural gesture is a plus between two rows, with a guess at what usually comes next. The inline list is a bad fit for a free-form graph. It inserts at an index.
The settings of the step, once it exists, are the step inspector, including the last run's input and output. The picker does not edit a prompt or a retry policy. It only chooses the template. Triggers that start an agent outside a canvas, such as a webhook, have their own screens.
Does the palette remember recent steps for the next visit?
It shows the recent ids you pass, most recent first, and only when the search is empty. It does not write to storage. The preview keeps three ids in its own state after each pick. A real app would pass the list it wants shown.
Where does an inline insert go?
onInsert receives the index after the row whose plus was used, and the template. The list does not reorder existing steps. Remove deletes by id. Suggestions are whatever suggest returns for the previous step, not a fixed catalog.