Prompt Input

Collects a prompt in a growing field, with its tools and one Send that becomes Stop.

Configurations

Supported configurations for this component.

ReadyWith draftStreaming

Default

Interaction states covered by the API and the style contract.

Focus visible

Configurations

3 examples
Ready
With draft
Streaming

Default

1 example
Rest
Focus visible

Add to your project

One command adds this component to your project.

1

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Props

Every prop this component accepts. Any other prop is forwarded to the underlying element.

PromptInput

PropTypeDefaultDescription
status'ready'|'streaming''ready'`streaming` means the assistant is working: Send becomes Stop (when `onStop` is set) and Enter no longer sends. The field stays writable.
onStop() => void-Ends the running turn. Called by the Stop button shown in Send's place while `status` is `streaming`. Without it, Send stays in place and dead during a run.
onSubmit(event: React.FormEvent<HTMLFormElement>) => void-Called when Send is pressed or Enter is typed in the field, with the default already prevented. Never called over an empty field or during a run.
childrenReact.ReactNode-A PromptInputTextarea followed by a PromptInputToolbar.
classNamestring-Additional CSS classes applied to the root element.
styleReact.CSSProperties-Inline styles applied to the root element.

PromptInputTextarea

PropTypeDefaultDescription
valuestring-Controlled value. Pair with onChange. Leave unset for an uncontrolled field (read it from the form on submit; `name` defaults to "message").
defaultValuestring-Initial value when uncontrolled.
onChange(event: React.ChangeEvent<HTMLTextAreaElement>) => void-Handler called when the value changes.
maxRowsnumber10The field starts at one line, grows with the words up to this many lines, then scrolls.
placeholderstring-Placeholder text shown when the field is empty.
aria-labelstring'Prompt'The field's accessible name; it has no visible label. A `label` prop also works and is rendered visually hidden.
namestring'message'Form field name, so an uncontrolled field is in the form's FormData.
onKeyDown(event: React.KeyboardEvent<HTMLTextAreaElement>) => void-Runs before the Enter handling; call preventDefault to keep Enter from sending.
classNamestring-Forwarded to the <textarea>.

PromptInputToolbar

PropTypeDefaultDescription
childrenReact.ReactNode-Laid out left to right: a PromptInputTools group first, then the right-hand controls (a mic, PromptInputSubmit), which it pushes to the far end.
classNamestring-Forwarded to the footer row.
styleReact.CSSProperties-Forwarded to the footer row.

PromptInputTools

PropTypeDefaultDescription
childrenReact.ReactNode-The left group: an add menu, a model picker, a removable Tag. It takes the free width, so whatever follows it in the toolbar sits at the far end; a Tag inside may shrink.
classNamestring-Additional CSS classes applied to the root element.
styleReact.CSSProperties-Inline styles applied to the root element.

PromptInputSubmit

PropTypeDefaultDescription
size'sm'|'md'|'lg''sm'Rung on the control ladder; match the other controls in the toolbar.
classNamestring-Additional CSS classes applied to the root element.
styleReact.CSSProperties-Inline styles applied to the root element.

More Andromeda Pro components

Alert

Displays a status message in the flow of the page, at a severity from note to fault.

4 variants

Artifact

Frames something an agent produced, such as a table or a chart, under a title bar with its actions.

3 variants

Avatar

Represents a person as a square image tile that falls back to their initials.

6 variants1 states