Prompt Input

Full-featured chat input with file attachments, character counting, and agent selector.

Installation

npx shadcn add https://ui.adq.ai/api/r/prompt-input

Usage

import {
  PromptInput,
  PromptInputBody,
  PromptInputFooter,
  PromptInputTextarea,
  PromptInputSubmit,
  PromptInputProvider,
} from "@/components/ai-elements/prompt-input";
import type { PromptInputMessage } from "@/components/ai-elements/prompt-input";

function MyChat() {
  const { sendMessage, status, stop } = useChat({ transport });

  function handleSubmit({ text, files }: PromptInputMessage) {
    if (text.trim() || files.length > 0) {
      sendMessage(files.length > 0 ? { text, files } : { text });
    }
  }

  return (
    <PromptInputProvider>
      <PromptInput onSubmit={handleSubmit}>
        <PromptInputBody>
          <PromptInputTextarea placeholder="Ask anything..." />
        </PromptInputBody>
        <PromptInputFooter>
          <PromptInputSubmit status={status} onStop={stop} />
        </PromptInputFooter>
      </PromptInput>
    </PromptInputProvider>
  );
}

Props (PromptInput)

Prop	Type	Default	Description
`onSubmit`*	`(msg: PromptInputMessage) => void \| Promise<void>`	—	Called when the user submits the input.
`accept`	`string`	—	File types accepted for upload (HTML accept attribute).
`multiple`	`boolean`	false	Allow multiple file attachments.
`maxFiles`	`number`	—	Maximum number of attached files.
`globalDrop`	`boolean`	false	Accept drag-and-drop files anywhere on the page.