diff --git a/web/app/components/workflow/nodes/code/node.tsx b/web/app/components/workflow/nodes/code/node.tsx
index 09b5acfb1f..a9aa921ee2 100644
--- a/web/app/components/workflow/nodes/code/node.tsx
+++ b/web/app/components/workflow/nodes/code/node.tsx
@@ -1,6 +1,8 @@
 import type { FC } from 'react'
+import type { CodeNodeType } from './types'
+import type { NodeProps } from '@/app/components/workflow/types'
 
-const Node: FC = () => {
+const Node: FC<NodeProps<CodeNodeType>> = () => {
   return (
     // No summary content
     <div></div>
diff --git a/web/app/components/workflow/nodes/code/panel.tsx b/web/app/components/workflow/nodes/code/panel.tsx
index 10c807849d..9dcb3b3dc1 100644
--- a/web/app/components/workflow/nodes/code/panel.tsx
+++ b/web/app/components/workflow/nodes/code/panel.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import useConfig from './use-config'
-import { mockData } from './mock'
+import type { CodeNodeType } from './types'
 import { CodeLanguage } from './types'
 import VarList from '@/app/components/workflow/nodes/_base/components/variable/var-list'
 import OutputVarList from '@/app/components/workflow/nodes/_base/components/variable/output-var-list'
@@ -10,6 +10,8 @@ import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import TypeSelector from '@/app/components/workflow/nodes/_base/components/selector'
+import type { NodeProps } from '@/app/components/workflow/types'
+
 const i18nPrefix = 'workflow.nodes.code'
 
 const codeLanguages = [
@@ -22,7 +24,10 @@ const codeLanguages = [
     value: CodeLanguage.javascript,
   },
 ]
-const Panel: FC = () => {
+const Panel: FC<NodeProps<CodeNodeType>> = ({
+  id,
+  data,
+}) => {
   const { t } = useTranslation()
   const readOnly = false
 
@@ -34,7 +39,7 @@ const Panel: FC = () => {
     handleCodeLanguageChange,
     handleOutputVarListChange,
     handleAddOutputVariable,
-  } = useConfig(mockData)
+  } = useConfig(id, data)
   return (
     <div className='mt-2'>
       <div className='px-4 pb-4 space-y-4'>
diff --git a/web/app/components/workflow/nodes/code/use-config.ts b/web/app/components/workflow/nodes/code/use-config.ts
index 88b7360198..da13d54eb8 100644
--- a/web/app/components/workflow/nodes/code/use-config.ts
+++ b/web/app/components/workflow/nodes/code/use-config.ts
@@ -1,21 +1,29 @@
-import { useCallback, useState } from 'react'
+import { useCallback } from 'react'
+import produce from 'immer'
 import useVarList from '../_base/hooks/use-var-list'
 import useOutputVarList from '../_base/hooks/use-output-var-list'
 import type { CodeLanguage, CodeNodeType } from './types'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 
-const useConfig = (initInputs: CodeNodeType) => {
-  const [inputs, setInputs] = useState<CodeNodeType>(initInputs)
+const useConfig = (id: string, payload: CodeNodeType) => {
+  const { inputs, setInputs } = useNodeCrud<CodeNodeType>(id, payload)
   const { handleVarListChange, handleAddVariable } = useVarList<CodeNodeType>({
     inputs,
     setInputs,
   })
 
   const handleCodeChange = useCallback((code: string) => {
-    setInputs(prev => ({ ...prev, code }))
+    const newInputs = produce(inputs, (draft) => {
+      draft.code = code
+    })
+    setInputs(newInputs)
   }, [setInputs])
 
   const handleCodeLanguageChange = useCallback((codeLanguage: CodeLanguage) => {
-    setInputs(prev => ({ ...prev, code_language: codeLanguage }))
+    const newInputs = produce(inputs, (draft) => {
+      draft.code_language = codeLanguage
+    })
+    setInputs(newInputs)
   }, [setInputs])
 
   const { handleVarListChange: handleOutputVarListChange, handleAddVariable: handleAddOutputVariable } = useOutputVarList<CodeNodeType>({
diff --git a/web/app/components/workflow/nodes/direct-answer/node.tsx b/web/app/components/workflow/nodes/direct-answer/node.tsx
index 294538b27a..3d7732fe90 100644
--- a/web/app/components/workflow/nodes/direct-answer/node.tsx
+++ b/web/app/components/workflow/nodes/direct-answer/node.tsx
@@ -1,14 +1,17 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import InfoPanel from '../_base/components/info-panel'
-import { mockData } from './mock'
+import type { DirectAnswerNodeType } from './types'
+import type { NodeProps } from '@/app/components/workflow/types'
 
-const Node: FC = () => {
+const Node: FC<NodeProps<DirectAnswerNodeType>> = ({
+  data,
+}) => {
   const { t } = useTranslation()
 
   return (
     <div className='px-3'>
-      <InfoPanel title={t('workflow.nodes.directAnswer.answer')} content={mockData.answer} />
+      <InfoPanel title={t('workflow.nodes.directAnswer.answer')} content={data.answer} />
     </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/direct-answer/panel.tsx b/web/app/components/workflow/nodes/direct-answer/panel.tsx
index de80aad42f..2e3d90cd16 100644
--- a/web/app/components/workflow/nodes/direct-answer/panel.tsx
+++ b/web/app/components/workflow/nodes/direct-answer/panel.tsx
@@ -1,15 +1,20 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import useConfig from './use-config'
-import { mockData } from './mock'
+import type { DirectAnswerNodeType } from './types'
 import VarList from '@/app/components/workflow/nodes/_base/components/variable/var-list'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import AddButton from '@/app/components/base/button/add-button'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
+import type { NodeProps } from '@/app/components/workflow/types'
+
 const i18nPrefix = 'workflow.nodes.directAnswer'
 
-const Panel: FC = () => {
+const Panel: FC<NodeProps<DirectAnswerNodeType>> = ({
+  id,
+  data,
+}) => {
   const { t } = useTranslation()
   const readOnly = false
 
@@ -18,7 +23,7 @@ const Panel: FC = () => {
     handleVarListChange,
     handleAddVariable,
     handleAnswerChange,
-  } = useConfig(mockData)
+  } = useConfig(id, data)
 
   return (
     <div className='mt-2 px-4 space-y-4'>
diff --git a/web/app/components/workflow/nodes/direct-answer/use-config.ts b/web/app/components/workflow/nodes/direct-answer/use-config.ts
index 55a6f724c8..73fa2e4451 100644
--- a/web/app/components/workflow/nodes/direct-answer/use-config.ts
+++ b/web/app/components/workflow/nodes/direct-answer/use-config.ts
@@ -1,10 +1,11 @@
-import { useCallback, useState } from 'react'
+import { useCallback } from 'react'
 import produce from 'immer'
 import useVarList from '../_base/hooks/use-var-list'
 import type { DirectAnswerNodeType } from './types'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 
-const useConfig = (initInputs: DirectAnswerNodeType) => {
-  const [inputs, setInputs] = useState<DirectAnswerNodeType>(initInputs)
+const useConfig = (id: string, payload: DirectAnswerNodeType) => {
+  const { inputs, setInputs } = useNodeCrud<DirectAnswerNodeType>(id, payload)
   // variables
   const { handleVarListChange, handleAddVariable } = useVarList<DirectAnswerNodeType>({
     inputs,
diff --git a/web/app/components/workflow/nodes/end/node.tsx b/web/app/components/workflow/nodes/end/node.tsx
index 218c820649..e6a574b333 100644
--- a/web/app/components/workflow/nodes/end/node.tsx
+++ b/web/app/components/workflow/nodes/end/node.tsx
@@ -1,12 +1,15 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { mockData } from './mock'
+import type { EndNodeType } from './types'
+import type { NodeProps } from '@/app/components/workflow/types'
 
 const i18nPrefix = 'workflow.nodes.end'
 
-const Node: FC = () => {
+const Node: FC<NodeProps<EndNodeType>> = ({
+  data,
+}) => {
   const { t } = useTranslation()
-  const { outputs } = mockData
+  const { outputs } = data
   return (
     <div className='px-3'>
       <div className='flex items-center h-6 justify-between bg-gray-100 rounded-md  px-1 space-x-1 text-xs font-normal text-gray-700'>
diff --git a/web/app/components/workflow/nodes/end/panel.tsx b/web/app/components/workflow/nodes/end/panel.tsx
index 2cfdd65540..6214c96aff 100644
--- a/web/app/components/workflow/nodes/end/panel.tsx
+++ b/web/app/components/workflow/nodes/end/panel.tsx
@@ -3,11 +3,13 @@ import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
 import VarReferencePicker from '../_base/components/variable/var-reference-picker'
 import useConfig from './use-config'
-import { mockData } from './mock'
+import type { EndNodeType } from './types'
 import { EndVarType } from './types'
 import VarList from '@/app/components/workflow/nodes/_base/components/variable/var-list'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import AddButton from '@/app/components/base/button/add-button'
+import type { NodeProps } from '@/app/components/workflow/types'
+
 const i18nPrefix = 'workflow.nodes.end'
 
 const TypeItem = ({ type, current, onClick }: { type: EndVarType; current: EndVarType; onClick: (type: EndVarType) => void }) => {
@@ -33,7 +35,10 @@ const TypeItem = ({ type, current, onClick }: { type: EndVarType; current: EndVa
 
 const allTypes = [EndVarType.plainText, EndVarType.structured, EndVarType.none]
 
-const Panel: FC = () => {
+const Panel: FC<NodeProps<EndNodeType>> = ({
+  id,
+  data,
+}) => {
   const { t } = useTranslation()
   const readOnly = false
 
@@ -43,7 +48,7 @@ const Panel: FC = () => {
     handleVarListChange,
     handelPlainTextSelectorChange,
     handleAddVariable,
-  } = useConfig(mockData)
+  } = useConfig(id, data)
 
   const outputs = inputs.outputs
   return (
diff --git a/web/app/components/workflow/nodes/end/use-config.ts b/web/app/components/workflow/nodes/end/use-config.ts
index 0ce1e908e4..7992c619ea 100644
--- a/web/app/components/workflow/nodes/end/use-config.ts
+++ b/web/app/components/workflow/nodes/end/use-config.ts
@@ -1,10 +1,11 @@
 import produce from 'immer'
-import { useCallback, useState } from 'react'
+import { useCallback } from 'react'
 import useVarList from '../_base/hooks/use-var-list'
 import type { EndNodeType, EndVarType, OutPuts } from './types'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 
-const useConfig = (initInputs: EndNodeType) => {
-  const [inputs, setInputs] = useState<EndNodeType>(initInputs)
+const useConfig = (id: string, payload: EndNodeType) => {
+  const { inputs, setInputs } = useNodeCrud<EndNodeType>(id, payload)
   const handleOutputTypeChange = useCallback((type: EndVarType) => {
     const newInputs = produce(inputs, (draft: any) => {
       draft.outputs.type = type
diff --git a/web/app/components/workflow/nodes/http/components/authorization/index.tsx b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
index 257d6c4ea6..050ebbcb58 100644
--- a/web/app/components/workflow/nodes/http/components/authorization/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
@@ -13,7 +13,7 @@ const i18nPrefix = 'workflow.nodes.http.authorization'
 
 type Props = {
   payload: AuthorizationPayloadType
-  onChange: (newPayload: AuthorizationPayloadType) => void
+  onChange: (payload: AuthorizationPayloadType) => void
   isShow: boolean
   onHide: () => void
 }
diff --git a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
index e927c936d7..164231ae46 100644
--- a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
@@ -13,7 +13,7 @@ import CodeEditor from '../../../_base/components/editor/code-editor'
 type Props = {
   readonly: boolean
   payload: Body
-  onChange: (newPayload: Body) => void
+  onChange: (payload: Body) => void
 }
 
 const allTypes = [
diff --git a/web/app/components/workflow/nodes/http/node.tsx b/web/app/components/workflow/nodes/http/node.tsx
index 6d6a92e749..217ae2f107 100644
--- a/web/app/components/workflow/nodes/http/node.tsx
+++ b/web/app/components/workflow/nodes/http/node.tsx
@@ -1,8 +1,11 @@
 import type { FC } from 'react'
-import { mockData } from './mock'
+import type { HttpNodeType } from './types'
+import type { NodeProps } from '@/app/components/workflow/types'
 
-const Node: FC = () => {
-  const { method, url } = mockData
+const Node: FC<NodeProps<HttpNodeType>> = ({
+  data,
+}) => {
+  const { method, url } = data
   return (
     <div className='px-3'>
       <div className='flex items-center p-1 rounded-md bg-gray-100'>
diff --git a/web/app/components/workflow/nodes/http/panel.tsx b/web/app/components/workflow/nodes/http/panel.tsx
index f6f29c5f8d..5378bb9377 100644
--- a/web/app/components/workflow/nodes/http/panel.tsx
+++ b/web/app/components/workflow/nodes/http/panel.tsx
@@ -1,20 +1,24 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import useConfig from './use-config'
-import { mockData } from './mock'
 import ApiInput from './components/api-input'
 import KeyValue from './components/key-value'
 import EditBody from './components/edit-body'
 import AuthorizationModal from './components/authorization'
+import type { HttpNodeType } from './types'
 import VarList from '@/app/components/workflow/nodes/_base/components/variable/var-list'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import AddButton from '@/app/components/base/button/add-button'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
+import type { NodeProps } from '@/app/components/workflow/types'
 const i18nPrefix = 'workflow.nodes.http'
 
-const Panel: FC = () => {
+const Panel: FC<NodeProps<HttpNodeType>> = ({
+  id,
+  data,
+}) => {
   const { t } = useTranslation()
   const readOnly = false
 
@@ -39,7 +43,7 @@ const Panel: FC = () => {
     showAuthorization,
     hideAuthorization,
     setAuthorization,
-  } = useConfig(mockData)
+  } = useConfig(id, data)
 
   return (
     <div className='mt-2'>
diff --git a/web/app/components/workflow/nodes/http/use-config.ts b/web/app/components/workflow/nodes/http/use-config.ts
index 70f1b9f56e..7ea3e1b9e1 100644
--- a/web/app/components/workflow/nodes/http/use-config.ts
+++ b/web/app/components/workflow/nodes/http/use-config.ts
@@ -1,11 +1,13 @@
-import { useCallback, useState } from 'react'
+import { useCallback } from 'react'
 import produce from 'immer'
 import { useBoolean } from 'ahooks'
 import useVarList from '../_base/hooks/use-var-list'
 import type { Authorization, Body, HttpNodeType, Method } from './types'
 import useKeyValueList from './hooks/use-key-value-list'
-const useConfig = (initInputs: HttpNodeType) => {
-  const [inputs, setInputs] = useState<HttpNodeType>(initInputs)
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
+
+const useConfig = (id: string, payload: HttpNodeType) => {
+  const { inputs, setInputs } = useNodeCrud<HttpNodeType>(id, payload)
 
   const { handleVarListChange, handleAddVariable } = useVarList<HttpNodeType>({
     inputs,
@@ -13,17 +15,17 @@ const useConfig = (initInputs: HttpNodeType) => {
   })
 
   const handleMethodChange = useCallback((method: Method) => {
-    setInputs(prev => ({
-      ...prev,
-      method,
-    }))
+    const newInputs = produce(inputs, (draft: HttpNodeType) => {
+      draft.method = method
+    })
+    setInputs(newInputs)
   }, [])
 
   const handleUrlChange = useCallback((url: string) => {
-    setInputs(prev => ({
-      ...prev,
-      url,
-    }))
+    const newInputs = produce(inputs, (draft: HttpNodeType) => {
+      draft.url = url
+    })
+    setInputs(newInputs)
   }, [])
 
   const {
diff --git a/web/app/components/workflow/nodes/if-else/node.tsx b/web/app/components/workflow/nodes/if-else/node.tsx
index c4be391b89..5f2b874de9 100644
--- a/web/app/components/workflow/nodes/if-else/node.tsx
+++ b/web/app/components/workflow/nodes/if-else/node.tsx
@@ -2,14 +2,15 @@ import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { NodeProps } from 'reactflow'
 import { NodeSourceHandle } from '../_base/components/node-handle'
-import { mockData } from './mock'
 import { isComparisonOperatorNeedTranslate, isEmptyRelatedOperator } from './utils'
+import type { IfElseNodeType } from './types'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 const i18nPrefix = 'workflow.nodes.ifElse'
 
-const IfElseNode: FC<Pick<NodeProps, 'id' | 'data'>> = (props) => {
+const IfElseNode: FC<NodeProps<IfElseNodeType>> = (props) => {
+  const { id, data } = props
   const { t } = useTranslation()
-  const { conditions, logical_operator } = mockData
+  const { conditions, logical_operator } = data
 
   return (
     <div className='px-3'>
diff --git a/web/app/components/workflow/nodes/if-else/panel.tsx b/web/app/components/workflow/nodes/if-else/panel.tsx
index 91420648a8..f4f6d99b81 100644
--- a/web/app/components/workflow/nodes/if-else/panel.tsx
+++ b/web/app/components/workflow/nodes/if-else/panel.tsx
@@ -3,12 +3,16 @@ import { useTranslation } from 'react-i18next'
 import Split from '../_base/components/split'
 import AddButton from '../_base/components/add-button'
 import useConfig from './use-config'
-import { mockData } from './mock'
 import ConditionList from './components/condition-list'
+import type { IfElseNodeType } from './types'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
+import type { NodeProps } from '@/app/components/workflow/types'
 const i18nPrefix = 'workflow.nodes.ifElse'
 
-const Panel: FC = () => {
+const Panel: FC<NodeProps<IfElseNodeType>> = ({
+  id,
+  data,
+}) => {
   const { t } = useTranslation()
   const readOnly = false
 
@@ -17,7 +21,7 @@ const Panel: FC = () => {
     handleConditionsChange,
     handleAddCondition,
     handleLogicalOperatorToggle,
-  } = useConfig(mockData)
+  } = useConfig(id, data)
   return (
     <div className='mt-2'>
       <div className='px-4 pb-4 space-y-4'>
diff --git a/web/app/components/workflow/nodes/if-else/use-config.ts b/web/app/components/workflow/nodes/if-else/use-config.ts
index f086d31eb7..040b8b4c83 100644
--- a/web/app/components/workflow/nodes/if-else/use-config.ts
+++ b/web/app/components/workflow/nodes/if-else/use-config.ts
@@ -1,18 +1,17 @@
-import { useCallback, useState } from 'react'
+import { useCallback } from 'react'
 import produce from 'immer'
 import { ComparisonOperator, LogicalOperator } from './types'
 import type { Condition, IfElseNodeType } from './types'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 
-const useConfig = (initInputs: IfElseNodeType) => {
-  const [inputs, setInputs] = useState<IfElseNodeType>(initInputs)
+const useConfig = (id: string, payload: IfElseNodeType) => {
+  const { inputs, setInputs } = useNodeCrud<IfElseNodeType>(id, payload)
 
   const handleConditionsChange = useCallback((newConditions: Condition[]) => {
-    setInputs((prev) => {
-      return {
-        ...prev,
-        conditions: newConditions,
-      }
+    const newInputs = produce(inputs, (draft) => {
+      draft.conditions = newConditions
     })
+    setInputs(newInputs)
   }, [])
 
   const handleAddCondition = useCallback(() => {
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx
index 61b87aaab2..dd8a20e200 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx
@@ -1,12 +1,30 @@
-import type { FC } from 'react'
+import { type FC, useEffect, useState } from 'react'
+import type { KnowledgeRetrievalNodeType } from './types'
 import { Folder } from '@/app/components/base/icons/src/vender/solid/files'
+import type { NodeProps } from '@/app/components/workflow/types'
+import { fetchDatasets } from '@/service/datasets'
+import type { DataSet } from '@/models/datasets'
 
-const Node: FC = () => {
+const Node: FC<NodeProps<KnowledgeRetrievalNodeType>> = ({
+  data,
+}) => {
+  const [selectedDatasets, setSelectedDatasets] = useState<DataSet[]>([])
+  useEffect(() => {
+    (async () => {
+      if (data.dataset_ids?.length > 0) {
+        const { data: dataSetsWithDetail } = await fetchDatasets({ url: '/datasets', params: { page: 1, ids: data.dataset_ids } })
+        setSelectedDatasets(dataSetsWithDetail)
+      }
+      else {
+        setSelectedDatasets([])
+      }
+    })()
+  }, [data.dataset_ids])
   return (
     <div className='px-3'>
       <div className='space-y-0.5'>
-        {['product Doc', 'Text completion'].map(name => (
-          <div key={name} className='flex items-center h-[26px] bg-gray-100 rounded-md  px-1 text-xs font-normal text-gray-700'>
+        {selectedDatasets.map(({ id, name }) => (
+          <div key={id} className='flex items-center h-[26px] bg-gray-100 rounded-md  px-1 text-xs font-normal text-gray-700'>
             <div className='mr-1 shrink-0 p-1 bg-[#F5F8FF] rounded-md border-[0.5px] border-[#E0EAFF]'>
               <Folder className='w-3 h-3 text-[#444CE7]' />
             </div>
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx
index 791b155f6e..d1b9baaa3f 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx
@@ -2,17 +2,21 @@ import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import VarReferencePicker from '../_base/components/variable/var-reference-picker'
 import useConfig from './use-config'
-import { mockData } from './mock'
 import RetrievalConfig from './components/retrieval-config'
 import AddKnowledge from './components/add-dataset'
 import DatasetList from './components/dataset-list'
+import type { KnowledgeRetrievalNodeType } from './types'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
+import type { NodeProps } from '@/app/components/workflow/types'
 
 const i18nPrefix = 'workflow.nodes.knowledgeRetrieval'
 
-const Panel: FC = () => {
+const Panel: FC<NodeProps<KnowledgeRetrievalNodeType>> = ({
+  id,
+  data,
+}) => {
   const { t } = useTranslation()
   const readOnly = false
 
@@ -23,7 +27,7 @@ const Panel: FC = () => {
     handleMultipleRetrievalConfigChange,
     selectedDatasets,
     handleOnDatasetsChange,
-  } = useConfig(mockData)
+  } = useConfig(id, data)
 
   return (
     <div className='mt-2'>
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts b/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
index 1fa7e3bb04..0914c39ff5 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
@@ -5,9 +5,10 @@ import type { KnowledgeRetrievalNodeType, MultipleRetrievalConfig } from './type
 import type { RETRIEVE_TYPE } from '@/types/app'
 import type { DataSet } from '@/models/datasets'
 import { fetchDatasets } from '@/service/datasets'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 
-const useConfig = (initInputs: KnowledgeRetrievalNodeType) => {
-  const [inputs, setInputs] = useState<KnowledgeRetrievalNodeType>(initInputs)
+const useConfig = (id: string, payload: KnowledgeRetrievalNodeType) => {
+  const { inputs, setInputs } = useNodeCrud<KnowledgeRetrievalNodeType>(id, payload)
   const handleQueryVarChange = useCallback((newVar: ValueSelector) => {
     const newInputs = produce(inputs, (draft) => {
       draft.query_variable_selector = newVar
@@ -38,6 +39,10 @@ const useConfig = (initInputs: KnowledgeRetrievalNodeType) => {
         const { data: dataSetsWithDetail } = await fetchDatasets({ url: '/datasets', params: { page: 1, ids: datasetIds } })
         setSelectedDatasets(dataSetsWithDetail)
       }
+      const newInputs = produce(inputs, (draft) => {
+        draft.dataset_ids = datasetIds
+      })
+      setInputs(newInputs)
     })()
   }, [])
 
diff --git a/web/app/components/workflow/nodes/llm/node.tsx b/web/app/components/workflow/nodes/llm/node.tsx
index ea6a30226f..ead0f64354 100644
--- a/web/app/components/workflow/nodes/llm/node.tsx
+++ b/web/app/components/workflow/nodes/llm/node.tsx
@@ -1,12 +1,15 @@
 import type { FC } from 'react'
-import { mockData } from './mock'
+import type { LLMNodeType } from './types'
 import {
   useTextGenerationCurrentProviderAndModelAndModelList,
 } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
+import type { NodeProps } from '@/app/components/workflow/types'
 
-const Node: FC = () => {
-  const { provider, name: modelId } = mockData.model
+const Node: FC<NodeProps<LLMNodeType>> = ({
+  data,
+}) => {
+  const { provider, name: modelId } = data.model
   const {
     textGenerationModelList,
   } = useTextGenerationCurrentProviderAndModelAndModelList()
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index 38155f2b56..5e517c91f4 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -3,18 +3,22 @@ import { useTranslation } from 'react-i18next'
 import MemoryConfig from '../_base/components/memory-config'
 import VarReferencePicker from '../_base/components/variable/var-reference-picker'
 import useConfig from './use-config'
-import { mockData } from './mock'
 import ResolutionPicker from './components/resolution-picker'
+import type { LLMNodeType } from './types'
 import VarList from '@/app/components/workflow/nodes/_base/components/variable/var-list'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import AddButton from '@/app/components/base/button/add-button'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
+import type { NodeProps } from '@/app/components/workflow/types'
 
 const i18nPrefix = 'workflow.nodes.llm'
 
-const Panel: FC = () => {
+const Panel: FC<NodeProps<LLMNodeType>> = ({
+  id,
+  data,
+}) => {
   const { t } = useTranslation()
   const readOnly = false
 
@@ -28,7 +32,8 @@ const Panel: FC = () => {
     handleContextVarChange,
     handleMemoryChange,
     handleVisionResolutionChange,
-  } = useConfig(mockData)
+  } = useConfig(id, data)
+
   const isChatApp = true // TODO: get from app context
   const model = inputs.model
   const modelMode = inputs.model?.mode
diff --git a/web/app/components/workflow/nodes/llm/use-config.ts b/web/app/components/workflow/nodes/llm/use-config.ts
index 169baec22b..bbbd213b56 100644
--- a/web/app/components/workflow/nodes/llm/use-config.ts
+++ b/web/app/components/workflow/nodes/llm/use-config.ts
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback } from 'react'
 import produce from 'immer'
 import useVarList from '../_base/hooks/use-var-list'
 import type { Memory, ValueSelector } from '../../types'
@@ -6,9 +6,10 @@ import type { LLMNodeType } from './types'
 import type { Resolution } from '@/types/app'
 import { useTextGenerationCurrentProviderAndModelAndModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { ModelFeatureEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 
-const useConfig = (initInputs: LLMNodeType) => {
-  const [inputs, setInputs] = useState<LLMNodeType>(initInputs)
+const useConfig = (id: string, payload: LLMNodeType) => {
+  const { inputs, setInputs } = useNodeCrud<LLMNodeType>(id, payload)
 
   // model
   const model = inputs.model
diff --git a/web/app/components/workflow/nodes/question-classifier/node.tsx b/web/app/components/workflow/nodes/question-classifier/node.tsx
index a2cee1de81..b52c37ca85 100644
--- a/web/app/components/workflow/nodes/question-classifier/node.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/node.tsx
@@ -3,16 +3,18 @@ import { useState } from 'react'
 import type { NodeProps } from 'reactflow'
 import InfoPanel from '../_base/components/info-panel'
 import { NodeSourceHandle } from '../_base/components/node-handle'
-import { mockData } from './mock'
+
+import type { QuestionClassifierNodeType } from './types'
 import {
   useTextGenerationCurrentProviderAndModelAndModelList,
 } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
 
-const Node: FC<Pick<NodeProps, 'id' | 'data'>> = (props) => {
-  const { provider, name: modelId } = mockData.model
-  const tempTopics = mockData.topics
-  const [topics, setTopics] = useState(tempTopics)
+const Node: FC<NodeProps<QuestionClassifierNodeType>> = (props) => {
+  const { data } = props
+  const { provider, name: modelId } = data.model
+  // const tempTopics = data.topics
+  const [topics, setTopics] = useState(data.topics)
   const {
     textGenerationModelList,
   } = useTextGenerationCurrentProviderAndModelAndModelList()
diff --git a/web/app/components/workflow/nodes/question-classifier/panel.tsx b/web/app/components/workflow/nodes/question-classifier/panel.tsx
index 2a88c486c8..3b21f5701b 100644
--- a/web/app/components/workflow/nodes/question-classifier/panel.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/panel.tsx
@@ -2,14 +2,19 @@ import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import VarReferencePicker from '../_base/components/variable/var-reference-picker'
 import useConfig from './use-config'
-import { mockData } from './mock'
 import ClassList from './components/class-list'
 import AdvancedSetting from './components/advanced-setting'
+import type { QuestionClassifierNodeType } from './types'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
+import type { NodeProps } from '@/app/components/workflow/types'
+
 const i18nPrefix = 'workflow.nodes.questionClassifiers'
 
-const Panel: FC = () => {
+const Panel: FC<NodeProps<QuestionClassifierNodeType>> = ({
+  id,
+  data,
+}) => {
   const { t } = useTranslation()
   const readOnly = false
 
@@ -21,7 +26,8 @@ const Panel: FC = () => {
     handleTopicsChange,
     handleInstructionChange,
     handleMemoryChange,
-  } = useConfig(mockData)
+  } = useConfig(id, data)
+
   const model = inputs.model
 
   return (
diff --git a/web/app/components/workflow/nodes/question-classifier/use-config.ts b/web/app/components/workflow/nodes/question-classifier/use-config.ts
index a417d5dd03..7293e489e8 100644
--- a/web/app/components/workflow/nodes/question-classifier/use-config.ts
+++ b/web/app/components/workflow/nodes/question-classifier/use-config.ts
@@ -1,10 +1,11 @@
-import { useCallback, useState } from 'react'
+import { useCallback } from 'react'
 import produce from 'immer'
 import type { Memory, ValueSelector } from '../../types'
 import type { QuestionClassifierNodeType } from './types'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 
-const useConfig = (initInputs: QuestionClassifierNodeType) => {
-  const [inputs, setInputs] = useState<QuestionClassifierNodeType>(initInputs)
+const useConfig = (id: string, payload: QuestionClassifierNodeType) => {
+  const { inputs, setInputs } = useNodeCrud<QuestionClassifierNodeType>(id, payload)
 
   // model
   const handleModelChanged = useCallback((model: { provider: string; modelId: string; mode?: string }) => {
diff --git a/web/app/components/workflow/nodes/start/panel.tsx b/web/app/components/workflow/nodes/start/panel.tsx
index 8ebe4d7088..844306007f 100644
--- a/web/app/components/workflow/nodes/start/panel.tsx
+++ b/web/app/components/workflow/nodes/start/panel.tsx
@@ -8,7 +8,7 @@ import Field from '@/app/components/workflow/nodes/_base/components/field'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import AddButton from '@/app/components/base/button/add-button'
 import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
-import type { NodeProps } from '@/app/components/workflow/types'
+import type { InputVar, NodeProps } from '@/app/components/workflow/types'
 
 const i18nPrefix = 'workflow.nodes.start'
 
@@ -27,6 +27,11 @@ const Panel: FC<NodeProps<StartNodeType>> = ({
     handleVarListChange,
   } = useConfig(id, data)
 
+  const handleAddVarConfirm = (payload: InputVar) => {
+    handleAddVariable(payload)
+    hideAddVarModal()
+  }
+
   return (
     <div className='mt-2'>
       <div className='px-4 pb-4 space-y-4'>
@@ -83,10 +88,7 @@ const Panel: FC<NodeProps<StartNodeType>> = ({
           isCreate
           isShow={isShowAddVarModal}
           onClose={hideAddVarModal}
-          onConfirm={(payload) => {
-            handleAddVariable(payload)
-            hideAddVarModal()
-          }}
+          onConfirm={handleAddVarConfirm}
         />
       )}
     </div>
diff --git a/web/app/components/workflow/nodes/start/use-config.ts b/web/app/components/workflow/nodes/start/use-config.ts
index 72ae627edb..3db3a6cd63 100644
--- a/web/app/components/workflow/nodes/start/use-config.ts
+++ b/web/app/components/workflow/nodes/start/use-config.ts
@@ -22,7 +22,7 @@ const useConfig = (id: string, payload: StartNodeType) => {
 
   const handleAddVariable = useCallback((payload: InputVar) => {
     const newInputs = produce(inputs, (draft: any) => {
-      draft.variables.push(payload)
+      draft.variables.push(`${Date.now()}`, payload)
     })
     setInputs(newInputs)
   }, [inputs, setInputs])
diff --git a/web/app/components/workflow/nodes/template-transform/node.tsx b/web/app/components/workflow/nodes/template-transform/node.tsx
index 09b5acfb1f..e9de5865ef 100644
--- a/web/app/components/workflow/nodes/template-transform/node.tsx
+++ b/web/app/components/workflow/nodes/template-transform/node.tsx
@@ -1,6 +1,8 @@
 import type { FC } from 'react'
+import type { TemplateTransformNodeType } from './types'
+import type { NodeProps } from '@/app/components/workflow/types'
 
-const Node: FC = () => {
+const Node: FC<NodeProps<TemplateTransformNodeType>> = () => {
   return (
     // No summary content
     <div></div>
diff --git a/web/app/components/workflow/nodes/template-transform/panel.tsx b/web/app/components/workflow/nodes/template-transform/panel.tsx
index efc34b8f57..768f58acef 100644
--- a/web/app/components/workflow/nodes/template-transform/panel.tsx
+++ b/web/app/components/workflow/nodes/template-transform/panel.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import useConfig from './use-config'
-import { mockData } from './mock'
+import type { TemplateTransformNodeType } from './types'
 import VarList from '@/app/components/workflow/nodes/_base/components/variable/var-list'
 import AddButton from '@/app/components/base/button/add-button'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
@@ -9,10 +9,14 @@ import Split from '@/app/components/workflow/nodes/_base/components/split'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
+import type { NodeProps } from '@/app/components/workflow/types'
 
 const i18nPrefix = 'workflow.nodes.templateTransform'
 
-const Panel: FC = () => {
+const Panel: FC<NodeProps<TemplateTransformNodeType>> = ({
+  id,
+  data,
+}) => {
   const { t } = useTranslation()
   const readOnly = false
 
@@ -21,7 +25,8 @@ const Panel: FC = () => {
     handleVarListChange,
     handleAddVariable,
     handleCodeChange,
-  } = useConfig(mockData)
+  } = useConfig(id, data)
+
   return (
     <div className='mt-2'>
       <div className='px-4 pb-4 space-y-4'>
diff --git a/web/app/components/workflow/nodes/template-transform/use-config.ts b/web/app/components/workflow/nodes/template-transform/use-config.ts
index 1c520a5404..9e6b1b265a 100644
--- a/web/app/components/workflow/nodes/template-transform/use-config.ts
+++ b/web/app/components/workflow/nodes/template-transform/use-config.ts
@@ -1,16 +1,21 @@
-import { useCallback, useState } from 'react'
+import { useCallback } from 'react'
+import produce from 'immer'
 import useVarList from '../_base/hooks/use-var-list'
 import type { TemplateTransformNodeType } from './types'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 
-const useConfig = (initInputs: TemplateTransformNodeType) => {
-  const [inputs, setInputs] = useState<TemplateTransformNodeType>(initInputs)
+const useConfig = (id: string, payload: TemplateTransformNodeType) => {
+  const { inputs, setInputs } = useNodeCrud<TemplateTransformNodeType>(id, payload)
   const { handleVarListChange, handleAddVariable } = useVarList<TemplateTransformNodeType>({
     inputs,
     setInputs,
   })
 
   const handleCodeChange = useCallback((template: string) => {
-    setInputs(prev => ({ ...prev, template }))
+    const newInputs = produce(inputs, (draft: any) => {
+      draft.template = template
+    })
+    setInputs(newInputs)
   }, [setInputs])
 
   return {
diff --git a/web/app/components/workflow/nodes/tool/node.tsx b/web/app/components/workflow/nodes/tool/node.tsx
index 2f4cf02a50..3b64918250 100644
--- a/web/app/components/workflow/nodes/tool/node.tsx
+++ b/web/app/components/workflow/nodes/tool/node.tsx
@@ -1,10 +1,13 @@
 import type { FC } from 'react'
-import { mockData } from './mock'
+import type { ToolNodeType } from './types'
 import { VarType } from './types'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+import type { NodeProps } from '@/app/components/workflow/types'
 
-const Node: FC = () => {
-  const { tool_inputs } = mockData
+const Node: FC<NodeProps<ToolNodeType>> = ({
+  data,
+}) => {
+  const { tool_inputs } = data
 
   return (
     <div className='px-3'>
diff --git a/web/app/components/workflow/nodes/tool/panel.tsx b/web/app/components/workflow/nodes/tool/panel.tsx
index e737701cc7..3975f948fd 100644
--- a/web/app/components/workflow/nodes/tool/panel.tsx
+++ b/web/app/components/workflow/nodes/tool/panel.tsx
@@ -1,12 +1,17 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import Split from '../_base/components/split'
+import type { ToolNodeType } from './types'
 import Button from '@/app/components/base/button'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
+import type { NodeProps } from '@/app/components/workflow/types'
 
 const i18nPrefix = 'workflow.nodes.tool'
 
-const Panel: FC = () => {
+const Panel: FC<NodeProps<ToolNodeType>> = ({
+  id,
+  data,
+}) => {
   const { t } = useTranslation()
   const readOnly = false
 
diff --git a/web/app/components/workflow/nodes/variable-assigner/node.tsx b/web/app/components/workflow/nodes/variable-assigner/node.tsx
index 8357db5859..bb65d2b9d2 100644
--- a/web/app/components/workflow/nodes/variable-assigner/node.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/node.tsx
@@ -3,16 +3,17 @@ import { useState } from 'react'
 import type { NodeProps } from 'reactflow'
 import { useTranslation } from 'react-i18next'
 import { NodeTargetHandle } from '../_base/components/node-handle'
-import { mockData } from './mock'
+import type { VariableAssignerNodeType } from './types'
 import { getNodeInfoById } from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'
 import { Line3 } from '@/app/components/base/icons/src/public/common'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 const i18nPrefix = 'workflow.nodes.variableAssigner'
 
-const Node: FC<Pick<NodeProps, 'id' | 'data'>> = (props) => {
+const Node: FC<NodeProps<VariableAssignerNodeType>> = (props) => {
   const { t } = useTranslation()
-  const { variables: tempVar, output_type } = mockData
+  const { data } = props
+  const { variables: tempVar, output_type } = data
   const [variables, setVariables] = useState(tempVar)
 
   // TODO: get var type through node and  value
diff --git a/web/app/components/workflow/nodes/variable-assigner/panel.tsx b/web/app/components/workflow/nodes/variable-assigner/panel.tsx
index e78b176de3..0551bfe5fb 100644
--- a/web/app/components/workflow/nodes/variable-assigner/panel.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/panel.tsx
@@ -1,15 +1,19 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import useConfig from './use-config'
-import { mockData } from './mock'
 import VarList from './components/var-list'
+import type { VariableAssignerNodeType } from './types'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Selector from '@/app/components/workflow/nodes/_base/components/selector'
 import AddButton from '@/app/components/base/button/add-button'
 import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
+import type { NodeProps } from '@/app/components/workflow/types'
 
 const i18nPrefix = 'workflow.nodes.variableAssigner'
-const Panel: FC = () => {
+const Panel: FC<NodeProps<VariableAssignerNodeType>> = ({
+  id,
+  data,
+}) => {
   const { t } = useTranslation()
   const readOnly = false
 
@@ -18,7 +22,7 @@ const Panel: FC = () => {
     handleOutputTypeChange,
     handleVarListChange,
     handleAddVariable,
-  } = useConfig(mockData)
+  } = useConfig(id, data)
 
   const typeOptions = [
     { label: t(`${i18nPrefix}.type.string`), value: 'string' },
diff --git a/web/app/components/workflow/nodes/variable-assigner/use-config.ts b/web/app/components/workflow/nodes/variable-assigner/use-config.ts
index 6ce4e2c945..83009144b3 100644
--- a/web/app/components/workflow/nodes/variable-assigner/use-config.ts
+++ b/web/app/components/workflow/nodes/variable-assigner/use-config.ts
@@ -1,13 +1,14 @@
-import { useCallback, useState } from 'react'
+import { useCallback } from 'react'
 import produce from 'immer'
 import useVarList from './components/var-list/use-var-list'
 import type { VariableAssignerNodeType } from './types'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 
-const useConfig = (initInputs: VariableAssignerNodeType) => {
-  const [inputs, setInputs] = useState<VariableAssignerNodeType>(initInputs)
+const useConfig = (id: string, payload: VariableAssignerNodeType) => {
+  const { inputs, setInputs } = useNodeCrud<VariableAssignerNodeType>(id, payload)
 
   const handleOutputTypeChange = useCallback((outputType: string) => {
-    const newInputs = produce(inputs, (draft) => {
+    const newInputs = produce(inputs, (draft: VariableAssignerNodeType) => {
       draft.output_type = outputType
     })
     setInputs(newInputs)