<UI>

<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

Field	Type	Description
`entry`	`string`	Client entry module to bundle. Use this for full `gateway-react` apps.
`source`	`string`	Client-safe module exporting a React component. The Gateway mounts it with React and passes boot props.
`exportName`	`string`	Named export to read from `source`; defaults to `default`.
`title`	`string`	Browser page title.
`path`	`string`	URL route to mount the UI at. Defaults to `/workflows/<key>`. Ignored by `<TUI>`.
`props`	`Record<string, unknown>`	Serializable props passed to a `source` component.
`children`	`ReactNode`	Literal 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.

CodeBlock

Start

Articles

Learn

Build Workflows

Run and Operate

Workflow Pack

Components

Integrations

Agent Support

Examples

Contributing

Props

Existing UIs

​Props

​Existing UIs

Props

Existing UIs