Form (schema)

Form artifact generated from a JSON Schema of fields, with validation and submit.

Overview

A form artifact for when the model designs the form on the fly. Emits a JSON schema of fields (text, email, checkbox, etc.); the artifact maps each field to the right rx-forms primitive (Input, Checkbox, Label) and wires submit.

This is the artifact for adaptive intake — onboarding flows, surveys, or any case where the questions depend on what the model just learned about the user.

Preview

Generated form

Built from a 3-field schema returned by the LLM.

Field schema

Company name

Work email

Subscribe to monthly updates

{
  fields: [
    { type: "text", name: "company", label: "Company name", required: true },
    { type: "email", name: "email", label: "Work email", required: true },
    { type: "checkbox", name: "newsletter", label: "Subscribe to monthly updates" },
  ],
}

Schema

The LLM returns structured output matching this shape:

{
  type: "form-schema",
  fields: Array<{
    type: "text" | "email" | "checkbox" | "number";
    name: string;
    label: string;
    required?: boolean;
    placeholder?: string;
  }>,
  submitLabel?: string,
}

Anatomy

Card
├─ CardHeader            CardTitle + Badge
├─ field row             Label + control, rendered per field (Input / Checkbox from `type`)
├─ Button (submit)       full-width, transient confirmation
└─ schema preview        exposes the JSON contract for inspection

Installation

npx gremorie@latest add artifact-form-schema

pnpm dlx gremorie@latest add artifact-form-schema

yarn dlx gremorie@latest add artifact-form-schema

bunx --bun gremorie@latest add artifact-form-schema

Prompt examples

Sample prompts that produce valid output for this artifact:

"Ask the user for their company, work email, and newsletter opt-in."
"Build a 3-question signup form for the beta program."
"Generate a feedback form with rating, comment, and contact opt-in."

Code

'use client';

import { useState } from 'react';
import {
  Badge,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@gremorie/rx-display';
import { Button, Checkbox, Input, Label } from '@gremorie/rx-forms';

export function FormSchema() {
  const [submitted, setSubmitted] = useState(false);
  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between gap-3">
          <div>
            <CardTitle>Generated form</CardTitle>
            <CardDescription>
              Built from a 3-field schema returned by the LLM.
            </CardDescription>
          </div>
          <Badge variant="outline">Field schema</Badge>
        </div>
      </CardHeader>
      <CardContent>
        <form
          className="flex flex-col gap-4"
          onSubmit={(e) => {
            e.preventDefault();
            setSubmitted(true);
            setTimeout(() => setSubmitted(false), 2000);
          }}
        >
          <div className="flex flex-col gap-2">
            <Label htmlFor="fs-company">Company name</Label>
            <Input id="fs-company" required />
          </div>
          <div className="flex flex-col gap-2">
            <Label htmlFor="fs-email">Work email</Label>
            <Input id="fs-email" type="email" required />
          </div>
          <div className="flex items-center gap-2">
            <Checkbox id="fs-newsletter" />
            <Label htmlFor="fs-newsletter" className="text-sm font-normal">
              Subscribe to monthly updates
            </Label>
          </div>
          <Button type="submit" className="w-full">
            {submitted ? 'Sent!' : 'Submit'}
          </Button>
        </form>
      </CardContent>
    </Card>
  );
}

The Angular edition of this component is planned; the React edition is production-ready today.

Streaming behavior

This artifact renders after the field schema parses. Fields appear all at once to preserve form layout; partial parses are buffered.

Form (schema)

On this page