{"id":39337084,"url":"https://github.com/grayhatdevelopers/react-hook-form-ai","last_synced_at":"2026-01-18T02:13:21.806Z","repository":{"id":309067373,"uuid":"1034976106","full_name":"grayhatdevelopers/react-hook-form-ai","owner":"grayhatdevelopers","description":"React Hook Form, but with AI","archived":false,"fork":false,"pushed_at":"2025-12-12T18:26:34.000Z","size":2512,"stargazers_count":8,"open_issues_count":4,"forks_count":3,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-13T13:35:57.285Z","etag":null,"topics":["ai","chrome","chrome-ai","chrome-ai-challenge","hooks","react","react-hook-form"],"latest_commit_sha":null,"homepage":"https://grayhatdevelopers.github.io/react-hook-form-ai/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/grayhatdevelopers.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-09T11:43:17.000Z","updated_at":"2025-12-12T18:26:16.000Z","dependencies_parsed_at":"2025-08-09T17:36:12.094Z","dependency_job_id":"41a4806f-632c-423a-ba9b-38cdbfc88965","html_url":"https://github.com/grayhatdevelopers/react-hook-form-ai","commit_stats":null,"previous_names":["saadbazaz/react-hook-form-ai","grayhatdevelopers/react-hook-form-ai"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/grayhatdevelopers/react-hook-form-ai","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grayhatdevelopers%2Freact-hook-form-ai","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grayhatdevelopers%2Freact-hook-form-ai/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grayhatdevelopers%2Freact-hook-form-ai/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grayhatdevelopers%2Freact-hook-form-ai/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/grayhatdevelopers","download_url":"https://codeload.github.com/grayhatdevelopers/react-hook-form-ai/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grayhatdevelopers%2Freact-hook-form-ai/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28526569,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","chrome","chrome-ai","chrome-ai-challenge","hooks","react","react-hook-form"],"created_at":"2026-01-18T02:13:21.133Z","updated_at":"2026-01-18T02:13:21.795Z","avatar_url":"https://github.com/grayhatdevelopers.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://github.com/grayhatdevelopers/react-hook-form-ai\" title=\"React Hook Form AI - Simple React forms validation, combined with the power of AI\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/grayhatdevelopers/react-hook-form-ai/master/docs/logo.png\" alt=\"React Hook AI Form Logo - React hook custom hook for form validation, with AI\" /\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![npm downloads](https://img.shields.io/npm/dm/react-hook-form-ai.svg?style=for-the-badge)](https://www.npmjs.com/package/react-hook-form-ai)\n[![npm](https://img.shields.io/npm/dt/react-hook-form-ai.svg?style=for-the-badge)](https://www.npmjs.com/package/react-hook-form-ai)\n[![npm](https://img.shields.io/npm/l/react-hook-form-ai?style=for-the-badge)](https://github.com/grayhatdevelopers/react-hook-form-ai/blob/master/LICENSE)\n\n\u003c/div\u003e\n\nA 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.\n\n## Features\n\n- 🤖 **AI-Powered Autofill** - Generate realistic form data using AI\n- 💡 **Smart Field Suggestions** - Get AI suggestions for individual fields\n- 🔄 **Multiple Provider Support** - Chrome Built-in AI, OpenAI, Custom Server, or Browser AI\n- 🛡️ **Provider Fallback** - Automatic fallback to next provider on failure\n- 📊 **Download Progress** - Monitor Chrome AI model download progress\n- ✅ **Availability Checking** - Check AI availability before use\n- 🌐 **Global Configuration** - Configure providers once with AIFormProvider\n- 📘 **Full TypeScript Support** - Complete type definitions included\n- 🔌 **Drop-in Replacement** - 100% compatible with React Hook Form API\n\n## Installation\n\n```bash\nnpm install react-hook-form-ai\n# or\npnpm add react-hook-form-ai\n# or\nyarn add react-hook-form-ai\n```\n\n## Quick Start\n\n```tsx\nimport { useForm } from 'react-hook-form-ai';\n\ninterface FormData {\n  firstName: string;\n  lastName: string;\n  email: string;\n}\n\nfunction App() {\n  const {\n    register,\n    handleSubmit,\n    aiAutofill,\n    aiLoading,\n    formState: { errors },\n  } = useForm\u003cFormData\u003e();\n\n  return (\n    \u003cform onSubmit={handleSubmit((data) =\u003e console.log(data))}\u003e\n      \u003cinput {...register('firstName')} placeholder=\"First Name\" /\u003e\n      \u003cinput {...register('lastName', { required: true })} placeholder=\"Last Name\" /\u003e\n      {errors.lastName \u0026\u0026 \u003cp\u003eLast name is required.\u003c/p\u003e}\n      \u003cinput {...register('email')} placeholder=\"Email\" type=\"email\" /\u003e\n      \n      \u003cbutton \n        type=\"button\" \n        onClick={() =\u003e aiAutofill()}\n        disabled={aiLoading}\n      \u003e\n        {aiLoading ? 'Filling...' : 'AI Autofill'}\n      \u003c/button\u003e\n      \n      \u003cinput type=\"submit\" /\u003e\n    \u003c/form\u003e\n  );\n}\n```\n\n## Global Configuration\n\nConfigure AI providers globally for your entire application:\n\n```tsx\nimport { AIFormProvider } from 'react-hook-form-ai';\n\nfunction Root() {\n  return (\n    \u003cAIFormProvider\n      providers={[\n        { type: 'chrome', priority: 10 },\n        { \n          type: 'openai', \n          apiKey: process.env.REACT_APP_OPENAI_KEY || '',\n          model: 'gpt-3.5-turbo',\n          priority: 5 \n        },\n        {\n          type: 'custom',\n          apiUrl: 'https://your-api.com',\n          priority: 1\n        }\n      ]}\n      fallbackOnError={true}\n    \u003e\n      \u003cApp /\u003e\n    \u003c/AIFormProvider\u003e\n  );\n}\n```\n\n## Documentation\n\n### API \u0026 Examples\n- 📚 [API Reference](./docs/API_REFERENCE.md) - Complete API documentation\n- 💻 [Examples](./docs/EXAMPLES.md) - Practical usage examples\n\n### Resources\n- 🔗 [React Hook Form Documentation](https://react-hook-form.com/get-started) - Learn about the underlying form library\n- 🤖 [Chrome Built-in AI Documentation](https://developer.chrome.com/docs/ai/built-in) - Official Chrome AI documentation\n\n## Key Concepts\n\n### AI Providers\n\nReact Hook Form AI supports multiple AI providers:\n\n- **Chrome Built-in AI** - Free, privacy-friendly, on-device AI (requires Chrome 127+)\n- **OpenAI** - Cloud-based AI using GPT models (requires API key)\n- **Custom Server** - Your own AI backend\n- **Browser AI** - Browser-based AI services\n\n### Provider Priority and Fallback\n\nProviders are tried in order based on priority or execution order. When `fallbackOnError` is `true`, the next provider is automatically tried if one fails.\n\n```tsx\n// Chrome AI → OpenAI → Custom Server\nproviders={[\n  { type: 'chrome', priority: 10 },\n  { type: 'openai', apiKey: 'sk-...', priority: 5 },\n  { type: 'custom', apiUrl: 'https://api.example.com', priority: 1 }\n]}\n```\n\n### Security\n\nAlways exclude sensitive fields from AI processing:\n\n```tsx\nconst form = useForm({\n  ai: {\n    excludeFields: ['password', 'ssn', 'creditCard']\n  }\n});\n```\n\n## Common Use Cases\n\n### Multi-Provider Setup\n\n```tsx\n\u003cAIFormProvider\n  providers={[\n    { type: 'chrome', priority: 10 },\n    { type: 'openai', apiKey: 'sk-...', priority: 5 }\n  ]}\n  fallbackOnError={true}\n\u003e\n  \u003cApp /\u003e\n\u003c/AIFormProvider\u003e\n```\n\n### Field-Level Suggestions\n\n```tsx\nconst { aiSuggest, setValue } = useForm\u003cFormData\u003e();\n\nconst suggestion = await aiSuggest('email');\nif (suggestion) {\n  setValue('email', suggestion);\n}\n```\n\n### Chrome AI Download Handling\n\n```tsx\nconst { aiAvailability, aiDownloadProgress } = useForm();\n\nif (aiAvailability?.needsDownload) {\n  return \u003cbutton onClick={() =\u003e aiAutofill()}\u003eDownload AI Model\u003c/button\u003e;\n}\n\nif (aiAvailability?.status === 'downloading') {\n  return \u003cprogress value={aiDownloadProgress || 0} max={100} /\u003e;\n}\n```\n\nSee [Examples](./docs/EXAMPLES.md) for more use cases.\n\n## API Overview\n\n### useForm Hook\n\n```typescript\nconst {\n  // Standard React Hook Form properties\n  register,\n  handleSubmit,\n  formState,\n  // ... all other RHF properties\n  \n  // AI-specific properties\n  aiEnabled,\n  aiAutofill,\n  aiSuggest,\n  aiLoading,\n  aiAvailability,\n  refreshAvailability,\n  aiDownloadProgress\n} = useForm\u003cFormData\u003e({\n  ai: {\n    enabled: true,\n    providers: [...],\n    excludeFields: ['password']\n  }\n});\n```\n\nSee [API Reference](./docs/API_REFERENCE.md) for complete documentation.\n\n## Browser Compatibility\n\n| Browser | Chrome AI | OpenAI | Custom Server |\n|---------|-----------|--------|---------------|\n| Chrome 127+ | ✅ | ✅ | ✅ |\n| Chrome \u003c127 | ❌ | ✅ | ✅ |\n| Firefox | ❌ | ✅ | ✅ |\n| Safari | ❌ | ✅ | ✅ |\n| Edge | ❌ | ✅ | ✅ |\n| Mobile | ❌ | ✅ | ✅ |\n\n## Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.\n\n## Credits\n\nThis 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.\n\n## License\n\nMIT © [Saad Bazaz](https://github.com/SaadBazaz)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003csub\u003eBuilt with ❤️ by \u003ca href=\"https://github.com/SaadBazaz\"\u003eSaad Bazaz\u003c/a\u003e and \u003ca href=\"https://github.com/sameedilyas\"\u003eSameed Ilyas\u003c/a\u003e\u003c/sub\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrayhatdevelopers%2Freact-hook-form-ai","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrayhatdevelopers%2Freact-hook-form-ai","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrayhatdevelopers%2Freact-hook-form-ai/lists"}