# Full page AI mode (/docs/modules/page)

`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 [#add-it]

The mode renders its own button where you place it, labelled "AI mode" in English:

```tsx title="src/SiteHeader.tsx"
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:

```tsx
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 [#as-a-web-component]

```html
<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 [#props]

### AiChatPageProps

| 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 column's width is the `--aic-page-width` token, 760px by default.