Form Adapters

Adapters connect IntentForm’s engine to an underlying form library. The engine handles intent parsing and value pre-fill; the adapter handles form state, validation, and submission.

TanStack Form

pnpm add @intentform/adapter-tanstack-form @tanstack/react-form

import { createIntentForm } from '@intentform/core'
import { IntentForm } from '@intentform/react'
import { tanstackAdapter } from '@intentform/adapter-tanstack-form'
import { openaiProvider } from '@intentform/provider-openai'

const engine = createIntentForm({
  adapter: tanstackAdapter(),
  provider: openaiProvider({ apiKey: process.env.OPENAI_API_KEY! }),
  models: [myModel],
})

export default function App() {
  return (
    <IntentForm
      engine={engine}
      onSubmit={(values) => console.log(values)}
    />
  )
}

React Hook Form

pnpm add @intentform/adapter-react-hook-form react-hook-form

import { createIntentForm } from '@intentform/core'
import { IntentForm } from '@intentform/react'
import { rhfAdapter } from '@intentform/adapter-react-hook-form'
import { openaiProvider } from '@intentform/provider-openai'

const engine = createIntentForm({
  adapter: rhfAdapter(),
  provider: openaiProvider({ apiKey: process.env.OPENAI_API_KEY! }),
  models: [myModel],
})

export default function App() {
  return (
    <IntentForm
      engine={engine}
      onSubmit={(values) => console.log(values)}
    />
  )
}

When to use which

	TanStack Form	React Hook Form
Bundle size	Larger	Smaller
Type safety	Full (schema-inferred)	Good
Async validation	Built-in	Manual
Existing codebase	Use if you already have it	Use if you already have it
No preference	Recommended	Works well too

Custom field rendering

Both adapters accept a fieldComponents prop to override how specific field types are rendered:

import type { FieldComponents } from '@intentform/react'

const fieldComponents: FieldComponents = {
  select: ({ field, options }) => (
    <MyCustomSelect field={field} options={options} />
  ),
  text: ({ field }) => <MyInput field={field} />,
}

<IntentForm engine={engine} fieldComponents={fieldComponents} />

Choosing an adapter

No adapter — the default. IntentForm renders an uncontrolled form using its built-in field components. Good for prototyping and simple use cases. No extra dependency.

TanStack Form — recommended for new projects. Fully type-safe, schema-inferred field types, built-in async validation, small and framework-agnostic. Use if you are starting a project and have no prior form library investment.

React Hook Form — recommended when migrating an existing codebase. The most widely used React form library. If your team already knows RHF or you have existing RHF forms to integrate with, this is the lower-friction choice.