@assistant-ui/react-hook-form

React Hook Form integration for @assistant-ui/react. Replace useForm with useAssistantForm to give the assistant the ability to read and fill your form fields through tool calls.

Installation

npm install @assistant-ui/react @assistant-ui/react-hook-form react-hook-form

Usage

"use client";

import { useAssistantForm } from "@assistant-ui/react-hook-form";

export function SignupForm() {
  const form = useAssistantForm({
    defaultValues: { firstName: "", lastName: "", email: "" },
    assistant: {
      tools: {
        set_form_field: { render: () => <FieldUpdated /> },
      },
    },
  });

  return <form onSubmit={form.handleSubmit(onSubmit)}>{/* fields */}</form>;
}

The assistant gets three built-in tools: set_form_field to write values into fields, submit_form to call your submit handler, and reset_form to restore initial values. Submitting and resetting ask the user for approval by default. A custom tool render must handle the pending interrupt and call resume({ approved: true }) or resume({ approved: false }). Set assistant.tools.submit_form.requireApproval or assistant.tools.reset_form.requireApproval to false to run that tool without asking. A runtime without human-in-the-loop support needs requireApproval: false on these tools. The form state shared with the model omits password inputs and fields with current-password, new-password, one-time-code, or cc- autocomplete values. Use assistant.sensitiveFields to exclude fields that DOM detection cannot identify, including fields without a mounted input.

See also

• @assistant-ui/react-lexical if you also want a rich-text composer with @-mention support inside the same chat.

A guided walkthrough lives at assistant-ui.com/examples/form-demo. See examples/with-react-hook-form for a complete app.