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

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

🚀 Quick Start

1. Import the Component

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

@Component({
  selector: 'app-editor',
  standalone: true,
  imports: [PredictiveInputComponent],
  template: `
    <predictive-input
      [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

PredictiveInputComponent

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<string> | Emitted when text changes | | predictionAccepted | EventEmitter<string> | Emitted when prediction is accepted |

🔧 Advanced Usage

With Custom Context

<predictive-input
  [provider]="'openai'"
  [apiKey]="apiKey"
  context="Writing a professional email to a client"
  placeholder="Dear..."
/>

Multi-line Text Area

<predictive-textarea
  [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