diff --git a/src/components/schema-form/SchemaForm.tsx b/src/components/schema-form/SchemaForm.tsx
new file mode 100644
index 0000000000..9e57d1130f
--- /dev/null
+++ b/src/components/schema-form/SchemaForm.tsx
@@ -0,0 +1,368 @@
+/**
+ * SchemaForm.tsx
+ * Main component that renders a form automatically
+ * from a JSON Schema definition.
+ *
+ * Usage:
+ * <SchemaForm
+ *   schema={pluginSchema}
+ *   onSubmit={(values) => console.log(values)}
+ * />
+ */
+
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import {
+  Box,
+  Button,
+  Group,
+  Switch,
+  Select,
+  TextInput,
+  NumberInput,
+  Textarea,
+  PasswordInput,
+  JsonInput,
+  TagsInput,
+  Text,
+  Stack,
+  Paper,
+  Title,
+  Alert,
+} from '@mantine/core';
+import Ajv from 'ajv';
+
+import { parseSchema, type JSONSchema, type ParsedField } from './schemaParser';
+import { getWidget, getValidationRules } from './widgetMapper';
+
+// ── AJV setup ────────────────────────────────────────────────────────────────
+const ajv = new Ajv({ allErrors: true });
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+interface SchemaFormProps {
+  // The JSON Schema to render
+  schema: JSONSchema;
+  // Called when form is submitted with valid data
+  onSubmit: (values: Record<string, unknown>) => void;
+  // Optional initial values
+  defaultValues?: Record<string, unknown>;
+  // Optional submit button label
+  submitLabel?: string;
+}
+
+// ── Main Component ────────────────────────────────────────────────────────────
+export const SchemaForm = ({
+  schema,
+  onSubmit,
+  defaultValues = {},
+  submitLabel = 'Save',
+}: SchemaFormProps) => {
+  const [ajvErrors, setAjvErrors] = useState<string[]>([]);
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useForm({ defaultValues });
+
+  // Parse schema into fields
+  const fields = parseSchema(schema, schema.required || []);
+
+  // Handle form submission with AJV validation
+  const onFormSubmit = (values: Record<string, unknown>) => {
+    const validate = ajv.compile(schema);
+    const valid = validate(values);
+
+    if (!valid && validate.errors) {
+      const errorMessages = validate.errors.map(
+        (e) => `${e.instancePath || 'Field'} ${e.message}`
+      );
+      setAjvErrors(errorMessages);
+      return;
+    }
+
+    setAjvErrors([]);
+    onSubmit(values);
+  };
+
+  return (
+    <Box component="form" onSubmit={handleSubmit(onFormSubmit)}>
+      <Stack gap="md">
+        {/* AJV validation errors */}
+        {ajvErrors.length > 0 && (
+          <Alert color="red" title="Validation Errors">
+            {ajvErrors.map((err, i) => (
+              <Text key={i} size="sm">{err}</Text>
+            ))}
+          </Alert>
+        )}
+
+        {/* Render each field */}
+        {fields.map((field) => (
+          <FieldRenderer
+            key={field.name}
+            field={field}
+            register={register}
+            errors={errors}
+            setValue={setValue}
+            watch={watch}
+            schema={schema}
+          />
+        ))}
+
+        {/* Submit button */}
+        <Group justify="flex-end">
+          <Button type="submit">{submitLabel}</Button>
+        </Group>
+      </Stack>
+    </Box>
+  );
+};
+
+// ── Field Renderer ────────────────────────────────────────────────────────────
+interface FieldRendererProps {
+  field: ParsedField;
+  register: ReturnType<typeof useForm>['register'];
+  errors: ReturnType<typeof useForm>['formState']['errors'];
+  setValue: ReturnType<typeof useForm>['setValue'];
+  watch: ReturnType<typeof useForm>['watch'];
+  schema: JSONSchema;
+}
+
+const FieldRenderer = ({
+  field,
+  register,
+  errors,
+  setValue,
+  watch,
+  schema,
+}: FieldRendererProps) => {
+  const widget = getWidget(field);
+  const rules = getValidationRules(field);
+  const error = errors[field.name]?.message as string | undefined;
+  const value = watch(field.name as never);
+
+  // ── OneOf Widget ────────────────────────────────────────────────────────
+  if (widget === 'OneOfInput' && field.oneOf) {
+    return (
+      <OneOfRenderer
+        field={field}
+        register={register}
+        errors={errors}
+        setValue={setValue}
+        watch={watch}
+      />
+    );
+  }
+
+  // ── Nested Object ───────────────────────────────────────────────────────
+  if (field.type === 'object' && field.fields && field.fields.length > 0) {
+    return (
+      <Paper withBorder p="md" radius="md">
+        <Title order={5} mb="sm">{field.label}</Title>
+        {field.description && (
+          <Text size="xs" c="dimmed" mb="sm">{field.description}</Text>
+        )}
+        <Stack gap="sm">
+          {field.fields.map((subField) => (
+            <FieldRenderer
+              key={`${field.name}.${subField.name}`}
+              field={{ ...subField, name: `${field.name}.${subField.name}` }}
+              register={register}
+              errors={errors}
+              setValue={setValue}
+              watch={watch}
+              schema={schema}
+            />
+          ))}
+        </Stack>
+      </Paper>
+    );
+  }
+
+  // ── Switch (boolean) ────────────────────────────────────────────────────
+  if (widget === 'Switch') {
+    return (
+      <Switch
+        label={field.label}
+        description={field.description}
+        checked={!!value}
+        onChange={(e) => setValue(field.name as never, e.currentTarget.checked)}
+        error={error}
+      />
+    );
+  }
+
+  // ── Select (enum) ───────────────────────────────────────────────────────
+  if (widget === 'Select') {
+    return (
+      <Select
+        label={field.label}
+        description={field.description}
+        data={field.options || []}
+        value={value as string}
+        onChange={(val) => setValue(field.name as never, val)}
+        error={error}
+        required={field.required}
+        placeholder={`Select ${field.label}`}
+      />
+    );
+  }
+
+  // ── Number Input ────────────────────────────────────────────────────────
+  if (widget === 'NumberInput') {
+    return (
+      <NumberInput
+        label={field.label}
+        description={field.description}
+        value={value as number}
+        onChange={(val) => setValue(field.name as never, val)}
+        min={field.minimum}
+        max={field.maximum}
+        error={error}
+        required={field.required}
+      />
+    );
+  }
+
+  // ── Tags Input (array) ──────────────────────────────────────────────────
+  if (widget === 'TagInput') {
+    return (
+      <TagsInput
+        label={field.label}
+        description={field.description}
+        value={(value as string[]) || []}
+        onChange={(val) => setValue(field.name as never, val)}
+        error={error}
+        required={field.required}
+        placeholder={`Add ${field.label}`}
+      />
+    );
+  }
+
+  // ── JSON Input (object) ─────────────────────────────────────────────────
+  if (widget === 'JsonInput') {
+    return (
+      <JsonInput
+        label={field.label}
+        description={field.description}
+        value={value ? JSON.stringify(value, null, 2) : ''}
+        onChange={(val) => {
+          try {
+            setValue(field.name as never, JSON.parse(val));
+          } catch {
+            // invalid JSON — ignore
+          }
+        }}
+        error={error}
+        required={field.required}
+        formatOnBlur
+        autosize
+        minRows={3}
+      />
+    );
+  }
+
+  // ── Password Input ──────────────────────────────────────────────────────
+  if (widget === 'PasswordInput') {
+    return (
+      <PasswordInput
+        label={field.label}
+        description={field.description}
+        error={error}
+        required={field.required}
+        {...register(field.name as never, rules)}
+      />
+    );
+  }
+
+  // ── Textarea ────────────────────────────────────────────────────────────
+  if (widget === 'Textarea') {
+    return (
+      <Textarea
+        label={field.label}
+        description={field.description}
+        error={error}
+        required={field.required}
+        autosize
+        minRows={2}
+        {...register(field.name as never, rules)}
+      />
+    );
+  }
+
+  // ── Default: Text Input ─────────────────────────────────────────────────
+  return (
+    <TextInput
+      label={field.label}
+      description={field.description}
+      error={error}
+      required={field.required}
+      {...register(field.name as never, rules)}
+    />
+  );
+};
+
+// ── OneOf Renderer ────────────────────────────────────────────────────────────
+interface OneOfRendererProps {
+  field: ParsedField;
+  register: ReturnType<typeof useForm>['register'];
+  errors: ReturnType<typeof useForm>['formState']['errors'];
+  setValue: ReturnType<typeof useForm>['setValue'];
+  watch: ReturnType<typeof useForm>['watch'];
+}
+
+const OneOfRenderer = ({
+  field,
+  register,
+  errors,
+  setValue,
+  watch,
+}: OneOfRendererProps) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const options = field.oneOf || [];
+  const selectedSchema = options[selectedIndex]?.schema;
+  const selectedFields = selectedSchema
+    ? parseSchema(selectedSchema, selectedSchema.required || [])
+    : [];
+
+  return (
+    <Paper withBorder p="md" radius="md">
+      <Title order={5} mb="sm">{field.label}</Title>
+      {field.description && (
+        <Text size="xs" c="dimmed" mb="sm">{field.description}</Text>
+      )}
+
+      {/* Dropdown to pick which oneOf option */}
+      <Select
+        label="Select type"
+        data={options.map((opt, i) => ({
+          value: String(i),
+          label: opt.title,
+        }))}
+        value={String(selectedIndex)}
+        onChange={(val) => setSelectedIndex(Number(val))}
+        mb="md"
+      />
+
+      {/* Render fields for selected option */}
+      <Stack gap="sm">
+        {selectedFields.map((subField) => (
+          <FieldRenderer
+            key={`${field.name}.${subField.name}`}
+            field={{ ...subField, name: `${field.name}.${subField.name}` }}
+            register={register}
+            errors={errors}
+            setValue={setValue}
+            watch={watch}
+            schema={selectedSchema!}
+          />
+        ))}
+      </Stack>
+    </Paper>
+  );
+};
+
+export default SchemaForm;
\ No newline at end of file
diff --git a/src/components/schema-form/__tests__/schemaParser.test.ts b/src/components/schema-form/__tests__/schemaParser.test.ts
new file mode 100644
index 0000000000..d9a4f933c6
--- /dev/null
+++ b/src/components/schema-form/__tests__/schemaParser.test.ts
@@ -0,0 +1,184 @@
+/**
+ * schemaParser.test.ts
+ * Unit tests for the schema parser utility
+ */
+
+import { parseSchema } from '../schemaParser';
+
+describe('parseSchema', () => {
+
+  // ── Basic Types ────────────────────────────────────────────────────────
+
+  test('parses string field correctly', () => {
+    const schema = {
+      type: 'object',
+      properties: {
+        username: { type: 'string' },
+      },
+    };
+    const fields = parseSchema(schema, []);
+    expect(fields[0].name).toBe('username');
+    expect(fields[0].type).toBe('string');
+  });
+
+  test('parses number field correctly', () => {
+    const schema = {
+      type: 'object',
+      properties: {
+        rate: { type: 'number', minimum: 0, maximum: 100 },
+      },
+    };
+    const fields = parseSchema(schema, []);
+    expect(fields[0].type).toBe('number');
+    expect(fields[0].minimum).toBe(0);
+    expect(fields[0].maximum).toBe(100);
+  });
+
+  test('parses boolean field correctly', () => {
+    const schema = {
+      type: 'object',
+      properties: {
+        enabled: { type: 'boolean' },
+      },
+    };
+    const fields = parseSchema(schema, []);
+    expect(fields[0].type).toBe('boolean');
+  });
+
+  test('parses enum field correctly', () => {
+    const schema = {
+      type: 'object',
+      properties: {
+        key: {
+          type: 'string',
+          enum: ['remote_addr', 'server_addr', 'consumer_name'],
+        },
+      },
+    };
+    const fields = parseSchema(schema, []);
+    expect(fields[0].type).toBe('enum');
+    expect(fields[0].options).toEqual([
+      'remote_addr',
+      'server_addr',
+      'consumer_name',
+    ]);
+  });
+
+  test('parses array field correctly', () => {
+    const schema = {
+      type: 'object',
+      properties: {
+        tags: { type: 'array' },
+      },
+    };
+    const fields = parseSchema(schema, []);
+    expect(fields[0].type).toBe('array');
+  });
+
+  // ── Required Fields ────────────────────────────────────────────────────
+
+  test('marks required fields correctly', () => {
+    const schema = {
+      type: 'object',
+      properties: {
+        username: { type: 'string' },
+        nickname: { type: 'string' },
+      },
+      required: ['username'],
+    };
+    const fields = parseSchema(schema, schema.required);
+    const username = fields.find((f) => f.name === 'username');
+    const nickname = fields.find((f) => f.name === 'nickname');
+    expect(username?.required).toBe(true);
+    expect(nickname?.required).toBe(false);
+  });
+
+  // ── Constraints ────────────────────────────────────────────────────────
+
+  test('parses minLength and maxLength', () => {
+    const schema = {
+      type: 'object',
+      properties: {
+        name: { type: 'string', minLength: 3, maxLength: 50 },
+      },
+    };
+    const fields = parseSchema(schema, []);
+    expect(fields[0].minLength).toBe(3);
+    expect(fields[0].maxLength).toBe(50);
+  });
+
+  test('parses pattern constraint', () => {
+    const schema = {
+      type: 'object',
+      properties: {
+        email: { type: 'string', pattern: '^[a-z]+@[a-z]+\\.com$' },
+      },
+    };
+    const fields = parseSchema(schema, []);
+    expect(fields[0].pattern).toBe('^[a-z]+@[a-z]+\\.com$');
+  });
+
+  // ── Labels ─────────────────────────────────────────────────────────────
+
+  test('formats snake_case name as label', () => {
+    const schema = {
+      type: 'object',
+      properties: {
+        rate_limit: { type: 'number' },
+      },
+    };
+    const fields = parseSchema(schema, []);
+    expect(fields[0].label).toBe('Rate Limit');
+  });
+
+  test('uses title from schema if available', () => {
+    const schema = {
+      type: 'object',
+      properties: {
+        rate: { type: 'number', title: 'Request Rate' },
+      },
+    };
+    const fields = parseSchema(schema, []);
+    expect(fields[0].label).toBe('Request Rate');
+  });
+
+  // ── Empty / Edge Cases ─────────────────────────────────────────────────
+
+  test('returns empty array for empty schema', () => {
+    const fields = parseSchema({}, []);
+    expect(fields).toEqual([]);
+  });
+
+  test('returns empty array when no properties', () => {
+    const schema = { type: 'object' };
+    const fields = parseSchema(schema, []);
+    expect(fields).toEqual([]);
+  });
+
+  // ── Real APISIX Plugin Schema ──────────────────────────────────────────
+
+  test('parses limit-req plugin schema correctly', () => {
+    const schema = {
+      type: 'object',
+      properties: {
+        rate: { type: 'number', minimum: 0 },
+        burst: { type: 'number', minimum: 0 },
+        key: {
+          type: 'string',
+          enum: ['remote_addr', 'server_addr', 'consumer_name'],
+        },
+        rejected_code: { type: 'integer', minimum: 200, maximum: 599 },
+      },
+      required: ['rate', 'burst', 'key'],
+    };
+    const fields = parseSchema(schema, schema.required);
+
+    expect(fields).toHaveLength(4);
+    expect(fields.find((f) => f.name === 'rate')?.required).toBe(true);
+    expect(fields.find((f) => f.name === 'burst')?.required).toBe(true);
+    expect(fields.find((f) => f.name === 'key')?.type).toBe('enum');
+    expect(
+      fields.find((f) => f.name === 'rejected_code')?.required
+    ).toBe(false);
+  });
+});
\ No newline at end of file
diff --git a/src/components/schema-form/__tests__/widgetMapper.test.ts b/src/components/schema-form/__tests__/widgetMapper.test.ts
new file mode 100644
index 0000000000..3aefb00874
--- /dev/null
+++ b/src/components/schema-form/__tests__/widgetMapper.test.ts
@@ -0,0 +1,161 @@
+/**
+ * widgetMapper.test.ts
+ * Unit tests for the widget mapper utility
+ */
+
+import { getWidget, getValidationRules } from '../widgetMapper';
+import { type ParsedField } from '../schemaParser';
+
+// ── Helper to create a mock field ─────────────────────────────────────────────
+const mockField = (overrides: Partial<ParsedField>): ParsedField => ({
+  name: 'test',
+  label: 'Test',
+  type: 'string',
+  required: false,
+  ...overrides,
+});
+
+describe('getWidget', () => {
+
+  // ── Basic Type Mappings ────────────────────────────────────────────────
+
+  test('maps string type to TextInput', () => {
+    const field = mockField({ type: 'string' });
+    expect(getWidget(field)).toBe('TextInput');
+  });
+
+  test('maps number type to NumberInput', () => {
+    const field = mockField({ type: 'number' });
+    expect(getWidget(field)).toBe('NumberInput');
+  });
+
+  test('maps integer type to NumberInput', () => {
+    const field = mockField({ type: 'integer' });
+    expect(getWidget(field)).toBe('NumberInput');
+  });
+
+  test('maps boolean type to Switch', () => {
+    const field = mockField({ type: 'boolean' });
+    expect(getWidget(field)).toBe('Switch');
+  });
+
+  test('maps enum type to Select', () => {
+    const field = mockField({
+      type: 'enum',
+      options: ['a', 'b', 'c'],
+    });
+    expect(getWidget(field)).toBe('Select');
+  });
+
+  test('maps array type to TagInput', () => {
+    const field = mockField({ type: 'array' });
+    expect(getWidget(field)).toBe('TagInput');
+  });
+
+  test('maps object type to JsonInput', () => {
+    const field = mockField({ type: 'object' });
+    expect(getWidget(field)).toBe('JsonInput');
+  });
+
+  // ── Special Cases ──────────────────────────────────────────────────────
+
+  test('maps password field to PasswordInput', () => {
+    const field = mockField({ name: 'password', type: 'string' });
+    expect(getWidget(field)).toBe('PasswordInput');
+  });
+
+  test('maps secret field to PasswordInput', () => {
+    const field = mockField({ name: 'api_secret', type: 'string' });
+    expect(getWidget(field)).toBe('PasswordInput');
+  });
+
+  test('maps token field to PasswordInput', () => {
+    const field = mockField({ name: 'access_token', type: 'string' });
+    expect(getWidget(field)).toBe('PasswordInput');
+  });
+
+  test('maps oneOf field to OneOfInput', () => {
+    const field = mockField({
+      type: 'object',
+      oneOf: [
+        { title: 'Option A', schema: {} },
+        { title: 'Option B', schema: {} },
+      ],
+    });
+    expect(getWidget(field)).toBe('OneOfInput');
+  });
+
+});
+
+describe('getValidationRules', () => {
+
+  // ── Required ───────────────────────────────────────────────────────────
+
+  test('adds required rule when field is required', () => {
+    const field = mockField({ required: true, label: 'Username' });
+    const rules = getValidationRules(field);
+    expect(rules.required).toBe('Username is required');
+  });
+
+  test('no required rule when field is not required', () => {
+    const field = mockField({ required: false });
+    const rules = getValidationRules(field);
+    expect(rules.required).toBeUndefined();
+  });
+
+  // ── Number Constraints ─────────────────────────────────────────────────
+
+  test('adds min rule for minimum constraint', () => {
+    const field = mockField({ type: 'number', minimum: 0 });
+    const rules = getValidationRules(field);
+    expect((rules.min as { value: number }).value).toBe(0);
+  });
+
+  test('adds max rule for maximum constraint', () => {
+    const field = mockField({ type: 'number', maximum: 100 });
+    const rules = getValidationRules(field);
+    expect((rules.max as { value: number }).value).toBe(100);
+  });
+
+  // ── String Constraints ─────────────────────────────────────────────────
+
+  test('adds minLength rule', () => {
+    const field = mockField({ type: 'string', minLength: 3 });
+    const rules = getValidationRules(field);
+    expect((rules.minLength as { value: number }).value).toBe(3);
+  });
+
+  test('adds maxLength rule', () => {
+    const field = mockField({ type: 'string', maxLength: 50 });
+    const rules = getValidationRules(field);
+    expect((rules.maxLength as { value: number }).value).toBe(50);
+  });
+
+  test('adds pattern rule', () => {
+    const field = mockField({
+      type: 'string',
+      pattern: '^[a-z]+$',
+    });
+    const rules = getValidationRules(field);
+    expect(rules.pattern).toBeDefined();
+  });
+
+  // ── Error Messages ─────────────────────────────────────────────────────
+
+  test('shows correct error message for min', () => {
+    const field = mockField({ type: 'number', minimum: 5 });
+    const rules = getValidationRules(field);
+    expect((rules.min as { message: string }).message).toBe(
+      'Minimum value is 5'
+    );
+  });
+
+  test('shows correct error message for minLength', () => {
+    const field = mockField({ type: 'string', minLength: 3 });
+    const rules = getValidationRules(field);
+    expect((rules.minLength as { message: string }).message).toBe(
+      'Minimum length is 3'
+    );
+  });
+
+});
\ No newline at end of file
diff --git a/src/components/schema-form/schemaParser.ts b/src/components/schema-form/schemaParser.ts
new file mode 100644
index 0000000000..df6fbfe61e
--- /dev/null
+++ b/src/components/schema-form/schemaParser.ts
@@ -0,0 +1,172 @@
+/**
+ * schemaParser.ts
+ * Parses a JSON Schema object into a flat list of fields
+ * that SchemaForm can render.
+ */
+
+export type FieldType =
+  | 'string'
+  | 'number'
+  | 'integer'
+  | 'boolean'
+  | 'object'
+  | 'array'
+  | 'enum';
+
+export interface ParsedField {
+  // unique key for the field
+  name: string;
+  // display label
+  label: string;
+  // field type
+  type: FieldType;
+  // is this field required?
+  required: boolean;
+  // default value if any
+  defaultValue?: unknown;
+  // enum options if type is enum
+  options?: string[];
+  // min/max for numbers
+  minimum?: number;
+  maximum?: number;
+  // minLength/maxLength for strings
+  minLength?: number;
+  maxLength?: number;
+  // regex pattern for strings
+  pattern?: string;
+  // nested fields for objects
+  fields?: ParsedField[];
+  // description/help text
+  description?: string;
+  // oneOf options
+  oneOf?: { title: string; schema: JSONSchema }[];
+  // raw schema for complex types
+  schema?: JSONSchema;
+}
+
+export interface JSONSchema {
+  type?: string | string[];
+  properties?: Record<string, JSONSchema>;
+  required?: string[];
+  enum?: unknown[];
+  default?: unknown;
+  minimum?: number;
+  maximum?: number;
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
+  description?: string;
+  title?: string;
+  oneOf?: JSONSchema[];
+  anyOf?: JSONSchema[];
+  items?: JSONSchema;
+  dependencies?: Record<string, JSONSchema>;
+  if?: JSONSchema;
+  then?: JSONSchema;
+  else?: JSONSchema;
+}
+
+/**
+ * Main parser function
+ * Takes a JSON Schema and returns a list of ParsedFields
+ */
+export function parseSchema(
+  schema: JSONSchema,
+  requiredFields: string[] = []
+): ParsedField[] {
+  if (!schema || !schema.properties) return [];
+
+  const fields: ParsedField[] = [];
+
+  for (const [name, fieldSchema] of Object.entries(schema.properties)) {
+    const field = parseField(name, fieldSchema, requiredFields);
+    if (field) fields.push(field);
+  }
+
+  return fields;
+}
+
+/**
+ * Parses a single field from its schema definition
+ */
+function parseField(
+  name: string,
+  schema: JSONSchema,
+  requiredFields: string[]
+): ParsedField {
+  const required = requiredFields.includes(name);
+  const label = schema.title || formatLabel(name);
+
+  // enum field
+  if (schema.enum) {
+    return {
+      name,
+      label,
+      type: 'enum',
+      required,
+      options: schema.enum.map(String),
+      defaultValue: schema.default,
+      description: schema.description,
+    };
+  }
+
+  // oneOf field
+  if (schema.oneOf) {
+    return {
+      name,
+      label,
+      type: 'object',
+      required,
+      description: schema.description,
+      oneOf: schema.oneOf.map((s, i) => ({
+        title: s.title || `Option ${i + 1}`,
+        schema: s,
+      })),
+      schema,
+    };
+  }
+
+  const type = Array.isArray(schema.type)
+    ? (schema.type[0] as FieldType)
+    : (schema.type as FieldType) || 'string';
+
+  // nested object
+  if (type === 'object' && schema.properties) {
+    return {
+      name,
+      label,
+      type: 'object',
+      required,
+      description: schema.description,
+      fields: parseSchema(schema, schema.required || []),
+      schema,
+    };
+  }
+
+  return {
+    name,
+    label,
+    type,
+    required,
+    defaultValue: schema.default,
+    minimum: schema.minimum,
+    maximum: schema.maximum,
+    minLength: schema.minLength,
+    maxLength: schema.maxLength,
+    pattern: schema.pattern,
+    description: schema.description,
+    schema,
+  };
+}
+
+/**
+ * Converts snake_case or camelCase to Title Case label
+ * e.g. "rate_limit" → "Rate Limit"
+ */
+function formatLabel(name: string): string {
+  return name
+    .replace(/_/g, ' ')
+    .replace(/([A-Z])/g, ' $1')
+    .replace(/^\w/, (c) => c.toUpperCase())
+    .trim();
+}
\ No newline at end of file
diff --git a/src/components/schema-form/widgetMapper.ts b/src/components/schema-form/widgetMapper.ts
new file mode 100644
index 0000000000..7564843793
--- /dev/null
+++ b/src/components/schema-form/widgetMapper.ts
@@ -0,0 +1,126 @@
+/**
+ * widgetMapper.ts
+ * Maps a ParsedField type to the correct
+ * existing form component in the project.
+ */
+
+import { type ParsedField } from './schemaParser';
+
+export type WidgetType =
+  | 'TextInput'
+  | 'NumberInput'
+  | 'Switch'
+  | 'Select'
+  | 'Textarea'
+  | 'JsonInput'
+  | 'TagInput'
+  | 'PasswordInput'
+  | 'OneOfInput';
+
+/**
+ * Main mapper function
+ * Takes a ParsedField and returns which widget to use
+ *
+ * Example:
+ * { type: 'string' }  → 'TextInput'
+ * { type: 'number' }  → 'NumberInput'
+ * { type: 'boolean' } → 'Switch'
+ * { type: 'enum' }    → 'Select'
+ * { type: 'array' }   → 'TagInput'
+ * { type: 'object' }  → 'JsonInput'
+ */
+export function getWidget(field: ParsedField): WidgetType {
+  // oneOf gets its own special widget
+  if (field.oneOf && field.oneOf.length > 0) {
+    return 'OneOfInput';
+  }
+
+  // password format
+  if (
+    field.name.toLowerCase().includes('password') ||
+    field.name.toLowerCase().includes('secret') ||
+    field.name.toLowerCase().includes('token')
+  ) {
+    return 'PasswordInput';
+  }
+
+  switch (field.type) {
+    case 'string':
+      // long text gets textarea
+      if (
+        field.maxLength === undefined ||
+        field.maxLength > 100
+      ) {
+        return 'TextInput';
+      }
+      return 'Textarea';
+
+    case 'number':
+    case 'integer':
+      return 'NumberInput';
+
+    case 'boolean':
+      return 'Switch';
+
+    case 'enum':
+      return 'Select';
+
+    case 'array':
+      return 'TagInput';
+
+    case 'object':
+      return 'JsonInput';
+
+    default:
+      return 'TextInput';
+  }
+}
+
+/**
+ * Returns validation rules for react-hook-form
+ * based on the field schema constraints
+ */
+export function getValidationRules(field: ParsedField) {
+  const rules: Record<string, unknown> = {};
+
+  if (field.required) {
+    rules.required = `${field.label} is required`;
+  }
+
+  if (field.minimum !== undefined) {
+    rules.min = {
+      value: field.minimum,
+      message: `Minimum value is ${field.minimum}`,
+    };
+  }
+
+  if (field.maximum !== undefined) {
+    rules.max = {
+      value: field.maximum,
+      message: `Maximum value is ${field.maximum}`,
+    };
+  }
+
+  if (field.minLength !== undefined) {
+    rules.minLength = {
+      value: field.minLength,
+      message: `Minimum length is ${field.minLength}`,
+    };
+  }
+
+  if (field.maxLength !== undefined) {
+    rules.maxLength = {
+      value: field.maxLength,
+      message: `Maximum length is ${field.maxLength}`,
+    };
+  }
+
+  if (field.pattern) {
+    rules.pattern = {
+      value: new RegExp(field.pattern),
+      message: `Must match pattern: ${field.pattern}`,
+    };
+  }
+
+  return rules;
+}
\ No newline at end of file
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index bb344f0269..6172e82454 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -310,18 +310,18 @@ export interface FileRoutesByFullPath {
   '/ssls/add': typeof SslsAddRoute
   '/stream_routes/add': typeof Stream_routesAddRoute
   '/upstreams/add': typeof UpstreamsAddRoute
-  '/consumer_groups': typeof Consumer_groupsIndexRoute
-  '/consumers': typeof ConsumersIndexRoute
-  '/global_rules': typeof Global_rulesIndexRoute
-  '/plugin_configs': typeof Plugin_configsIndexRoute
-  '/plugin_metadata': typeof Plugin_metadataIndexRoute
-  '/protos': typeof ProtosIndexRoute
-  '/routes': typeof RoutesIndexRoute
-  '/secrets': typeof SecretsIndexRoute
-  '/services': typeof ServicesIndexRoute
-  '/ssls': typeof SslsIndexRoute
-  '/stream_routes': typeof Stream_routesIndexRoute
-  '/upstreams': typeof UpstreamsIndexRoute
+  '/consumer_groups/': typeof Consumer_groupsIndexRoute
+  '/consumers/': typeof ConsumersIndexRoute
+  '/global_rules/': typeof Global_rulesIndexRoute
+  '/plugin_configs/': typeof Plugin_configsIndexRoute
+  '/plugin_metadata/': typeof Plugin_metadataIndexRoute
+  '/protos/': typeof ProtosIndexRoute
+  '/routes/': typeof RoutesIndexRoute
+  '/secrets/': typeof SecretsIndexRoute
+  '/services/': typeof ServicesIndexRoute
+  '/ssls/': typeof SslsIndexRoute
+  '/stream_routes/': typeof Stream_routesIndexRoute
+  '/upstreams/': typeof UpstreamsIndexRoute
   '/consumer_groups/detail/$id': typeof Consumer_groupsDetailIdRoute
   '/consumers/detail/$username': typeof ConsumersDetailUsernameRouteWithChildren
   '/global_rules/detail/$id': typeof Global_rulesDetailIdRoute
@@ -338,9 +338,9 @@ export interface FileRoutesByFullPath {
   '/consumers/detail/$username/credentials/add': typeof ConsumersDetailUsernameCredentialsAddRoute
   '/services/detail/$id/routes/add': typeof ServicesDetailIdRoutesAddRoute
   '/services/detail/$id/stream_routes/add': typeof ServicesDetailIdStream_routesAddRoute
-  '/consumers/detail/$username/credentials': typeof ConsumersDetailUsernameCredentialsIndexRoute
-  '/services/detail/$id/routes': typeof ServicesDetailIdRoutesIndexRoute
-  '/services/detail/$id/stream_routes': typeof ServicesDetailIdStream_routesIndexRoute
+  '/consumers/detail/$username/credentials/': typeof ConsumersDetailUsernameCredentialsIndexRoute
+  '/services/detail/$id/routes/': typeof ServicesDetailIdRoutesIndexRoute
+  '/services/detail/$id/stream_routes/': typeof ServicesDetailIdStream_routesIndexRoute
   '/consumers/detail/$username/credentials/detail/$id': typeof ConsumersDetailUsernameCredentialsDetailIdRoute
   '/services/detail/$id/routes/detail/$routeId': typeof ServicesDetailIdRoutesDetailRouteIdRoute
   '/services/detail/$id/stream_routes/detail/$routeId': typeof ServicesDetailIdStream_routesDetailRouteIdRoute
@@ -455,18 +455,18 @@ export interface FileRouteTypes {
     | '/ssls/add'
     | '/stream_routes/add'
     | '/upstreams/add'
-    | '/consumer_groups'
-    | '/consumers'
-    | '/global_rules'
-    | '/plugin_configs'
-    | '/plugin_metadata'
-    | '/protos'
-    | '/routes'
-    | '/secrets'
-    | '/services'
-    | '/ssls'
-    | '/stream_routes'
-    | '/upstreams'
+    | '/consumer_groups/'
+    | '/consumers/'
+    | '/global_rules/'
+    | '/plugin_configs/'
+    | '/plugin_metadata/'
+    | '/protos/'
+    | '/routes/'
+    | '/secrets/'
+    | '/services/'
+    | '/ssls/'
+    | '/stream_routes/'
+    | '/upstreams/'
     | '/consumer_groups/detail/$id'
     | '/consumers/detail/$username'
     | '/global_rules/detail/$id'
@@ -483,9 +483,9 @@ export interface FileRouteTypes {
     | '/consumers/detail/$username/credentials/add'
     | '/services/detail/$id/routes/add'
     | '/services/detail/$id/stream_routes/add'
-    | '/consumers/detail/$username/credentials'
-    | '/services/detail/$id/routes'
-    | '/services/detail/$id/stream_routes'
+    | '/consumers/detail/$username/credentials/'
+    | '/services/detail/$id/routes/'
+    | '/services/detail/$id/stream_routes/'
     | '/consumers/detail/$username/credentials/detail/$id'
     | '/services/detail/$id/routes/detail/$routeId'
     | '/services/detail/$id/stream_routes/detail/$routeId'
@@ -635,84 +635,84 @@ declare module '@tanstack/react-router' {
     '/upstreams/': {
       id: '/upstreams/'
       path: '/upstreams'
-      fullPath: '/upstreams'
+      fullPath: '/upstreams/'
       preLoaderRoute: typeof UpstreamsIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/stream_routes/': {
       id: '/stream_routes/'
       path: '/stream_routes'
-      fullPath: '/stream_routes'
+      fullPath: '/stream_routes/'
       preLoaderRoute: typeof Stream_routesIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/ssls/': {
       id: '/ssls/'
       path: '/ssls'
-      fullPath: '/ssls'
+      fullPath: '/ssls/'
       preLoaderRoute: typeof SslsIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/services/': {
       id: '/services/'
       path: '/services'
-      fullPath: '/services'
+      fullPath: '/services/'
       preLoaderRoute: typeof ServicesIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/secrets/': {
       id: '/secrets/'
       path: '/secrets'
-      fullPath: '/secrets'
+      fullPath: '/secrets/'
       preLoaderRoute: typeof SecretsIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/routes/': {
       id: '/routes/'
       path: '/routes'
-      fullPath: '/routes'
+      fullPath: '/routes/'
       preLoaderRoute: typeof RoutesIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/protos/': {
       id: '/protos/'
       path: '/protos'
-      fullPath: '/protos'
+      fullPath: '/protos/'
       preLoaderRoute: typeof ProtosIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/plugin_metadata/': {
       id: '/plugin_metadata/'
       path: '/plugin_metadata'
-      fullPath: '/plugin_metadata'
+      fullPath: '/plugin_metadata/'
       preLoaderRoute: typeof Plugin_metadataIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/plugin_configs/': {
       id: '/plugin_configs/'
       path: '/plugin_configs'
-      fullPath: '/plugin_configs'
+      fullPath: '/plugin_configs/'
       preLoaderRoute: typeof Plugin_configsIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/global_rules/': {
       id: '/global_rules/'
       path: '/global_rules'
-      fullPath: '/global_rules'
+      fullPath: '/global_rules/'
       preLoaderRoute: typeof Global_rulesIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/consumers/': {
       id: '/consumers/'
       path: '/consumers'
-      fullPath: '/consumers'
+      fullPath: '/consumers/'
       preLoaderRoute: typeof ConsumersIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/consumer_groups/': {
       id: '/consumer_groups/'
       path: '/consumer_groups'
-      fullPath: '/consumer_groups'
+      fullPath: '/consumer_groups/'
       preLoaderRoute: typeof Consumer_groupsIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
@@ -887,21 +887,21 @@ declare module '@tanstack/react-router' {
     '/services/detail/$id/stream_routes/': {
       id: '/services/detail/$id/stream_routes/'
       path: '/stream_routes'
-      fullPath: '/services/detail/$id/stream_routes'
+      fullPath: '/services/detail/$id/stream_routes/'
       preLoaderRoute: typeof ServicesDetailIdStream_routesIndexRouteImport
       parentRoute: typeof ServicesDetailIdRoute
     }
     '/services/detail/$id/routes/': {
       id: '/services/detail/$id/routes/'
       path: '/routes'
-      fullPath: '/services/detail/$id/routes'
+      fullPath: '/services/detail/$id/routes/'
       preLoaderRoute: typeof ServicesDetailIdRoutesIndexRouteImport
       parentRoute: typeof ServicesDetailIdRoute
     }
     '/consumers/detail/$username/credentials/': {
       id: '/consumers/detail/$username/credentials/'
       path: '/credentials'
-      fullPath: '/consumers/detail/$username/credentials'
+      fullPath: '/consumers/detail/$username/credentials/'
       preLoaderRoute: typeof ConsumersDetailUsernameCredentialsIndexRouteImport
       parentRoute: typeof ConsumersDetailUsernameRoute
     }
diff --git a/src/setupTests.ts b/src/setupTests.ts
new file mode 100644
index 0000000000..f8a5b9a0f5
--- /dev/null
+++ b/src/setupTests.ts
@@ -0,0 +1,17 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import '@testing-library/jest-dom';
\ No newline at end of file