AI Prompt Input

The composer. It re-bases on Nuxt UI's ChatPrompt and ChatPromptSubmit, so the box, the field and the button belong to the design system rather than to this module — and you inherit autoresize, the Enter / Shift+Enter and Escape keys, the IME guard on Enter, focus rings, and the send / stop / reload glyph set.

The IME guard is worth calling out: accepting a Japanese candidate with Enter used to both submit the prompt and swallow the character. That is handled for you.

The module keeps only the motion it owns — the attachment chips, the character counter, and the press physics plus crossfade on the submit button. The box's own chrome is the theme's, and the only status it carries is an accent ring on error and done.

Pair it with AI Messages for the transcript and AI Orb Face for the character above it.

Usage

Bind v-model to the draft, set state, and handle submit. Everything else — attachments, the counter, the button swap — is opt-in through attachable, removable and max-length.

<template>
  <div class="flex w-full max-w-lg flex-col gap-4">
    <div class="flex flex-wrap items-center gap-2">
      <UButton
        v-for="value in states"
        :key="value"
        :color="state === value ? 'primary' : 'neutral'"
        :label="value"
        size="sm"
        :variant="state === value ? 'solid' : 'outline'"
        @click="state = value"
      />
    </div>

    <MAiPromptInput
      v-model="draft"
      :attachments="attachments"
      attachable
      :max-length="180"
      placeholder="Ask anything…"
      removable
      :state="state"
      @attach="onAttach"
      @remove-attachment="onRemoveAttachment"
      @submit="onSubmit"
      @stop="state = 'idle'"
    >
      <UButton
        color="neutral"
        icon="i-lucide-globe"
        size="xs"
        variant="ghost"
      />
    </MAiPromptInput>

    <p class="text-xs text-muted">
      {{ draft ? `last submit: "${submitted}"` : 'type something, or attach a file' }}
    </p>
  </div>
</template>

<script setup lang="ts">
type Attachment = {
  id: string
  name: string
  size?: number
}

type DemoState = 'idle' | 'listening' | 'thinking' | 'streaming' | 'done' | 'error'

const states: DemoState[] = ['idle', 'thinking', 'streaming', 'done', 'error']

const draft = ref('')
const submitted = ref('')
const state = ref<DemoState>('idle')
const attachments = ref<Attachment[]>([])

const onAttach = () => {
  attachments.value = [
    ...attachments.value,
    { id: `f-${attachments.value.length + 1}`, name: 'token-audit.md', size: 18_432 },
  ]
}

const onRemoveAttachment = (id: string) => {
  attachments.value = attachments.value.filter(file => file.id !== id)
}

const onSubmit = (value: string) => {
  submitted.value = value
  attachments.value = []
  state.value = 'streaming'
}
</script>

Customize

Props

Events

Slots

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.aiPromptInput in app.config.ts.

Accessibility

• ariaLabel goes on the textarea, not the box, so the announced name matches the element that actually takes focus.
• The attach button and each chip's remove button are native <button>s with aria-labels — "Attach a file", and "Remove filename". The icons inside them are aria-hidden.
• The counter uses tabular-nums, so the digits do not reflow as the count climbs, and it turns to the error colour past the limit.
• The field grows to at most 8 rows and then scrolls. A long draft stays editable rather than pushing the whole page down.
• An empty draft cannot be submitted, but stop always works. That asymmetry comes from the underlying submit component honouring disabled only in the ready state, and it is the correct rule: you must always be able to interrupt a turn.
• Enter submissions are dropped while the field is disabled.
• Under prefers-reduced-motion: reduce the attachment list, the chips, the counter and the submit swap all resolve to instant state changes with no travel and no press physics.
• The submit button is keyed on chatStatus and swapped with mode="popLayout", so the outgoing button leaves flow immediately instead of the row jumping mid-swap. That is a layout guarantee, not decoration: a composer that jumps is a composer people misclick.

Performance

• Every animation variant is hoisted to a module-level constant. A re-render on every keystroke cannot allocate them.
• The attachment list and chips use layout animation so removing a chip slides the survivors into place, but only when reduced motion is off.
• The submit swap is paced by the state: duration: 0.18 / speed. A thinking composer is faster than an idle one, so the control stays responsive during the state where a user is most likely to interrupt.
• The draft is a computed with a getter and a setter, so controlled and uncontrolled modes are one code path rather than two branches in the template.
• Unmanaged draft only: submitting clears an internal value, never a bound one. Wiping a controlled draft would fight whoever owns it.
• ui is rebuilt as a computed so the accent ring can join the root's classes without allocating on every keystroke.