# AssistantModalPrimitive
URL: /docs/api-reference/primitives/assistant-modal

A popover chat interface for floating assistant UI in the corner of the screen.

A modal chat UI usually displayed in the bottom right corner of the screen.

Anatomy \[#anatomy]

```tsx
import { AssistantModalPrimitive } from "@assistant-ui/react";

const AssistantModal = () => (
  <AssistantModalPrimitive.Root>
    <AssistantModalPrimitive.Trigger>
      <FloatingAssistantButton />
    </AssistantModalPrimitive.Trigger>
    <AssistantModalPrimitive.Content>
      <Thread />
    </AssistantModalPrimitive.Content>
  </AssistantModalPrimitive.Root>
);
```

API Reference \[#api-reference]

Root \[#root]

Contains all parts of the assistant modal.

<ParametersTable
  type="AssistantModalPrimitiveRootProps"
  parameters="[
{
name: &#x22;defaultOpen&#x22;,
type: &#x22;boolean&#x22;,
default: &#x22;false&#x22;,
description:
&#x22;The open state of the assistant modal when it is initially rendered. Use when you do not need to control its open state.&#x22;,
},
{
name: &#x22;open&#x22;,
type: &#x22;boolean&#x22;,
description:
&#x22;Not recommended. The controlled open state of the assistant modal. Must be used in conjunction with onOpenChange.&#x22;,
},
{
name: &#x22;onOpenChange&#x22;,
type: &#x22;(open: boolean) => void&#x22;,
description:
&#x22;Event handler called when the open state of the assistant modal changes.&#x22;,
},
{
name: &#x22;modal&#x22;,
type: &#x22;boolean&#x22;,
default: &#x22;false&#x22;,
description:
&#x22;The modality of the assistant modal. When set to true, interaction with outside elements will be disabled and only modal content will be visible to screen readers.&#x22;,
},
]"
/>

Trigger \[#trigger]

A button that toggles the open state of the assistant modal. `AssistantModalPrimitive.Content` will position itself against this button.

This primitive renders a `<button>` element unless `asChild` is set.

<ParametersTable
  type="AssistantModalPrimitiveTriggerProps"
  parameters="[
{
name: &#x22;asChild&#x22;,
},
]"
/>

| Data attribute | Values               |
| -------------- | -------------------- |
| `[data-state]` | `"open" \| "closed"` |

Anchor \[#anchor]

The anchor element that the assistant modal is attached to. Defaults to the `Trigger` element.

This primitive renders a `<div>` element unless `asChild` is set.

Content \[#content]

The component that pops out when the assistant modal is open.

This primitive renders a `<div>` element unless `asChild` is set.

<ParametersTable
  type="AssistantModalPrimitiveContentProps"
  parameters="[
{
name: &#x22;asChild&#x22;,
},
{
name: &#x22;side&#x22;,
type: &#x22;'top' | 'right' | 'bottom' | 'left'&#x22;,
default: &#x22;'top'&#x22;,
description: &#x22;The side of the assistant modal to position against.&#x22;,
},
{
name: &#x22;align&#x22;,
type: &#x22;'start' | 'center' | 'end'&#x22;,
default: &#x22;'end'&#x22;,
description: &#x22;The alignment of the assistant modal to position against.&#x22;,
},
{
name: &#x22;dissmissOnInteractOutside&#x22;,
type: &#x22;boolean&#x22;,
default: &#x22;false&#x22;,
description:
&#x22;Dismiss the assistant modal when the user interacts outside of it.&#x22;,
},
{
name: &#x22;portalProps&#x22;,
type: &#x22;{ container?: HTMLElement | null; forceMount?: true }&#x22;,
description:
&#x22;Props to pass to the underlying Radix UI Popover.Portal. Use container to render the modal into a specific DOM node, or forceMount to keep it mounted for animation control.&#x22;,
},
]"
/>

Refer to Radix UI's Documentation for [Popover.Content](https://www.radix-ui.com/primitives/docs/components/popover#content) for more details.