Inline suggest

A text field that offers the rest of the sentence as ghost text while the person types, from the on-device model. Tab or the Add key takes it.

Mock· scripted answersNo model runs in a browser, so every answer here is scripted. On a phone it comes from the model.
  • Apple Foundation Models: supported
  • Gemini Nano: supported
  • Llama (not yet supported): not supported
  • A cloud model: supported

Install

npx ondai add inline-suggest

Usage

import { InlineSuggest } from '@/components/ondai/inline-suggest'

<InlineSuggest context="A message to Priya about Friday’s dinner" value={text} onChangeText={setText} />
  • The model runs only after a pause in typing, and a guess for older text is never shown.

Customize

Every AI component takes the same look and customization props, so it fits your app rather than ours.

<InlineSuggest
  variant="pop"
  tint="#FF5A5F"
  size="lg"
  radius={12}
  icons={{ accept: Search }}
  labels={{ placeholder: '…', accept: '…' }}
/>
PropWhat it does
variantThe look of the whole component: clean, minimal, glass, pop, candy, metal, shine
sizesm, md, lg; type, rows, icons and keys scale together
tintAny colour; the variant paints its keys, tiles and glow in it
radiusCorner radius of the container
iconsReplace any icon (a lucide component, an element, or null to hide it): accept
labelsEvery visible and spoken string; defaults are exported as inlineSuggestLabels: placeholder, accept, hintKeyboard, hintTouch, thinking, suggestion
SlotsDraw a part yourself: renderAccept, renderHint
stylesStyle any named part

Variants

PropOptions
variantclean, minimal, glass, pop, candy, metal, shine
sizesm, md, lg

Fallback

When no provider is ready the component renders the unavailable state (AvailabilityGate copy) and, where a deterministic path exists, keeps working without the model.

Eval score

No model-driven fixtures for this component.

Files

Registry dependencies: button, key-hint, on-device-badge, shimmer-text, surface

npm dependencies: @ondai/core, @ondai/tokens, lucide-react-native, react-native-reanimated

On this page