A React Hook Form integration for @assistant-ui.

API Reference#

useAssistantForm#

Drop-in replacement hook for useForm that adds support for @assistant-ui/react.

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

- useForm({
+ useAssistantForm({
    ...
  });

Properties#

<ParametersTable
type="UseAssistantFormProps"
parameters={[
{
name: "assistant",
type: "object",
optional: true,
description: "Configuration for useAssistantForm",
children: [
{
parameters: [
{
name: "tools",
type: "object",
description: "Tools configuration for useAssistantForm",
children: [
{
parameters: [
{
name: "set_form_field",
type: "object",
description: "Configuration for the set_form_field tool",
children: [
{
parameters: [
{
name: "render",
type: "ToolCallMessagePartComponent<{ name: string; value: string; }, {}>",
description:
"The component to render when set_form_field is called.",
},
],
},
],
},
{
name: "submit_form",
type: "object",
description: "Configuration for the submit_form tool",
children: [
{
parameters: [
{
name: "render",
type: "ToolCallMessagePartComponent<{}, {}>",
description:
"The component to render when submit_form is called.",
},
],
},
],
},
],
},
],
},
],
},
],
},
]}
/>

formTools#

The set of tools to use with useAssistantForm on the server side. While the AI SDK now supports forwarding frontend tools via frontendTools(), using formTools directly on the server gives you more control over tool execution.

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

const result = streamText({
  ...
  tools: {
    ...formTools,
  }
});