Auto-growing composer for AI agents with attachment, model, submit and stop controls.
import * as React from 'react'
import PromptInput from '@/components/ui/prompt-input'
const prompts = [
'Build a pricing page with monthly and yearly toggles, three plans, and a comparison table.',
'Add keyboard shortcuts to the command palette and show them next to each action.',
]
export default function Demo() {
const [prompt, setPrompt] = React.useState(0)
const [typed, setTyped] = React.useState(48)
const [pending, setPending] = React.useState(false)
const [value, setValue] = React.useState(prompts[0].slice(0, 48))
const [auto, setAuto] = React.useState(true)
const [sent, setSent] = React.useState('')
const text = prompts[prompt]
React.useEffect(() => {
if (!auto) return
const done = typed >= text.length
const timer = setTimeout(
() => {
if (!done) {
setTyped((count) => count + 1)
setValue(text.slice(0, typed + 1))
} else if (!pending) setPending(true)
else {
setPending(false)
setValue('')
setTyped(0)
setPrompt((index) => (index + 1) % prompts.length)
}
},
done ? (pending ? 1800 : 900) : 32,
)
return () => clearTimeout(timer)
}, [auto, pending, text, typed])
return (
<div className="w-full max-w-xl space-y-3" onPointerDown={() => setAuto(false)}>
<PromptInput
onSubmit={(message, selection) => setSent(`Sent with ${selection.model}: ${message}`)}
onValueChange={setValue}
pending={pending}
placeholder="Describe what you want to build…"
value={value}
/>
<output className="block min-h-5 text-xs leading-5 text-muted-foreground">{sent}</output>
</div>
)
}
Part of Pasta UI — browse the full library on 21st.dev.