Components

Every customizable region of AgentInterface is exposed as a compound static — a component hung off AgentInterface (e.g. AgentInterface.Welcome, AgentInterface.SidebarItem). You compose the interface by placing these as children:

import { AgentInterface } from "@openuidev/react-ui";

<AgentInterface llm={llm}>
  <AgentInterface.Welcome title="Ask me anything" />
  <AgentInterface.Sidebar>
    <AgentInterface.SidebarHeader />
    <AgentInterface.SidebarItem path="settings" icon={<GearIcon />}>
      Settings
    </AgentInterface.SidebarItem>
    <AgentInterface.SidebarSeparator />
    <AgentInterface.ThreadList />
  </AgentInterface.Sidebar>
</AgentInterface>;

There are two kinds:

• Slots — named regions of the layout (Sidebar, Welcome, Composer, …). AgentInterface matches them by component reference (not by position or string), routes each into the right region, and treats anything unrecognized as free content. Order doesn't matter. Slots support a subset of three override modes:
  • A — omit: the built-in default renders.
  • B — props: the default structure renders with your values swapped into specific pieces.
  • C — children: your children replace the region entirely (children win over props; a dev warning fires if you pass both).
• Primitives / statics — building blocks you place inside slots (or, for Route, at the top level) to assemble custom layouts: SidebarItem, SidebarContent, SidebarSeparator, ArtifactNav, Route, NewChatButton, HistoryButton, ThemeModeToggle, ThreadList, Messages, MessageLoading, ScrollArea.

All of these are also reachable as named exports from @openuidev/react-ui, but the compound-static form (AgentInterface.X) is the documented usage.

Slots

Pass these at the top level of <AgentInterface> to override a layout region. The Modes column lists which of the three override modes (A — omit, B — props, C — children) each slot supports.

AgentInterface.Sidebar

The whole left sidebar. Modes A, C.

• A — omit: the default sidebar renders (SidebarHeader + SidebarContent containing ArtifactNav when storage.artifact is configured, a SidebarSeparator, and ThreadList).
• C — children: your children replace the sidebar's inner content. You compose SidebarHeader, SidebarItem, SidebarSeparator, ThreadList, etc. as you like.

<AgentInterface.Sidebar>
  <AgentInterface.SidebarHeader />
  <AgentInterface.SidebarContent>
    <AgentInterface.SidebarItem path="dashboard">Dashboard</AgentInterface.SidebarItem>
    <AgentInterface.SidebarSeparator />
    <AgentInterface.ThreadList />
  </AgentInterface.SidebarContent>
</AgentInterface.Sidebar>

AgentInterface.SidebarHeader

The header strip at the top of the sidebar — brand logo, agent name, and the collapse button. Modes A, B, C.

AgentInterface.SidebarFooter

Pinned to the bottom of the sidebar, below the thread list: a place for controls like ThemeModeToggle. Nothing renders there unless you pass children. Mode C.

const { mode, setPreference } = useThemeModePreference();

<AgentInterface llm={llm} theme={{ mode }}>
  <AgentInterface.SidebarFooter>
    <AgentInterface.ThemeModeToggle mode={mode} onModeChange={setPreference} />
  </AgentInterface.SidebarFooter>
</AgentInterface>;

AgentInterface.MobileHeader

The top bar shown on mobile viewports in place of the (collapsed) sidebar. Modes A, B, C.

AgentInterface.ThreadHeader

Desktop header above the active conversation: leading content, the chat title in the centre, then the workspace toggle and a Rename/Delete menu. Hidden on mobile (use MobileHeader). Modes A, B.

AgentInterface.Welcome

The empty-state screen shown before the first message of a thread. Modes A, B, C. As with every slot, children (mode C) win over the content props (mode B) and a dev warning fires if you pass both.

<AgentInterface.Welcome
  title="Ask me anything"
  description="I can explore data, build dashboards, and answer questions."
  image={{ url: "/logo.png" }}
  starters={[{ displayText: "Summarize Q3 revenue", prompt: "Summarize Q3 revenue" }]}
  starterVariant="short"
/>

Each entry in starters is a ConversationStarterProps: { displayText: string; prompt: string; icon?: ReactNode }. See Welcome & starters for the full guide.

AgentInterface.Composer

The message input at the bottom of the thread. Modes A, B, C.

AgentInterface.Workspace

The per-thread right rail listing the artifacts registered in the active thread. Modes A, C.

• Auto-shows on the first registered artifact and renders nothing while the thread's registry is empty — drop-in users with no artifact renderers never see it.
• Sections are driven by the artifactCategories configured on <AgentInterface>; a single "Artifacts" section lists everything when no categories are configured.
• Clicking an item opens the corresponding artifact's detailed view.
• Rendered only in the thread view — hidden on Route pages and the artifact browser. Hidden on mobile.

See <AgentInterface> props for the Workspace APIs.

Primitives & statics

Place these inside slots — or, for Route, at the top level — to build custom layouts. Unlike slots, primitives are not matched by reference into a region; they render wherever you put them.

AgentInterface.SidebarContent

The scrollable body region of the sidebar — where nav items and the thread list live. Place it inside <AgentInterface.Sidebar> to wrap your sidebar content.

