Getting StartedInstallation and setup guides 6
FormInput and selection components 27
FlowWorkflow graph and execution surfaces 4
LayoutStructural layout components 9
NavigationMenu surfaces and hierarchical actions 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 6
UtilityGeneral-purpose interface utilities 7
Overview API Styling Examples

Flow Workbench

Flow Workbench is a ready-made shell for creating, editing, viewing, inspecting, and monitoring workflows. It combines the execution-aware graph with optional palette and details panels while keeping workflow state controlled by the application.

Import

agent-workbench.component.ts

ts
import { TngFlowWorkbenchComponent } from '@tailng-ui/flow/execution';
import type { TngFlowDefinition, TngFlowSelection } from '@tailng-ui/flow';

Editable agent workbench

Use the workbench when the page needs the palette, graph, and node details in one controlled shell.

Agent workbench with Plain CSS

Prompt builderAssemble the system and user instructions. completed
Reasoning modelGenerate a grounded response. running

Reasoning through policy constraints

ResponseReturn the final answer to the agent runtime. waiting

Waiting for model output

Modes

Use create and edit for authoring, view for passive diagrams, inspect for node details, and live for execution history, payloads, and run status.

Composition

The workbench owns the common layout: left palette, center graph, and right or bottom details. Consumers can use the default node palette and default details, or replace either panel with projected templates.

State ownership

Applications still own definitions, selections, viewport, execution snapshots, and mutations. The workbench emits typed requests for creation, movement, selection, connection updates, and inspector changes.