AI predictive text completion for React
npm install @aireact/predictive-inputš AI-Powered Predictive Text Input for React
Intelligent text prediction and completion powered by AI for enhanced typing experiences.
- š§ AI Predictions: Smart text completion using AI
- ā” Inline Suggestions: Ghost text predictions as you type
- šÆ Context-Aware: Understands context for better predictions
- āØļø Tab to Accept: Easy keyboard navigation
- šØ Customizable: Fully stylable components
- š§ TypeScript: Full TypeScript support
``bash`
npm install @aireact/predictive-input @aireact/core
`tsx
import { PredictiveInput, usePredictiveText } from '@aireact/predictive-input';
import '@aireact/predictive-input/style.css';
function App() {
return (
apiKey={process.env.REACT_APP_OPENAI_API_KEY}
placeholder="Start typing..."
context="email composition"
onAccept={(text) => console.log('Accepted:', text)}
/>
);
}
`
`tsx
import { usePredictiveText } from '@aireact/predictive-input';
function CustomPredictive() {
const {
prediction,
isLoading,
getPrediction,
acceptPrediction,
clearPrediction
} = usePredictiveText({
provider: 'openai',
apiKey: process.env.REACT_APP_OPENAI_API_KEY,
context: 'professional email'
});
const [value, setValue] = useState('');
const handleChange = (e) => {
setValue(e.target.value);
getPrediction(e.target.value);
};
const handleKeyDown = (e) => {
if (e.key === 'Tab' && prediction) {
e.preventDefault();
setValue(value + prediction);
acceptPrediction();
}
};
return (
š Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
provider | string | - | AI provider |
| apiKey | string | - | API key |
| context | string | - | Context for predictions |
| placeholder | string | 'Type...' | Input placeholder |
| debounceMs | number | 200 | Debounce delay |
| onAccept | function | - | Accept callback |
| acceptKey | string | 'Tab' | Key to accept |šØ Customization
`css
:root {
--aireact-predict-ghost: #9e9e9e;
--aireact-predict-text: #333333;
--aireact-predict-bg: #ffffff;
}
``- GitHub Repository
- Full Documentation
- Report Issues
MIT Ā© Bharatkumar Subramanian