diff --git a/web/app/components/workflow-app/hooks/use-fetch-workflow-inspect-vars.ts b/web/app/components/workflow-app/hooks/use-fetch-workflow-inspect-vars.ts
index feffeaaf78..922b1051b2 100644
--- a/web/app/components/workflow-app/hooks/use-fetch-workflow-inspect-vars.ts
+++ b/web/app/components/workflow-app/hooks/use-fetch-workflow-inspect-vars.ts
@@ -3,11 +3,14 @@ import { useWorkflowStore } from '../../workflow/store'
 import { useStoreApi } from 'reactflow'
 import type { Node } from '@/app/components/workflow/types'
 import { fetchAllInspectVars } from '@/service/workflow'
+import { useInvalidateConversationVarValues, useInvalidateSysVarValues } from '@/service/use-workflow'
 
 const useSetWorkflowVarsWithValue = () => {
   const workflowStore = useWorkflowStore()
   const { setNodesWithInspectVars, appId } = workflowStore.getState()
   const store = useStoreApi()
+  const invalidateConversationVarValues = useInvalidateConversationVarValues(appId)
+  const invalidateSysVarValues = useInvalidateSysVarValues(appId)
 
   const addNodeInfo = (inspectVars: VarInInspect[]) => {
     const { getNodes } = store.getState()
@@ -48,6 +51,8 @@ const useSetWorkflowVarsWithValue = () => {
   }
 
   const fetchInspectVars = async () => {
+    invalidateConversationVarValues()
+    invalidateSysVarValues()
     const data = await fetchAllInspectVars(appId)
     addNodeInfo(data)
   }
diff --git a/web/app/components/workflow/hooks/use-inspect-vars-crud.ts b/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
index 0aaf0a762e..3da8ffcd09 100644
--- a/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
+++ b/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
@@ -1,20 +1,36 @@
 import { useWorkflowStore } from '../store'
-import { BlockEnum, type ValueSelector, type VarType } from '../types'
-const useCurrentVars = () => {
+import type { ValueSelector, VarType } from '../types'
+import {
+  useConversationVarValues,
+  useDeleteAllInspectorVars,
+  useDeleteInspectVar,
+  useDeleteNodeInspectorVars,
+  useInvalidateConversationVarValues,
+  useInvalidateSysVarValues,
+  useSysVarValues,
+} from '@/service/use-workflow'
+
+const useInspectVarsCrud = () => {
   const workflowStore = useWorkflowStore()
   const {
-    conversationVars,
+    appId,
     nodesWithInspectVars,
     getInspectVar,
     setInspectVar,
     deleteAllInspectVars: deleteAllInspectVarsInStore,
     deleteNodeInspectVars: deleteNodeInspectVarsInStore,
+    deleteInspectVar: deleteInspectVarInStore,
     getLastRunVar,
   } = workflowStore.getState()
 
-  // rag flow don't have start node
-  const startNode = nodesWithInspectVars.find(node => node.nodeType === BlockEnum.Start)
-  const systemVars = startNode?.vars.filter(varItem => varItem.selector[0] === 'sys')
+  const { data: conversationVars } = useConversationVarValues(appId)
+  const invalidateConversationVarValues = useInvalidateConversationVarValues(appId)
+  const { data: systemVars } = useSysVarValues(appId)
+  const invalidateSysVarValues = useInvalidateSysVarValues(appId)
+
+  const { mutate: doDeleteAllInspectorVars } = useDeleteAllInspectorVars(appId)
+  const { mutate: doDeleteNodeInspectorVars } = useDeleteNodeInspectorVars(appId)
+  const { mutate: doDeleteInspectVar } = useDeleteInspectVar(appId)
 
   const fetchInspectVarValue = (selector: ValueSelector) => {
     const nodeId = selector[0]
@@ -26,6 +42,7 @@ const useCurrentVars = () => {
 
   const editInspectVarValue = (varId: string, value: any) => {
     console.log('edit var', varId, value)
+
     // call api and update store
   }
 
@@ -38,17 +55,20 @@ const useCurrentVars = () => {
     console.log('edit var value type', varId, valueType)
   }
 
-  const deleteInspectVar = async (varId: string) => {
-    console.log('delete var', varId)
+  const deleteInspectVar = async (nodeId: string, varId: string) => {
+    await doDeleteInspectVar(varId)
+    deleteInspectVarInStore(nodeId, varId)
   }
 
   const deleteNodeInspectorVars = async (nodeId: string) => {
-    // todo fetch api
+    await doDeleteNodeInspectorVars(nodeId)
     deleteNodeInspectVarsInStore(nodeId)
   }
 
   const deleteAllInspectorVars = async () => {
-    // todo fetch api
+    await doDeleteAllInspectorVars()
+    await invalidateConversationVarValues()
+    await invalidateSysVarValues()
     deleteAllInspectVarsInStore()
   }
 
@@ -62,9 +82,11 @@ const useCurrentVars = () => {
       setInspectVar(nodeId, key, lastRunVar)
   }
 
+  console.log(conversationVars, systemVars)
+
   return {
-    conversationVars,
-    systemVars,
+    conversationVars: conversationVars || [],
+    systemVars: systemVars || [],
     nodesWithInspectVars,
     fetchInspectVarValue,
     editInspectVarValue,
@@ -78,4 +100,4 @@ const useCurrentVars = () => {
   }
 }
 
-export default useCurrentVars
+export default useInspectVarsCrud
diff --git a/web/app/components/workflow/store/workflow/debug/inspect-vars-slice.ts b/web/app/components/workflow/store/workflow/debug/inspect-vars-slice.ts
index dbc747c375..0e5768681a 100644
--- a/web/app/components/workflow/store/workflow/debug/inspect-vars-slice.ts
+++ b/web/app/components/workflow/store/workflow/debug/inspect-vars-slice.ts
@@ -18,6 +18,7 @@ type InspectVarsActions = {
   getNodeInspectVars: (nodeId: string) => NodeWithVar | undefined
   hasNodeInspectVars: (nodeId: string) => boolean
   setInspectVar: (nodeId: string, name: string, value: any) => void
+  deleteInspectVar: (nodeId: string, varId: string) => void
   getInspectVar: (nodeId: string, name: string) => any // The big value is null
 }
 
@@ -93,6 +94,23 @@ export const createInspectVarsSlice: StateCreator<InspectVarsSliceShape> = (set,
         state.nodesWithInspectVars = nodes
       }))
     },
+    deleteInspectVar: (nodeId, varId) => {
+      set(produce((state: InspectVarsSliceShape) => {
+        const nodes = state.nodesWithInspectVars.map((node) => {
+          if (node.nodeId === nodeId) {
+            return produce(node, (draft) => {
+              const needChangeVarIndex = draft.vars.findIndex((varItem) => {
+                return varItem.id === varId
+              })
+              if (needChangeVarIndex !== -1)
+                draft.vars.splice(needChangeVarIndex, 1)
+            })
+          }
+          return node
+        })
+        state.nodesWithInspectVars = nodes
+      }))
+    },
     getInspectVar(nodeId, name) {
       const node = get().getNodeInspectVars(nodeId)
       if (!node)
diff --git a/web/app/components/workflow/store/workflow/debug/mock-data.ts b/web/app/components/workflow/store/workflow/debug/mock-data.ts
index ef78c29753..85bc574bba 100644
--- a/web/app/components/workflow/store/workflow/debug/mock-data.ts
+++ b/web/app/components/workflow/store/workflow/debug/mock-data.ts
@@ -14,3 +14,29 @@ export const vars: VarInInspect[] = [
     edited: false,
   },
 ]
+
+export const conversationVars: VarInInspect[] = [
+  {
+    id: 'con1',
+    type: VarInInspectType.conversation,
+    name: 'conversationVar 1',
+    description: '',
+    selector: ['conversation', 'var1'],
+    value_type: VarType.string,
+    value: 'conversation var value...',
+    edited: false,
+  },
+]
+
+export const systemVars: VarInInspect[] = [
+  {
+    id: 'sys1',
+    type: VarInInspectType.system,
+    name: 'query',
+    description: '',
+    selector: ['sys', 'query'],
+    value_type: VarType.string,
+    value: 'Hello robot!',
+    edited: false,
+  },
+]
diff --git a/web/service/use-workflow.ts b/web/service/use-workflow.ts
index a118e5f3b8..ed9c809813 100644
--- a/web/service/use-workflow.ts
+++ b/web/service/use-workflow.ts
@@ -10,8 +10,9 @@ import type {
   WorkflowConfigResponse,
 } from '@/types/workflow'
 import type { CommonResponse } from '@/models/common'
-import { useReset } from './use-base'
+import { useInvalid, useReset } from './use-base'
 import { sleep } from '@/utils'
+import { conversationVars, systemVars } from '@/app/components/workflow/store/workflow/debug/mock-data'
 
 const NAME_SPACE = 'workflow'
 
@@ -123,3 +124,74 @@ export const useLastRun = (appID: string, nodeId: string, enabled: boolean) => {
     },
   })
 }
+
+const useConversationVarValuesKey = [NAME_SPACE, 'conversation-variable']
+
+export const useConversationVarValues = (appId: string) => {
+  let index = 1
+  return useQuery({
+    queryKey: [...useConversationVarValuesKey, appId],
+    queryFn: async () => {
+      await sleep(1000)
+      return Promise.resolve(conversationVars.map((item) => {
+        return {
+          ...item,
+          value: `${item.value}${index++}`,
+        }
+      }))
+    },
+  })
+}
+
+export const useInvalidateConversationVarValues = (appId: string) => {
+  return useInvalid([...useConversationVarValuesKey, appId])
+}
+
+export const useSysVarValuesKey = [NAME_SPACE, 'sys-variable']
+export const useSysVarValues = (appId: string) => {
+  let index = 1
+
+  return useQuery({
+    queryKey: [...useSysVarValuesKey, appId],
+    queryFn: async () => {
+      await sleep(1000)
+      return Promise.resolve(systemVars.map((item) => {
+        return {
+          ...item,
+          value: `${item.value}${index++}`,
+        }
+      }))
+    },
+  })
+}
+
+export const useInvalidateSysVarValues = (appId: string) => {
+  return useInvalid([...useSysVarValuesKey, appId])
+}
+
+export const useDeleteAllInspectorVars = (appId: string) => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'delete all inspector vars', appId],
+    mutationFn: async () => {
+      console.log('remove all inspector vars')
+    },
+  })
+}
+
+export const useDeleteNodeInspectorVars = (appId: string) => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'delete node inspector vars', appId],
+    mutationFn: async (nodeId: string) => {
+      console.log('remove node inspector vars', nodeId)
+    },
+  })
+}
+
+export const useDeleteInspectVar = (appId: string) => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'delete inspector var', appId],
+    mutationFn: async (varId: string) => {
+      console.log('remove inspector var', varId)
+    },
+  })
+}
diff --git a/web/types/workflow.ts b/web/types/workflow.ts
index c28f7a02ad..823c2f3730 100644
--- a/web/types/workflow.ts
+++ b/web/types/workflow.ts
@@ -376,6 +376,7 @@ export enum VarInInspectType {
   conversation = 'conversation',
   environment = 'environment',
   node = 'node',
+  system = 'sys',
 }
 
 export type VarInInspect = {