diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
new file mode 100644
index 0000000000..9ec5c68053
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
@@ -0,0 +1,75 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import produce from 'immer'
+import VarReferencePicker from './var-reference-picker'
+import type { ValueSelector, Variable } from '@/app/components/workflow/types'
+import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
+
+type Props = {
+  readonly: boolean
+  list: Variable[]
+  onChange: (list: Variable[]) => void
+}
+
+const VarList: FC<Props> = ({
+  readonly,
+  list,
+  onChange,
+}) => {
+  const handleVarNameChange = useCallback((index: number) => {
+    return (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newList = produce(list, (draft) => {
+        draft[index].variable = e.target.value
+      })
+      onChange(newList)
+    }
+  }, [list, onChange])
+
+  const handleVarReferenceChange = useCallback((index: number) => {
+    return (value: ValueSelector) => {
+      const newList = produce(list, (draft) => {
+        draft[index].value_selector = value
+      })
+      onChange(newList)
+    }
+  }, [list, onChange])
+
+  const handleVarRemove = useCallback((index: number) => {
+    return () => {
+      const newList = produce(list, (draft) => {
+        draft.splice(index, 1)
+      })
+      onChange(newList)
+    }
+  }, [list, onChange])
+
+  return (
+    <div className='space-y-2'>
+      {list.map((item, index) => (
+        <div className='flex items-center space-x-1' key={index}>
+          <input
+            readOnly={readonly}
+            value={list[index].variable}
+            onChange={handleVarNameChange(index)}
+            className='w-[120px] h-8 leading-8 px-2.5  rounded-lg border-0 bg-gray-100  text-gray-900 text-[13px]  placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
+            type='text' />
+          <VarReferencePicker
+            readonly={readonly}
+            isShowNodeName
+            className='grow'
+            value={item.value_selector}
+            onChange={handleVarReferenceChange(index)}
+          />
+          <div
+            className='p-2 rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer'
+            onClick={handleVarRemove(index)}
+          >
+            <Trash03 className='w-4 h-4 text-gray-500' />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+export default React.memo(VarList)
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
new file mode 100644
index 0000000000..9ee9621d90
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
@@ -0,0 +1,46 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from 'classnames'
+import { BlockEnum } from '@/app/components/workflow/types'
+import type { ValueSelector } from '@/app/components/workflow/types'
+import { VarBlockIcon } from '@/app/components/workflow/block-icon'
+type Props = {
+  className?: string
+  isShowNodeName: boolean
+  readonly: boolean
+  value: ValueSelector
+  onChange: (value: ValueSelector) => void
+}
+
+const getNodeInfoById = () => {
+
+}
+
+const VarReferencePicker: FC<Props> = ({
+  className,
+  isShowNodeName,
+  value,
+}) => {
+  const valueNotSet = value.length === 0
+  const nodeName = !valueNotSet ? value[0] : ''
+  const varName = !valueNotSet ? value[value.length - 1] : ''
+  // TODO: get var type through node and  value
+  const getVarType = () => {
+    return 'string'
+  }
+  return (
+    <div className={cn(className)}>
+      <div className='flex items-center'>
+        {isShowNodeName && (
+          <VarBlockIcon
+            className='!text-gray-900'
+            type={BlockEnum.Start}
+          />
+        )} /
+        {!valueNotSet ? (`${varName} / ${getVarType()}`) : ''}
+      </div>
+    </div>
+  )
+}
+export default React.memo(VarReferencePicker)
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index 20798aaa78..90c18ef297 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import BasePanel from '../_base/panel'
-import VarList from '../_base/components/var/var-list'
+import VarList from '../_base/components/variable/var-list'
 import useInput from './use-input'
 import { mockLLMNodeData } from './mock'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
diff --git a/web/app/components/workflow/nodes/mock.ts b/web/app/components/workflow/nodes/mock.ts
new file mode 100644
index 0000000000..e69de29bb2