Skip to main content
<UI> lets a workflow carry its own Gateway UI declaration in the workflow TSX instead of registering a separate UI from the launcher. The component renders nothing in the workflow graph; the Gateway discovers it during gateway.register(), bundles the client-side React entry, and serves it from the workflow UI route. 
import { createSmithers, UI } from "smithers-orchestrator";

const { Workflow, Task, smithers } = createSmithers({
  // schemas...
});

export default smithers(() => (
  <Workflow name="custom-view">
    <UI entry="../ui/custom-view.tsx" title="Custom View" />
    {/* normal workflow nodes */}
  </Workflow>
));
entry paths resolve relative to the workflow source file when the Gateway was given entryFile. This is the default for smithers gateway and generated .smithers/gateway.ts files.

​
Props

FieldTypeDescription
entrystringClient entry module to bundle. Use this for full gateway-react apps.
sourcestringClient-safe module exporting a React component. The Gateway mounts it with React and passes boot props.
exportNamestringNamed export to read from source; defaults to default.
titlestringBrowser page title.
pathstringURL route to mount the UI at. Defaults to /workflows/<key>. Ignored by <TUI>.
propsRecord<string, unknown>Serializable props passed to a source component.
childrenReactNodeLiteral intrinsic React DOM tree for small inline views.
Inline literal children must be serializable DOM elements and text. Use entry when the UI needs gateway-react hooks, Gateway actions, or TanStack collection state. Use source for a small component export that receives serialized props and boot metadata from the Gateway.

​
Existing UIs

Existing .smithers/ui/<workflow>.tsx files that call createGatewayReactRoot(<App />) should use entry: 
<UI entry="../ui/release.tsx" title="Release" />
For a component-export module, use source: 
<UI source="../ui/release-app.tsx" exportName="ReleaseApp" title="Release" />
See Migrate to Workflow-Owned UIs for the launcher and workflow changes.