Side panel
A chat docked at the edge of the page, opened from its own button or from yours, that stays open while the visitor browses.
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
The panel renders its own button where you place it, such as in your header:
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
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:
'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
<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 for every attribute.
Props
Prop
Type
The panel's width is the --aic-panel-width token, 420px by default.
Interface modules
Ready made AI interfaces for your site, already wired to the visitor's AI Wallet and to your MCP tools. A chat in a side panel, a popup, inline in the page, a full page AI mode, and a search bar that answers.
Popup
A floating button at the corner of the page that opens a chat popup above it.