Prompt Input
Where a generation starts: a prompt that grows with its text, with reference images pasted or dropped right on it.
In use
The dock of every studio, with its tools, settings and cost in the toolbar. Over balance, only submit locks; the model can still change.
Your image will appear here
Your image will appear here
Your image will appear here
Your image will appear here
Paint over what to change. Tab reaches the marks: arrow keys move one, Enter edits its note, Delete removes it.
Your video will appear here
Installation
pnpm dlx shadcn@latest add https://mgp.paukraft.com/r/prompt-input.jsonPromptInput
| Prop | Type | Default |
|---|---|---|
| onSubmit | (prompt: string) => voidEnter or the button, with the trimmed prompt. | — |
| value / defaultValue | stringThe prompt. Controlled with onValueChange. | — |
| busy | booleanA generation is in flight; submitting waits. | false |
| onStop | () => voidTurns the button into stop while busy. | — |
| onFilesAdd | (files: File[]) => voidImage files pasted or dropped anywhere on the prompt, e.g. ReferenceTray's onAdd. | — |
| placeholder | stringPromptInput only. | "Describe an image…" |
| toolbar | ReactNodePromptInput only: controls before the submit button. | — |
Parts
| Prop | Type | Default |
|---|---|---|
| PromptInputRoot | <form> + the props aboveThe surface. Clicks on its padding focus the prompt. | — |
| PromptInputTextarea | <textarea> propsGrows with its text. Enter submits, Shift + Enter adds a line. | — |
| PromptInputToolbar | <div> propsThe row below; its last child sits at the end. | — |
| PromptInputSubmit | Button propsGenerate, or stop while busy. | — |
| usePromptInput | () => { value, setValue, submit, busy, … }For your own controls, e.g. a prompt enhancer. | — |