Natural filter
A natural-language search request becomes a typed filter/sort object with editable chips.
- Apple Foundation Models: supported
- Gemini Nano: supported
- Llama (not yet supported): not supported
- A cloud model: supported
Install
npx ondai add natural-filterUsage
import { NaturalFilter } from '@/components/ondai/natural-filter'
import { z } from 'zod'
const filters = z.object({ cuisine: z.enum(['italian', 'japanese']).optional(), price: z.enum(['$', '$$', '$$$']).optional(), openNow: z.boolean().optional() })
<NaturalFilter schema={filters} presentation="bar" onChange={(f) => setFilter(f)}>
<RestaurantList filter={filter} />
</NaturalFilter>- Chips are editable (tap an enum chip to cycle values) and removable.
Customize
Every AI component takes the same look and customization props, so it fits your app rather than ours.
<NaturalFilter
variant="pop"
tint="#FF5A5F"
size="lg"
radius={12}
icons={{ search: Search, clear: null }}
labels={{ placeholder: '…', 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): search, clear, edit, submit, row, empty, error |
labels | Every visible and spoken string; defaults are exported as naturalFilterLabels: placeholder, thinking, submit, clear, clearFilters, editFilters, sheetTitle, done, any, yes, no, not, tapToChange, remove, emptyTitle, emptyHint, result, results, inputLabel |
| Slots | Draw a part yourself: renderChip, renderSubmit, renderEmpty, renderFooter |
styles | Style any named part |
Variants
| Prop | Options |
|---|---|
presentation | bar, sheet, inline |
variant | clean, minimal, glass, pop, candy, metal, shine |
size | sm, md, lg |
chipStyle | soft, outline |
Token budget
Input budget: 600 tokens. One structured call; enums, numbers and booleans refined deterministically.
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/natural-filter/fixtures.json.
Files
Registry dependencies: button, chip, on-device-badge, sheet, shimmer-text, surface, skeleton
npm dependencies: @ondai/core, @ondai/tokens, expo-haptics, lucide-react-native, react-native-reanimated, zod
Ask page
Ask about the page on screen. The answer streams in grounded in its text, with tap-to-jump quotes and follow-ups, and says when the page does not hold it.
Photo caption
A photo in; a caption and accessibility alt text out, written by the on-device vision model. Streamed, editable, copyable, and handed back as alt text.