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. It is not published to npm yet, so this command will not work until it is; until then, copy the source from the Code tab.
bun add @pouyal/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 "@pouyal/ai-components/theme.css"; @source "../node_modules/@pouyal/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 "@pouyal/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. |