A drop-in replacement for React Hook Form with AI-powered autofill and field suggestions. Supports Chrome Built-in AI, OpenAI, and custom AI providers with automatic fallback.

Features

• 🤖 AI-Powered Autofill - Generate realistic form data using AI
• 💡 Smart Field Suggestions - Get AI suggestions for individual fields
• 🔄 Multiple Provider Support - Chrome Built-in AI, OpenAI, Custom Server, or Browser AI
• 🛡️ Provider Fallback - Automatic fallback to next provider on failure
• 📊 Download Progress - Monitor Chrome AI model download progress
• ✅ Availability Checking - Check AI availability before use
• 🌐 Global Configuration - Configure providers once with AIFormProvider
• 📘 Full TypeScript Support - Complete type definitions included
• 🔌 Drop-in Replacement - 100% compatible with React Hook Form API

Installation

npm install react-hook-form-ai
# or
pnpm add react-hook-form-ai
# or
yarn add react-hook-form-ai

Quick Start

import { useForm } from 'react-hook-form-ai';

interface FormData {
  firstName: string;
  lastName: string;
  email: string;
}

function App() {
  const {
    register,
    handleSubmit,
    aiAutofill,
    aiLoading,
    formState: { errors },
  } = useForm<FormData>();

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register('firstName')} placeholder="First Name" />
      <input {...register('lastName', { required: true })} placeholder="Last Name" />
      {errors.lastName && <p>Last name is required.</p>}
      <input {...register('email')} placeholder="Email" type="email" />
      
      <button 
        type="button" 
        onClick={() => aiAutofill()}
        disabled={aiLoading}
      >
        {aiLoading ? 'Filling...' : 'AI Autofill'}
      </button>
      
      <input type="submit" />
    </form>
  );
}

Global Configuration

Configure AI providers globally for your entire application:

import { AIFormProvider } from 'react-hook-form-ai';

function Root() {
  return (
    <AIFormProvider
      providers={[
        { type: 'chrome', priority: 10 },
        { 
          type: 'openai', 
          apiKey: process.env.REACT_APP_OPENAI_KEY || '',
          model: 'gpt-3.5-turbo',
          priority: 5 
        },
        {
          type: 'custom',
          apiUrl: 'https://your-api.com',
          priority: 1
        }
      ]}
      fallbackOnError={true}
    >
      <App />
    </AIFormProvider>
  );
}

Documentation

API & Examples

• 📚 API Reference - Complete API documentation
• 💻 Examples - Practical usage examples

Resources

• 🔗 React Hook Form Documentation - Learn about the underlying form library
• 🤖 Chrome Built-in AI Documentation - Official Chrome AI documentation

Key Concepts

AI Providers

React Hook Form AI supports multiple AI providers:

• Chrome Built-in AI - Free, privacy-friendly, on-device AI (requires Chrome 127+)
• OpenAI - Cloud-based AI using GPT models (requires API key)
• Custom Server - Your own AI backend
• Browser AI - Browser-based AI services

Provider Priority and Fallback

Providers are tried in order based on priority or execution order. When fallbackOnError is true, the next provider is automatically tried if one fails.

// Chrome AI → OpenAI → Custom Server
providers={[
  { type: 'chrome', priority: 10 },
  { type: 'openai', apiKey: 'sk-...', priority: 5 },
  { type: 'custom', apiUrl: 'https://api.example.com', priority: 1 }
]}

Security

Always exclude sensitive fields from AI processing:

const form = useForm({
  ai: {
    excludeFields: ['password', 'ssn', 'creditCard']
  }
});

Common Use Cases

Multi-Provider Setup

<AIFormProvider
  providers={[
    { type: 'chrome', priority: 10 },
    { type: 'openai', apiKey: 'sk-...', priority: 5 }
  ]}
  fallbackOnError={true}
>
  <App />
</AIFormProvider>

Field-Level Suggestions

const { aiSuggest, setValue } = useForm<FormData>();

const suggestion = await aiSuggest('email');
if (suggestion) {
  setValue('email', suggestion);
}

Chrome AI Download Handling

const { aiAvailability, aiDownloadProgress } = useForm();

if (aiAvailability?.needsDownload) {
  return <button onClick={() => aiAutofill()}>Download AI Model</button>;
}

if (aiAvailability?.status === 'downloading') {
  return <progress value={aiDownloadProgress || 0} max={100} />;
}

See Examples for more use cases.

API Overview

useForm Hook

const {
  // Standard React Hook Form properties
  register,
  handleSubmit,
  formState,
  // ... all other RHF properties
  
  // AI-specific properties
  aiEnabled,
  aiAutofill,
  aiSuggest,
  aiLoading,
  aiAvailability,
  refreshAvailability,
  aiDownloadProgress
} = useForm<FormData>({
  ai: {
    enabled: true,
    providers: [...],
    excludeFields: ['password']
  }
});

See API Reference for complete documentation.

Browser Compatibility

| Browser | Chrome AI | OpenAI | Custom Server | |---------|-----------|--------|---------------| | Chrome 127+ | ✅ | ✅ | ✅ | | Chrome <127 | ❌ | ✅ | ✅ | | Firefox | ❌ | ✅ | ✅ | | Safari | ❌ | ✅ | ✅ | | Edge | ❌ | ✅ | ✅ | | Mobile | ❌ | ✅ | ✅ |

Contributing

We welcome contributions! Please see our Contributing Guide for details.

Credits

This library is built on top of React Hook Form. All credit for the core form management functionality goes to the React Hook Form team.

License

MIT © Saad Bazaz