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

Initialize shadcn-ui

npx shadcn@latest init

Add assistant-modal

npx assistant-ui@latest add modal

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

Use in your application

/app/page.tsx

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

Previous

Thread

Next

AssistantSidebar

On this page

Edit on Github