BottomTray

BottomTray provides a floating chat widget instead of a full-page chat surface.

This page covers the widget-style layout for support flows, product assistants, and experiences where chat stays collapsed until a user opens it.

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

export function App() {
  return (
    <>
      <main>{/* Your app */}</main>
      <BottomTray apiUrl="/api/chat" agentName="Support" />
    </>
  );
}

Controlled open state

<BottomTray apiUrl="/api/chat" isOpen={isOpen} onOpenChange={setIsOpen} />

Use the same backend configuration props as the other layouts. The only layout-specific props are the open-state controls.

That means you can start with BottomTray for the UI and still reuse the same apiUrl, processMessage, streamProtocol, and threadApiUrl setup from the other layouts.

Related guides