diff --git a/client/pr_demo.mp4 b/client/pr_demo.mp4
new file mode 100644
index 000000000..b6ae523d5
Binary files /dev/null and b/client/pr_demo.mp4 differ
diff --git a/client/src/components/DynamicJsonForm.tsx b/client/src/components/DynamicJsonForm.tsx
index 2214add9b..96b03b3a4 100644
--- a/client/src/components/DynamicJsonForm.tsx
+++ b/client/src/components/DynamicJsonForm.tsx
@@ -1,4 +1,11 @@
-import { useState, useEffect, useCallback, useRef } from "react";
+import {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  forwardRef,
+  useImperativeHandle,
+} from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import JsonEditor from "./JsonEditor";
@@ -15,6 +22,10 @@ interface DynamicJsonFormProps {
   maxDepth?: number;
 }
 
+export interface DynamicJsonFormRef {
+  validateJson: () => { isValid: boolean; error: string | null };
+}
+
 const isTypeSupported = (
   type: JsonSchemaType["type"],
   supportedTypes: string[],
@@ -63,303 +74,466 @@ const getArrayItemDefault = (schema: JsonSchemaType): JsonValue => {
   }
 };
 
-const DynamicJsonForm = ({
-  schema,
-  value,
-  onChange,
-  maxDepth = 3,
-}: DynamicJsonFormProps) => {
-  const isOnlyJSON = !isSimpleObject(schema);
-  const [isJsonMode, setIsJsonMode] = useState(isOnlyJSON);
-  const [jsonError, setJsonError] = useState<string>();
-  const [copiedJson, setCopiedJson] = useState<boolean>(false);
-  const { toast } = useToast();
-
-  // Store the raw JSON string to allow immediate feedback during typing
-  // while deferring parsing until the user stops typing
-  const [rawJsonValue, setRawJsonValue] = useState<string>(
-    JSON.stringify(value ?? generateDefaultValue(schema), null, 2),
-  );
-
-  // Use a ref to manage debouncing timeouts to avoid parsing JSON
-  // on every keystroke which would be inefficient and error-prone
-  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
-
-  // Debounce JSON parsing and parent updates to handle typing gracefully
-  const debouncedUpdateParent = useCallback(
-    (jsonString: string) => {
-      // Clear any existing timeout
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
+const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
+  ({ schema, value, onChange, maxDepth = 3 }, ref) => {
+    const isOnlyJSON = !isSimpleObject(schema);
+    const [isJsonMode, setIsJsonMode] = useState(isOnlyJSON);
+    const [jsonError, setJsonError] = useState<string>();
+    const [copiedJson, setCopiedJson] = useState<boolean>(false);
+    const { toast } = useToast();
+
+    // Store the raw JSON string to allow immediate feedback during typing
+    // while deferring parsing until the user stops typing
+    const [rawJsonValue, setRawJsonValue] = useState<string>(
+      JSON.stringify(value ?? generateDefaultValue(schema), null, 2),
+    );
+
+    // Use a ref to manage debouncing timeouts to avoid parsing JSON
+    // on every keystroke which would be inefficient and error-prone
+    const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+
+    // Debounce JSON parsing and parent updates to handle typing gracefully
+    const debouncedUpdateParent = useCallback(
+      (jsonString: string) => {
+        // Clear any existing timeout
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+
+        // Set a new timeout
+        timeoutRef.current = setTimeout(() => {
+          try {
+            const parsed = JSON.parse(jsonString);
+            onChange(parsed);
+            setJsonError(undefined);
+          } catch (err) {
+            // For invalid JSON, set error and reset to default if it's clearly malformed
+            const errorMessage =
+              err instanceof Error ? err.message : "Invalid JSON";
+            setJsonError(errorMessage);
+
+            // Reset to default for clearly invalid JSON (not just incomplete typing)
+            const trimmed = jsonString.trim();
+            if (trimmed.length > 5 && !trimmed.match(/^[\s[{]/)) {
+              onChange(generateDefaultValue(schema));
+            }
+          }
+        }, 300);
+      },
+      [onChange, setJsonError, schema],
+    );
+
+    // Update rawJsonValue when value prop changes
+    useEffect(() => {
+      if (!isJsonMode) {
+        setRawJsonValue(
+          JSON.stringify(value ?? generateDefaultValue(schema), null, 2),
+        );
       }
+    }, [value, schema, isJsonMode]);
 
-      // Set a new timeout
-      timeoutRef.current = setTimeout(() => {
+    const handleSwitchToFormMode = () => {
+      if (isJsonMode) {
+        // When switching to Form mode, ensure we have valid JSON
         try {
-          const parsed = JSON.parse(jsonString);
+          const parsed = JSON.parse(rawJsonValue);
+          // Update the parent component's state with the parsed value
           onChange(parsed);
-          setJsonError(undefined);
-        } catch {
-          // Don't set error during normal typing
+          // Switch to form mode
+          setIsJsonMode(false);
+        } catch (err) {
+          setJsonError(err instanceof Error ? err.message : "Invalid JSON");
         }
-      }, 300);
-    },
-    [onChange, setJsonError],
-  );
-
-  // Update rawJsonValue when value prop changes
-  useEffect(() => {
-    if (!isJsonMode) {
-      setRawJsonValue(
-        JSON.stringify(value ?? generateDefaultValue(schema), null, 2),
-      );
-    }
-  }, [value, schema, isJsonMode]);
-
-  const handleSwitchToFormMode = () => {
-    if (isJsonMode) {
-      // When switching to Form mode, ensure we have valid JSON
+      } else {
+        // Update raw JSON value when switching to JSON mode
+        setRawJsonValue(
+          JSON.stringify(value ?? generateDefaultValue(schema), null, 2),
+        );
+        setIsJsonMode(true);
+      }
+    };
+
+    const formatJson = () => {
       try {
-        const parsed = JSON.parse(rawJsonValue);
-        // Update the parent component's state with the parsed value
-        onChange(parsed);
-        // Switch to form mode
-        setIsJsonMode(false);
+        const jsonStr = rawJsonValue.trim();
+        if (!jsonStr) {
+          return;
+        }
+        const formatted = JSON.stringify(JSON.parse(jsonStr), null, 2);
+        setRawJsonValue(formatted);
+        debouncedUpdateParent(formatted);
+        setJsonError(undefined);
       } catch (err) {
         setJsonError(err instanceof Error ? err.message : "Invalid JSON");
       }
-    } else {
-      // Update raw JSON value when switching to JSON mode
-      setRawJsonValue(
-        JSON.stringify(value ?? generateDefaultValue(schema), null, 2),
-      );
-      setIsJsonMode(true);
-    }
-  };
-
-  const formatJson = () => {
-    try {
-      const jsonStr = rawJsonValue.trim();
-      if (!jsonStr) {
-        return;
+    };
+
+    const validateJson = () => {
+      if (!isJsonMode) return { isValid: true, error: null };
+      try {
+        const jsonStr = rawJsonValue.trim();
+        if (!jsonStr) return { isValid: true, error: null };
+        const parsed = JSON.parse(jsonStr);
+        // Clear any pending debounced update and immediately update parent
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        onChange(parsed);
+        setJsonError(undefined);
+        return { isValid: true, error: null };
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error ? err.message : "Invalid JSON";
+        setJsonError(errorMessage);
+        return { isValid: false, error: errorMessage };
       }
-      const formatted = JSON.stringify(JSON.parse(jsonStr), null, 2);
-      setRawJsonValue(formatted);
-      debouncedUpdateParent(formatted);
-      setJsonError(undefined);
-    } catch (err) {
-      setJsonError(err instanceof Error ? err.message : "Invalid JSON");
-    }
-  };
-
-  const renderFormFields = (
-    propSchema: JsonSchemaType,
-    currentValue: JsonValue,
-    path: string[] = [],
-    depth: number = 0,
-    parentSchema?: JsonSchemaType,
-    propertyName?: string,
-  ) => {
-    if (
-      depth >= maxDepth &&
-      (propSchema.type === "object" || propSchema.type === "array")
-    ) {
-      // Render as JSON editor when max depth is reached
-      return (
-        <JsonEditor
-          value={JSON.stringify(
-            currentValue ??
-              generateDefaultValue(propSchema, propertyName, parentSchema),
-            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}
-        />
-      );
-    }
-
-    // Check if this property is required in the parent schema
-    const isRequired =
-      parentSchema?.required?.includes(propertyName || "") ?? false;
-
-    let fieldType = propSchema.type;
-    if (Array.isArray(fieldType)) {
-      // Of the possible types, find the first non-null type to determine the control to render
-      fieldType = fieldType.find((t) => t !== "null") ?? fieldType[0];
-    }
-
-    switch (fieldType) {
-      case "string": {
-        if (
-          propSchema.oneOf &&
-          propSchema.oneOf.every(
-            (option) =>
-              typeof option.const === "string" &&
-              typeof option.title === "string",
-          )
-        ) {
+    };
+
+    const handleCopyJson = useCallback(async () => {
+      try {
+        await navigator.clipboard.writeText(
+          JSON.stringify(value, null, 2) ?? "[]",
+        );
+        setCopiedJson(true);
+
+        toast({
+          title: "JSON copied",
+          description:
+            "The JSON data has been successfully copied to your clipboard.",
+        });
+
+        setTimeout(() => {
+          setCopiedJson(false);
+        }, 2000);
+      } catch (error) {
+        toast({
+          title: "Error",
+          description: `Failed to copy JSON: ${error instanceof Error ? error.message : String(error)}`,
+          variant: "destructive",
+        });
+      }
+    }, [toast, value]);
+
+    useImperativeHandle(ref, () => ({
+      validateJson,
+    }));
+
+    const renderFormFields = (
+      propSchema: JsonSchemaType,
+      currentValue: JsonValue,
+      path: string[] = [],
+      depth: number = 0,
+      parentSchema?: JsonSchemaType,
+      propertyName?: string,
+    ) => {
+      if (
+        depth >= maxDepth &&
+        (propSchema.type === "object" || propSchema.type === "array")
+      ) {
+        // Render as JSON editor when max depth is reached
+        return (
+          <JsonEditor
+            value={JSON.stringify(
+              currentValue ??
+                generateDefaultValue(propSchema, propertyName, parentSchema),
+              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}
+          />
+        );
+      }
+
+      // Check if this property is required in the parent schema
+      const isRequired =
+        parentSchema?.required?.includes(propertyName || "") ?? false;
+
+      let fieldType = propSchema.type;
+      if (Array.isArray(fieldType)) {
+        // Of the possible types, find the first non-null type to determine the control to render
+        fieldType = fieldType.find((t) => t !== "null") ?? fieldType[0];
+      }
+
+      switch (fieldType) {
+        case "string": {
+          if (
+            propSchema.oneOf &&
+            propSchema.oneOf.every(
+              (option) =>
+                typeof option.const === "string" &&
+                typeof option.title === "string",
+            )
+          ) {
+            return (
+              <select
+                value={(currentValue as string) ?? ""}
+                onChange={(e) => {
+                  const val = e.target.value;
+                  if (!val && !isRequired) {
+                    handleFieldChange(path, undefined);
+                  } else {
+                    handleFieldChange(path, val);
+                  }
+                }}
+                required={isRequired}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800"
+              >
+                <option value="">Select an option...</option>
+                {propSchema.oneOf.map((option) => (
+                  <option
+                    key={option.const as string}
+                    value={option.const as string}
+                  >
+                    {option.title as string}
+                  </option>
+                ))}
+              </select>
+            );
+          }
+
+          if (propSchema.enum) {
+            return (
+              <select
+                value={(currentValue as string) ?? ""}
+                onChange={(e) => {
+                  const val = e.target.value;
+                  if (!val && !isRequired) {
+                    handleFieldChange(path, undefined);
+                  } else {
+                    handleFieldChange(path, val);
+                  }
+                }}
+                required={isRequired}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800"
+              >
+                <option value="">Select an option...</option>
+                {propSchema.enum.map((option) => (
+                  <option key={option} value={option}>
+                    {option}
+                  </option>
+                ))}
+              </select>
+            );
+          }
+
+          let inputType = "text";
+          switch (propSchema.format) {
+            case "email":
+              inputType = "email";
+              break;
+            case "uri":
+              inputType = "url";
+              break;
+            case "date":
+              inputType = "date";
+              break;
+            case "date-time":
+              inputType = "datetime-local";
+              break;
+            default:
+              inputType = "text";
+              break;
+          }
+
           return (
-            <select
+            <Input
+              type={inputType}
               value={(currentValue as string) ?? ""}
+              onChange={(e) => {
+                const val = e.target.value;
+                // Always allow setting string values, including empty strings
+                handleFieldChange(path, val);
+              }}
+              placeholder={propSchema.description}
+              required={isRequired}
+              minLength={propSchema.minLength}
+              maxLength={propSchema.maxLength}
+              pattern={propSchema.pattern}
+            />
+          );
+        }
+
+        case "number":
+          return (
+            <Input
+              type="number"
+              value={(currentValue as number)?.toString() ?? ""}
               onChange={(e) => {
                 const val = e.target.value;
                 if (!val && !isRequired) {
                   handleFieldChange(path, undefined);
                 } else {
-                  handleFieldChange(path, val);
+                  const num = Number(val);
+                  if (!isNaN(num)) {
+                    handleFieldChange(path, num);
+                  }
                 }
               }}
+              placeholder={propSchema.description}
               required={isRequired}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800"
-            >
-              <option value="">Select an option...</option>
-              {propSchema.oneOf.map((option) => (
-                <option
-                  key={option.const as string}
-                  value={option.const as string}
-                >
-                  {option.title as string}
-                </option>
-              ))}
-            </select>
+              min={propSchema.minimum}
+              max={propSchema.maximum}
+            />
           );
-        }
 
-        if (propSchema.enum) {
+        case "integer":
           return (
-            <select
-              value={(currentValue as string) ?? ""}
+            <Input
+              type="number"
+              step="1"
+              value={(currentValue as number)?.toString() ?? ""}
               onChange={(e) => {
                 const val = e.target.value;
                 if (!val && !isRequired) {
                   handleFieldChange(path, undefined);
                 } else {
-                  handleFieldChange(path, val);
+                  const num = Number(val);
+                  if (!isNaN(num) && Number.isInteger(num)) {
+                    handleFieldChange(path, num);
+                  }
                 }
               }}
+              placeholder={propSchema.description}
               required={isRequired}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800"
-            >
-              <option value="">Select an option...</option>
-              {propSchema.enum.map((option) => (
-                <option key={option} value={option}>
-                  {option}
-                </option>
-              ))}
-            </select>
+              min={propSchema.minimum}
+              max={propSchema.maximum}
+            />
           );
-        }
 
-        let inputType = "text";
-        switch (propSchema.format) {
-          case "email":
-            inputType = "email";
-            break;
-          case "uri":
-            inputType = "url";
-            break;
-          case "date":
-            inputType = "date";
-            break;
-          case "date-time":
-            inputType = "datetime-local";
-            break;
-          default:
-            inputType = "text";
-            break;
-        }
+        case "boolean":
+          return (
+            <Input
+              type="checkbox"
+              checked={(currentValue as boolean) ?? false}
+              onChange={(e) => handleFieldChange(path, e.target.checked)}
+              className="w-4 h-4"
+              required={isRequired}
+            />
+          );
+        case "null":
+          return null;
+        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 (
-          <Input
-            type={inputType}
-            value={(currentValue as string) ?? ""}
-            onChange={(e) => {
-              const val = e.target.value;
-              // Always allow setting string values, including empty strings
-              handleFieldChange(path, val);
-            }}
-            placeholder={propSchema.description}
-            required={isRequired}
-            minLength={propSchema.minLength}
-            maxLength={propSchema.maxLength}
-            pattern={propSchema.pattern}
-          />
-        );
-      }
+          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>
+                )}
 
-      case "number":
-        return (
-          <Input
-            type="number"
-            value={(currentValue as number)?.toString() ?? ""}
-            onChange={(e) => {
-              const val = e.target.value;
-              if (!val && !isRequired) {
-                handleFieldChange(path, undefined);
-              } else {
-                const num = Number(val);
-                if (!isNaN(num)) {
-                  handleFieldChange(path, num);
-                }
-              }
-            }}
-            placeholder={propSchema.description}
-            required={isRequired}
-            min={propSchema.minimum}
-            max={propSchema.maximum}
-          />
-        );
+                {propSchema.items?.description && (
+                  <p className="text-sm text-gray-500">
+                    Items: {propSchema.items.description}
+                  </p>
+                )}
 
-      case "integer":
-        return (
-          <Input
-            type="number"
-            step="1"
-            value={(currentValue as number)?.toString() ?? ""}
-            onChange={(e) => {
-              const val = e.target.value;
-              if (!val && !isRequired) {
-                handleFieldChange(path, undefined);
-              } else {
-                const num = Number(val);
-                if (!isNaN(num) && Number.isInteger(num)) {
-                  handleFieldChange(path, num);
-                }
-              }
-            }}
-            placeholder={propSchema.description}
-            required={isRequired}
-            min={propSchema.minimum}
-            max={propSchema.maximum}
-          />
-        );
+                <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>
+            );
+          }
 
-      case "boolean":
-        return (
-          <Input
-            type="checkbox"
-            checked={(currentValue as boolean) ?? false}
-            onChange={(e) => handleFieldChange(path, e.target.checked)}
-            className="w-4 h-4"
-            required={isRequired}
-          />
-        );
-      case "null":
-        return null;
-      case "object":
-        if (!propSchema.properties) {
+          // For complex arrays, fall back to JSON editor
           return (
             <JsonEditor
-              value={JSON.stringify(currentValue ?? {}, null, 2)}
+              value={JSON.stringify(currentValue ?? [], null, 2)}
               onChange={(newValue) => {
                 try {
                   const parsed = JSON.parse(newValue);
@@ -375,244 +549,113 @@ const DynamicJsonForm = ({
             />
           );
         }
-
-        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;
       }
-      default:
-        return null;
-    }
-  };
-
-  const handleFieldChange = (path: string[], fieldValue: JsonValue) => {
-    if (path.length === 0) {
-      onChange(fieldValue);
-      return;
-    }
-
-    try {
-      const newValue = updateValueAtPath(value, path, fieldValue);
-      onChange(newValue);
-    } catch (error) {
-      console.error("Failed to update form value:", error);
-      onChange(value);
-    }
-  };
-
-  const shouldUseJsonMode =
-    schema.type === "object" &&
-    (!schema.properties || Object.keys(schema.properties).length === 0);
-
-  useEffect(() => {
-    if (shouldUseJsonMode && !isJsonMode) {
-      setIsJsonMode(true);
-    }
-  }, [shouldUseJsonMode, isJsonMode]);
-
-  const handleCopyJson = useCallback(() => {
-    const copyToClipboard = async () => {
-      try {
-        await navigator.clipboard.writeText(
-          JSON.stringify(value, null, 2) ?? "[]",
-        );
-        setCopiedJson(true);
+    };
 
-        toast({
-          title: "JSON copied",
-          description:
-            "The JSON data has been successfully copied to your clipboard.",
-        });
+    const handleFieldChange = (path: string[], fieldValue: JsonValue) => {
+      if (path.length === 0) {
+        onChange(fieldValue);
+        return;
+      }
 
-        setTimeout(() => {
-          setCopiedJson(false);
-        }, 2000);
+      try {
+        const newValue = updateValueAtPath(value, path, fieldValue);
+        onChange(newValue);
       } catch (error) {
-        toast({
-          title: "Error",
-          description: `Failed to copy JSON: ${error instanceof Error ? error.message : String(error)}`,
-          variant: "destructive",
-        });
+        console.error("Failed to update form value:", error);
+        onChange(value);
       }
     };
 
-    copyToClipboard();
-  }, [toast, value]);
+    const shouldUseJsonMode =
+      schema.type === "object" &&
+      (!schema.properties || Object.keys(schema.properties).length === 0);
 
-  return (
-    <div className="space-y-4">
-      <div className="flex justify-end space-x-2">
-        {isJsonMode && (
-          <>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={handleCopyJson}
-            >
-              {copiedJson ? (
-                <CheckCheck className="h-4 w-4 mr-2" />
-              ) : (
-                <Copy className="h-4 w-4 mr-2" />
-              )}
-              Copy JSON
-            </Button>
+    useEffect(() => {
+      if (shouldUseJsonMode && !isJsonMode) {
+        setIsJsonMode(true);
+      }
+    }, [shouldUseJsonMode, isJsonMode]);
+
+    return (
+      <div className="space-y-4">
+        <div className="flex justify-end space-x-2">
+          {isJsonMode && (
+            <>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={handleCopyJson}
+              >
+                {copiedJson ? (
+                  <CheckCheck className="h-4 w-4 mr-2" />
+                ) : (
+                  <Copy className="h-4 w-4 mr-2" />
+                )}
+                Copy JSON
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={formatJson}
+              >
+                Format JSON
+              </Button>
+            </>
+          )}
+          {!isOnlyJSON && (
             <Button
-              type="button"
               variant="outline"
               size="sm"
-              onClick={formatJson}
+              onClick={handleSwitchToFormMode}
             >
-              Format JSON
+              {isJsonMode ? "Switch to Form" : "Switch to JSON"}
             </Button>
-          </>
-        )}
+          )}
+        </div>
+
+        {isJsonMode ? (
+          <JsonEditor
+            value={rawJsonValue}
+            onChange={(newValue) => {
+              // Always update local state
+              setRawJsonValue(newValue);
 
-        {!isOnlyJSON && (
-          <Button variant="outline" size="sm" onClick={handleSwitchToFormMode}>
-            {isJsonMode ? "Switch to Form" : "Switch to JSON"}
-          </Button>
+              // Use the debounced function to attempt parsing and updating parent
+              debouncedUpdateParent(newValue);
+            }}
+            error={jsonError}
+          />
+        ) : // If schema type is object but value is not an object or is empty, and we have actual JSON data,
+        // render a simple representation of the JSON data
+        schema.type === "object" &&
+          (typeof value !== "object" ||
+            value === null ||
+            Object.keys(value).length === 0) &&
+          rawJsonValue &&
+          rawJsonValue !== "{}" ? (
+          <div className="space-y-4 border rounded-md p-4">
+            <p className="text-sm text-gray-500">
+              Form view not available for this JSON structure. Using simplified
+              view:
+            </p>
+            <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto">
+              {rawJsonValue}
+            </pre>
+            <p className="text-sm text-gray-500">
+              Use JSON mode for full editing capabilities.
+            </p>
+          </div>
+        ) : (
+          renderFormFields(schema, value)
         )}
       </div>
-
-      {isJsonMode ? (
-        <JsonEditor
-          value={rawJsonValue}
-          onChange={(newValue) => {
-            // Always update local state
-            setRawJsonValue(newValue);
-
-            // Use the debounced function to attempt parsing and updating parent
-            debouncedUpdateParent(newValue);
-          }}
-          error={jsonError}
-        />
-      ) : // If schema type is object but value is not an object or is empty, and we have actual JSON data,
-      // render a simple representation of the JSON data
-      schema.type === "object" &&
-        (typeof value !== "object" ||
-          value === null ||
-          Object.keys(value).length === 0) &&
-        rawJsonValue &&
-        rawJsonValue !== "{}" ? (
-        <div className="space-y-4 border rounded-md p-4">
-          <p className="text-sm text-gray-500">
-            Form view not available for this JSON structure. Using simplified
-            view:
-          </p>
-          <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto">
-            {rawJsonValue}
-          </pre>
-          <p className="text-sm text-gray-500">
-            Use JSON mode for full editing capabilities.
-          </p>
-        </div>
-      ) : (
-        renderFormFields(schema, value)
-      )}
-    </div>
-  );
-};
+    );
+  },
+);
 
 export default DynamicJsonForm;
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 377521ae7..31979f0da 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -1,11 +1,11 @@
-import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { TabsContent } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
-import DynamicJsonForm from "./DynamicJsonForm";
+import DynamicJsonForm, { DynamicJsonFormRef } from "./DynamicJsonForm";
 import type { JsonValue, JsonSchemaType } from "@/utils/jsonUtils";
 import {
   generateDefaultValue,
@@ -22,10 +22,11 @@ import {
   Send,
   ChevronDown,
   ChevronUp,
+  AlertCircle,
   Copy,
   CheckCheck,
 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import ListPane from "./ListPane";
 import JsonView from "./JsonView";
 import ToolResults from "./ToolResults";
@@ -45,6 +46,7 @@ const ToolsTab = ({
   setSelectedTool,
   toolResult,
   nextCursor,
+  error,
   resourceContent,
   onReadResource,
 }: {
@@ -64,9 +66,20 @@ const ToolsTab = ({
   const [isToolRunning, setIsToolRunning] = useState(false);
   const [isOutputSchemaExpanded, setIsOutputSchemaExpanded] = useState(false);
   const [isMetaExpanded, setIsMetaExpanded] = useState(false);
+  const [hasValidationErrors, setHasValidationErrors] = useState(false);
+  const formRefs = useRef<Record<string, DynamicJsonFormRef | null>>({});
   const { toast } = useToast();
   const { copied, setCopied } = useCopy();
 
+  // Function to check if any form has validation errors
+  const checkValidationErrors = () => {
+    const errors = Object.values(formRefs.current).some(
+      (ref) => ref && !ref.validateJson().isValid,
+    );
+    setHasValidationErrors(errors);
+    return errors;
+  };
+
   useEffect(() => {
     const params = Object.entries(
       selectedTool?.inputSchema.properties ?? [],
@@ -79,6 +92,12 @@ const ToolsTab = ({
       ),
     ]);
     setParams(Object.fromEntries(params));
+
+    // Reset validation errors when switching tools
+    setHasValidationErrors(false);
+
+    // Clear form refs for the previous tool
+    formRefs.current = {};
   }, [selectedTool]);
 
   return (
@@ -112,7 +131,13 @@ const ToolsTab = ({
             </h3>
           </div>
           <div className="p-4">
-            {selectedTool ? (
+            {error ? (
+              <Alert variant="destructive">
+                <AlertCircle className="h-4 w-4" />
+                <AlertTitle>Error</AlertTitle>
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            ) : selectedTool ? (
               <div className="space-y-4">
                 <p className="text-sm text-gray-600 dark:text-gray-400">
                   {selectedTool.description}
@@ -174,6 +199,7 @@ const ToolsTab = ({
                         ) : prop.type === "object" || prop.type === "array" ? (
                           <div className="mt-1">
                             <DynamicJsonForm
+                              ref={(ref) => (formRefs.current[key] = ref)}
                               schema={{
                                 type: prop.type,
                                 properties: prop.properties,
@@ -189,6 +215,8 @@ const ToolsTab = ({
                                   ...params,
                                   [key]: newValue,
                                 });
+                                // Check validation after a short delay to allow form to update
+                                setTimeout(checkValidationErrors, 100);
                               }}
                             />
                           </div>
@@ -212,6 +240,7 @@ const ToolsTab = ({
                         ) : (
                           <div className="mt-1">
                             <DynamicJsonForm
+                              ref={(ref) => (formRefs.current[key] = ref)}
                               schema={{
                                 type: prop.type,
                                 properties: prop.properties,
@@ -224,6 +253,8 @@ const ToolsTab = ({
                                   ...params,
                                   [key]: newValue,
                                 });
+                                // Check validation after a short delay to allow form to update
+                                setTimeout(checkValidationErrors, 100);
                               }}
                             />
                           </div>
@@ -305,6 +336,9 @@ const ToolsTab = ({
                 <div className="flex gap-2">
                   <Button
                     onClick={async () => {
+                      // Validate JSON inputs before calling tool
+                      if (checkValidationErrors()) return;
+
                       try {
                         setIsToolRunning(true);
                         await callTool(selectedTool.name, params);
@@ -312,7 +346,7 @@ const ToolsTab = ({
                         setIsToolRunning(false);
                       }
                     }}
-                    disabled={isToolRunning}
+                    disabled={isToolRunning || hasValidationErrors}
                   >
                     {isToolRunning ? (
                       <>
diff --git a/client/src/components/__tests__/DynamicJsonForm.test.tsx b/client/src/components/__tests__/DynamicJsonForm.test.tsx
index 318fba2de..770c7e668 100644
--- a/client/src/components/__tests__/DynamicJsonForm.test.tsx
+++ b/client/src/components/__tests__/DynamicJsonForm.test.tsx
@@ -1,7 +1,8 @@
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { describe, it, expect, jest } from "@jest/globals";
-import DynamicJsonForm from "../DynamicJsonForm";
+import { useRef } from "react";
+import DynamicJsonForm, { DynamicJsonFormRef } from "../DynamicJsonForm";
 import type { JsonSchemaType } from "@/utils/jsonUtils";
 
 describe("DynamicJsonForm String Fields", () => {
@@ -663,3 +664,221 @@ describe("DynamicJsonForm Copy JSON Functionality", () => {
     });
   });
 });
+
+describe("DynamicJsonForm Validation Functionality", () => {
+  const renderFormWithRef = (props = {}) => {
+    const TestComponent = () => {
+      const formRef = useRef<DynamicJsonFormRef>(null);
+      const defaultProps = {
+        schema: {
+          type: "object",
+          properties: {
+            nested: { oneOf: [{ type: "string" }, { type: "integer" }] },
+          },
+        } as unknown as JsonSchemaType,
+        value: { nested: "test value" },
+        onChange: jest.fn(),
+        ref: formRef,
+      };
+
+      return (
+        <div>
+          <DynamicJsonForm {...defaultProps} {...props} />
+          <button
+            onClick={() => {
+              const result = formRef.current?.validateJson();
+              // Add data attributes to make validation result testable
+              const button = document.querySelector(
+                '[data-testid="validate-button"]',
+              ) as HTMLElement;
+              if (button && result) {
+                button.setAttribute(
+                  "data-validation-valid",
+                  result.isValid.toString(),
+                );
+                button.setAttribute(
+                  "data-validation-error",
+                  result.error || "",
+                );
+              }
+            }}
+            data-testid="validate-button"
+          >
+            Validate
+          </button>
+        </div>
+      );
+    };
+
+    return render(<TestComponent />);
+  };
+
+  describe("validateJson method", () => {
+    it("should return valid for form mode", () => {
+      const simpleSchema = {
+        type: "string" as const,
+        description: "Test string field",
+      };
+
+      const TestComponent = () => {
+        const formRef = useRef<DynamicJsonFormRef>(null);
+
+        return (
+          <div>
+            <DynamicJsonForm
+              ref={formRef}
+              schema={simpleSchema}
+              value="test"
+              onChange={jest.fn()}
+            />
+            <button
+              onClick={() => {
+                const result = formRef.current?.validateJson();
+                const button = document.querySelector(
+                  '[data-testid="validate-button"]',
+                ) as HTMLElement;
+                if (button && result) {
+                  button.setAttribute(
+                    "data-validation-valid",
+                    result.isValid.toString(),
+                  );
+                  button.setAttribute(
+                    "data-validation-error",
+                    result.error || "",
+                  );
+                }
+              }}
+              data-testid="validate-button"
+            >
+              Validate
+            </button>
+          </div>
+        );
+      };
+
+      render(<TestComponent />);
+
+      const validateButton = screen.getByTestId("validate-button");
+      fireEvent.click(validateButton);
+
+      expect(validateButton.getAttribute("data-validation-valid")).toBe("true");
+      expect(validateButton.getAttribute("data-validation-error")).toBe("");
+    });
+
+    it("should return valid for valid JSON in JSON mode", () => {
+      renderFormWithRef();
+
+      const validateButton = screen.getByTestId("validate-button");
+      fireEvent.click(validateButton);
+
+      expect(validateButton.getAttribute("data-validation-valid")).toBe("true");
+      expect(validateButton.getAttribute("data-validation-error")).toBe("");
+    });
+
+    it("should return invalid for malformed JSON in JSON mode", async () => {
+      renderFormWithRef();
+
+      // Enter invalid JSON
+      const textarea = screen.getByRole("textbox");
+      fireEvent.change(textarea, { target: { value: '{ "invalid": json }' } });
+
+      // Wait a bit for any debounced updates
+      await waitFor(() => {
+        const validateButton = screen.getByTestId("validate-button");
+        fireEvent.click(validateButton);
+
+        expect(validateButton.getAttribute("data-validation-valid")).toBe(
+          "false",
+        );
+        expect(validateButton.getAttribute("data-validation-error")).toContain(
+          "JSON",
+        );
+      });
+    });
+
+    it("should return valid for empty JSON in JSON mode", () => {
+      renderFormWithRef();
+
+      // Clear the textarea
+      const textarea = screen.getByRole("textbox");
+      fireEvent.change(textarea, { target: { value: "" } });
+
+      const validateButton = screen.getByTestId("validate-button");
+      fireEvent.click(validateButton);
+
+      expect(validateButton.getAttribute("data-validation-valid")).toBe("true");
+      expect(validateButton.getAttribute("data-validation-error")).toBe("");
+    });
+
+    it("should set error state when validation fails", async () => {
+      renderFormWithRef();
+
+      // Enter invalid JSON
+      const textarea = screen.getByRole("textbox");
+      fireEvent.change(textarea, {
+        target: { value: '{ "trailing": "comma", }' },
+      });
+
+      // Trigger validation
+      const validateButton = screen.getByTestId("validate-button");
+      fireEvent.click(validateButton);
+
+      // Check that validation result shows error
+      expect(validateButton.getAttribute("data-validation-valid")).toBe(
+        "false",
+      );
+      expect(validateButton.getAttribute("data-validation-error")).toContain(
+        "JSON",
+      );
+    });
+  });
+
+  describe("forwardRef functionality", () => {
+    it("should expose validateJson method through ref", () => {
+      const TestComponent = () => {
+        const formRef = useRef<DynamicJsonFormRef>(null);
+
+        return (
+          <div>
+            <DynamicJsonForm
+              ref={formRef}
+              schema={{
+                type: "object",
+                properties: {
+                  test: { type: "string" },
+                },
+              }}
+              value={{ test: "value" }}
+              onChange={jest.fn()}
+            />
+            <button
+              onClick={() => {
+                const hasValidateMethod =
+                  typeof formRef.current?.validateJson === "function";
+                const button = document.querySelector(
+                  '[data-testid="ref-test-button"]',
+                ) as HTMLElement;
+                if (button) {
+                  button.setAttribute(
+                    "data-has-validate-method",
+                    hasValidateMethod.toString(),
+                  );
+                }
+              }}
+              data-testid="ref-test-button"
+            >
+              Test Ref
+            </button>
+          </div>
+        );
+      };
+
+      render(<TestComponent />);
+
+      const testButton = screen.getByTestId("ref-test-button");
+      fireEvent.click(testButton);
+
+      expect(testButton.getAttribute("data-has-validate-method")).toBe("true");
+    });
+  });
+});
diff --git a/client/src/components/__tests__/ToolsTab.test.tsx b/client/src/components/__tests__/ToolsTab.test.tsx
index bc75401d4..290605dd8 100644
--- a/client/src/components/__tests__/ToolsTab.test.tsx
+++ b/client/src/components/__tests__/ToolsTab.test.tsx
@@ -637,4 +637,180 @@ describe("ToolsTab", () => {
       expect(screen.getByText(/version/i)).toBeInTheDocument();
     });
   });
+
+  describe("JSON Validation Integration", () => {
+    const toolWithJsonParams: Tool = {
+      name: "jsonTool",
+      description: "Tool with JSON parameters",
+      inputSchema: {
+        type: "object" as const,
+        properties: {
+          config: {
+            type: "object" as const,
+            // No properties defined - this will force JSON mode
+          },
+          data: {
+            type: "array" as const,
+            // No items defined - this will force JSON mode
+          },
+        },
+      },
+    };
+
+    it("should prevent tool execution when JSON validation fails", async () => {
+      const mockCallTool = jest.fn();
+      renderToolsTab({
+        tools: [toolWithJsonParams],
+        selectedTool: toolWithJsonParams,
+        callTool: mockCallTool,
+      });
+
+      // Find JSON editor textareas (there should be at least 1 for JSON parameters)
+      const textareas = screen.getAllByRole("textbox");
+      expect(textareas.length).toBeGreaterThanOrEqual(1);
+
+      // Enter invalid JSON in the first textarea
+      const configTextarea = textareas[0];
+      fireEvent.change(configTextarea, {
+        target: { value: '{ "invalid": json }' },
+      });
+
+      // Try to run the tool
+      const runButton = screen.getByRole("button", { name: /run tool/i });
+      await act(async () => {
+        fireEvent.click(runButton);
+      });
+
+      // Tool should not have been called due to validation failure
+      expect(mockCallTool).not.toHaveBeenCalled();
+    });
+
+    it("should allow tool execution when JSON validation passes", async () => {
+      const mockCallTool = jest.fn();
+      renderToolsTab({
+        tools: [toolWithJsonParams],
+        selectedTool: toolWithJsonParams,
+        callTool: mockCallTool,
+      });
+
+      // Find JSON editor textareas
+      const textareas = screen.getAllByRole("textbox");
+
+      // Enter valid JSON in the first textarea
+      fireEvent.change(textareas[0], {
+        target: {
+          value:
+            '{ "config": { "setting": "value" }, "data": ["item1", "item2"] }',
+        },
+      });
+
+      // Wait for debounced updates
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 350));
+      });
+
+      // Try to run the tool
+      const runButton = screen.getByRole("button", { name: /run tool/i });
+      await act(async () => {
+        fireEvent.click(runButton);
+      });
+
+      // Tool should have been called successfully
+      expect(mockCallTool).toHaveBeenCalled();
+    });
+
+    it("should handle mixed valid and invalid JSON parameters", async () => {
+      const mockCallTool = jest.fn();
+      renderToolsTab({
+        tools: [toolWithJsonParams],
+        selectedTool: toolWithJsonParams,
+        callTool: mockCallTool,
+      });
+
+      const textareas = screen.getAllByRole("textbox");
+
+      // Enter invalid JSON that contains both valid and invalid parts
+      fireEvent.change(textareas[0], {
+        target: {
+          value:
+            '{ "config": { "setting": "value" }, "data": ["unclosed array" }',
+        },
+      });
+
+      // Try to run the tool
+      const runButton = screen.getByRole("button", { name: /run tool/i });
+      await act(async () => {
+        fireEvent.click(runButton);
+      });
+
+      // Tool should not have been called due to validation failure
+      expect(mockCallTool).not.toHaveBeenCalled();
+    });
+
+    it("should work with tools that have no JSON parameters", async () => {
+      const mockCallTool = jest.fn();
+      const simpleToolWithStringParam: Tool = {
+        name: "simpleTool",
+        description: "Tool with simple parameters",
+        inputSchema: {
+          type: "object" as const,
+          properties: {
+            message: { type: "string" as const },
+            count: { type: "number" as const },
+          },
+        },
+      };
+
+      renderToolsTab({
+        tools: [simpleToolWithStringParam],
+        selectedTool: simpleToolWithStringParam,
+        callTool: mockCallTool,
+      });
+
+      // Fill in the simple parameters
+      const messageInput = screen.getByRole("textbox");
+      const countInput = screen.getByRole("spinbutton");
+
+      fireEvent.change(messageInput, { target: { value: "test message" } });
+      fireEvent.change(countInput, { target: { value: "5" } });
+
+      // Run the tool
+      const runButton = screen.getByRole("button", { name: /run tool/i });
+      await act(async () => {
+        fireEvent.click(runButton);
+      });
+
+      // Tool should have been called successfully (no JSON validation needed)
+      expect(mockCallTool).toHaveBeenCalledWith(
+        simpleToolWithStringParam.name,
+        {
+          message: "test message",
+          count: 5,
+        },
+      );
+    });
+
+    it("should handle empty JSON parameters correctly", async () => {
+      const mockCallTool = jest.fn();
+      renderToolsTab({
+        tools: [toolWithJsonParams],
+        selectedTool: toolWithJsonParams,
+        callTool: mockCallTool,
+      });
+
+      const textareas = screen.getAllByRole("textbox");
+
+      // Clear the textarea (empty JSON should be valid)
+      fireEvent.change(textareas[0], { target: { value: "" } });
+
+      // Try to run the tool
+      const runButton = screen.getByRole("button", { name: /run tool/i });
+      await act(async () => {
+        fireEvent.click(runButton);
+      });
+
+      // Tool should have been called (empty JSON is considered valid)
+      expect(mockCallTool).toHaveBeenCalled();
+    });
+  });
 });