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, 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.MobileHeader

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

AgentInterface.ThreadHeader

Header bar above the active conversation. Modes A, C.

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 pull reports, 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 Artifacts for the artifact model the Workspace surfaces.

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="reports">Reports</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 Artifacts.

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

For full control over per-message rendering, 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.