Smart input
Text, voice or photo fills your zod form on device, with per-field confidence, deterministic refinement and confirm/undo.
- Apple Foundation Models: supported
- Gemini Nano: supported
- Llama (not yet supported): not supported
- A cloud model: supported
Install
npx ondai add smart-inputUsage
import { SmartInput } from '@/components/ondai/smart-input'
import { z } from 'zod'
const expense = z.object({
merchant: z.string(),
amount: z.number(),
category: z.enum(['food', 'transport', 'home', 'other']),
date: z.string().describe('date').optional(),
})
<SmartInput schema={expense} presentation="field" onFill={(values) => form.reset(values)} aliases={{ category: { food: ['lunch', 'dinner'] } }} />- Enums are fuzzy-matched, numbers and money parsed, dates resolved from phrases ("yesterday") in code after the model answers.
- Per-field confidence drives highlight / badge / underline styles and confirm/undo.
- For react-hook-form:
form.apply((name, value) => setValue(name, value)).
Customize
Every AI component takes the same look and customization props, so it fits your app rather than ours.
<SmartInput
variant="pop"
tint="#FF5A5F"
size="lg"
radius={12}
icons={{ input: Search, voice: 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): input, voice, camera, submit, filled, confirm, undo, error |
labels | Every visible and spoken string; defaults are exported as smartInputLabels: placeholder, thinking, fill, submit, voice, camera, filledCount, undo, undoAll, use, confirm, add, filledMark, retry |
| Slots | Draw a part yourself: renderField, renderSubmit, renderEmpty, renderFooter |
styles | Style any named part |
Variants
| Prop | Options |
|---|---|
variant | clean, minimal, glass, pop, candy, metal, shine |
presentation | field, composer, overlay, card |
size | sm, md, lg |
confidenceStyle | highlight, badge, underline |
Token budget
Input budget: 1500 tokens. One structured call; enum/number/date fields are refined deterministically after parsing.
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/smart-input/fixtures.json.
Files
Registry dependencies: button, chip, ion-border, on-device-badge, shimmer-text, skeleton, surface
npm dependencies: @ondai/core, @ondai/tokens, expo-haptics, lucide-react-native, react-native-reanimated, zod
Command bar
Spotlight for your app: natural language becomes one of your registered actions or routes, chosen by on-device tool calling, with preview and confirmation.
Scan to data
Camera or photo becomes structured data (receipt, business card, event, or your own schema) via on-device OCR and the local model.