Chat UI

The AgentChat and AgentProvider React components, the docked sidebar and result views.

The sideagent package exports React components. React 18 or later is an optional peer dependency.

import { AgentChat } from "sideagent";

<AgentChat
  endpoint="/agent"
  mode="floating"   // "floating" | "sidebar"; the user can switch
  hooks={{ onInvalidate: (tag) => tag === "invoices" && refetchInvoices() }}
/>

Docked sidebar#

Wrap your app in AgentProvider to dock the chat on the right, beside the app instead of over it. It takes the same props as AgentChat. The user drags the panel's left edge, or uses the arrow keys on it, to resize; the width is remembered.

import { AgentProvider } from "sideagent";

<AgentProvider endpoint="/agent" mode="sidebar" defaultOpen>
  <App />
</AgentProvider>

Anything under AgentProvider can call useAgent() to get { open, setOpen }, for example an "Ask assistant" button in a toolbar.

Results#

Tool results render as readable views. Arrays of objects become tables (up to 50 rows and 8 columns), objects become labelled fields, and errors get their own state. Raw JSON stays under "Details". Everything is plain text, never HTML. Override a view per operation:

<AgentChat resultRenderers={{ listInvoices: ({ result }) => <MyInvoiceTable rows={result as any[]} /> }} />