AssistantModal

Overview

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

Getting Started

Create a Next.JS project

npx create-next-app@latest my-app
cd my-app

Initialize `shadcn-ui`

npx shadcn-ui@latest init

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>
  );
}

AssistantModal

Overview

Getting Started

Create a Next.JS project

Initialize shadcn-ui

Add assistant-modal

Use in your application

On this page

Initialize `shadcn-ui`

Add `assistant-modal`