AI Input

Blocks & Slices

A polished AI chat composer: an auto-growing textarea, a leading model/attach control row, an empty-disabled send button that swaps to a brief pending spinner on submit, a soft focus glow, and empty-state suggestion chips that fill the field on click (Enter sends, Shift+Enter newlines). Under prefers-reduced-motion the glow pulse, spinner rotation, and chip/icon transitions resolve to instant, legible static states.

Inspired by Skiper UI — AI Input (pattern); Vercel AI SDK chat genre — independently built, not affiliated. Attribution policy

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/ai-input.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/ai-input.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="w-full max-w-md px-4">
    <AiInput
      model="Nova 2.5"
      placeholder="Ask anything…"
      suggestions={["Summarize this thread", "Draft a reply", "Explain like I'm five"]}
      onSubmit={() => new Promise((resolve) => setTimeout(resolve, 900))}
    />
  </div>

Props

AiInputProps

Prop	Type	Default	Description
placeholder	string	"Ask anything…"	Placeholder shown while the composer is empty.
suggestions	string[]	[]	Optional prompt chips shown above the input while it is empty; clicking one fills the field.
onSubmit	(text: string) => void \| Promise<void>	—	Called with the trimmed text on submit. If it returns a promise, the spinner holds until it settles.
model	string	"Auto"	Label shown on the leading model pill (decorative in this demo composer).
className	string	—	Extra classes on the outer `<form>`.

npm dependencies

motion