---
title: Floating Modal Chat
description: Embeddable AI assistant in a floating button modal — drop into any React app for in-product copilots or support chat, built on assistant-ui.
---

import { ModalChat } from "@/components/examples/modal";

<div className="h-[500px]">
  <ModalChat />
</div>

## Overview

The Modal example demonstrates how to create a floating action button that opens an AI assistant chat interface in a modal dialog. This pattern is ideal for applications where you want to provide AI assistance without disrupting the main user interface.

## Features

- **Floating Action Button**: A clean, accessible button fixed to the corner of the screen
- **Modal Dialog**: Full-featured chat interface with proper focus management
- **Smooth Animations**: Enter/exit transitions with zoom and slide effects
- **Responsive Design**: Works across desktop and mobile devices
- **Keyboard Navigation**: Escape key to close, proper tab order

## Quick Start

```bash
npx assistant-ui add assistant-modal
```

## Code

The modal uses `AssistantModalPrimitive` to create a floating chat interface:

```tsx
import { AssistantModalPrimitive } from "@assistant-ui/react";
import { Thread } from "@/components/assistant-ui/thread";
import { BotIcon } from "lucide-react";

export const AssistantModal = () => {
  return (
    <AssistantModalPrimitive.Root>
      <AssistantModalPrimitive.Anchor className="fixed right-4 bottom-4 size-11">
        <AssistantModalPrimitive.Trigger asChild>
          <button className="size-full rounded-full bg-primary shadow-lg transition-transform duration-150 ease-out hover:scale-105 active:scale-96 motion-reduce:transition-none">
            <BotIcon />
          </button>
        </AssistantModalPrimitive.Trigger>
      </AssistantModalPrimitive.Anchor>

      <AssistantModalPrimitive.Content
        sideOffset={16}
        className="h-[500px] w-[400px] origin-(--radix-popover-content-transform-origin) rounded-[2.5rem] border bg-popover shadow-xl ease-[cubic-bezier(0.32,0.72,0,1)] data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-bottom-2 data-[state=open]:duration-300 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-bottom-2 data-[state=closed]:duration-200 motion-reduce:animate-none"
      >
        <Thread />
      </AssistantModalPrimitive.Content>
    </AssistantModalPrimitive.Root>
  );
};
```

### Key Components

| Component | Purpose |
|-----------|---------|
| `AssistantModalPrimitive.Root` | Container that manages open/close state |
| `AssistantModalPrimitive.Anchor` | Positions the trigger button |
| `AssistantModalPrimitive.Trigger` | Button that opens the modal |
| `AssistantModalPrimitive.Content` | The modal dialog containing the chat |

### Customization Tips

- Adjust `sideOffset` to control the gap between button and modal
- Modify `h-[500px] w-[400px]` to change modal dimensions
- Use `data-[state=open/closed]` for animation states
- Position the anchor with `fixed right-4 bottom-4` or any corner

## Source

<SourceLink href="https://github.com/assistant-ui/assistant-ui/blob/main/apps/docs/components/docs/samples/assistant-modal.tsx" />