Fix fundamental schema issue with required fields defined incorrectly on JsonSchemaType

client/src/components/DynamicJsonForm.tsx

@@ -16,10 +16,39 @@ interface DynamicJsonFormProps {
 const isSimpleObject = (schema: JsonSchemaType): boolean => {
   const supportedTypes = ["string", "number", "integer", "boolean", "null"];
   if (supportedTypes.includes(schema.type)) return true;
-  if (schema.type !== "object") return false;
-  return Object.values(schema.properties ?? {}).every((prop) =>
-    supportedTypes.includes(prop.type),
-  );
+  if (schema.type === "object") {
+    return Object.values(schema.properties ?? {}).every((prop) =>
+      supportedTypes.includes(prop.type),
+    );
+  }
+  if (schema.type === "array") {
+    return !!schema.items && isSimpleObject(schema.items);
+  }
+  return false;
+};
+
+const getArrayItemDefault = (schema: JsonSchemaType): JsonValue => {
+  if ("default" in schema && schema.default !== undefined) {
+    return schema.default;
+  }
+
+  switch (schema.type) {
+    case "string":
+      return "";
+    case "number":
+    case "integer":
+      return 0;
+    case "boolean":
+      return false;
+    case "array":
+      return [];
+    case "object":
+      return {};
+    case "null":
+      return null;
+    default:
+      return null;
+  }
 };
 
 const DynamicJsonForm = ({
@@ -113,6 +142,8 @@ const DynamicJsonForm = ({
     currentValue: JsonValue,
     path: string[] = [],
     depth: number = 0,
+    parentSchema?: JsonSchemaType,
+    propertyName?: string,
   ) => {
     if (
       depth >= maxDepth &&
@@ -122,7 +153,8 @@ const DynamicJsonForm = ({
       return (
         <JsonEditor
           value={JSON.stringify(
-            currentValue ?? generateDefaultValue(propSchema),
+            currentValue ??
+              generateDefaultValue(propSchema, propertyName, parentSchema),
             null,
             2,
           )}
@@ -140,6 +172,10 @@ const DynamicJsonForm = ({
       );
     }
 
+    // Check if this property is required in the parent schema
+    const isRequired =
+      parentSchema?.required?.includes(propertyName || "") ?? false;
+
     switch (propSchema.type) {
       case "string":
         return (
@@ -148,16 +184,11 @@ const DynamicJsonForm = ({
             value={(currentValue as string) ?? ""}
             onChange={(e) => {
               const val = e.target.value;
-              // Allow clearing non-required fields by setting undefined
-              // This preserves the distinction between empty string and unset
-              if (!val && !propSchema.required) {
-                handleFieldChange(path, undefined);
-              } else {
-                handleFieldChange(path, val);
-              }
+              // Always allow setting string values, including empty strings
+              handleFieldChange(path, val);
             }}
             placeholder={propSchema.description}
-            required={propSchema.required}
+            required={isRequired}
           />
         );
       case "number":
@@ -167,9 +198,7 @@ const DynamicJsonForm = ({
             value={(currentValue as number)?.toString() ?? ""}
             onChange={(e) => {
               const val = e.target.value;
-              // Allow clearing non-required number fields
-              // This preserves the distinction between 0 and unset
-              if (!val && !propSchema.required) {
+              if (!val && !isRequired) {
                 handleFieldChange(path, undefined);
               } else {
                 const num = Number(val);
@@ -179,7 +208,7 @@ const DynamicJsonForm = ({
               }
             }}
             placeholder={propSchema.description}
-            required={propSchema.required}
+            required={isRequired}
           />
         );
       case "integer":
@@ -190,9 +219,7 @@ const DynamicJsonForm = ({
             value={(currentValue as number)?.toString() ?? ""}
             onChange={(e) => {
               const val = e.target.value;
-              // Allow clearing non-required integer fields
-              // This preserves the distinction between 0 and unset
-              if (!val && !propSchema.required) {
+              if (!val && !isRequired) {
                 handleFieldChange(path, undefined);
               } else {
                 const num = Number(val);
@@ -203,7 +230,7 @@ const DynamicJsonForm = ({
               }
             }}
             placeholder={propSchema.description}
-            required={propSchema.required}
+            required={isRequired}
           />
         );
       case "boolean":
@@ -213,9 +240,135 @@ const DynamicJsonForm = ({
             checked={(currentValue as boolean) ?? false}
             onChange={(e) => handleFieldChange(path, e.target.checked)}
             className="w-4 h-4"
-            required={propSchema.required}
+            required={isRequired}
+          />
+        );
+      case "object":
+        if (!propSchema.properties) {
+          return (
+            <JsonEditor
+              value={JSON.stringify(currentValue ?? {}, null, 2)}
+              onChange={(newValue) => {
+                try {
+                  const parsed = JSON.parse(newValue);
+                  handleFieldChange(path, parsed);
+                  setJsonError(undefined);
+                } catch (err) {
+                  setJsonError(
+                    err instanceof Error ? err.message : "Invalid JSON",
+                  );
+                }
+              }}
+              error={jsonError}
+            />
+          );
+        }
+
+        return (
+          <div className="space-y-2 border rounded p-3">
+            {Object.entries(propSchema.properties).map(([key, subSchema]) => (
+              <div key={key}>
+                <label className="block text-sm font-medium mb-1">
+                  {key}
+                  {propSchema.required?.includes(key) && (
+                    <span className="text-red-500 ml-1">*</span>
+                  )}
+                </label>
+                {renderFormFields(
+                  subSchema as JsonSchemaType,
+                  (currentValue as Record<string, JsonValue>)?.[key],
+                  [...path, key],
+                  depth + 1,
+                  propSchema,
+                  key,
+                )}
+              </div>
+            ))}
+          </div>
+        );
+      case "array": {
+        const arrayValue = Array.isArray(currentValue) ? currentValue : [];
+        if (!propSchema.items) return null;
+
+        // If the array items are simple, render as form fields, otherwise use JSON editor
+        if (isSimpleObject(propSchema.items)) {
+          return (
+            <div className="space-y-4">
+              {propSchema.description && (
+                <p className="text-sm text-gray-600">
+                  {propSchema.description}
+                </p>
+              )}
+
+              {propSchema.items?.description && (
+                <p className="text-sm text-gray-500">
+                  Items: {propSchema.items.description}
+                </p>
+              )}
+
+              <div className="space-y-2">
+                {arrayValue.map((item, index) => (
+                  <div key={index} className="flex items-center gap-2">
+                    {renderFormFields(
+                      propSchema.items as JsonSchemaType,
+                      item,
+                      [...path, index.toString()],
+                      depth + 1,
+                    )}
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        const newArray = [...arrayValue];
+                        newArray.splice(index, 1);
+                        handleFieldChange(path, newArray);
+                      }}
+                    >
+                      Remove
+                    </Button>
+                  </div>
+                ))}
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    const defaultValue = getArrayItemDefault(
+                      propSchema.items as JsonSchemaType,
+                    );
+                    handleFieldChange(path, [...arrayValue, defaultValue]);
+                  }}
+                  title={
+                    propSchema.items?.description
+                      ? `Add new ${propSchema.items.description}`
+                      : "Add new item"
+                  }
+                >
+                  Add Item
+                </Button>
+              </div>
+            </div>
+          );
+        }
+
+        // For complex arrays, fall back to JSON editor
+        return (
+          <JsonEditor
+            value={JSON.stringify(currentValue ?? [], null, 2)}
+            onChange={(newValue) => {
+              try {
+                const parsed = JSON.parse(newValue);
+                handleFieldChange(path, parsed);
+                setJsonError(undefined);
+              } catch (err) {
+                setJsonError(
+                  err instanceof Error ? err.message : "Invalid JSON",
+                );
+              }
+            }}
+            error={jsonError}
           />
         );
+      }
       default:
         return null;
     }

client/src/components/ToolsTab.tsx

@@ -7,7 +7,7 @@ import { TabsContent } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import DynamicJsonForm from "./DynamicJsonForm";
 import type { JsonValue, JsonSchemaType } from "@/utils/jsonUtils";
-import { generateDefaultValue } from "@/utils/schemaUtils";
+import { generateDefaultValue, isPropertyRequired } from "@/utils/schemaUtils";
 import {
   CompatibilityCallToolResult,
   ListToolsResult,
@@ -48,7 +48,11 @@ const ToolsTab = ({
       selectedTool?.inputSchema.properties ?? [],
     ).map(([key, value]) => [
       key,
-      generateDefaultValue(value as JsonSchemaType),
+      generateDefaultValue(
+        value as JsonSchemaType,
+        key,
+        selectedTool?.inputSchema as JsonSchemaType,
+      ),
     ]);
     setParams(Object.fromEntries(params));
   }, [selectedTool]);
@@ -92,13 +96,19 @@ const ToolsTab = ({
                 {Object.entries(selectedTool.inputSchema.properties ?? []).map(
                   ([key, value]) => {
                     const prop = value as JsonSchemaType;
+                    const inputSchema =
+                      selectedTool.inputSchema as JsonSchemaType;
+                    const required = isPropertyRequired(key, inputSchema);
                     return (
                       <div key={key}>
                         <Label
                           htmlFor={key}
                           className="block text-sm font-medium text-gray-700 dark:text-gray-300"
                         >
                           {key}
+                          {required && (
+                            <span className="text-red-500 ml-1">*</span>
+                          )}
                         </Label>
                         {prop.type === "boolean" ? (
                           <div className="flex items-center space-x-2 mt-2">