Floating Modal Chat

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

The Assistant Modal is available in the bottom right corner of the screen.

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

View full source on GitHub