<div align="center"> <h1>@angularai/predictive-input</h1> <p>🧠 AI-powered predictive text input for Angular applications</p>
npm install @angularai/predictive-input🧠 AI-powered predictive text input for Angular applications
@angularai/predictive-input provides AI-powered predictive text input components for Angular. Enhance user experience with intelligent text predictions, auto-completion, and smart suggestions.
- 🧠 AI Predictions: Context-aware text predictions using AI
- ⚡ Real-time: Instant predictions as users type
- ⌨️ Tab to Complete: Accept predictions with Tab key
- 🎯 Smart Context: Learns from input context
- 📱 Mobile-friendly: Touch-optimized interface
- 🔧 Fully Typed: Complete TypeScript support
``bash`
npm install @angularai/predictive-input @angularai/core
`typescript
import { Component } from '@angular/core';
import { PredictiveInputComponent } from '@angularai/predictive-input';
@Component({
selector: 'app-editor',
standalone: true,
imports: [PredictiveInputComponent],
template:
[apiKey]="apiKey"
placeholder="Start typing..."
(textChanged)="onTextChange($event)"
/>
})
export class EditorComponent {
apiKey = 'your-openai-api-key';
onTextChange(text: string) {
console.log('Current text:', text);
}
}
`
#### Inputs
| Input | Type | Default | Description |
|-------|------|---------|-------------|
| provider | string | 'openai' | AI provider |apiKey
| | string | '' | API key |placeholder
| | string | 'Type here...' | Input placeholder |context
| | string | '' | Context for predictions |debounceTime
| | number | 300 | Debounce time in ms |maxPredictionLength
| | number | 50 | Max prediction length |showGhostText
| | boolean | true | Show ghost text preview |
#### Outputs
| Output | Type | Description |
|--------|------|-------------|
| textChanged | EventEmitter | Emitted when text changes |predictionAccepted
| | EventEmitter | Emitted when prediction is accepted |
`typescript`
[apiKey]="apiKey"
context="Writing a professional email to a client"
placeholder="Dear..."
/>
`typescript``
[apiKey]="apiKey"
[rows]="5"
placeholder="Write your content..."
/>
| Package | Description |
|---------|-------------|
| @angularai/core | Core AI functionality |
| @angularai/autosuggest | AI suggestions |
| @angularai/smartform | AI form validation |
| Framework | Repository | Status |
|-----------|-----------|--------|
| Vue.js | @aivue | ✅ Available |
| React | @anthropic-ai/react | ✅ Available |
| Angular | @angularai | ✅ Available |
| Svelte | @svelteai | 💡 Planned |
MIT © AngularAI