Skip to content

Composer

Base UI

A prompt box with attachment chips, a model picker and a live context meter.

refund-policy.mdq3-tickets.csv
11%
of 32k

Install

$ npx shadcn@latest add https://spotcheckui.com/r/composer.json

No motion engine needed.

Usage

import { Composer } from "@/components/spotcheck/composer"

<Composer
  value={prompt}
  onValueChange={setPrompt}
  onSubmit={send}
  attachments={files}
  onRemove={removeFile}
  models={[{ value: "atlas-l", label: "atlas-l" }]}
  model={model}
  onModelChange={setModel}
  contextLimit={32000}
  usedTokens={3600}
/>

The meter estimates four characters per token for the draft. Pass real counts through usedTokens.

Props

  • value * RequiredstringDefault —
  • onValueChange * Required(value: string) => voidDefault —
  • onSubmit * Required() => voidDefault —Runs on the Send button and on Cmd or Ctrl plus Enter.
  • attachmentsstring[]Default []File names shown as chips.
  • onRemove(name: string) => voidDefault —Removes a file. Leave it out to make chips read only.
  • onAttach() => voidDefault —Shows an Attach button.
  • modelsSelectOption[]Default []
  • modelstringDefault —
  • onModelChange(model: string) => voidDefault —
  • contextLimitnumberDefault —The model's context window, in tokens.
  • usedTokensnumberDefault 0Tokens already used by attachments and history.
  • disabledbooleanDefault falseStops sending, such as while a reply streams.
  • placeholderstringDefault Ask something
  • classNamestringDefault —

Keyboard

⌘ EnterSend, Ctrl Enter on Windows and Linux
TabMove between the box, chips and controls

Reduced motion

Nothing here animates.