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

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

***

title: AssistantModalPrimitive
description: 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.

import { Code } from "@radix-ui/themes";
import { ParametersTable } from "@/components/docs/tables/ParametersTable";
import { DataAttributesTable } from "@/components/docs/tables/DataAttributesTable";

## Anatomy

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

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

## API Reference

### Root

Contains all parts of the assistant modal.

<ParametersTable
  type="AssistantModalPrimitiveRootProps"
  parameters={[
  {
    name: "defaultOpen",
    type: "boolean",
    default: "false",
    description:
      "The open state of the assistant modal when it is initially rendered. Use when you do not need to control its open state.",
  },
  {
    name: "open",
    type: "boolean",
    description:
      "Not recommended. The controlled open state of the assistant modal. Must be used in conjunction with onOpenChange.",
  },
  {
    name: "onOpenChange",
    type: "(open: boolean) => void",
    description:
      "Event handler called when the open state of the assistant modal changes.",
  },
  {
    name: "modal",
    type: "boolean",
    default: "false",
    description:
      "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.",
  },
]}
/>

### 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: "asChild",
  },
]}
/>

<DataAttributesTable
  data={[
  {
    attribute: "[data-state]",
    values: <Code>"open" | "closed"</Code>,
  },
]}
/>

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

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: "asChild",
  },
  {
    name: "side",
    type: "'top' | 'right' | 'bottom' | 'left'",
    default: "'top'",
    description: "The side of the assistant modal to position against.",
  },
  {
    name: "align",
    type: "'start' | 'center' | 'end'",
    default: "'end'",
    description: "The alignment of the assistant modal to position against.",
  },
  {
    name: "dissmissOnInteractOutside",
    type: "boolean",
    default: "false",
    description:
      "Dismiss the assistant modal when the user interacts outside of it.",
  },
]}
/>

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