Overview

@angularai/predictive-input provides AI-powered predictive text input components for Angular. Enhance user experience with intelligent text predictions, auto-completion, and smart suggestions.

✨ Features

- 🧠 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

📦 Installation

``bash
npm install @angularai/predictive-input @angularai/core
`

🚀 Quick Start

$3

`typescript
import { Component } from '@angular/core';
import { PredictiveInputComponent } from '@angularai/predictive-input';

@Component({
selector: 'app-editor',
standalone: true,
imports: [PredictiveInputComponent],
template:
[provider]="'openai'"
[apiKey]="apiKey"
placeholder="Start typing..."
(textChanged)="onTextChange($event)"
/>

})
export class EditorComponent {
apiKey = 'your-openai-api-key';

onTextChange(text: string) {
console.log('Current text:', text);
}
}
`

📖 Component API

$3

#### 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 |

🔧 Advanced Usage

$3

`typescript
[provider]="'openai'"
[apiKey]="apiKey"
context="Writing a professional email to a client"
placeholder="Dear..."
/>
`

$3

`typescript
[provider]="'openai'"
[apiKey]="apiKey"
[rows]="5"
placeholder="Write your content..."
/>
``

📦 Related Packages

| Package | Description |
|---------|-------------|
| @angularai/core | Core AI functionality |
| @angularai/autosuggest | AI suggestions |
| @angularai/smartform | AI form validation |

🔗 Related Projects

| Framework | Repository | Status |
|-----------|-----------|--------|
| Vue.js | @aivue | ✅ Available |
| React | @anthropic-ai/react | ✅ Available |
| Angular | @angularai | ✅ Available |
| Svelte | @svelteai | 💡 Planned |

📄 License

MIT © AngularAI