Create Pipeline Wizard

v0.2.0

Four-step modal wizard for creating a pipeline: configure name, description, and model orchestration (Details), answer domain context questions (Context), select data source connections (Connectors), then review and submit (Review). Fully controlled props API with per-step loading states.

View as Markdown

Preview

Open full page ↗

Install & usage

npx shadcn@latest add @signalos/pipelinewizard-01

Pulls the page source plus its widget dependencies (@signalos/tokens, @signalos/utils, @signalos/button, @signalos/select, @signalos/textarea, @signalos/form-dialog, @signalos/text-field) into your app - you own the copy. Requires access.

usage

// after: npx shadcn@latest add @signalos/pipelinewizard-01
// mount the pulled page in a route, e.g. src/app/reusable-components/page.tsx
import CreatePipelineWizard from "@/components/blocks/pipelinewizard-01/CreatePipelineWizard"

export default function Page() {
  return <CreatePipelineWizard />
}

Props

ConnectionLike

Prop	Type	Default	Description
id*	`string`	-
name*	`string`	-
connector_name	`string \| undefined`	-	Connector type label, e.g. "salesforce".
status	`string \| undefined`	-	Connection status label, e.g. "active".

OrchestrationModelLike

Prop	Type	Default	Description
canonical*	`string`	-
display*	`string`	-
family_display	`string \| undefined`	-	Provider / family grouping label shown as a select section header.
lifecycle_warning	`boolean \| undefined`	-	When set, the model is flagged as retiring in the picker.

ContextQuestion

Prop	Type	Default
question_key*	`string`	-
question_text*	`string`	-
context	`string \| undefined`	-

CreatePipelinePayload

Prop	Type	Default	Description
name*	`string`	-
description	`string \| undefined`	-
platform_connection_ids*	`string[]`	-	Selected connection ids.
onboarding_context	`string \| undefined`	-	Collected onboarding context, already formatted as a string.
model	`string \| undefined`	-
supporting_model	`string \| undefined`	-
embedding_model	`string \| undefined`	-

CreatePipelineWizardProps

Prop	Type	Default	Description
open*	`boolean`	-
onOpenChange*	`(open: boolean) => void`	-
step	`number \| undefined`	-	The currently active step index (0–3). When provided, the wizard is fully controlled: the parent owns step transitions and should react to `onStepChange` to kick off per-step data fetches.
onStepChange	`((step: number) => void) \| undefined`	-	Called when the wizard wants to move to a different step index.
name	`string \| undefined`	-
onNameChange	`((value: string) => void) \| undefined`	-
description	`string \| undefined`	-
onDescriptionChange	`((value: string) => void) \| undefined`	-
selectedConnectionIds	`string[] \| undefined`	-
onSelectedConnectionIdsChange	`((ids: string[]) => void) \| undefined`	-
fieldErrors	`Record<string, string> \| undefined`	-
onFieldErrorsChange	`((errors: Record<string, string>) => void) \| undefined`	-
reasoningModel	`string \| undefined`	-
onReasoningModelChange	`((canonical: string) => void) \| undefined`	-
supportingModel	`string \| undefined`	-
onSupportingModelChange	`((canonical: string) => void) \| undefined`	-
embeddingModel	`string \| undefined`	-
onEmbeddingModelChange	`((canonical: string) => void) \| undefined`	-
connections	`ConnectionLike[] \| undefined`	-
llmModels	`OrchestrationModelLike[] \| undefined`	-
embeddingModels	`OrchestrationModelLike[] \| undefined`	-
isLoadingModels	`boolean \| undefined`	-	True while models are being fetched (Step 1).
isLoadingQuestions	`boolean \| undefined`	-	True while onboarding questions are being fetched (Step 2).
isLoadingConnectors	`boolean \| undefined`	-	True while connectors are being fetched (Step 3).
isSubmitting	`boolean \| undefined`	-	True while the create mutation is in-flight.
contextQuestions	`ContextQuestion[] \| undefined`	-
contextAnswers	`Record<string, string> \| undefined`	-	Current answer map, keyed by `question_key`.
onContextAnswerChange	`((key: string, value: string) => void) \| undefined`	-
onOpen	`(() => void) \| undefined`	-	Called when the wizard is first opened so the parent can kick off fetches.
onSubmit	`((payload: CreatePipelinePayload) => void) \| undefined`	-	Called with the collected form data when the user clicks "Create pipeline".
onCreateCustomModel	`(() => void) \| undefined`	-	Called when the user clicks "Create model" inside the model picker.
data-testid	`string \| undefined`	-	Test identifier rendered as `data-testid` on the dialog content.

More Reusable Components variants

Add Connection Modal Add Custom Model Dialog

Changelog

0.2.0

Extract WizardStepBody and WizardStepIndicator into dedicated component files; export ModelSelect and ReviewRow from the components/ folder.
Add WizardStep and WizardStepIndicatorProps type definitions; ship new component files in registry manifest.

0.1.6

Fix cross-item imports to use canonical @/components paths; add missing signalos.category to manifests.

pipelinewizard01

0.1.5

format the code

0.1.4

Post-initial content update.

0.1.0

Initial release: four-step pipeline creation wizard (Details → Context → Connectors → Review) composed from FormDialog, TextField, Textarea, and Select primitives. Fully controlled props API with per-step loading states, context questions, model orchestration pickers, and connector multi-selection. Step state can be lifted to the parent via step / onStepChange to trigger per-step data fetches.