@nice2dev/ui-ai
v1.0.6
Published
Nice2Dev AI Hints — LLM-powered contextual suggestions for UI controls (OpenAI, Azure OpenAI, Ollama, custom endpoints)
Maintainers
Readme
@nice2dev/ui-ai
AI Hints infrastructure — LLM-powered contextual suggestions for 12+ NiceToDev control types.
Features
- NiceAIProvider — React context with endpoint/key/model/temperature/max-tokens configuration
- useNiceAIHint(context) — hook with debounce, cache, abort-on-unmount, streaming (SSE)
- NiceAIHintBubble — ✨ icon + tooltip/popover rendering LLM response token-by-token
- Rate Limiting & Cost Guard — max requests/min, max tokens/session, cost warnings
- Privacy Mode — send only metadata (label + type + rules), never field values
- Fallback Graceful — no AI config = zero overhead, zero errors
Control Integrations
| Control | AI Feature | |---------|-----------| | TextInput / TextArea | Content suggestions, grammar correction, sentence completion | | NumberInput / Slider | Range suggestions from context ("typical price: 50–200") | | Select / Autocomplete | Smart sort, most-frequent-choice suggestion | | DatePicker | Date suggestions ("next business day", "in one week") | | DataGrid | Column config, filter suggestions, anomaly detection | | Chart | Chart type suggestion from data, auto-labeling | | CodeEditor | Language/framework-aware code hints | | HtmlEditor | SEO, accessibility, grammar, cleanup modes | | ColorPicker | Industry/context-based palette suggestion | | Form-level | "Fill form from description" — LLM parses text → fills fields | | Validation | Intelligent error messages ("enter company name, e.g. NiceToDev sp. z o.o.") |
Specialist Package Integrations
- ui-audio —
useAIAudioHint(tag/bpm/mix/transcribe) - ui-3d —
useAI3DHint(material/optimize/lighting/animation) - ui-graphics —
useAIGraphicsHint(filter/palette/upscale/style-transfer) - game-engine —
useAINpcHint(NPC decisions, dialogue, procedural levels, quests) - icons —
useAIIconSearch(semantic icon search)
Installation
npm install @nice2dev/ui-aiUsage
import { NiceAIProvider, useNiceAIHint, NiceAIHintBubble } from '@nice2dev/ui-ai';
<NiceAIProvider config={{ endpoint: '...', apiKey: '...', model: 'gpt-4o' }}>
<MyForm />
</NiceAIProvider>License
MIT © NiceToDev
