Prompt Input
An auto-growing agent composer inside a liquid-metal ring that bends under the cursor, with a voice mode that lights a sound-reactive beam along its bottom edge.
Enter to send · Shift + Enter for a new line
Install
Steps for Next.js.
Install the package
One package carries every component, the beUI base they build on, and the effect libraries.
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 |
|---|---|---|---|
| value / defaultValue | string | — | Controlled or initial prompt text. |
| onValueChange | (value: string) => void | — | Called on every edit. |
| onSubmit | (value: string, model?: string) => void | — | Called with the trimmed prompt on Enter or send. |
| models | PromptModel[] | [] | Options for the model menu. Hidden when empty. |
| actions | PromptAction[] | [] | Items in the plus menu. Hidden when empty. |
| loading | boolean | false | Swaps send for stop. Pair with onStop. |
| voice / defaultVoice | boolean | false | Controlled or initial voice mode. |
| onVoiceChange | (voice: boolean) => void | — | Called when the mic button toggles voice mode. |
| voiceLevel | number | (() => number) | — | Drive the beam yourself, 0–1, instead of the microphone. |
| voiceColorVariant | VoiceBeamColorVariant | "colorful" | Palette of the voice beam. |
| disableVoice | boolean | false | Hides the mic button. |
| metalPreset | "chromatic" | "silver" | "gold" | "chromatic" | Metal palette for the ring and send button. |
| metalStrength | number | 1 | Intensity of the ring around the box, 0–1. |
| minRows / maxRows | number | 2 / 8 | Bounds for the auto-growing textarea. |