Prompt Input

The Prompt Input component allows a user to send a message with file attachments to a large language model. It includes a textarea, file upload capabilities, a submit button, and a dropdown for selecting the model.

Installation

pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/r/prompt-input.json

If you prefer using jsrepo, please install via the command below:

pnpm dlx jsrepo add @ai/elements/ai-elements/prompt-input

Usage

Usage with AI SDK

Build a fully functional chat app using PromptInput, Conversation with a model picker:

Add the following component to your frontend:

+page.svelte

Add the following route to your backend:

api/chat/+server.ts

Features

Auto-resizing textarea that adjusts height based on content
File attachment support with drag-and-drop
Image preview for image attachments
Configurable file constraints (max files, max size, accepted types)
Automatic submit button icons based on status
Support for keyboard shortcuts (Enter to submit, Shift+Enter for new line)
Customizable min/max height for the textarea
Flexible toolbar with support for custom actions and tools
Built-in model selection dropdown
Responsive design with mobile-friendly controls
Clean, modern styling with customizable themes
Form-based submission handling
Hidden file input sync for native form posts
Global document drop support (opt-in)

Props

PromptInput

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the form container
`accept`	`string`	-	File types to accept (e.g., 'image/*' or leave undefined for any)
`multiple`	`boolean`	-	Whether to allow multiple file uploads
`globalDrop`	`boolean`	-	When true, accepts drops anywhere on document. Default false (opt-in)
`syncHiddenInput`	`boolean`	-	When true, renders a hidden input with given name and keeps it in sync for native form posts. Default false
`clearOnSubmit`	`boolean`	`true`	When true, automatically clears attachments after successful submission
`maxFiles`	`number`	-	Maximum number of files allowed
`maxFileSize`	`number`	-	Maximum file size in bytes
`onError`	`(err: { code: 'max_files' \| 'max_file_size' \| 'accept'; message: string }) => void`	-	Error handler for file validation errors
`onSubmit`	`(message: PromptInputMessage, event: SubmitEvent) => void \| Promise<void>`	-	Submit handler called when the form is submitted
`children`	`Snippet`	-	Child components (typically PromptInputBody, PromptInputToolbar)

PromptInputProvider

Prop	Type	Default	Description
`initialInput`	`string`	`""`	Initial input value for the textarea
`accept`	`string`	-	File types to accept for attachments
`multiple`	`boolean`	`true`	Whether to allow multiple file uploads
`children`	`Snippet`	-	Provider content

PromptInputBody

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the body container
`children`	`Snippet`	-	Body content (typically PromptInputTextarea and PromptInputAttachments)

PromptInputTextarea

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the textarea
`placeholder`	`string`	`"What would you like to know?"`	Placeholder text for the textarea
`value`	`string`	-	Current textarea value (bindable)
`onchange`	`(event: Event) => void`	-	Change event handler

PromptInputAttachments

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the attachments container
`children`	`Snippet<[FileWithId]>`	-	Render function for each attachment (receives file data)

PromptInputAttachment

Prop	Type	Default	Description
`data`	`FileWithId`	-	File data object containing id, filename, mediaType, and url
`class`	`string`	-	Additional CSS classes to apply to the attachment container

PromptInputToolbar

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the toolbar container
`children`	`Snippet`	-	Toolbar content (typically PromptInputTools and PromptInputSubmit)

PromptInputTools

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the tools container
`children`	`Snippet`	-	Tool buttons (typically PromptInputButton or PromptInputActionMenu)

PromptInputButton

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the button
`children`	`Snippet`	-	Button content
`variant`	`'default' \| 'destructive' \| 'outline' \| 'secondary' \| 'ghost' \| 'link'`	`'ghost'`	Visual style variant of the button
`size`	`'default' \| 'sm' \| 'lg' \| 'icon'`	-	Size of the button (auto-calculated based on children if not provided)

PromptInputSubmit

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the submit button
`status`	`ChatStatus`	-	Current chat status ('submitted', 'streaming', 'error', or undefined) - changes the icon displayed
`children`	`Snippet`	-	Custom button content (defaults to status-based icon if not provided)
`variant`	`'default' \| 'destructive' \| 'outline' \| 'secondary' \| 'ghost' \| 'link'`	`'default'`	Visual style variant of the button
`size`	`'default' \| 'sm' \| 'lg' \| 'icon'`	`'icon'`	Size of the button

PromptInputActionMenu

Prop	Type	Default	Description
`open`	`boolean`	-	Whether the dropdown menu is open (bindable)
`children`	`Snippet`	-	Menu content (typically PromptInputActionMenuTrigger and PromptInputActionMenuContent)

PromptInputActionMenuTrigger

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the trigger button
`children`	`Snippet`	-	Trigger content (defaults to PlusIcon if not provided)

PromptInputActionMenuContent

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the dropdown content
`children`	`Snippet`	-	Menu items (typically PromptInputActionMenuItem components)

PromptInputActionMenuItem

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the menu item
`onSelect`	`(event: Event) => void`	-	Handler called when the menu item is selected
`children`	`Snippet`	-	Menu item content

PromptInputActionAddAttachments

Prop	Type	Default	Description
`label`	`string`	`"Add photos or files"`	Label text for the menu item
`class`	`string`	-	Additional CSS classes to apply to the menu item

PromptInputModelSelect

Prop	Type	Default	Description
`value`	`string`	-	Currently selected model value (bindable)
`onValueChange`	`(value: string \| undefined) => void`	-	Callback when the selected value changes
`children`	`Snippet`	-	Select content (typically PromptInputModelSelectTrigger and PromptInputModelSelectContent)

PromptInputModelSelectTrigger

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the select trigger
`children`	`Snippet`	-	Trigger content (typically PromptInputModelSelectValue)

PromptInputModelSelectValue

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the value display
`placeholder`	`string`	-	Placeholder text when no value is selected
`value`	`string`	-	Current selected value to display

PromptInputModelSelectContent

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the select dropdown content
`children`	`Snippet`	-	Select items (typically PromptInputModelSelectItem components)

PromptInputModelSelectItem

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the select item
`value`	`string`	-	Value of the select item
`children`	`Snippet`	-	Item content