# Popup (/docs/modules/popup)

`AiChatPopup` puts a round button at the bottom corner of the page, with the wallet's wave mark. A click opens the chat in a popup above it, and the button turns into a close mark. While an answer streams with the popup closed, the button ripples in cyan. The popup sits at the bottom right in English and French and at the bottom left in Hebrew, and takes the whole screen on a phone.

## Add it [#add-it]

Render it once, anywhere in your app inside the provider:

```tsx title="src/App.tsx"
import { AiChatPopup } from '@aiconnect/react';

const SYSTEM = 'You recommend books from this site\'s catalog. Always search the catalog before recommending.';

export function App() {
  return (
    <>
      <YourSite />
      <AiChatPopup system={SYSTEM} mcp="/api/mcp" suggestions={['A calm book for tonight', 'Something funny']}
        toolLabels={{ search_books: 'Searching the catalog' }} />
    </>
  );
}
```

The button's accessible name is "Open the chat" or "Close the chat" in the provider's language. `launcherLabel` replaces it.

## Open it from your own button [#open-it-from-your-own-button]

Give `open` and `onOpenChange` to open the popup from a link in your page as well, such as "Ask our assistant" in a help section. Keep the floating button, or hide it with `hideLauncher`.

```tsx
const [open, setOpen] = useState(false);

<button type="button" onClick={() => setOpen(true)}>Ask our assistant</button>
<AiChatPopup open={open} onOpenChange={setOpen} system={SYSTEM} mcp="/api/mcp" />
```

## As a Web Component [#as-a-web-component]

```html
<script src="https://your-site.example/aiconnect-elements.js" defer></script>
<aiconnect-chat variant="popup" mcp="/api/mcp" system="You recommend books from this site's catalog."
  suggestions='["A calm book for tonight"]'></aiconnect-chat>
```

The element takes no room in the page: its button and its popup float over it.

## Props [#props]

### AiChatPopupProps

| Prop                 | Type                                                 | Description |
| -------------------- | ---------------------------------------------------- | ----------- |
| `system`             | `string`                                             |             |
| `tools?`             | `ToolSource \| undefined`                            |             |
| `mcp?`               | `string \| undefined`                                |             |
| `title?`             | `string \| undefined`                                |             |
| `intro?`             | `string \| undefined`                                |             |
| `placeholder?`       | `string \| undefined`                                |             |
| `suggestions?`       | `string[] \| undefined`                              |             |
| `toolLabels?`        | `Record<string, string> \| undefined`                |             |
| `renderToolResults?` | `((turn: ChatTurn) => React.ReactNode) \| undefined` |             |
| `className?`         | `string \| undefined`                                |             |
| `open?`              | `boolean \| undefined`                               |             |
| `defaultOpen?`       | `boolean \| undefined`                               |             |
| `onOpenChange?`      | `((open: boolean) => void) \| undefined`             |             |
| `hideLauncher?`      | `boolean \| undefined`                               |             |
| `launcherLabel?`     | `string \| undefined`                                |             |

The popup's size is the `--aic-popup-width` and `--aic-popup-height` tokens, 400px by 640px by default, capped to the window.