AI Input
AI Input component for your next AI SaaS.
Installation
Run the following command
npx shadcn@latest add https://ui.cloffstudio.com/r/ai-input.jsonProps
| Props | Type | Default | Description |
|---|---|---|---|
Logo | { title: string; src: string } | - | Shape used to represent an AI agent (used by AIInputAgentPicker). |
DropdownOption | { label: string; value: string } | - | Shape used for dropdown options (used by AIInputDropdown). |
children | React.ReactNode | - | Content rendered inside the AIInput container (controls, textarea, etc.). |
placeholder | string | "Type here....." | Placeholder text shown in the textarea. |
onSubmit | (value: string) => void | - | Called when Enter is pressed (without Shift) with the trimmed text. |
value | string | - | Controlled value for the textarea. If provided, the textarea updates when it changes. |
onChange | (value: string) => void | - | Called on each change with the new textarea value. |
children | React.ReactNode | - | Row content for controls (used by AIInputControls, AIInputLeftControls, AIInputRightControls). |
options | DropdownOption[] | - | Array of options (label/value) shown inside the dropdown. |
defaultValue | string | options[0]?.label | Initial label displayed in the dropdown (falls back to the first option's label). |
onChange | (value: string) => void | - | Callback invoked when an option is selected. Receives the selected option's value. |
agents | Logo[] | - | Array of agent logos to show in the picker. |
defaultAgent | Logo | null | Initial selected agent (if any). |
onChange | (agent: Logo) => void | - | Called when an agent is selected (passes the selected Logo). |
onClick | () => void | - | Click handler for the submit button. |
disabled | boolean | false | When true, button is disabled and dimmed. |
isLoading | boolean | false | When true, shows a loading state instead of the arrow. |