feat(forms): Add streaming support for AI form generation (#103)

* feat(forms): add streaming support for AI form generation

- Add @ai-sdk/openai and @ai-sdk/react packages
- Create streaming API route at /api/generate-form
- Update CreateTemplateForm to use useObject hook for progressive updates
- Add streamGenerateForm method to JsonRenderProvider
- Form fields now appear progressively as AI generates them

Part of #51 - AI-powered form builder streaming support

* fix(forms): remove unused import, fix zod error property

* fix(templates): move form.setValue to useEffect (review feedback)

* fix(forms): resolve type error with maxResponses schema

Change z.coerce.number() to z.number() to fix type inference
issue with react-hook-form resolver types.

* chore: retrigger CI

* chore: retrigger CI (flaky e2e)

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: engineering-props-to

.github/MILESTONE_STATUS.md

@@ -0,0 +1,17 @@
+## 2026-02-12 18:18 UTC — Hourly Check
+
+**Milestones:**
+
+- M1: Admin Onboarding — ✅ COMPLETE (4/4 closed)
+- M2: Employee Auto-Join — ✅ COMPLETE (3/3 closed)
+- M3: Managed Templates & Links — 3/4 (1 open: #51 AI form builder)
+- M4: Groups & Hierarchy — ✅ COMPLETE (2/2 closed)
+- M5: Feedback Collection — 3/5 (2 open)
+
+**PRs:**
+
+- #75 (hidden flinks) — MERGED
+- #76 (custom slugs) — MERGED
+- #102 (public group pages) — Approved, CI green, awaiting merge approval
+
+**Next:** PR #102 ready to merge when Leo OKs. Issue #51 (AI form builder) next in queue.

apps/app/package.json

@@ -17,21 +17,24 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@ai-sdk/openai": "^3.0.27",
+    "@ai-sdk/react": "^3.0.84",
     "@hookform/resolvers": "^5.2.2",
     "@propsto/auth": "workspace:*",
     "@propsto/config": "workspace:*",
     "@propsto/constants": "workspace:*",
     "@propsto/data": "workspace:*",
+    "@propsto/email": "workspace:*",
+    "@propsto/forms": "workspace:*",
     "@propsto/logger": "workspace:*",
     "@propsto/ui": "workspace:*",
+    "@upstash/ratelimit": "^2.0.5",
+    "@upstash/redis": "^1.36.2",
+    "ai": "^6.0.82",
     "date-fns": "4.1.0",
     "react-hook-form": "7.60.0",
     "survey-core": "^2.5.6",
-    "survey-react-ui": "^2.5.6",
-    "@propsto/email": "workspace:*",
-    "@propsto/forms": "workspace:*",
-    "@upstash/ratelimit": "^2.0.5",
-    "@upstash/redis": "^1.36.2"
+    "survey-react-ui": "^2.5.6"
   },
   "peerDependencies": {
     "@types/node": "*",

apps/app/src/app/(dashboard)/links/new/create-link-form.tsx

@@ -51,7 +51,7 @@ const formSchema = z.object({
   templateId: z.string().min(1, "Please select a template"),
   feedbackType: z.nativeEnum(FeedbackType),
   visibility: z.nativeEnum(FeedbackVisibility),
-  maxResponses: z.coerce.number().min(0).optional(),
+  maxResponses: z.number().min(0).optional(),
   isHidden: z.boolean(),
   organizationId: z.string().optional(),
 });

apps/app/src/app/(dashboard)/org/[orgSlug]/admin/settings/slug-actions.ts

@@ -33,7 +33,7 @@ export async function checkSlugAvailability(
   try {
     const parsed = slugSchema.safeParse(slug);
     if (!parsed.success) {
-      return { available: false, error: parsed.error.errors[0]?.message };
+      return { available: false, error: parsed.error.issues[0]?.message };
     }
 
     // Check reserved slugs
@@ -83,7 +83,7 @@ export async function updateOrgSlug(
     // Validate new slug
     const parsed = slugSchema.safeParse(newSlug);
     if (!parsed.success) {
-      return { success: false, error: parsed.error.errors[0]?.message };
+      return { success: false, error: parsed.error.issues[0]?.message };
     }
 
     const normalizedSlug = newSlug.toLowerCase();

apps/app/src/app/(dashboard)/templates/new/create-template-form.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { useState, useTransition } from "react";
+import { useState, useTransition, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm, useFieldArray } from "react-hook-form";
 import { z } from "zod";
+import { experimental_useObject as useObject } from "@ai-sdk/react";
 import { Button } from "@propsto/ui/atoms/button";
 import { Input } from "@propsto/ui/atoms/input";
 import { Textarea } from "@propsto/ui/atoms/text-area";
@@ -33,8 +34,9 @@ import {
   SelectValue,
 } from "@propsto/ui/atoms/select";
 import { FeedbackType, FieldType } from "@prisma/client";
-import { Plus, Trash2, Sparkles, GripVertical } from "lucide-react";
-import { generateFormAction, createTemplateAction } from "./actions";
+import { Plus, Trash2, Sparkles, GripVertical, Loader2 } from "lucide-react";
+import { createTemplateAction } from "./actions";
+import { FieldTypeSchema } from "@propsto/forms";
 
 const fieldSchema = z.object({
   label: z.string().min(1, "Label is required"),
@@ -78,12 +80,34 @@ const fieldTypeOptions = [
   { value: "DATE", label: "Date" },
 ];
 
+// Schema for AI object streaming
+const aiFormSchema = z.object({
+  name: z.string().describe("A concise, descriptive name for the form"),
+  description: z
+    .string()
+    .optional()
+    .describe("Brief description of the form's purpose"),
+  fields: z
+    .array(
+      z.object({
+        label: z.string().describe("The question or field label"),
+        type: FieldTypeSchema.describe("The field type"),
+        required: z.boolean().describe("Whether this field is required"),
+        options: z
+          .array(z.string())
+          .optional()
+          .describe("Options for SELECT/RADIO fields"),
+        placeholder: z.string().optional().describe("Placeholder text hint"),
+        helpText: z.string().optional().describe("Help text for the field"),
+      })
+    )
+    .describe("Form fields in order"),
+});
+
 export function CreateTemplateForm(): React.JSX.Element {
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
-  const [isGenerating, setIsGenerating] = useState(false);
   const [aiPrompt, setAiPrompt] = useState("");
-  const [aiError, setAiError] = useState<string | null>(null);
 
   const form = useForm<FormValues>({
     resolver: zodResolver(formSchema),
@@ -101,6 +125,52 @@ export function CreateTemplateForm(): React.JSX.Element {
     name: "fields",
   });
 
+  // Streaming AI form generation
+  const {
+    object: aiForm,
+    submit: submitGeneration,
+    isLoading: isGenerating,
+    error: aiError,
+  } = useObject({
+    api: "/api/generate-form",
+    schema: aiFormSchema,
+    onFinish: ({ object }) => {
+      if (object) {
+        // Apply final form values
+        form.setValue("name", object.name);
+        if (object.description) {
+          form.setValue("description", object.description);
+        }
+        if (object.fields) {
+          replace(
+            object.fields.map((f, i) => ({
+              label: f.label,
+              type: f.type as FieldType,
+              required: f.required,
+              options: f.options,
+              placeholder: f.placeholder,
+              helpText: f.helpText,
+              order: i,
+            }))
+          );
+        }
+        setAiPrompt("");
+      }
+    },
+  });
+
+  // Update form progressively as AI streams
+  useEffect(() => {
+    if (aiForm) {
+      if (aiForm.name) {
+        form.setValue("name", aiForm.name);
+      }
+      if (aiForm.description) {
+        form.setValue("description", aiForm.description);
+      }
+    }
+  }, [aiForm, form]);
+
   function addField(): void {
     append({
       label: "",
@@ -110,36 +180,9 @@ export function CreateTemplateForm(): React.JSX.Element {
     });
   }
 
-  async function handleGenerate(): Promise<void> {
-    if (!aiPrompt.trim()) return;
-
-    setIsGenerating(true);
-    setAiError(null);
-
-    const result = await generateFormAction({ prompt: aiPrompt });
-
-    if (result.success && result.form) {
-      form.setValue("name", result.form.name);
-      if (result.form.description) {
-        form.setValue("description", result.form.description);
-      }
-      replace(
-        result.form.fields.map((f, i) => ({
-          label: f.label,
-          type: f.type as FieldType,
-          required: f.required ?? false,
-          options: f.options,
-          placeholder: f.placeholder,
-          helpText: f.helpText,
-          order: i,
-        })),
-      );
-      setAiPrompt("");
-    } else {
-      setAiError(result.error ?? "Failed to generate form");
-    }
-
-    setIsGenerating(false);
+  function handleGenerate(): void {
+    if (!aiPrompt.trim() || isGenerating) return;
+    submitGeneration({ prompt: aiPrompt });
   }
 
   function onSubmit(values: FormValues): void {
@@ -191,7 +234,10 @@ export function CreateTemplateForm(): React.JSX.Element {
               disabled={isGenerating || !aiPrompt.trim()}
             >
               {isGenerating ? (
-                <>Generating...</>
+                <>
+                  <Loader2 className="mr-2 size-4 animate-spin" />
+                  Generating...
+                </>
               ) : (
                 <>
                   <Sparkles className="mr-2 size-4" />
@@ -200,7 +246,9 @@ export function CreateTemplateForm(): React.JSX.Element {
               )}
             </Button>
             {aiError && (
-              <span className="text-sm text-destructive">{aiError}</span>
+              <span className="text-sm text-destructive">
+                {aiError.message || "Failed to generate form"}
+              </span>
             )}
           </div>
         </CardContent>

apps/app/src/app/api/generate-form/route.ts

@@ -0,0 +1,84 @@
+import { createOpenAI } from "@ai-sdk/openai";
+import { streamObject } from "ai";
+import { z } from "zod";
+import { auth } from "@/server/auth.server";
+import { constServer } from "@propsto/constants/server";
+import { FieldTypeSchema } from "@propsto/forms";
+
+const formSchema = z.object({
+  name: z.string().describe("A concise, descriptive name for the form"),
+  description: z
+    .string()
+    .optional()
+    .describe("Brief description of the form's purpose"),
+  fields: z
+    .array(
+      z.object({
+        label: z.string().describe("The question or field label"),
+        type: FieldTypeSchema.describe("The field type"),
+        required: z.boolean().describe("Whether this field is required"),
+        options: z
+          .array(z.string())
+          .optional()
+          .describe("Options for SELECT/RADIO fields"),
+        placeholder: z.string().optional().describe("Placeholder text hint"),
+        helpText: z.string().optional().describe("Help text for the field"),
+      })
+    )
+    .describe("Form fields in order"),
+});
+
+const systemPrompt = `You are a form builder assistant. Create feedback forms based on user requests.
+
+Generate a form with:
+- A clear, descriptive name
+- Optional description
+- Up to 10 fields
+
+Available field types:
+- TEXT: Single line text
+- TEXTAREA: Multi-line text  
+- NUMBER: Numeric input
+- RATING: 1-5 star rating
+- SCALE: 1-10 scale
+- SELECT: Dropdown (requires options)
+- RADIO: Radio buttons (requires options)
+- CHECKBOX: Single checkbox
+- DATE: Date picker
+
+Guidelines:
+- Use clear, concise labels
+- Only mark truly important fields as required
+- For SELECT/RADIO, provide sensible options
+- Keep forms focused and user-friendly`;
+
+export async function POST(request: Request): Promise<Response> {
+  const session = await auth();
+  if (!session?.user?.id) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+
+  const apiKey = constServer.OPENAI_API_KEY;
+  if (!apiKey) {
+    return new Response(
+      "AI form generation is not configured. Please add an OpenAI API key.",
+      { status: 503 }
+    );
+  }
+
+  const { prompt } = (await request.json()) as { prompt: string };
+  if (!prompt || typeof prompt !== "string") {
+    return new Response("Invalid prompt", { status: 400 });
+  }
+
+  const openai = createOpenAI({ apiKey });
+
+  const result = streamObject({
+    model: openai("gpt-4o-mini"),
+    schema: formSchema,
+    system: systemPrompt,
+    prompt,
+  });
+
+  return result.toTextStreamResponse();
+}

packages/forms/package.json

@@ -14,7 +14,9 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@ai-sdk/openai": "^3.0.27",
     "@json-render/core": "^0.3.0",
+    "ai": "^6.0.82",
     "zod": "4.2.1"
   },
   "devDependencies": {

packages/forms/provider.ts

@@ -1,4 +1,8 @@
-import type { GenerateFormOptions, GenerateFormResult } from "./types";
+import type {
+  GenerateFormOptions,
+  GenerateFormResult,
+  PartialGeneratedForm,
+} from "./types";
 
 /**
  * Abstract interface for form generation providers.
@@ -20,6 +24,14 @@ export interface FormBuilderProvider {
    */
   generateForm(options: GenerateFormOptions): Promise<GenerateFormResult>;
 
+  /**
+   * Stream form generation with progressive updates.
+   * Returns an async generator that yields partial forms.
+   */
+  streamGenerateForm?(
+    options: GenerateFormOptions
+  ): AsyncGenerator<PartialGeneratedForm, GenerateFormResult, unknown>;
+
   /**
    * Check if the provider is properly configured and ready.
    */