Form Filling Co-Pilot

AssistantSidebar copilot which fills forms for the user

Overview

This example demonstrates how to create an AI assistant sidebar that helps users fill out forms automatically. The assistant understands form structure and can populate fields based on natural language instructions, making complex forms easier to complete.

Features

Sidebar Integration: AI assistant lives alongside your form
Field Mapping: Assistant directly modifies form field values
Smart Suggestions: AI understands context and suggests appropriate values
Validation Awareness: Respects form validation rules
Undo Support: Users can review and revert AI changes
React Hook Form: Seamless integration with popular form library

Use Cases

Complex Applications: Multi-step forms with many fields
Data Entry: Bulk data input from natural language
Accessibility: Voice-driven form completion
Onboarding: Guide users through registration flows

Integration

The example uses @assistant-ui/react-hook-form to connect the AI with form state:

import { useFormContext } from "react-hook-form";
import { makeAssistantToolUI } from "@assistant-ui/react";
import { AssistantSidebar } from "@assistant-ui/react";

// Define a tool that sets form field values
const SetFieldTool = makeAssistantToolUI({
  toolName: "set_field",
  render: ({ args, status }) => {
    const { setValue, getValues } = useFormContext();

    useEffect(() => {
      if (status === "complete") {
        setValue(args.field, args.value, { shouldValidate: true });
      }
    }, [args.field, args.value, status, setValue]);

    return (
      <div className="text-sm text-muted-foreground">
        Setting {args.field} to "{args.value}"...
      </div>
    );
  },
});

// Backend tool definition
const tools = {
  set_field: {
    description: "Set a form field to a specific value",
    parameters: z.object({
      field: z.string().describe("The name of the form field"),
      value: z.string().describe("The value to set"),
    }),
  },
};

Form Integration Pattern

export default function FormPage() {
  const form = useForm({
    defaultValues: { name: "", email: "", company: "" },
  });

  return (
    <FormProvider {...form}>
      <div className="flex">
        <form className="flex-1">
          {/* Your form fields */}
        </form>
        <AssistantSidebar tools={[SetFieldTool]} />
      </div>
    </FormProvider>
  );
}

How It Works

User opens the assistant sidebar
User describes what they want to fill (e.g., "Fill in my contact info: John Doe, [email protected]")
AI parses the request and calls set_field tool for each field
React Hook Form receives the values and updates the UI
User can review and submit the form

Source

View full source on GitHub