React Hook Form AI

React Hook Form AI logo

Inspiration

React Hook Form is a popular library with around 13 million weekly downloads. Since a lot of web interaction happens through forms, we wanted to see what would happen if we added some AI features to that experience. The goal was to make existing forms smarter without changing how developers already use them.

What it does

It’s an NPM package that works as a drop-in replacement for React Hook Form. You only need about 4–5 extra lines of code to enable AI in an existing project.

Here’s a regular form using react-hook-form:

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

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register('firstName')} />
      <input {...register('lastName', { required: true })} />
      {errors.lastName && <p>Last name is required.</p>}
      <input {...register('age', { pattern: /\d+/ })} />
      {errors.age && <p>Please enter a number for age.</p>}
      <input type="submit" />
    </form>
  );
}

With our version, the same form can include AI features like input suggestions, adaptive validation, and contextual hints without changing the core logic:

- import { useForm } from 'react-hook-form';
+ import { useForm } from 'react-hook-form-ai'; // ✅ Drop-in replacement

function App() {
  const {
    register,
    handleSubmit,
+   useAI = true, // ✅ Enable AI (on by default)
    formState: { errors },
  } = useForm();

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register('firstName')} />
      <input {...register('lastName', { required: true })} />
      {errors.lastName && <p>Last name is required.</p>}
      <input {...register('age', { pattern: /\d+/ })} />
      {errors.age && <p>Please enter a number for age.</p>}
      <input type="submit" />
    </form>
  );
}

How we built it

We imported React Hook Form directly, wrapped its useForm function to add AI configuration and helpers, and exported it again. This makes it fully compatible with existing React Hook Form projects.