Rewrite
Shorten, expand, friendlier, formal or fix grammar, streamed on device, with replace / diff / side-by-side results and accept/reject.
- Apple Foundation Models: supported
- Gemini Nano: supported
- Llama (not yet supported): not supported
- A cloud model: supported
Install
npx ondai add rewriteUsage
import { Rewrite } from '@/components/ondai/rewrite'
<Rewrite value={draft} onAccept={setDraft} presentation="toolbar" resultView="diff" />- Modes: shorten, expand, friendlier, formal, fix grammar, or
customwith your own instruction. - Result views: replace, word-level diff, or side by side.
Customize
Every AI component takes the same look and customization props, so it fits your app rather than ours.
<Rewrite
variant="pop"
tint="#FF5A5F"
size="lg"
radius={12}
icons={{ shorten: Search, expand: null }}
labels={{ shorten: '…', expand: '…' }}
/>| Prop | What it does |
|---|---|
variant | The look of the whole component: clean, minimal, glass, pop, candy, metal, shine |
size | sm, md, lg; type, rows, icons and keys scale together |
tint | Any colour; the variant paints its keys, tiles and glow in it |
radius | Corner radius of the container |
icons | Replace any icon (a lucide component, an element, or null to hide it): shorten, expand, friendlier, formal, fix, custom, menu, accept, reject, retry |
labels | Every visible and spoken string; defaults are exported as rewriteLabels: shorten, expand, friendlier, formal, fix, custom, workingShorten, workingExpand, workingFriendlier, workingFormal, workingFix, workingCustom, menu, accept, reject, retry, before, after, words, word, sameLength, empty, modes |
| Slots | Draw a part yourself: renderMode, renderResult, renderActions, renderEmpty |
styles | Style any named part |
Variants
| Prop | Options |
|---|---|
variant | clean, minimal, glass, pop, candy, metal, shine |
presentation | toolbar, menu, chips |
resultView | replace, diff, sideBySide |
size | sm, md, lg |
Token budget
Input budget: 1800 tokens. Input is truncated to half the window so the rewrite fits in the rest.
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
Fixtures: evals/rewrite/fixtures.json.
Files
Registry dependencies: button, chip, on-device-badge, sheet, shimmer-text, skeleton, streaming-text, surface
npm dependencies: @ondai/core, @ondai/tokens, expo-haptics, lucide-react-native, react-native-reanimated, react-native-svg