Docs · Hooks & Helpers

Getting Started

Components

Examples

Tools

API Reference

More

Hooks & Helpers

The developer-experience layer: a state hook, trigger preset factories, and segment helpers that remove boilerplate.

usePromptAreaState()

Manages the segment value, ref, and derived state. Call it once and spread bind onto the component.

const { bind, plainText, isEmpty, hasChips, chips, clear, focus } =
  usePromptAreaState()

<PromptArea {...bind} />
PropTypeDefaultDescription
bind{ ref, value, onChange }—Spread onto <PromptArea {...bind} />.
plainTextstring—Derived plain text of the current value.
isEmptyboolean—True when empty or whitespace-only.
hasChipsboolean—True when the value contains a chip.
chipsChipSegment[]—All chip segments in the value.
clear()() => void—Clear all content.
focus() / blur()() => void—Focus or blur the input.
insertChip()(chip: Omit<ChipSegment, 'type'>) => void—Insert a chip imperatively.

Trigger presets

Each returns a TriggerConfig for the triggers prop. Pass onSearch to supply items, plus optional styling.

PropTypeDefaultDescription
mentionTrigger(opts?)(opts) => TriggerConfig—@ dropdown for users, agents, or documents.
commandTrigger(opts?)(opts) => TriggerConfig—/ dropdown with start-of-line detection.
hashtagTrigger(opts?)(opts) => TriggerConfig—# tags that auto-resolve on space.
callbackTrigger(opts)(opts) => TriggerConfig—Fire a callback (e.g. file picker) instead of a dropdown.

Segment helpers

Pure functions for building and reading segment arrays:

PropTypeDefaultDescription
text(value)(string) => TextSegment—Create a text segment.
chip(opts)(Omit<ChipSegment,'type'>) => ChipSegment—Create a chip segment.
getChips(segments)(Segment[]) => ChipSegment[]—All chips in a segment array.
getChipsByTrigger(segments, trigger)(Segment[], string) => ChipSegment[]—Chips for one trigger, e.g. '@' or '/'.
isSegmentsEmpty(segments)(Segment[]) => boolean—True when empty or whitespace-only.
hasChips(segments)(Segment[]) => boolean—True when at least one chip is present.
import { getChipsByTrigger } from '@/components/segment-helpers'

const mentions = getChipsByTrigger(bind.value, '@').map((c) => c.value)