Auto tag
Tag and category suggestions constrained to the app's own list, fuzzy-matched after the model answers.
- Apple Foundation Models: supported
- Gemini Nano: supported
- Llama (not yet supported): not supported
- A cloud model: supported
Install
npx ondai add auto-tagUsage
import { AutoTag } from '@/components/ondai/auto-tag'
<AutoTag text={note.body} tags={allTags} selected={note.tags} onChange={setTags} presentation="chips" max={3} />- The model can only pick from your list; results are fuzzy-matched back to it, so "Travel" becomes
travel.
Customize
Every AI component takes the same look and customization props, so it fits your app rather than ours.
<AutoTag
variant="pop"
tint="#FF5A5F"
size="lg"
radius={12}
icons={{ header: Search, add: null }}
labels={{ title: '…', thinking: '…' }}
/>| 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): header, add, accepted, tag, addAll, empty, error |
labels | Every visible and spoken string; defaults are exported as autoTagLabels: title, thinking, suggested, pending, addAll, empty, add, remove |
| Slots | Draw a part yourself: renderTag, renderEmpty, renderAddAll |
styles | Style any named part |
Variants
| Prop | Options |
|---|---|
presentation | chips, inlineGhost, dropdown |
variant | clean, minimal, glass, pop, candy, metal, shine |
size | sm, md, lg |
Token budget
Input budget: 1500 tokens. One structured call with an enum-constrained array; results fuzzy-matched to the list.
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/auto-tag/fixtures.json.
Files
Registry dependencies: button, chip, on-device-badge, shimmer-text, surface, skeleton
npm dependencies: @ondai/core, @ondai/tokens, expo-haptics, lucide-react-native, react-native-reanimated, zod
Smart reply
Three reply suggestions for the last message in a thread: chips, a stack, or ghost text inside the input, with an optional tone picker.
Text to event
A pasted or selected message becomes a calendar event: title, date, time, place and people fill in one by one with per-field confidence, stay editable, then go to the calendar.