Skip to main content
Agents build every Smithers UI surface by composing the shared component library, never by hand-rolling markup and CSS. The library has two layers: @smithers-orchestrator/ui ports shadcn/ui component anatomy (data-slot attributes, CVA variants, asChild via Radix Slot) and adds agent-native components built specifically for Smithers (reasoning, tool calls, plans, queues, approvals, checkpoints, context usage), while @smithers-orchestrator/gateway-ui supplies run-aware widgets composed over the smithers-orchestrator/gateway-react hooks. A custom workflow UI at .smithers/ui/<workflow>.tsx imports from those subpaths and nothing else.

​
Doc types at a glance

​
How the layers stack

  1. react renders.
  2. smithers-orchestrator/ui provides the components: shadcn anatomy, the agent-native families, and tokens that make light and dark correct by construction. Heavy renderers live behind smithers-orchestrator/ui/adapters/*.
  3. smithers-orchestrator/gateway-ui provides run-aware widgets that already know how to render runs, events, approvals, and node output.
  4. smithers-orchestrator/gateway-react provides the live hooks those widgets (and your custom panels) read runs through.
  5. Your workflow UI composes the three subpaths and calls createGatewayReactRoot(<App />). The Gateway bundles and serves it at /workflows/<key>.

​
Where these docs live in the agent bundle

The core agent bundle (llms-core.txt) carries the base library page, the gateway-ui widget catalog, the chat component pages, and the custom workflow UI guide. The UI fragment of /llms-full.txt adds this page, the per-component agentic pages, the adapter pages, the gateway-react hook reference, and the design guide.