@aireact/autosuggest

🚀 AI-Powered Suggestion Components for React

Intelligent autocomplete and suggestion system powered by AI for enhanced user input experiences.

✨ Features

• 🧠 AI-Powered: Intelligent suggestions using AI models
• ⚡ Real-time: Instant suggestions as you type
• 🎯 Context-Aware: Understands context for better suggestions
• 🎨 Customizable: Fully stylable components
• 📱 Responsive: Works on all devices
• 🔧 TypeScript: Full TypeScript support

📦 Installation

npm install @aireact/autosuggest @aireact/core

🚀 Quick Start

import { Autosuggest, useAutosuggest } from '@aireact/autosuggest';
import '@aireact/autosuggest/style.css';

function App() {
  return (
    <Autosuggest
      provider="openai"
      apiKey={process.env.REACT_APP_OPENAI_API_KEY}
      placeholder="Start typing..."
      context="e-commerce product search"
      onSelect={(suggestion) => console.log('Selected:', suggestion)}
    />
  );
}

Using the Hook

import { useAutosuggest } from '@aireact/autosuggest';

function CustomAutosuggest() {
  const {
    suggestions,
    isLoading,
    getSuggestions,
    clearSuggestions
  } = useAutosuggest({
    provider: 'openai',
    apiKey: process.env.REACT_APP_OPENAI_API_KEY,
    context: 'product search',
    maxSuggestions: 5
  });

  return (
    <div>
      <input
        onChange={(e) => getSuggestions(e.target.value)}
        placeholder="Search..."
      />
      {isLoading && <span>Loading...</span>}
      <ul>
        {suggestions.map((s, i) => (
          <li key={i}>{s}</li>
        ))}
      </ul>
    </div>
  );
}

📖 Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | provider | string | - | AI provider | | apiKey | string | - | API key | | context | string | - | Context for suggestions | | placeholder | string | 'Type...' | Input placeholder | | maxSuggestions | number | 5 | Max suggestions | | debounceMs | number | 300 | Debounce delay | | onSelect | function | - | Selection callback |

🎨 Customization

:root {
  --aireact-suggest-bg: #ffffff;
  --aireact-suggest-border: #e0e0e0;
  --aireact-suggest-hover: #f5f5f5;
  --aireact-suggest-highlight: #2196f3;
}

📦 Related Packages

React (@aireact)

• @aireact/core - Core AI Client
• @aireact/chatbot - AI Chat
• @aireact/predictive-input - Predictive Text
• @aireact/smartform - AI Form Validation

Vue.js (@aivue)

• @aivue/autosuggest - Vue Autosuggest
• @aivue/core - Vue Core AI Client

Angular (@aiangular) - Coming Soon

• @aiangular/autosuggest - Angular Autosuggest

🔗 More Information

• GitHub Repository
• Full Documentation
• Report Issues

📄 License

MIT © Bharatkumar Subramanian