ChatLauncher

ChatLauncher is the compact pill that opens and closes the chat kit's panel - a sparkles icon and "Ask AI" by default. It reads the provider's state, toggles the panel on click, and reports the panel's state through aria-expanded. Drop it in a header, a toolbar, or next to a search field.

<ChatProvider onSend={handleSend}>
  <ChatLauncher $glow />
  <ChatPanel>...</ChatPanel>
</ChatProvider>

With $glow, the pill gets the kit's rainbow treatment: a rotating rainbow band hugging the button's border - 1px on hover, 2px while pressed, 4px on focus - plus a soft radiating halo that is always faintly on and brightens with interaction or while the panel is open. Animation is disabled under prefers-reduced-motion: reduce.

Properties

childrenReact.ReactNode

The pill's content. Defaults to a sparkles icon followed by "Ask AI".

$glowboolean

The animated rainbow halo. Off by default.

$glowColorsstring[]

Overrides the glow palette with your own list of colors.

onClickMouseEventHandler

Overrides the default toggle behavior - useful to ask() a canned question instead, or to route through a search modal.

aria-labelstring

Accessible name. Defaults to "Ask AI Assistant".

The component also accepts all native <button> attributes and forwards its ref to the button element.

View Source