Koala UI

Suggestions

Inline AI edit suggestions over a body of text. The AI marks spans with a colored dotted underline; click one to see the proposed replacement and a reason, then apply it in place or dismiss it.

4 suggestions to review. Click a highlight to see it.
Our onboarding flow . We it activation, and the .

Installation#

# One-time setup (tokens + lib helpers)npx koalaui-cli@latest init# Add this component (its dependencies come along)npx koalaui-cli@latest add suggestions

Usage#

usage.tsxTSX
import { Suggestions, SuggestionMark } from "@/components/ui/suggestions"export function Review() {  return (    <Suggestions onApply={(next, original) => save(next)}>      The deadline is{" "}      <SuggestionMark        variant="grammar"        suggestion="Friday"        reason="Capitalize the day of the week."      >        friday      </SuggestionMark>      .    </Suggestions>  )}

Wrap each improvable span in a SuggestionMark with its suggestion (the replacement) and an optional reason. Applying swaps the children for the suggestion in place; dismissing keeps the original. Both fire the root's onApply / onDismiss so you can persist the edit or tick down a counter.

Categories#

The variant tints the underline and the popover badge, so a reader can tell a grammar fix from a tone or clarity nudge at a glance: grammar, clarity, tone, and a neutral default.

Grammar: Let's .

Clarity: Let's .

Tone: Let's .

Concise: Let's .

API reference#

Suggestions

The prose container and context for the marks. Forwards all native div props.

  • onApply?(suggestion, original): fired when any mark is applied.
  • onDismiss?(original): fired when any mark is dismissed.

SuggestionMark

One improvable span. The children are the original text; applying replaces them with suggestion.

  • suggestion: the replacement text (required).
  • variant?: default · grammar · clarity · tone.
  • label? / reason?: the popover badge text and one-line explanation.
  • onApply? / onDismiss?: per-mark hooks (the root's run too).

FAQ#

The children are the original text the user wrote, and the `suggestion` prop is the replacement. When the user clicks Apply, the children are swapped for the suggestion in place; Dismiss keeps the children.