Full page AI mode
The chat takes the whole window over the site, in one centred column, until the visitor closes it.
AiChatPage is an AI mode for the whole site: the chat covers the window on the page's ground, in a column centred for reading, with the wallet's ring over the heading of an empty conversation. While it is open, the page behind does not scroll and the keyboard stays inside the mode. Escape or the close button returns to the page.
Add it
The mode renders its own button where you place it, labelled "AI mode" in English:
import { AiChatPage } from '@aiconnect/react';
const SYSTEM = 'You are the guide of this restaurant directory. Recommend only restaurants the tools return.';
export function SiteHeader() {
return (
<header>
<Logo />
<AiChatPage system={SYSTEM} mcp="/api/mcp" intro="Where do you feel like eating?"
suggestions={['A romantic dinner in Tel Aviv', 'A rooftop for a birthday']} />
</header>
);
}To open it from your own button or from a route, control it:
const [open, setOpen] = useState(false);
<AiChatPage open={open} onOpenChange={setOpen} hideLauncher system={SYSTEM} mcp="/api/mcp" />A site that wants the mode on its own address, such as /ask, renders the page with open set and returns to the previous page in onOpenChange.
As a Web Component
<script src="https://your-site.example/aiconnect-elements.js" defer></script>
<aiconnect-chat variant="page" mcp="/api/mcp" intro="Where do you feel like eating?"
system="You are the guide of this restaurant directory."></aiconnect-chat>Props
Prop
Type
The column's width is the --aic-page-width token, 760px by default.