diff --git a/web/app/components/workflow/nodes/http/components/key-value/index.tsx b/web/app/components/workflow/nodes/http/components/key-value/index.tsx
index a400de521b..65fab16cac 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/index.tsx
@@ -6,6 +6,7 @@ import KeyValueEdit from './key-value-edit'
 
 type Props = {
   readonly: boolean
+  nodeId: string
   list: KeyValue[]
   onChange: (newList: KeyValue[]) => void
   onAdd: () => void
@@ -14,6 +15,7 @@ type Props = {
 
 const KeyValueList: FC<Props> = ({
   readonly,
+  nodeId,
   list,
   onChange,
   onAdd,
@@ -42,6 +44,7 @@ const KeyValueList: FC<Props> = ({
   // })()
   return <KeyValueEdit
     readonly={readonly}
+    nodeId={nodeId}
     list={list}
     onChange={onChange}
     onAdd={onAdd}
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
index 53c70b0c6a..3e605bc223 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
@@ -12,6 +12,7 @@ const i18nPrefix = 'workflow.nodes.http'
 
 type Props = {
   readonly: boolean
+  nodeId: string
   list: KeyValue[]
   onChange: (newList: KeyValue[]) => void
   onAdd: () => void
@@ -20,6 +21,7 @@ type Props = {
 
 const KeyValueList: FC<Props> = ({
   readonly,
+  nodeId,
   list,
   onChange,
   onAdd,
@@ -68,6 +70,7 @@ const KeyValueList: FC<Props> = ({
         list.map((item, index) => (
           <KeyValueItem
             key={index}
+            nodeId={nodeId}
             payload={item}
             onChange={handleChange(index)}
             onRemove={handleRemove(index)}
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
index 239b5ff5c3..e665b7fdca 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
@@ -3,11 +3,14 @@ import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
+import useAvailableVarList from '../../../../_base/hooks/use-available-var-list'
 import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
-
+import type { Var } from '@/app/components/workflow/types'
+import { VarType } from '@/app/components/workflow/types'
 type Props = {
   className?: string
+  nodeId: string
   value: string
   onChange: (newValue: string) => void
   hasRemove: boolean
@@ -18,6 +21,7 @@ type Props = {
 
 const InputItem: FC<Props> = ({
   className,
+  nodeId,
   value,
   onChange,
   hasRemove,
@@ -30,6 +34,12 @@ const InputItem: FC<Props> = ({
   const hasValue = !!value
 
   const [isFocus, setIsFocus] = useState(false)
+  const availableVarList = useAvailableVarList(nodeId, {
+    onlyLeafNodeVar: false,
+    filterVar: (varPayload: Var) => {
+      return [VarType.string, VarType.number].includes(varPayload.type)
+    },
+  })
 
   const handleRemove = useCallback((e: React.MouseEvent) => {
     e.stopPropagation()
@@ -55,9 +65,9 @@ const InputItem: FC<Props> = ({
             value={value}
             onChange={onChange}
             readOnly={readOnly}
-            nodesOutputVars={[]}
+            nodesOutputVars={availableVarList}
             onFocusChange={setIsFocus}
-            placeholder={t('workflow.nodes.http.apiPlaceholder')!}
+            placeholder={t('workflow.nodes.http.insertVarPlaceholder')!}
             placeholderClassName='!leading-[21px]'
           />
         )
@@ -71,9 +81,9 @@ const InputItem: FC<Props> = ({
               value={value}
               onChange={onChange}
               readOnly={readOnly}
-              nodesOutputVars={[]}
+              nodesOutputVars={availableVarList}
               onFocusChange={setIsFocus}
-              placeholder={t('workflow.nodes.http.apiPlaceholder')!}
+              placeholder={t('workflow.nodes.http.insertVarPlaceholder')!}
               placeholderClassName='!leading-[21px]'
             />
           )}
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
index 5469cc6c12..27abed7f33 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
@@ -11,6 +11,7 @@ const i18nPrefix = 'workflow.nodes.http'
 
 type Props = {
   className?: string
+  nodeId: string
   readonly: boolean
   canRemove: boolean
   payload: KeyValue
@@ -22,6 +23,7 @@ type Props = {
 
 const KeyValueItem: FC<Props> = ({
   className,
+  nodeId,
   readonly,
   canRemove,
   payload,
@@ -45,9 +47,10 @@ const KeyValueItem: FC<Props> = ({
 
   return (
     // group class name is for hover row show remove button
-    <div className={cn(className, 'group flex items-center h-min-7 border-t border-gray-200')}>
+    <div className={cn(className, 'group flex items-start h-min-7 border-t border-gray-200')}>
       <div className='w-1/2 h-full border-r border-gray-200'>
         <InputItem
+          nodeId={nodeId}
           value={payload.key}
           onChange={handleChange('key')}
           hasRemove={false}
@@ -57,6 +60,7 @@ const KeyValueItem: FC<Props> = ({
       </div>
       <div className='w-1/2  h-full'>
         <InputItem
+          nodeId={nodeId}
           value={payload.value}
           onChange={handleChange('value')}
           hasRemove={!readonly && canRemove}
diff --git a/web/app/components/workflow/nodes/http/panel.tsx b/web/app/components/workflow/nodes/http/panel.tsx
index 55e3e7f28a..5d679f96a6 100644
--- a/web/app/components/workflow/nodes/http/panel.tsx
+++ b/web/app/components/workflow/nodes/http/panel.tsx
@@ -102,6 +102,7 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
           title={t(`${i18nPrefix}.headers`)}
         >
           <KeyValue
+            nodeId={id}
             list={headers}
             onChange={setHeaders}
             onAdd={addHeader}
@@ -112,6 +113,7 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
           title={t(`${i18nPrefix}.params`)}
         >
           <KeyValue
+            nodeId={id}
             list={params}
             onChange={setParams}
             onAdd={addParam}
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index 3d8cae4575..d5477582a9 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -231,6 +231,7 @@ const translation = {
         'api-key-title': 'API Key',
         'header': 'Header',
       },
+      insertVarPlaceholder: 'type \'/\' to insert variable',
     },
     code: {
       inputVars: 'Input Variables',
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index 7782a8e7c1..2762908788 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -231,6 +231,7 @@ const translation = {
         'api-key-title': 'API Key',
         'header': 'Header',
       },
+      insertVarPlaceholder: '键入 \'/\' 键快速插入变量',
     },
     code: {
       inputVars: '输入变量',