Skip to content

Prompt Input

The composer: Enter sends, Shift+Enter starts a new line. Attach files from the + menu, by pasting or by dropping (images, PDFs and text, up to 1 MB and 4 files). Send becomes Stop while the reply streams.

Sourcecomponents/prompt-input.tsx

Nothing sent yet

Usage

Prompt Input usage
import type { ChatStatus } from "@/components/lib/agent-types";import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputBody, PromptInputFooter, PromptInputHeader, PromptInputSubmit, PromptInputTextarea, PromptInputTools } from "@/components/prompt-input";import type { PromptInputMessage } from "@/components/prompt-input";
export function PromptInputUsage({  status,  sendMessage,  stop,}: {  status: ChatStatus;  sendMessage: (message: PromptInputMessage) => Promise<void>;  stop: () => void;}) {  return (    <PromptInput onSubmit={sendMessage} accept="image/*,application/pdf" maxFiles={4} maxFileSize={1_000_000}>      <PromptInputHeader />      <PromptInputBody>        <PromptInputTextarea placeholder="Ask anything" />      </PromptInputBody>      <PromptInputFooter>        <PromptInputTools>          <PromptInputActionMenu>            <PromptInputActionMenuTrigger />            <PromptInputActionMenuContent>              <PromptInputActionAddAttachments />            </PromptInputActionMenuContent>          </PromptInputActionMenu>        </PromptInputTools>        <PromptInputSubmit status={status} onStop={stop} />      </PromptInputFooter>    </PromptInput>  );}

When to use

Use when

The composer of an agent chat: a growing textarea where Enter sends and Shift+Enter is a new line (never during IME composition), files by menu, paste or drop checked against accept/maxFiles/maxFileSize, and a Submit that follows status (Send, Sending, Stop, Retry). onSubmit gets { text, files } in the AI SDK's shape

Don’t use when

A multi-line form field that isn't a chat message (use Textarea); one line with a button in the frame (use Input Group)