Chat Widget
A floating chat: a glass button in the corner that opens a panel with a greeting, suggested questions, the conversation and a liquid-metal prompt input. Give it one function that answers, as text or a stream; it handles streaming, stopping, errors and focus.
Loading preview…
Install
Steps for Next.js.
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-componentsLoad the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";
Props
| Name | Type | Default | Description |
|---|---|---|---|
| onAsk | (question, signal) => string | AsyncIterable<string> | Promise<…> | — | Answers a question: the text, or pieces to stream. The signal aborts on stop or close. Throw to show an error in place of the answer. |
| title | string | "Ask me anything" | The panel's heading, and the button's name. |
| subtitle | string | — | A line under the heading. |
| greeting | string | — | The first message, from the assistant. |
| suggestions | string[] | — | Questions offered as buttons until the first is asked. |
| placeholder | string | — | The input's placeholder. |
| note | ReactNode | — | A line under the input, such as who writes the answers. |
| maxLength | number | 500 | The longest question. |
| open | boolean | — | Open, when you control it. |
| onOpenChange | (open: boolean) => void | — | Called when it opens or closes. |
| position | "fixed" | "absolute" | "fixed" | Fixed to the screen's corner, or placed in a positioned container. |
| className | string | — | Classes for the root element. |