# Side panel (/docs/modules/panel)

`AiChatPanel` docks a chat at the page's edge, full height. The page stays usable beside it, and the conversation stays while the panel is closed, so a visitor can follow a suggested page and come back to the answer. It docks on the right in English and French and on the left in Hebrew, and takes the whole screen on a phone.

Taamtaam's AI mode is this panel: its "AI mode" button opens it, and the restaurants an answer names show as Taamtaam's own cards.

## Add it [#add-it]

The panel renders its own button where you place it, such as in your header:

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

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

export function SiteHeader() {
  return (
    <header>
      <Logo />
      <AiChatPanel system={SYSTEM} mcp="/api/mcp" suggestions={['A calm book for tonight']} />
    </header>
  );
}
```

The button shows the wallet's wave mark and the panel's title ("Ask AI" in English). Give `launcherLabel` for your own words.

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

Hide the panel's button and control `open`. Taamtaam keeps the panel mounted once it was opened, so the conversation survives moving from page to page:

```tsx title="AiModeProvider.tsx"
'use client';

import { useState } from 'react';
import type { ReactNode } from 'react';
import { AiChatPanel } from '@aiconnect/react';

export function AiMode({ children }: { children: ReactNode }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button type="button" aria-expanded={open} onClick={() => setOpen(!open)}>AI mode</button>
      {children}
      <AiChatPanel open={open} onOpenChange={setOpen} hideLauncher system={SYSTEM_PROMPT} mcp="/api/mcp"
        title="AI mode" intro="Where do you feel like eating?" renderToolResults={renderRestaurants} />
    </>
  );
}
```

`onOpenChange` reports the panel's close button and Escape. Escape goes to the connect window first while it is open.

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

```html
<script src="https://your-site.example/aiconnect-elements.js" defer></script>
<aiconnect-chat variant="panel" mcp="/api/mcp" system="You recommend books from this site's catalog."></aiconnect-chat>
```

The element takes the panel's button where it stands. See [Web Components](/docs/modules/web-components) for every attribute.

## Props [#props]

### AiChatPanelProps

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