@aireact/smartform

🚀 AI-Powered Form Validation for React

Intelligent form validation and auto-completion powered by AI for smarter user experiences.

✨ Features

• 🧠 AI Validation: Intelligent field validation using AI
• 📝 Auto-Complete: Smart field suggestions and completion
• 🎯 Context-Aware: Understands form context for better validation
• ⚡ Real-time: Instant feedback as users type
• 🎨 Customizable: Fully stylable components
• 🔧 TypeScript: Full TypeScript support

📦 Installation

npm install @aireact/smartform @aireact/core

🚀 Quick Start

import { SmartForm, useSmartValidation } from '@aireact/smartform';
import '@aireact/smartform/style.css';

function App() {
  return (
    <SmartForm
      provider="openai"
      apiKey={process.env.REACT_APP_OPENAI_API_KEY}
      onSubmit={(data) => console.log('Form data:', data)}
    >
      <SmartForm.Field name="email" type="email" label="Email" />
      <SmartForm.Field name="phone" type="tel" label="Phone" />
      <SmartForm.Field name="address" type="text" label="Address" />
      <button type="submit">Submit</button>
    </SmartForm>
  );
}

Using the Hook

import { useSmartValidation } from '@aireact/smartform';

function CustomForm() {
  const {
    validate,
    errors,
    isValidating,
    suggestions
  } = useSmartValidation({
    provider: 'openai',
    apiKey: process.env.REACT_APP_OPENAI_API_KEY,
    context: 'user registration form'
  });

  const handleBlur = async (field, value) => {
    await validate(field, value);
  };

  return (
    <form>
      <input
        name="email"
        onBlur={(e) => handleBlur('email', e.target.value)}
      />
      {errors.email && <span className="error">{errors.email}</span>}
      {suggestions.email && <span className="hint">{suggestions.email}</span>}
    </form>
  );
}

📖 Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | provider | string | - | AI provider | | apiKey | string | - | API key | | context | string | - | Form context | | onSubmit | function | - | Submit handler | | validateOnBlur | boolean | true | Validate on blur | | showSuggestions | boolean | true | Show AI suggestions |

🎨 Customization

:root {
  --aireact-form-error: #f44336;
  --aireact-form-success: #4caf50;
  --aireact-form-hint: #2196f3;
}

📦 Related Packages

React (@aireact)

• @aireact/core - Core AI Client
• @aireact/autosuggest - AI Suggestions
• @aireact/predictive-input - Predictive Text
• @aireact/chatbot - AI Chat Components

Vue.js (@aivue)

• @aivue/smartform - Vue SmartForm
• @aivue/core - Vue Core AI Client

Angular (@aiangular) - Coming Soon

• @aiangular/smartform - Angular SmartForm

🔗 More Information

• GitHub Repository
• Full Documentation
• Report Issues

📄 License

MIT © Bharatkumar Subramanian