shadcn/ui

AssistantModal

Overview

A chat bubble shown in the bottom right corner of the screen. Useful for support or Q&A use cases.

Getting Started

npx shadcn@latest add "https://r.assistant-ui.com/assistant-modal"

This adds /components/assistant-ui/assistant-modal.tsx to your project, which you can adjust as needed.

Use in your application

/app/page.tsx

import { AssistantModal } from "@/components/assistant-ui/assistant-modal";
 
export default function Home() {
  return (
    <div className="h-full">
      <AssistantModal />
    </div>
  );
}

Previous

Attachment

Next

AssistantSidebar

On this page

Overview Getting Started Add assistant-modalUse in your application