Prompt Input

Prompt Input is the message field at the bottom of a chat or AI assistant, with room for attachments, an attach button and model or effort pickers. It uses the AI SDK's status words, so useChat state passes in unchanged.

Install

bashnpx shadcn@4.18.0 add @siteplane/prompt-input

Import it from @/siteplane/components/prompt-input. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Textarea: Pick Textarea for an ordinary multi-line form field that is submitted with the rest of a form.
• vs Attachment: Use Attachment cards inside it for files in the draft.
• vs Message Scroller: Pair it with Message Scroller above for the thread.

Rules

• Handle onSubmit, which receives the trimmed text, then add the message to your thread yourself.
• Pass status (ready, submitted, streaming, error) and onStop so Send becomes Stop while a reply runs.
• Compose PromptInputTextarea, PromptInputToolbar with PromptInputToolbarGroup, PromptInputAttachButton and PromptInputSubmit.
• Use submitOnEnter="desktop" when phone users should get new lines from Enter.
• Set allowEmpty only while the draft holds a file that is ready to send, and translate the built-in names through labels.
• Give the field an accessible name; placeholder text does not count as a label.

Reference

• Prompt Input docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Chat & AI. Read the installed source under src/siteplane before relying on an API.