https://github.com/grayhatdevelopers/react-hook-form-ai
React Hook Form, but with AI
https://github.com/grayhatdevelopers/react-hook-form-ai
ai chrome chrome-ai chrome-ai-challenge hooks react react-hook-form
Last synced: 2 months ago
JSON representation
React Hook Form, but with AI
- Host: GitHub
- URL: https://github.com/grayhatdevelopers/react-hook-form-ai
- Owner: grayhatdevelopers
- License: mit
- Created: 2025-08-09T11:43:17.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-12-12T18:26:34.000Z (3 months ago)
- Last Synced: 2025-12-13T13:35:57.285Z (3 months ago)
- Topics: ai, chrome, chrome-ai, chrome-ai-challenge, hooks, react, react-hook-form
- Language: TypeScript
- Homepage: https://grayhatdevelopers.github.io/react-hook-form-ai/
- Size: 2.4 MB
- Stars: 8
- Watchers: 0
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/react-hook-form-ai)
[](https://www.npmjs.com/package/react-hook-form-ai)
[](https://github.com/grayhatdevelopers/react-hook-form-ai/blob/master/LICENSE)
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
```bash
npm install react-hook-form-ai
# or
pnpm add react-hook-form-ai
# or
yarn add react-hook-form-ai
```
## Quick Start
```tsx
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();
return (
console.log(data))}>
{errors.lastName &&
Last name is required.
}
aiAutofill()}
disabled={aiLoading}
>
{aiLoading ? 'Filling...' : 'AI Autofill'}
);
}
```
## Global Configuration
Configure AI providers globally for your entire application:
```tsx
import { AIFormProvider } from 'react-hook-form-ai';
function Root() {
return (
);
}
```
## Documentation
### API & Examples
- 📚 [API Reference](./docs/API_REFERENCE.md) - Complete API documentation
- 💻 [Examples](./docs/EXAMPLES.md) - Practical usage examples
### Resources
- 🔗 [React Hook Form Documentation](https://react-hook-form.com/get-started) - Learn about the underlying form library
- 🤖 [Chrome Built-in AI Documentation](https://developer.chrome.com/docs/ai/built-in) - 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.
```tsx
// 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:
```tsx
const form = useForm({
ai: {
excludeFields: ['password', 'ssn', 'creditCard']
}
});
```
## Common Use Cases
### Multi-Provider Setup
```tsx
```
### Field-Level Suggestions
```tsx
const { aiSuggest, setValue } = useForm();
const suggestion = await aiSuggest('email');
if (suggestion) {
setValue('email', suggestion);
}
```
### Chrome AI Download Handling
```tsx
const { aiAvailability, aiDownloadProgress } = useForm();
if (aiAvailability?.needsDownload) {
return aiAutofill()}>Download AI Model;
}
if (aiAvailability?.status === 'downloading') {
return ;
}
```
See [Examples](./docs/EXAMPLES.md) for more use cases.
## API Overview
### useForm Hook
```typescript
const {
// Standard React Hook Form properties
register,
handleSubmit,
formState,
// ... all other RHF properties
// AI-specific properties
aiEnabled,
aiAutofill,
aiSuggest,
aiLoading,
aiAvailability,
refreshAvailability,
aiDownloadProgress
} = useForm({
ai: {
enabled: true,
providers: [...],
excludeFields: ['password']
}
});
```
See [API Reference](./docs/API_REFERENCE.md) 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](CONTRIBUTING.md) for details.
## Credits
This library is built on top of [React Hook Form](https://react-hook-form.com/). All credit for the core form management functionality goes to the React Hook Form team.
## License
MIT © [Saad Bazaz](https://github.com/SaadBazaz)
---