AgentInterface.SidebarSeparator

A styled divider rule for visually grouping sidebar sections. Takes no props; drop it between groups inside the sidebar.

<AgentInterface.SidebarItem path="dashboards">Dashboards</AgentInterface.SidebarItem>
<AgentInterface.SidebarSeparator />
<AgentInterface.ThreadList />

AgentInterface.SidebarItem

A styled clickable row for use inside the sidebar. Visually matches ThreadList rows so custom nav blends in with the thread list. Spreads remaining props onto the underlying <button>.

Click order with path: your onClick fires first (call preventDefault() to suppress navigation) → then navigate(path) → then the mobile sidebar closes.

<AgentInterface.SidebarItem path="settings" icon={<GearIcon />} trailing={<Badge>3</Badge>}>
  Settings
</AgentInterface.SidebarItem>

Pair with AgentInterface.Route to render a view at that path. See Sidebar.

AgentInterface.ArtifactNav

Sidebar navigation for the global artifact browser. Renders one SidebarItem per configured artifactCategories entry — or a single "Artifacts" item when no categories are configured. Each item navigates to the reserved artifacts/{category} path, which AgentInterface renders as the searchable artifact browser in the thread region.

• Included automatically in the default sidebar when storage.artifact is configured.
• Renders nothing when storage.artifact is not configured.
• When you build a custom <AgentInterface.Sidebar>, add it back manually where you want it.

<AgentInterface.Sidebar>
  <AgentInterface.SidebarHeader />
  <AgentInterface.SidebarContent>
    <AgentInterface.ArtifactNav />
    <AgentInterface.SidebarSeparator />
    <AgentInterface.ThreadList />
  </AgentInterface.SidebarContent>
</AgentInterface.Sidebar>

See <AgentInterface> props.

AgentInterface.Route

Declares a routable view. Placed at the top level of <AgentInterface> (not inside a slot). When the current nav path exactly matches path, the Route's children replace the entire thread region — MobileHeader, ThreadHeader, the message scroll area, and Composer are all hidden. When no Route matches, the thread region renders normally.

<AgentInterface llm={llm}>
  <AgentInterface.SidebarItem path="settings">Settings</AgentInterface.SidebarItem>
  <AgentInterface.Route path="settings">
    <SettingsPanel />
  </AgentInterface.Route>
</AgentInterface>

Use multiple <AgentInterface.Route> siblings to define separate views. The paths artifacts/{category} and artifacts/{category}/{id} are reserved by the artifact browser and matched before your Routes.

AgentInterface.NewChatButton

A styled button that starts a fresh thread (clears the active thread and returns to the empty/welcome state). Drop it anywhere inside the sidebar or a custom header.

<AgentInterface.SidebarHeader />
<AgentInterface.NewChatButton />

AgentInterface.HistoryButton

A shortcut to the thread history for the collapsed sidebar rail. It opens a menu of threads beside the rail, and picking one switches to it without expanding the sidebar. It renders only on the collapsed desktop rail, since the expanded sidebar already lists threads. The default sidebar includes it.

AgentInterface.ThemeModeToggle

A round button that flips between light and dark, made for SidebarFooter. It shows the mode it switches to (a moon in light mode, a sun in dark) and works on the collapsed rail too. Pair it with useThemeModePreference, which saves the choice and returns the mode to pass to <AgentInterface theme={{ mode }}>.

AgentInterface.ThreadList

Renders the list of the user's threads from storage.thread (one row per thread). Clicking a row opens that thread and auto-clears the current path (returning to the thread view from any Route or the artifact browser).

<AgentInterface.SidebarContent>
  <AgentInterface.ThreadList />
</AgentInterface.SidebarContent>

AgentInterface.Messages

Renders the active thread's messages, including the in-flight streaming message and the loading indicator. Used inside a custom thread region (typically wrapped in ScrollArea).

<AgentInterface.ScrollArea>
  <AgentInterface.Messages loader={<MyLoader />} />
</AgentInterface.ScrollArea>

Pass overrides directly when composing Messages. For example:

<AgentInterface.Messages assistantMessage={MyAssistantMessage} toolCallTimeline={MyResearchSteps} />

Omitting toolCallTimeline preserves the built-in timeline. Matched artifact previews remain separate and continue to use artifactRenderers. For prop definitions and a complete example, see Message rendering.

AgentInterface.MessageLoading

The default "assistant is thinking" indicator. Render it standalone, or pass it (or your own) to Messages via the loader prop. Takes no props.

<AgentInterface.Messages loader={<AgentInterface.MessageLoading />} />

AgentInterface.ScrollArea

A scroll container that keeps the conversation pinned to the bottom as messages stream in. Wrap Messages (or any thread content) in it when composing a custom thread region.

<AgentInterface.ScrollArea>
  <AgentInterface.Messages />
</AgentInterface.ScrollArea>

See also

• Sidebar — building custom sidebars with SidebarItem, ArtifactNav, and ThreadList.
• <AgentInterface> props — the top-level props (logoUrl, agentName, starters, path/onNavigate, …) that these components inherit from.