Ai Composer

Chat input for AI apps with a multiline textarea, Enter to send, suggestion chips, attach button, model picker and a stop button while a response streams.

src/registry/ui/ai-composer.tsx/r/ai-composer.json

Installation#

bash

npx shadcn@latest add @minidev/ai-composer

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/ai-composer.json

Usage#

tsx

import { AiComposer } from "@/components/ui/ai-composer"

export function Example() {
  return (
    <AiComposer
      value={msg}
      onChange={setMsg}
      suggestions={["Improve contrast", "Add FAQ", "Write changelog"]}
      onSubmit={() => setMsg("")}
    />
  )
}

API reference#

AiComposer props
Prop	Type	Default
`value`	`string`	`-`
`onChange`	`(v: string) => void`	`-`
`onSubmit`	`() => void`	`-`
`onStop`	`() => void`	`-`
`streaming`	`boolean`	`-`
`suggestions`	`string[]`	`-`
`models`	`{ id: string; label: string }[]`	`DEFAULT_MODELS`
`model`	`string`	`-`
`onModelChange`	`(v: string) => void`	`-`
`className`	`string`	`-`