added a simple mcp ui in tests

app/src/ui/components/form/json-schema-form/AnyOfField.tsx

@@ -5,8 +5,15 @@ import { twMerge } from "tailwind-merge";
 import * as Formy from "ui/components/form/Formy";
 import { useEvent } from "ui/hooks/use-event";
 import { FieldComponent, Field as FormField, type FieldProps as FormFieldProps } from "./Field";
-import { FormContextOverride, useDerivedFieldContext, useFormError } from "./Form";
+import {
+   FormContextOverride,
+   useDerivedFieldContext,
+   useFormContext,
+   useFormError,
+   useFormValue,
+} from "./Form";
 import { getLabel, getMultiSchemaMatched } from "./utils";
+import { FieldWrapper } from "ui/components/form/json-schema-form/FieldWrapper";
 
 export type AnyOfFieldRootProps = {
    path?: string;
@@ -47,7 +54,17 @@ const Root = ({ path = "", children }: AnyOfFieldRootProps) => {
    const errors = useFormError(path, { strict: true });
    if (!schema) return `AnyOfField(${path}): no schema ${pointer}`;
    const [_selected, setSelected] = useAtom(selectedAtom);
-   const selected = _selected !== null ? _selected : matchedIndex > -1 ? matchedIndex : null;
+   const {
+      options: { anyOfNoneSelectedMode },
+   } = useFormContext();
+   const selected =
+      _selected !== null
+         ? _selected
+         : matchedIndex > -1
+           ? matchedIndex
+           : anyOfNoneSelectedMode === "first"
+             ? 0
+             : null;
 
    const select = useEvent((index: number | null) => {
       setValue(path, index !== null ? lib.getTemplate(undefined, schemas[index]) : undefined);
@@ -117,15 +134,27 @@ const Select = () => {
 const Field = ({ name, label, ...props }: Partial<FormFieldProps>) => {
    const { selected, selectedSchema, path, errors } = useAnyOfContext();
    if (selected === null) return null;
+
    return (
       <FormContextOverride prefix={path} schema={selectedSchema}>
          <div className={twMerge(errors.length > 0 && "bg-red-500/10")}>
-            <FormField key={`${path}_${selected}`} name={""} label={false} {...props} />
+            {/* another wrap is required for primitive schemas */}
+            <AnotherField key={`${path}_${selected}`} label={false} {...props} />
          </div>
       </FormContextOverride>
    );
 };
 
+const AnotherField = (props: Partial<FormFieldProps>) => {
+   const { value } = useFormValue("");
+
+   const inputProps = {
+      // @todo: check, potentially just provide value
+      value: ["string", "number", "boolean"].includes(typeof value) ? value : undefined,
+   };
+   return <FormField name={""} label={false} {...props} inputProps={inputProps} />;
+};
+
 export const AnyOf = {
    Root,
    Select,

app/src/ui/components/form/json-schema-form/Form.tsx

@@ -46,6 +46,7 @@ type FormState<Data = any> = {
 type FormOptions = {
    debug?: boolean;
    keepEmpty?: boolean;
+   anyOfNoneSelectedMode?: "none" | "first";
 };
 
 export type FormContext<Data> = {
@@ -190,7 +191,7 @@ export function Form<
          root: "",
          path: "",
       }),
-      [schema, initialValues],
+      [schema, initialValues, options],
    ) as any;
 
    return (

app/src/ui/components/form/json-schema-form/utils.ts

@@ -62,20 +62,26 @@ export function getParentPointer(pointer: string) {
 }
 
 export function isRequired(lib: Draft, pointer: string, schema: JsonSchema, data?: any) {
-   if (pointer === "#/" || !schema) {
+   try {
+      if (pointer === "#/" || !schema) {
+         return false;
+      }
+
+      const childSchema = lib.getSchema({ pointer, data, schema });
+      if (typeof childSchema === "object" && "const" in childSchema) {
+         return true;
+      }
+
+      const parentPointer = getParentPointer(pointer);
+      if (parentPointer === "" || parentPointer === "#") return false;
+      const parentSchema = lib.getSchema({ pointer: parentPointer, data });
+      const required = parentSchema?.required?.includes(pointer.split("/").pop()!);
+
+      return !!required;
+   } catch (e) {
+      console.error("isRequired", { pointer, schema, data, e });
       return false;
    }
-
-   const childSchema = lib.getSchema({ pointer, data, schema });
-   if (typeof childSchema === "object" && "const" in childSchema) {
-      return true;
-   }
-
-   const parentPointer = getParentPointer(pointer);
-   const parentSchema = lib.getSchema({ pointer: parentPointer, data });
-   const required = parentSchema?.required?.includes(pointer.split("/").pop()!);
-
-   return !!required;
 }
 
 export type IsTypeType =