🧠 @aivue/predictive-input

$3

Transform your text inputs with intelligent, AI-powered predictions. Get smart text completions and suggestions powered by your AI provider.


---

✨ Features

$3

- AI-Powered - Uses AI to generate intelligent text predictions
- Context-Aware - Understands context for better predictions
- Text Completion - Suggests complete thoughts and phrases
- Confidence Scoring - Shows prediction reliability

$3

- Multiple Providers - Works with OpenAI, Claude, Gemini, and more
- Flexible - Use any AI client from @aivue/core
- Customizable - Configure prediction behavior
- Real-time - Get predictions as you type

$3

- Lightweight - Minimal bundle size
- Fast - Real-time predictions with debouncing
- Responsive - Smooth user experience
- Keyboard Navigation - Full keyboard support

---

📦 Installation

``bash
npm install @aivue/predictive-input
`

---

🚀 Quick Start

$3

`vue



`

---

📖 Components

$3

Main input component with AI-powered predictions.

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| modelValue | string | '' | Input value (v-model) |
| placeholder | string | 'Start typing...' | Placeholder text |
| disabled | boolean | false | Disable input |
| multiline | boolean | false | Use textarea instead of input |
| rows | number | 3 | Rows for textarea |
| type | string | 'text' | Input type |
| maxPredictions | number | 5 | Maximum predictions to show |
| minConfidence | number | 0.1 | Minimum confidence threshold |
| suggestionsPosition | 'above' \| 'below' | 'below' | Position of suggestions |
| enableTraining | boolean | true | Auto-train on input |
| storageKey | string | 'aivue_predictive_input' | LocalStorage key |

#### Events

| Event | Payload | Description |
|-------|---------|-------------|
| update:modelValue | string | Emitted when value changes |
| prediction-accepted | Prediction | Emitted when prediction is accepted |
| training-complete | - | Emitted when training completes |

#### Keyboard Shortcuts

- ↑/↓ - Navigate predictions
- Tab/Enter - Accept selected prediction
- Esc - Close suggestions

$3

Panel for training the AI model with custom text.

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| storageKey | string | 'aivue_predictive_input' | LocalStorage key |

#### Events

| Event | Description |
|-------|-------------|
| training-complete | Emitted when training completes |
| data-cleared | Emitted when data is cleared |
| data-imported | Emitted when data is imported |

---

🎨 Composable API

$3

`typescript
import { usePredictiveInput } from '@aivue/predictive-input';

const {
predictions,
isTraining,
isTrained,
train,
getPredictions,
updatePredictions,
clearData,
exportData,
importData,
getStats
} = usePredictiveInput({
storageKey: 'my_app_predictions',
autoSave: true,
enableOffline: true,
defaultLanguage: 'en'
});
`

---

🔧 Advanced Usage

$3

`typescript
import { usePredictiveInput } from '@aivue/predictive-input';

const { train, isTrained } = usePredictiveInput();

// Train with custom text
const trainingText =
Your writing samples here...
Emails, documents, notes, etc.
;

await train(trainingText);
console.log('Training complete:', isTrained.value);
`

$3

`typescript
const { getPredictions } = usePredictiveInput();

const context = {
previousText: 'Hello, how are',
currentWord: 'you',
cursorPosition: 15,
timestamp: Date.now()
};

const predictions = getPredictions(context);
predictions.forEach(pred => {
console.log(pred.text, pred.confidence);
});
`

$3

`typescript
const { exportData, importData, clearData } = usePredictiveInput();

// Export training data
await exportData('my-predictions.json');

// Import from file
const file = event.target.files[0];
await importData(file);

// Clear all data
await clearData();
``

---

🎯 Use Cases

$3

- Learn from past emails
- Suggest common phrases
- Speed up writing

$3

- Personal writing style
- Context-aware suggestions
- Faster documentation

$3

- Quick responses
- Consistent tone
- Reduced typing

$3

- Common responses
- Address completion
- Repeated information

---

🌟 Why Choose This Package?

| Feature | @aivue/predictive-input | Traditional Autocomplete |
|---------|------------------------|-------------------------|
| Learning | ✅ Learns your style | ❌ Static dictionary |
| Context | ✅ Context-aware | ❌ Word-based only |
| Sentences | ✅ Full sentences | ❌ Single words |
| Privacy | ✅ 100% local | ⚠️ Often server-based |
| Offline | ✅ Works offline | ❌ Needs connection |
| Languages | ✅ 6 languages | ⚠️ Limited |

---

📊 Technical Details

$3

- Unigrams, bigrams, and trigrams
- Probability-based predictions
- Efficient pattern matching

$3

- Phrase extraction (2-5 words)
- Frequency tracking
- Context association
- Recency weighting

$3

- LocalStorage-based
- Automatic compression
- Export/import support
- Privacy-focused

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

---

📦 Related Packages

Explore the complete @aivue ecosystem:

$3

Core AI functionality for Vue.js components

$3

AI-powered chat components for Vue.js

$3

AI-powered suggestion components for Vue.js

$3

AI-powered form validation for Vue.js

$3

Emotion-aware UI components with sentiment analysis

$3

Document processing and OCR with AI

$3

Intelligent notification system

$3

Voice command integration

$3

Advanced data table components

$3

AI-powered image captioning with OpenAI Vision models

$3

AI-powered analytics and insights

---

📄 License

MIT © reachbrt

---

🔗 Links

- GitHub Repository
- npm Package
- Demo
- Report Issues

---

🙏 Acknowledgments

Built with ❤️ using:
- Vue 3
- TypeScript
- Natural (NLP library)
- Compromise (NLP library)

---

Made with 🧠 by the @aivue team