@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 /> },
        submit_form: { render: () => <FormSubmitted /> },
      },
    },
  });

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

The assistant gets two built-in tools: set_form_field to write values into fields and submit_form to call your submit handler.

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.