Workflow Builder UI - v0 by Vercel

Workflow Builder UI - v0 by VercelWorkflow Builder UI - v0 by Vercel

Features: Create / Edit / Delete workflow steps (types: INPUT, PROCESS, OUTPUT) Drag-and-drop reorder steps Each step references an integration by ID (integrations assumed managed elsewhere) "Configure" like email reading condition
sample output is sample-workflow json
integration types "csv","mysql","mssql",mariadb","postgresql","webhooks","ftp","onedrive","sharepoint","oracle","outlook",

Sample-workflow.json

pasted-text.txt

144d ago

I'll build a production-ready Workflow Builder with Material-UI v5, TailwindCSS, and drag-and-drop functionality. I'll create a comprehensive solution with separate components for clean architecture.

I've built a production-ready Workflow Builder with all requested features:

Key Features:

✅ Create/Edit/Delete workflow steps with clean dialog interface
✅ Drag-and-drop reordering via @hello-pangea/dnd
✅ Three step types: INPUT, PROCESS, OUTPUT with visual differentiation
✅ Integration linking: Select integrations by ID with Configure callbacks
✅ localStorage persistence: Automatically saves and loads workflows
✅ JSON export: Download workflow as JSON for backend orchestration

Architecture:

Modular components: types.ts, use-workflow.ts, step-card.tsx, step-editor-dialog.tsx, integration-list.tsx
Strong TypeScript interfaces for WorkflowStep, WorkflowDoc, and IntegrationDef
Clean separation of concerns with hooks for state management
Responsive grid layout: workflow steps on left, integration sidebar on right

The builder is ready to integrate into your larger orchestrator application and handles all structural workflow management without execution logic.

144d ago

one fixed input and output section by default
show the condition configs samples

144d ago

I now understand the structure and the sample workflow. Let me update the builder to include:

Default INPUT and OUTPUT sections - locked by default
Condition config UI with samples for different operators and integration types

Perfect! I've updated the Workflow Builder with the requested features:

New Features:

Default INPUT & OUTPUT Sections - Workflows now automatically start with a locked "Data Source" (INPUT) and "Data Destination" (OUTPUT) section that cannot be deleted or reordered
Condition Configuration UI - INPUT steps now show a dedicated condition editor with:
- Dynamic field suggestions based on integration type (Outlook shows Subject, From, To; SharePoint shows Name, Author; etc.)
- 6 operators: Contains, Equals, Starts With, Ends With, Is, Does Not Contain
- Sample configurations visible via a "Samples" button showing realistic examples for each integration
Export Format Selection - OUTPUT steps can specify CSV, Excel, or JSON formats
Visual Indicators - System steps show a lock icon and "System" badge, with disabled edit/delete buttons

The builder maintains all previous functionality while adding production-ready condition management suitable for email filtering, database queries, and data pipeline rules.

144d ago

Sample-workflow.json

pasted-text.txt

144d ago

I'll build a production-ready Workflow Builder with Material-UI v5, TailwindCSS, and drag-and-drop functionality. I'll create a comprehensive solution with separate components for clean architecture.

I've built a production-ready Workflow Builder with all requested features:

Key Features:

✅ Create/Edit/Delete workflow steps with clean dialog interface
✅ Drag-and-drop reordering via @hello-pangea/dnd
✅ Three step types: INPUT, PROCESS, OUTPUT with visual differentiation
✅ Integration linking: Select integrations by ID with Configure callbacks
✅ localStorage persistence: Automatically saves and loads workflows
✅ JSON export: Download workflow as JSON for backend orchestration

Architecture:

Modular components: types.ts, use-workflow.ts, step-card.tsx, step-editor-dialog.tsx, integration-list.tsx
Strong TypeScript interfaces for WorkflowStep, WorkflowDoc, and IntegrationDef
Clean separation of concerns with hooks for state management
Responsive grid layout: workflow steps on left, integration sidebar on right

The builder is ready to integrate into your larger orchestrator application and handles all structural workflow management without execution logic.

144d ago

one fixed input and output section by default
show the condition configs samples

144d ago

I now understand the structure and the sample workflow. Let me update the builder to include:

Default INPUT and OUTPUT sections - locked by default
Condition config UI with samples for different operators and integration types

Perfect! I've updated the Workflow Builder with the requested features:

New Features:

Default INPUT & OUTPUT Sections - Workflows now automatically start with a locked "Data Source" (INPUT) and "Data Destination" (OUTPUT) section that cannot be deleted or reordered
Condition Configuration UI - INPUT steps now show a dedicated condition editor with:
- Dynamic field suggestions based on integration type (Outlook shows Subject, From, To; SharePoint shows Name, Author; etc.)
- 6 operators: Contains, Equals, Starts With, Ends With, Is, Does Not Contain
- Sample configurations visible via a "Samples" button showing realistic examples for each integration
Export Format Selection - OUTPUT steps can specify CSV, Excel, or JSON formats
Visual Indicators - System steps show a lock icon and "System" badge, with disabled edit/delete buttons

The builder maintains all previous functionality while adding production-ready condition management suitable for email filtering, database queries, and data pipeline rules.

144d ago