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#
npx assistant-ui add assistant-modal
Code#
The modal uses AssistantModalPrimitive to create a floating chat interface:
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
sideOffsetto 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-4or any corner