# Chat UI

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

Source: https://sideagent.dev/docs/chat-ui

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

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

```tsx
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:

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