Prompt Composer

Usage

"use client";

import { PromptComposer } from "@/components/ui/prompt-composer";

<PromptComposer
  controls={[
    { id: "tone", label: "Tone", options: ["Neutral", "Friendly", "Formal"], defaultValue: "Neutral" },
    { id: "length", label: "Length", options: ["Short", "Medium", "Long"], defaultValue: "Medium" },
  ]}
  attachments={attachments}
  onAttachFiles={upload}
  onRemoveAttachment={remove}
  busy={generating}
  onStop={abort}
  onSubmit={({ text, values, attachments }) => generate(buildPrompt(text, values), attachments)}
/>

Why it exists

A blank box asks people to be good at prompting. "Make it friendlier, keep it short, it's for customers" isn't creative input. It's a specification, and typing it as prose every time is inconsistent and invisible until the result comes back wrong. The composer turns it into controls you can see before you send.

Features

• Specification as pills. "Tone: Friendly" is a Select pill, so it works with a keyboard, typeahead and a screen reader, and its list is drawn in the system's own surface. Pills changed from their default are outlined, so the non-default parts of the request stand out.
• Enter to send, Shift+Enter for a new line. Enter doesn't send while an input method (IME) is composing. Japanese or Chinese typists don't send half a sentence.
• Attach any way. Use the button, drag and drop, or paste. Upload status is shown on each file, and sending waits for uploads with a visible reason.
• Stop while generating. Send becomes Stop and stays reachable.
• A count only when it matters. It appears in the last 10% before maxLength.
• Suggestions fill, they don't send.

Examples

Turn values into the prompt on your side, where you control the wording:

function buildPrompt(text, { tone, length, audience, format }) {
  return `Write a ${length.toLowerCase()} ${format.toLowerCase()} for ${audience.toLowerCase()} in a ${tone.toLowerCase()} tone.\n\n${text}`;
}

Uploads stay yours. Report status back:

onAttachFiles={(files) => {
  for (const file of files) {
    const id = crypto.randomUUID();
    add({ id, name: file.name, status: "uploading" });
    uploadFile(file).then(
      () => update(id, { status: "ready" }),
      () => update(id, { status: "failed" }),
    );
  }
}}

Props

Accessibility

• The text area has a label and is described by the keyboard hint.
• Each control is a Select combobox named after its label ("Tone") that announces its current value; the visible "Tone:" prefix is hidden from screen readers so it isn't read twice.
• Send uses aria-disabled, so it stays focusable, and the reason it's blocked is shown and announced.
• Attachment remove buttons are named after the file.

When not to use

This isn't a chat input. There's no thread and no history. Use it where a request produces an artifact. For redirecting an agent that's already running, use Agent Steer.