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 itCopy Anchor Link

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

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 buttonCopy Anchor Link

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.

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 ComponentCopy Anchor Link

<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.

PropsCopy Anchor Link

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