1

AI InputNew

AI composer textarea with auto-grow, send/stop button morph, attachment slots, and Enter-to-send.

Dependencies

motion

Interaction Type

Type and press Enter to send (Shift+Enter for newline, IME-guarded). Send glyph launches upward on submit while the field relaxes to one row. During streaming the send button crossfades to a stop button.

Props

Options you can pass to customize this component.

Prop
Type
Description
value
string

Controlled textarea value.

defaultValue
string

Initial value for uncontrolled usage.

onValueChange
(value: string) => void

Called with the new value on every textarea change.

onSubmit
(value: string) => void

Fired when the user submits via Enter or the send button.

streaming
boolean

When true, the send button morphs into a stop button.

onStop
() => void

Fired when the user clicks the stop button during streaming.

placeholder
string

Placeholder shown when the textarea is empty.

maxRows
number

Maximum visible rows before internal scroll. Defaults to 6.

disabled
boolean

Disables the textarea and all buttons.

name
string

Form field name attribute forwarded to the textarea.

startSlot
ReactNode

Slot rendered before the textarea (e.g. attach button).

endSlot
ReactNode

Slot rendered after the textarea and before the send button (e.g. model picker).

className
string

Additional CSS classes for the container.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/ai-input.json

How to use

import { useState } from "react"
import { AiInput } from "@/components/ui/ai-input"

export function Demo() {
  const [value, setValue] = useState("")
  return (
    <AiInput
      value={value}
      onValueChange={setValue}
      onSubmit={() => setValue("")}
      placeholder="Ask anything..."
    />
  )
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
npx shadcn@latest addhttps://ui.nexvyn.dev/r/ai-input.json