Prompt Input
The composer for prompting an agent: autosize, attachments, model picker, stop.
Prompt Input is the message composer for AI chat and agents. It grows with the text, sends on Enter (Shift+Enter for a new line), attaches files by button, paste or drop, hosts a model picker and context meter in its toolbar, and turns Send into Stop (Esc) while the agent works. A signal line sweeps its top edge on send.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/prompt-input.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/prompt-input.
Builds on: motion
Usage
import { PromptInput } from "@/components/ui/prompt-input";
<PromptInput status={status} onSubmit={({ text, files }) => send(text, files)} onStop={stop} />Motion
A signal line sweeps the top edge on send; Stop pulses while streaming.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
PromptInput
| Prop | Type | Default | Description |
|---|---|---|---|
| onSubmit | ({ text, files }) => void | — | Called on send. |
| status | "idle" | "streaming" | "idle" | Streaming swaps Send for Stop. |
| onStop | () => void | — | Stop button and Esc. |
| toolbar | ReactNode | — | Extra controls. |
| attachments | boolean | true | Files by button, paste, drop. |
Accessibility
- Enter sends, Shift+Enter adds a line, IME composition is respected.
- Esc stops a running generation.
FAQ
Also searched as: ai chat input react · prompt input component · chatgpt style input · ai composer react · shadcn ai prompt input