diff --git a/web/app/components/workflow/nodes/_base/components/variable/utils.ts b/web/app/components/workflow/nodes/_base/components/variable/utils.ts
new file mode 100644
index 0000000000..4c17865011
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/variable/utils.ts
@@ -0,0 +1,35 @@
+import { BlockEnum } from '@/app/components/workflow/types'
+import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
+import type { NodeOutPutVar } from '@/app/components/workflow/types'
+
+const formatItem = (item: any): NodeOutPutVar => {
+  const { id, data } = item
+  const res: NodeOutPutVar = {
+    nodeId: id,
+    title: data.title,
+    vars: [],
+  }
+  switch (data.type) {
+    case BlockEnum.Start: {
+      const {
+        variables,
+      } = data as StartNodeType
+      res.vars = variables.map((v) => {
+        return {
+          variable: v.variable,
+          type: v.type,
+        }
+      })
+      break
+    }
+
+    // default:
+    //   // throw new Error('unknown type')
+    //   break
+  }
+
+  return res
+}
+export const toNodeOutputVars = (nodes: any[]): NodeOutPutVar[] => {
+  return nodes.map(formatItem)
+}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
index c7f5f4a58c..1fe967113b 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import React, { useState } from 'react'
 import cn from 'classnames'
-import { mockNodeOutputVars, mockNodesData } from '../../../mock'
 import VarReferencePopup from './var-reference-popup'
+import { toNodeOutputVars } from './utils'
 import type { ValueSelector } from '@/app/components/workflow/types'
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'
 import { Line3 } from '@/app/components/base/icons/src/public/common'
@@ -31,9 +31,8 @@ type Props = {
 //   return type.charAt(0).toUpperCase() + type.substring(1)
 // }
 
-// TODO: get data from context
-export const getNodeInfoById = (id: string) => {
-  return mockNodesData[id]
+export const getNodeInfoById = (nodes: any, id: string) => {
+  return nodes.find((node: any) => node.id === id)
 }
 
 const VarReferencePicker: FC<Props> = ({
@@ -46,9 +45,14 @@ const VarReferencePicker: FC<Props> = ({
 }) => {
   const { getTreeLeafNodes, getBeforeNodesInSameBranch } = useWorkflow()
   // console.log(getBeforeNodesInSameBranch(nodeId), getTreeLeafNodes())
+  const availableNodes = getBeforeNodesInSameBranch(nodeId)
+  const outputVars = toNodeOutputVars(availableNodes)
+  // console.log(outputVars)
   const [open, setOpen] = useState(false)
   const hasValue = value.length > 0
-  const node = hasValue ? getNodeInfoById(value[0]) : null
+  const outputVarNodeId = hasValue ? value[0] : ''
+  const outputVarNode = hasValue ? getNodeInfoById(availableNodes, outputVarNodeId)?.data : null
+  console.log(hasValue, value, outputVarNode)
   const varName = hasValue ? value[value.length - 1] : ''
   // TODO: get var type through node and  value
   const getVarType = () => {
@@ -72,10 +76,10 @@ const VarReferencePicker: FC<Props> = ({
                       <div className='p-[1px]'>
                         <VarBlockIcon
                           className='!text-gray-900'
-                          type={node?.type}
+                          type={outputVarNode?.type}
                         />
                       </div>
-                      <div className='mx-0.5 text-xs font-medium text-gray-700'>{node?.title}</div>
+                      <div className='mx-0.5 text-xs font-medium text-gray-700'>{outputVarNode?.title}</div>
                       <Line3 className='mr-0.5'></Line3>
                     </div>
                   )}
@@ -94,7 +98,7 @@ const VarReferencePicker: FC<Props> = ({
           minWidth: 227,
         }}>
           <VarReferencePopup
-            vars={mockNodeOutputVars}
+            vars={outputVars}
             onChange={(value) => {
               onChange(value)
               setOpen(false)