feat(frontend): add JsonTextField component for complex nested form data (#11752)

### Changes 🏗️

- Added a new `JsonTextField` component to handle complex nested JSON
types (objects/arrays inside other objects/arrays)
- Created helper functions for JSON parsing, validation, and formatting
- Implemented `useJsonTextField` hook to manage state and validation
- Enhanced `generateUiSchemaForCustomFields` to detect nested complex
types and render them as JSON text fields
- Updated `TextInputExpanderModal` to support JSON-specific styling
- Added `JSON_TEXT_FIELD_ID` constant to custom registry for field
identification

This change improves the user experience by preventing deeply nested
form UIs. Instead, complex nested structures are presented as editable
JSON text fields with proper validation and formatting.

### Before

![Screenshot 2026-01-12 at
1.07.54 PM.png](https://app.graphite.com/user-attachments/assets/dc2b96cc-562a-4e6b-8278-76de941e3bd9.png)

### After

![Screenshot 2026-01-12 at
12.35.19 PM.png](https://app.graphite.com/user-attachments/assets/ea0028a5-c119-43c3-8100-b103484e0b54.png)

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Test with simple JSON objects in forms
  - [x] Test with nested arrays and objects
  - [x] Test with anyOf/oneOf schemas containing complex types
  - [x] Test the expander modal with JSON content

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* New JSON text field with expandable modal editor, inline validation,
and helpful placeholders.
* Complex nested objects/arrays now render as JSON fields to simplify
editing.
* Modal editor uses monospace, smaller text when editing JSON for
improved readability.

* **Chores**
* Added a non-functional runtime debug log (no user-facing behavior
changes).

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

autogpt_platform/frontend/src/components/renderers/InputRenderer/FormRenderer.tsx

@@ -30,6 +30,8 @@ export const FormRenderer = ({
     return generateUiSchemaForCustomFields(preprocessedSchema, uiSchema);
   }, [preprocessedSchema, uiSchema]);
 
+  console.log("preprocessedSchema", preprocessedSchema);
+
   return (
     <div className={"mb-6 mt-4"}>
       <Form

autogpt_platform/frontend/src/components/renderers/InputRenderer/base/standard/widgets/TextInput/TextInputExpanderModal.tsx

@@ -17,6 +17,7 @@ interface InputExpanderModalProps {
   defaultValue: string;
   description?: string;
   placeholder?: string;
+  inputType?: "text" | "json";
 }
 
 export const InputExpanderModal: FC<InputExpanderModalProps> = ({
@@ -27,6 +28,7 @@ export const InputExpanderModal: FC<InputExpanderModalProps> = ({
   defaultValue,
   description,
   placeholder,
+  inputType = "text",
 }) => {
   const [tempValue, setTempValue] = useState(defaultValue);
   const [isCopied, setIsCopied] = useState(false);
@@ -78,7 +80,10 @@ export const InputExpanderModal: FC<InputExpanderModalProps> = ({
             hideLabel
             id="input-expander-modal"
             value={tempValue}
-            className="!min-h-[300px] rounded-2xlarge"
+            className={cn(
+              "!min-h-[300px] rounded-2xlarge",
+              inputType === "json" && "font-mono text-sm",
+            )}
             onChange={(e) => setTempValue(e.target.value)}
             placeholder={placeholder || "Enter text..."}
             autoFocus

autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/JsonTextField/JsonTextField.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { FieldProps, getTemplate, getUiOptions } from "@rjsf/utils";
+import { Input } from "@/components/atoms/Input/Input";
+import { Button } from "@/components/atoms/Button/Button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/atoms/Tooltip/BaseTooltip";
+import { ArrowsOutIcon } from "@phosphor-icons/react";
+import { InputExpanderModal } from "../../base/standard/widgets/TextInput/TextInputExpanderModal";
+import { getHandleId, updateUiOption } from "../../helpers";
+import { useJsonTextField } from "./useJsonTextField";
+import { getPlaceholder } from "./helpers";
+
+export const JsonTextField = (props: FieldProps) => {
+  const {
+    formData,
+    onChange,
+    schema,
+    registry,
+    uiSchema,
+    required,
+    name,
+    fieldPathId,
+  } = props;
+
+  const uiOptions = getUiOptions(uiSchema);
+
+  const TitleFieldTemplate = getTemplate(
+    "TitleFieldTemplate",
+    registry,
+    uiOptions,
+  );
+
+  const fieldId = fieldPathId?.$id ?? props.id ?? "json-field";
+
+  const handleId = getHandleId({
+    uiOptions,
+    id: fieldId,
+    schema: schema,
+  });
+
+  const updatedUiSchema = updateUiOption(uiSchema, {
+    handleId: handleId,
+  });
+
+  const {
+    textValue,
+    isModalOpen,
+    handleChange,
+    handleModalOpen,
+    handleModalClose,
+    handleModalSave,
+  } = useJsonTextField({
+    formData,
+    onChange,
+    path: fieldPathId?.path,
+  });
+
+  const placeholder = getPlaceholder(schema);
+  const title = schema.title || name || "JSON Value";
+
+  return (
+    <div className="flex flex-col gap-2">
+      <TitleFieldTemplate
+        id={fieldId}
+        title={title}
+        required={required}
+        schema={schema}
+        uiSchema={updatedUiSchema}
+        registry={registry}
+      />
+      <div className="nodrag relative flex items-center gap-2">
+        <Input
+          id={fieldId}
+          hideLabel={true}
+          type="textarea"
+          label=""
+          size="small"
+          wrapperClassName="mb-0 flex-1 "
+          value={textValue}
+          onChange={handleChange}
+          placeholder={placeholder}
+          required={required}
+          disabled={props.disabled}
+          className="min-h-[60px] pr-8 font-mono text-xs"
+        />
+
+        <Tooltip delayDuration={0}>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleModalOpen}
+              type="button"
+              className="p-1"
+            >
+              <ArrowsOutIcon className="size-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Expand input</TooltipContent>
+        </Tooltip>
+      </div>
+      {schema.description && (
+        <span className="text-xs text-gray-500">{schema.description}</span>
+      )}
+
+      <InputExpanderModal
+        isOpen={isModalOpen}
+        onClose={handleModalClose}
+        onSave={handleModalSave}
+        title={`Edit ${title}`}
+        description={schema.description || "Enter valid JSON"}
+        defaultValue={textValue}
+        placeholder={placeholder}
+        inputType="json"
+      />
+    </div>
+  );
+};
+
+export default JsonTextField;

autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/JsonTextField/helpers.ts

@@ -0,0 +1,67 @@
+import { RJSFSchema } from "@rjsf/utils";
+
+/**
+ * Converts form data to a JSON string for display
+ * @param formData - The data to stringify
+ * @returns JSON string or empty string if data is null/undefined
+ */
+export function stringifyFormData(formData: unknown): string {
+  if (formData === undefined || formData === null) {
+    return "";
+  }
+  try {
+    return JSON.stringify(formData, null, 2);
+  } catch {
+    return "";
+  }
+}
+
+/**
+ * Parses a JSON string into an object/array
+ * @param value - The JSON string to parse
+ * @returns Parsed value or undefined if parsing fails or empty
+ */
+export function parseJsonValue(value: string): unknown | undefined {
+  const trimmed = value.trim();
+  if (trimmed === "") {
+    return undefined;
+  }
+
+  try {
+    return JSON.parse(trimmed);
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Gets the appropriate placeholder text based on schema type
+ * @param schema - The JSON schema
+ * @returns Placeholder string
+ */
+export function getPlaceholder(schema: RJSFSchema): string {
+  if (schema.type === "array") {
+    return '["item1", "item2"] or [{"key": "value"}]';
+  }
+  if (schema.type === "object") {
+    return '{"key": "value"}';
+  }
+  return "Enter JSON value...";
+}
+
+/**
+ * Checks if a JSON string is valid
+ * @param value - The JSON string to validate
+ * @returns true if valid JSON, false otherwise
+ */
+export function isValidJson(value: string): boolean {
+  if (value.trim() === "") {
+    return true; // Empty is considered valid (will be undefined)
+  }
+  try {
+    JSON.parse(value);
+    return true;
+  } catch {
+    return false;
+  }
+}

autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/JsonTextField/useJsonTextField.ts

@@ -0,0 +1,107 @@
+import { useState, useEffect, useCallback } from "react";
+import { FieldProps } from "@rjsf/utils";
+import { stringifyFormData, parseJsonValue, isValidJson } from "./helpers";
+
+type FieldOnChange = FieldProps["onChange"];
+type FieldPathId = FieldProps["fieldPathId"];
+
+interface UseJsonTextFieldOptions {
+  formData: unknown;
+  onChange: FieldOnChange;
+  path?: FieldPathId["path"];
+}
+
+interface UseJsonTextFieldReturn {
+  textValue: string;
+  isModalOpen: boolean;
+  hasError: boolean;
+  handleChange: (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => void;
+  handleModalOpen: () => void;
+  handleModalClose: () => void;
+  handleModalSave: (value: string) => void;
+}
+
+/**
+ * Custom hook for managing JSON text field state and handlers
+ */
+export function useJsonTextField({
+  formData,
+  onChange,
+  path,
+}: UseJsonTextFieldOptions): UseJsonTextFieldReturn {
+  const [textValue, setTextValue] = useState(() => stringifyFormData(formData));
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [hasError, setHasError] = useState(false);
+
+  // Update text value when formData changes externally
+  useEffect(() => {
+    const newValue = stringifyFormData(formData);
+    setTextValue(newValue);
+    setHasError(false);
+  }, [formData]);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      const value = e.target.value;
+      setTextValue(value);
+
+      // Validate JSON and update error state
+      const valid = isValidJson(value);
+      setHasError(!valid);
+
+      // Try to parse and update formData
+      if (value.trim() === "") {
+        onChange(undefined, path ?? []);
+        return;
+      }
+
+      const parsed = parseJsonValue(value);
+      if (parsed !== undefined) {
+        onChange(parsed, path ?? []);
+      }
+    },
+    [onChange, path],
+  );
+
+  const handleModalOpen = useCallback(() => {
+    setIsModalOpen(true);
+  }, []);
+
+  const handleModalClose = useCallback(() => {
+    setIsModalOpen(false);
+  }, []);
+
+  const handleModalSave = useCallback(
+    (value: string) => {
+      setTextValue(value);
+      setIsModalOpen(false);
+
+      // Validate and update
+      const valid = isValidJson(value);
+      setHasError(!valid);
+
+      if (value.trim() === "") {
+        onChange(undefined, path ?? []);
+        return;
+      }
+
+      const parsed = parseJsonValue(value);
+      if (parsed !== undefined) {
+        onChange(parsed, path ?? []);
+      }
+    },
+    [onChange, path],
+  );
+
+  return {
+    textValue,
+    isModalOpen,
+    hasError,
+    handleChange,
+    handleModalOpen,
+    handleModalClose,
+    handleModalSave,
+  };
+}

autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/custom-registry.ts

@@ -1,6 +1,7 @@
 import { FieldProps, RJSFSchema, RegistryFieldsType } from "@rjsf/utils";
 import { CredentialsField } from "./CredentialField/CredentialField";
 import { GoogleDrivePickerField } from "./GoogleDrivePickerField/GoogleDrivePickerField";
+import { JsonTextField } from "./JsonTextField/JsonTextField";
 import { MultiSelectField } from "./MultiSelectField/MultiSelectField";
 import { isMultiSelectSchema } from "../utils/schema-utils";
 import { TableField } from "./TableField/TableField";
@@ -11,6 +12,9 @@ export interface CustomFieldDefinition {
   component: (props: FieldProps<any, RJSFSchema, any>) => JSX.Element | null;
 }
 
+/** Field ID for JsonTextField - used to render nested complex types as text input */
+export const JSON_TEXT_FIELD_ID = "custom/json_text_field";
+
 export const CUSTOM_FIELDS: CustomFieldDefinition[] = [
   {
     id: "custom/credential_field",
@@ -33,6 +37,12 @@ export const CUSTOM_FIELDS: CustomFieldDefinition[] = [
     },
     component: GoogleDrivePickerField,
   },
+  {
+    id: "custom/json_text_field",
+    // Not matched by schema - assigned via uiSchema for nested complex types
+    matcher: () => false,
+    component: JsonTextField,
+  },
   {
     id: "custom/multi_select_field",
     matcher: isMultiSelectSchema,

autogpt_platform/frontend/src/components/renderers/InputRenderer/utils/generate-ui-schema.ts

@@ -1,19 +1,46 @@
 import { RJSFSchema, UiSchema } from "@rjsf/utils";
-import { findCustomFieldId } from "../custom/custom-registry";
+import {
+  findCustomFieldId,
+  JSON_TEXT_FIELD_ID,
+} from "../custom/custom-registry";
+
+function isComplexType(schema: RJSFSchema): boolean {
+  return schema.type === "object" || schema.type === "array";
+}
+
+function hasComplexAnyOfOptions(schema: RJSFSchema): boolean {
+  const options = schema.anyOf || schema.oneOf;
+  if (!Array.isArray(options)) return false;
+  return options.some(
+    (opt: any) =>
+      opt &&
+      typeof opt === "object" &&
+      (opt.type === "object" || opt.type === "array"),
+  );
+}
 
 /**
  * Generates uiSchema with ui:field settings for custom fields based on schema matchers.
  * This is the standard RJSF way to route fields to custom components.
+ *
+ * Nested complex types (arrays/objects inside arrays/objects) are rendered as JsonTextField
+ * to avoid deeply nested form UIs. Users can enter raw JSON for these fields.
+ *
+ * @param schema - The JSON schema
+ * @param existingUiSchema - Existing uiSchema to merge with
+ * @param insideComplexType - Whether we're already inside a complex type (object/array)
  */
 export function generateUiSchemaForCustomFields(
   schema: RJSFSchema,
   existingUiSchema: UiSchema = {},
+  insideComplexType: boolean = false,
 ): UiSchema {
   const uiSchema: UiSchema = { ...existingUiSchema };
 
   if (schema.properties) {
     for (const [key, propSchema] of Object.entries(schema.properties)) {
       if (propSchema && typeof propSchema === "object") {
+        // First check for custom field matchers (credentials, google drive, etc.)
         const customFieldId = findCustomFieldId(propSchema);
 
         if (customFieldId) {
@@ -21,8 +48,33 @@ export function generateUiSchemaForCustomFields(
             ...(uiSchema[key] as object),
             "ui:field": customFieldId,
           };
+          // Skip further processing for custom fields
+          continue;
         }
 
+        // Handle nested complex types - render as JsonTextField
+        if (insideComplexType && isComplexType(propSchema as RJSFSchema)) {
+          uiSchema[key] = {
+            ...(uiSchema[key] as object),
+            "ui:field": JSON_TEXT_FIELD_ID,
+          };
+          // Don't recurse further - this field is now a text input
+          continue;
+        }
+
+        // Handle anyOf/oneOf inside complex types
+        if (
+          insideComplexType &&
+          hasComplexAnyOfOptions(propSchema as RJSFSchema)
+        ) {
+          uiSchema[key] = {
+            ...(uiSchema[key] as object),
+            "ui:field": JSON_TEXT_FIELD_ID,
+          };
+          continue;
+        }
+
+        // Recurse into object properties
         if (
           propSchema.type === "object" &&
           propSchema.properties &&
@@ -31,6 +83,7 @@ export function generateUiSchemaForCustomFields(
           const nestedUiSchema = generateUiSchemaForCustomFields(
             propSchema as RJSFSchema,
             (uiSchema[key] as UiSchema) || {},
+            true, // Now inside a complex type
           );
           uiSchema[key] = {
             ...(uiSchema[key] as object),
@@ -38,9 +91,11 @@ export function generateUiSchemaForCustomFields(
           };
         }
 
+        // Handle arrays
         if (propSchema.type === "array" && propSchema.items) {
           const itemsSchema = propSchema.items as RJSFSchema;
           if (itemsSchema && typeof itemsSchema === "object") {
+            // Check for custom field on array items
             const itemsCustomFieldId = findCustomFieldId(itemsSchema);
             if (itemsCustomFieldId) {
               uiSchema[key] = {
@@ -49,10 +104,28 @@ export function generateUiSchemaForCustomFields(
                   "ui:field": itemsCustomFieldId,
                 },
               };
+            } else if (isComplexType(itemsSchema)) {
+              // Array items that are complex types become JsonTextField
+              uiSchema[key] = {
+                ...(uiSchema[key] as object),
+                items: {
+                  "ui:field": JSON_TEXT_FIELD_ID,
+                },
+              };
+            } else if (hasComplexAnyOfOptions(itemsSchema)) {
+              // Array items with anyOf containing complex types become JsonTextField
+              uiSchema[key] = {
+                ...(uiSchema[key] as object),
+                items: {
+                  "ui:field": JSON_TEXT_FIELD_ID,
+                },
+              };
             } else if (itemsSchema.properties) {
+              // Recurse into object items (but they're now inside a complex type)
               const itemsUiSchema = generateUiSchemaForCustomFields(
                 itemsSchema,
                 ((uiSchema[key] as UiSchema)?.items as UiSchema) || {},
+                true, // Inside complex type (array)
               );
               if (Object.keys(itemsUiSchema).length > 0) {
                 uiSchema[key] = {
@@ -63,6 +136,61 @@ export function generateUiSchemaForCustomFields(
             }
           }
         }
+
+        // Handle anyOf/oneOf at root level - process complex options
+        if (!insideComplexType) {
+          const anyOfOptions = propSchema.anyOf || propSchema.oneOf;
+
+          if (Array.isArray(anyOfOptions)) {
+            for (let i = 0; i < anyOfOptions.length; i++) {
+              const option = anyOfOptions[i] as RJSFSchema;
+              if (option && typeof option === "object") {
+                // Handle anyOf array options with complex items
+                if (option.type === "array" && option.items) {
+                  const itemsSchema = option.items as RJSFSchema;
+                  if (itemsSchema && typeof itemsSchema === "object") {
+                    // Array items that are complex types become JsonTextField
+                    if (isComplexType(itemsSchema)) {
+                      uiSchema[key] = {
+                        ...(uiSchema[key] as object),
+                        items: {
+                          "ui:field": JSON_TEXT_FIELD_ID,
+                        },
+                      };
+                    } else if (hasComplexAnyOfOptions(itemsSchema)) {
+                      uiSchema[key] = {
+                        ...(uiSchema[key] as object),
+                        items: {
+                          "ui:field": JSON_TEXT_FIELD_ID,
+                        },
+                      };
+                    }
+                  }
+                }
+
+                // Recurse into anyOf object options with properties
+                if (
+                  option.type === "object" &&
+                  option.properties &&
+                  typeof option.properties === "object"
+                ) {
+                  const optionUiSchema = generateUiSchemaForCustomFields(
+                    option,
+                    {},
+                    true, // Inside complex type (anyOf object option)
+                  );
+                  if (Object.keys(optionUiSchema).length > 0) {
+                    // Store under the property key - RJSF will apply it
+                    uiSchema[key] = {
+                      ...(uiSchema[key] as object),
+                      ...optionUiSchema,
+                    };
+                  }
+                }
+              }
+            }
+          }
+        }
       }
     }
   }