diff --git a/web/app/components/workflow/nodes/variable-assigner/use-config.ts b/web/app/components/workflow/nodes/variable-assigner/use-config.ts
new file mode 100644
index 0000000000..4acac1c76b
--- /dev/null
+++ b/web/app/components/workflow/nodes/variable-assigner/use-config.ts
@@ -0,0 +1,28 @@
+import { useCallback, useState } from 'react'
+import produce from 'immer'
+import useVarList from './use-var-list'
+import type { VariableAssignerNodeType } from './types'
+
+const useConfig = (initInputs: VariableAssignerNodeType) => {
+  const [inputs, setInputs] = useState<VariableAssignerNodeType>(initInputs)
+
+  const handleOutputTypeChange = useCallback((outputType: string) => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.output_type = outputType
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const { handleVarListChange, handleAddVariable } = useVarList({
+    inputs,
+    setInputs,
+  })
+  return {
+    inputs,
+    handleOutputTypeChange,
+    handleVarListChange,
+    handleAddVariable,
+  }
+}
+
+export default useConfig
diff --git a/web/app/components/workflow/nodes/variable-assigner/use-var-list.ts b/web/app/components/workflow/nodes/variable-assigner/use-var-list.ts
new file mode 100644
index 0000000000..6d9c72ef31
--- /dev/null
+++ b/web/app/components/workflow/nodes/variable-assigner/use-var-list.ts
@@ -0,0 +1,33 @@
+import { useCallback } from 'react'
+import produce from 'immer'
+import type { VariableAssignerNodeType } from './types'
+import type { Variable } from '@/app/components/workflow/types'
+
+type Params = {
+  inputs: VariableAssignerNodeType
+  setInputs: (newInputs: VariableAssignerNodeType) => void
+}
+function useVarList({
+  inputs,
+  setInputs,
+}: Params) {
+  const handleVarListChange = useCallback((newList: Variable[]) => {
+    const newInputs = produce(inputs, (draft: any) => {
+      draft.variables = newList
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const handleAddVariable = useCallback(() => {
+    const newInputs = produce(inputs, (draft: any) => {
+      draft.variables.push([])
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+  return {
+    handleVarListChange,
+    handleAddVariable,
+  }
+}
+
+export default useVarList