diff --git a/generator/konfig-next-app/src/components/OperationReferenceMain.tsx b/generator/konfig-next-app/src/components/OperationReferenceMain.tsx
index 7301740920..f819eafd92 100644
--- a/generator/konfig-next-app/src/components/OperationReferenceMain.tsx
+++ b/generator/konfig-next-app/src/components/OperationReferenceMain.tsx
@@ -118,6 +118,10 @@ export function OperationReferenceMain({
     () => typecriptConfig.clientState ?? [],
     [typecriptConfig]
   )
+  const clientStateWithExamples = useMemo(
+    () => typecriptConfig.clientStateWithExamples ?? [],
+    [typecriptConfig]
+  )
 
   const hideSecurity = konfigYaml.portal?.hideSecurity ?? []
 
@@ -127,6 +131,7 @@ export function OperationReferenceMain({
     clientState,
     hideSecurity,
     requestBodyParameter,
+    clientStateWithExamples,
   })
 
   console.debug('OperationReferenceMain.formValues', formValues)
@@ -151,6 +156,7 @@ export function OperationReferenceMain({
         repo,
         hideSecurity,
         requestBodyParameter,
+        clientStateWithExamples,
       })
       console.debug(initialValues)
       if (initialValues) {
@@ -430,6 +436,15 @@ export function OperationReferenceMain({
                 {clientState.map((name) => {
                   return <OperationClientStateForm key={name} name={name} />
                 })}
+                {clientStateWithExamples.map(({ name, required }) => {
+                  return (
+                    <OperationClientStateForm
+                      required={required}
+                      key={name}
+                      name={name}
+                    />
+                  )
+                })}
               </div>
             )}
             <div className="sticky top-[calc(var(--mantine-header-height,0px)+1rem)] space-y-4">
diff --git a/generator/konfig-next-app/src/components/OperationSecuritySchemeForm.tsx b/generator/konfig-next-app/src/components/OperationSecuritySchemeForm.tsx
index b3d12feccc..d25606194d 100644
--- a/generator/konfig-next-app/src/components/OperationSecuritySchemeForm.tsx
+++ b/generator/konfig-next-app/src/components/OperationSecuritySchemeForm.tsx
@@ -69,12 +69,18 @@ export function OperationSecuritySchemeForm({
   )
 }
 
-export function OperationClientStateForm({ name }: { name: string }) {
+export function OperationClientStateForm({
+  name,
+  required,
+}: {
+  name: string
+  required?: boolean
+}) {
   const form = useFormContext()
   const formInputName = `${SECURITY_FORM_NAME_PREFIX}.${name}.${CLIENT_STATE_VALUE_PROPERTY}`
   return (
     <PasswordInput
-      withAsterisk
+      withAsterisk={required !== false}
       label={name}
       placeholder={name}
       {...form.getInputProps(formInputName)}
diff --git a/generator/konfig-next-app/src/components/ParameterInput.tsx b/generator/konfig-next-app/src/components/ParameterInput.tsx
index ffc0b2a636..f659a1b391 100644
--- a/generator/konfig-next-app/src/components/ParameterInput.tsx
+++ b/generator/konfig-next-app/src/components/ParameterInput.tsx
@@ -118,6 +118,7 @@ export function ParameterInput({
                 hideSecurity: [],
                 clientState: [],
                 requestBodyParameter: null,
+                clientStateWithExamples: [],
               })
               const initialValues = formValues.initialValues
               if (initialValues === undefined) return
diff --git a/generator/konfig-next-app/src/utils/generate-initial-operation-form-values.test.ts b/generator/konfig-next-app/src/utils/generate-initial-operation-form-values.test.ts
index 804dd9b5e6..334582e331 100644
--- a/generator/konfig-next-app/src/utils/generate-initial-operation-form-values.test.ts
+++ b/generator/konfig-next-app/src/utils/generate-initial-operation-form-values.test.ts
@@ -20,6 +20,7 @@ describe('generateInitialFormValues', () => {
       securitySchemes: {},
       hideSecurity: [],
       clientState: [],
+      clientStateWithExamples: [],
     })
     expect(initialValues).toMatchInlineSnapshot(`
       {
@@ -75,6 +76,7 @@ describe('generateInitialFormValues', () => {
       securitySchemes: {},
       hideSecurity: [],
       clientState: [],
+      clientStateWithExamples: [],
     })
 
     expect(initialValues).toMatchInlineSnapshot(`
@@ -138,6 +140,7 @@ describe('generateInitialFormValues', () => {
       securitySchemes: {},
       hideSecurity: [],
       clientState: [],
+      clientStateWithExamples: [],
     })
     expect(initialValues).toMatchInlineSnapshot(`
       {
@@ -189,6 +192,7 @@ describe('generateInitialFormValues', () => {
       securitySchemes: {},
       hideSecurity: [],
       clientState: [],
+      clientStateWithExamples: [],
     })
     expect(initialValues).toMatchInlineSnapshot(`
       {
@@ -235,6 +239,7 @@ describe('generateInitialFormValues', () => {
       securitySchemes: {},
       hideSecurity: [],
       clientState: [],
+      clientStateWithExamples: [],
     })
     expect(initialValues).toMatchInlineSnapshot(`
       {
@@ -271,6 +276,7 @@ describe('generateInitialFormValues', () => {
       securitySchemes: {},
       hideSecurity: [],
       clientState: [],
+      clientStateWithExamples: [],
     })
     expect(initialValues).toMatchInlineSnapshot(`
       {
diff --git a/generator/konfig-next-app/src/utils/generate-initial-operation-form-values.ts b/generator/konfig-next-app/src/utils/generate-initial-operation-form-values.ts
index b463d14220..ba189da206 100644
--- a/generator/konfig-next-app/src/utils/generate-initial-operation-form-values.ts
+++ b/generator/konfig-next-app/src/utils/generate-initial-operation-form-values.ts
@@ -8,6 +8,7 @@ import { ReferencePageProps } from './generate-props-for-reference-page'
 import { recursivelyRemoveEmptyValues } from './recursively-remove-empty-values'
 import { generatePropertiesForSchemaObject } from './generate-properties-for-schema-object'
 import { validateValueForParameter } from './validate-value-for-parameter'
+import type { KonfigYamlType } from 'konfig-lib'
 
 export const FORM_VALUES_LOCAL_STORAGE_KEY = ({
   owner,
@@ -88,6 +89,9 @@ type GenerateInitialFormValuesInput = {
   requestBodyParameter?: Parameter | null
   securitySchemes: ReferencePageProps['securitySchemes']
   clientState: string[]
+  clientStateWithExamples: NonNullable<
+    KonfigYamlType['generators']['typescript']
+  >['clientStateWithExamples']
   hideSecurity: { name: string }[]
   owner: string
   repo: string
@@ -172,6 +176,7 @@ export type GenerateFormInputValuesInput = Pick<
   | 'hideSecurity'
   | 'clientState'
   | 'requestBodyParameter'
+  | 'clientStateWithExamples'
 >
 /**
  * See https://v6.mantine.dev/form/use-form/
@@ -181,6 +186,7 @@ function generateFormInputValues({
   securitySchemes,
   hideSecurity,
   clientState,
+  clientStateWithExamples,
   requestBodyParameter,
 }: GenerateFormInputValuesInput): Required<
   Pick<FormValues, 'initialValues' | 'validate'>
@@ -217,6 +223,7 @@ function generateFormInputValues({
         hideSecurity,
         clientState,
         requestBodyParameter,
+        clientStateWithExamples,
       }
 
       // TODO: handle nested field validation
@@ -255,6 +262,7 @@ function generateFormInputValues({
         hideSecurity,
         clientState,
         requestBodyParameter,
+        clientStateWithExamples,
       }
       const innerInitialValues = generateFormInputValues(innerInput)
       initialValues.parameters[parameter.name] = [
@@ -371,6 +379,29 @@ function generateFormInputValues({
         [CLIENT_STATE_VALUE_PROPERTY]: '',
       }
     }
+    if (clientStateWithExamples !== undefined) {
+      for (const { name, required } of clientStateWithExamples) {
+        const validation: FormValues['validate'] = {
+          [SECURITY_FORM_NAME_PREFIX]: {
+            [name]: {
+              value: (value) => {
+                console.log(`Validating ${name}`, value, 'required', required)
+                if (required === false) {
+                  return true
+                }
+                return isNotEmpty(`${name} is required`)(value)
+              },
+            },
+          },
+        }
+        validate = deepmerge(validation, validate)
+        initialValues.security[name] = {
+          [SECURITY_TYPE_PROPERTY]: 'clientState',
+          [CLIENT_STATE_NAME_PROPERTY]: name,
+          [CLIENT_STATE_VALUE_PROPERTY]: '',
+        }
+      }
+    }
   }
   return { initialValues, validate }
 }