> ## Documentation Index
> Fetch the complete documentation index at: https://smithers.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# <UI>

> Declare a workflow-owned browser UI that the Gateway serves and the client renders with React.

`<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.

```tsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
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`:

```tsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
<UI entry="../ui/release.tsx" title="Release" />
```

For a component-export module, use `source`:

```tsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
<UI source="../ui/release-app.tsx" exportName="ReleaseApp" title="Release" />
```

See [Migrate to Workflow-Owned UIs](/guides/workflow-owned-ui-migration) for
the launcher and workflow changes.