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 ed3f79391e..38cdf93e09 100644
--- a/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
+++ b/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
@@ -18,6 +18,7 @@ const useInspectVarsCrud = () => {
     nodesWithInspectVars,
     getInspectVar,
     setInspectVarValue,
+    renameInspectVarName: renameInspectVarNameInStore,
     deleteAllInspectVars: deleteAllInspectVarsInStore,
     deleteNodeInspectVars: deleteNodeInspectVarsInStore,
     deleteInspectVar: deleteInspectVarInStore,
@@ -69,9 +70,13 @@ const useInspectVarsCrud = () => {
     setInspectVarValue(nodeId, varId, value)
   }
 
-  const editInspectVarSelector = (varId: string, selector: ValueSelector) => {
-    console.log('edit var selector', varId, selector)
-    // call api and update store
+  const renameInspectVarName = async (nodeId: string, varId: string, selector: ValueSelector) => {
+    await doEditInspectorVar({
+      nodeId,
+      varId,
+      name: selector[1],
+    })
+    renameInspectVarNameInStore(nodeId, varId, selector)
   }
 
   const editInspectVarValueType = (varId: string, valueType: VarType) => {
@@ -96,7 +101,7 @@ const useInspectVarsCrud = () => {
     nodesWithInspectVars,
     fetchInspectVarValue,
     editInspectVarValue,
-    editInspectVarSelector,
+    renameInspectVarName,
     editInspectVarValueType,
     deleteInspectVar,
     deleteNodeInspectorVars,
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 28ad70554b..79a9453835 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
@@ -1,6 +1,7 @@
 import type { StateCreator } from 'zustand'
 import produce from 'immer'
 import type { NodeWithVar, VarInInspect } from '@/types/workflow'
+import type { ValueSelector } from '../../../types'
 
 type InspectVarsState = {
   currentFocusNodeId: string | null
@@ -18,6 +19,7 @@ type InspectVarsActions = {
   getNodeInspectVars: (nodeId: string) => NodeWithVar | undefined
   hasNodeInspectVars: (nodeId: string) => boolean
   setInspectVarValue: (nodeId: string, name: string, value: any) => void
+  renameInspectVarName: (nodeId: string, varId: string, selector: ValueSelector) => void
   deleteInspectVar: (nodeId: string, varId: string) => void
   getInspectVar: (nodeId: string, name: string) => any // The big value is null
 }
@@ -94,6 +96,23 @@ export const createInspectVarsSlice: StateCreator<InspectVarsSliceShape> = (set,
         state.nodesWithInspectVars = nodes
       }))
     },
+    renameInspectVarName: (nodeId, varId, selector) => {
+      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[needChangeVarIndex].selector = selector
+            })
+          }
+          return node
+        })
+        state.nodesWithInspectVars = nodes
+      }))
+    },
     deleteInspectVar: (nodeId, varId) => {
       set(produce((state: InspectVarsSliceShape) => {
         const nodes = state.nodesWithInspectVars.map((node) => {