Modal

Live Demo

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 perfect for applications where you want to provide AI assistance without disrupting the main user interface.

Features

• Floating Action Button: Clean, accessible floating button that triggers the modal
• Modal Dialog: Full-screen modal with proper focus management and keyboard navigation
• Responsive Design: Works seamlessly across desktop and mobile devices
• Customizable Styling: Easy to customize colors, positioning, and animations
• Accessibility: Proper ARIA labels and keyboard navigation support

Usage

To implement a modal chat interface in your application:

1. Install Required Components: Use the assistant-ui CLI to add the modal component
2. Wrap with Runtime Provider: Ensure your modal is wrapped with AssistantRuntimeProvider
3. Configure API Endpoint: Set up your chat API endpoint
4. Customize Styling: Modify the button and modal appearance to match your design

Code

The modal implementation uses the AssistantModal component from assistant-ui, which provides:

• Automatic focus management
• Escape key handling
• Backdrop click to close
• Responsive positioning
• Customizable trigger button