form-demo | Dosu

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: Pre-built prompt suggestions for common actions
React Hook Form: Seamless integration via useAssistantForm

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 useAssistantForm from @assistant-ui/react-hook-form to connect the AI with form state. This hook replaces the standard useForm and automatically registers set_form_field and submit_form tools with the assistant.

Runtime Provider#

// app/MyRuntimeProvider.tsx
"use client";

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime } from "@assistant-ui/react-ai-sdk";

export function MyRuntimeProvider({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  const runtime = useChatRuntime();

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {children}
    </AssistantRuntimeProvider>
  );
}

Backend Route#

// app/api/chat/route.ts
import { openai } from "@ai-sdk/openai";
import { frontendTools } from "@assistant-ui/react-ai-sdk";
import { convertToModelMessages, streamText } from "ai";

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages, system, tools } = await req.json();

  const result = streamText({
    model: openai("gpt-4o"),
    messages: await convertToModelMessages(messages),
    system,
    tools: {
      ...frontendTools(tools),
    },
  });

  return result.toUIMessageStreamResponse();
}

Page Component#

// app/page.tsx
"use client";

import { SignupForm } from "@/components/SignupForm";
import { AssistantSidebar } from "@/components/assistant-ui/assistant-sidebar";
import { Form } from "@/components/ui/form";
import { useAssistantForm } from "@assistant-ui/react-hook-form";
import {
  useAssistantInstructions,
  useAui,
  AuiProvider,
  Suggestions,
} from "@assistant-ui/react";

const SetFormFieldTool = () => {
  return (
    <p className="text-center font-bold font-mono text-blue-500 text-sm">
      set_form_field(...)
    </p>
  );
};

const SubmitFormTool = () => {
  return (
    <p className="text-center font-bold font-mono text-blue-500 text-sm">
      submit_form(...)
    </p>
  );
};

export default function Home() {
  useAssistantInstructions("Help users sign up for the hackathon.");

  const form = useAssistantForm({
    defaultValues: {
      firstName: "",
      lastName: "",
      email: "",
      cityAndCountry: "",
      projectIdea: "",
      proficientTechnologies: "",
    },
    assistant: {
      tools: {
        set_form_field: {
          render: SetFormFieldTool,
        },
        submit_form: {
          render: SubmitFormTool,
        },
      },
    },
  });

  const aui = useAui({
    suggestions: Suggestions([
      {
        title: "Fill out the form",
        label: "with sample data",
        prompt: "Please fill out the signup form with sample data for me.",
      },
      {
        title: "Help me register",
        label: "for the hackathon",
        prompt:
          "I'd like to sign up for the hackathon. My name is Jane Doe and my email is jane@example.com.",
      },
    ]),
  });

  return (
    <AuiProvider value={aui}>
      <AssistantSidebar>
        <div className="h-full overflow-y-scroll">
          <main className="container py-8">
            <h1 className="mb-2 font-semibold text-2xl">Hackathon Signup</h1>
            <Form {...form}>
              <SignupForm />
            </Form>
          </main>
        </div>
      </AssistantSidebar>
    </AuiProvider>
  );
}

How It Works#

useAssistantForm wraps React Hook Form's useForm and automatically exposes set_form_field and submit_form as frontend tools
The backend receives these tool definitions via frontendTools() and passes them to the model
When the AI calls set_form_field, the form field is updated directly via React Hook Form
Custom render components display a visual indicator in the chat while the tool executes
useAui with Suggestions adds pre-built prompt suggestions to the assistant UI