# AssistantModal
URL: /docs/legacy/styled/assistant-modal

Chat bubble component for support or Q&A use cases.

***

title: AssistantModal
description: Chat bubble component for support or Q\&A use cases.
-----------------------------------------------------------------

import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";

## Overview

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

## Getting Started

<Steps>
  <Step>
    ### Install `@assistant-ui/react-ui`

    <InstallCommand npm={["@assistant-ui/react-ui"]} />
  </Step>

  <Step>
    ### Import CSS styles

    Add the following to your `tailwind.config.ts`:

    <Tabs items={["Tailwind", "Tailwind + shadcn-ui", "Not using Tailwind"]}>
      ```ts title="/tailwind.config.ts" tab="Tailwind"
      {
        plugins: [
          require("tailwindcss-animate"), // make sure to "npm install tailwindcss-animate"
          require("@assistant-ui/react-ui/tailwindcss")({
            components: ["assistant-modal"],
          })
        ],
      }
      ```

      ```ts title="/tailwind.config.ts" tab="Tailwind + shadcn-ui"
      {
        plugins: [
          require("tailwindcss-animate"), // make sure to "npm install tailwindcss-animate"
          require("@assistant-ui/react-ui/tailwindcss")({
            components: ["assistant-modal"],
            shadcn: true
          })
        ],
      }
      ```

      ```ts title="/app/layout.tsx" tab="Not using Tailwind"
      import "@assistant-ui/react-ui/styles/index.css";
      import "@assistant-ui/react-ui/styles/modal.css";
      ```
    </Tabs>
  </Step>

  <Step>
    ### Use it in your app

    ```tsx title="/app/page.tsx"
    import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
    import { AssistantModal } from "@assistant-ui/react-ui";

    const MyApp = () => {
      const runtime = useChatRuntime({
        api: "/api/chat",
      });

      return (
        <div>
          <AssistantModal runtime={runtime} />
        </div>
      );
    };
    ```
  </Step>
</Steps>