diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
index 4edbd7c391..ed8bece90c 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
@@ -51,7 +51,7 @@ const FormItem: FC<Props> = ({
     if (typeof payload.label === 'object') {
       const { nodeType, nodeName, variable } = payload.label
       return (
-        <div className='flex items-center'>
+        <div className='h-full flex items-center'>
           <div className='flex items-center'>
             <div className='p-[1px]'>
               <VarBlockIcon type={nodeType || BlockEnum.Start} />
diff --git a/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts b/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
index 63b36bf429..82fe8c84d3 100644
--- a/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
+++ b/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
@@ -1,11 +1,12 @@
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { unionBy } from 'lodash-es'
 import {
   useIsChatMode,
   useNodeDataUpdate,
   useWorkflow,
 } from '@/app/components/workflow/hooks'
-import { toNodeOutputVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import { getNodeInfoById, toNodeOutputVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 
 import type { CommonNodeType, InputVar, ValueSelector, Var, Variable } from '@/app/components/workflow/types'
 import { BlockEnum, InputVarType, NodeRunningStatus, VarType } from '@/app/components/workflow/types'
@@ -22,7 +23,7 @@ import QuestionClassifyDefault from '@/app/components/workflow/nodes/question-cl
 import HTTPDefault from '@/app/components/workflow/nodes/http/default'
 import ToolDefault from '@/app/components/workflow/nodes/tool/default'
 import VariableAssigner from '@/app/components/workflow/nodes/variable-assigner/default'
-
+import { getInputVars as doGetInputVars } from '@/app/components/base/prompt-editor/constants'
 const { checkValid: checkLLMValid } = LLMDefault
 const { checkValid: checkKnowledgeRetrievalValid } = KnowledgeRetrievalDefault
 const { checkValid: checkIfElseValid } = IfElseDefault
@@ -83,6 +84,7 @@ const useOneStepRun = <T>({
   const { getBeforeNodesInSameBranch } = useWorkflow() as any
   const isChatMode = useIsChatMode()
 
+  const availableNodes = getBeforeNodesInSameBranch(id)
   const allOutputVars = toNodeOutputVars(getBeforeNodesInSameBranch(id), isChatMode)
   const getVar = (valueSelector: ValueSelector): Var | undefined => {
     let res: Var | undefined
@@ -232,10 +234,35 @@ const useOneStepRun = <T>({
     return varInputs
   }
 
+  const getInputVars = (textList: string[]) => {
+    const valueSelectors: ValueSelector[] = []
+    textList.forEach((text) => {
+      valueSelectors.push(...doGetInputVars(text))
+    })
+
+    const variables = unionBy(valueSelectors, item => item.join('.')).map((item) => {
+      const varInfo = getNodeInfoById(availableNodes, item[0])?.data
+
+      return {
+        label: {
+          nodeType: varInfo?.type,
+          nodeName: varInfo?.title || availableNodes[0]?.data.title, // default start node title
+          variable: item[item.length - 1],
+        },
+        variable: `#${item.join('.')}#`,
+        value_selector: item,
+      }
+    })
+
+    const varInputs = toVarInputs(variables)
+    return varInputs
+  }
+
   return {
     isShowSingleRun,
     hideSingleRun,
     toVarInputs,
+    getInputVars,
     runningStatus,
     isCompleted,
     handleRun,
diff --git a/web/app/components/workflow/nodes/http/components/api-input.tsx b/web/app/components/workflow/nodes/http/components/api-input.tsx
index 70a750db5b..d274f194a4 100644
--- a/web/app/components/workflow/nodes/http/components/api-input.tsx
+++ b/web/app/components/workflow/nodes/http/components/api-input.tsx
@@ -70,7 +70,7 @@ const ApiInput: FC<Props> = ({
         readOnly={readonly}
         nodesOutputVars={availableVarList}
         onFocusChange={setIsFocus}
-        placeholder={t('workflow.nodes.http.apiPlaceholder')!}
+        placeholder={!readonly ? t('workflow.nodes.http.apiPlaceholder')! : ''}
         placeholderClassName='!leading-[21px]'
       />
     </div >
diff --git a/web/app/components/workflow/nodes/http/node.tsx b/web/app/components/workflow/nodes/http/node.tsx
index 5178d0e4ff..27ed4b6af6 100644
--- a/web/app/components/workflow/nodes/http/node.tsx
+++ b/web/app/components/workflow/nodes/http/node.tsx
@@ -32,7 +32,7 @@ const Node: FC<NodeProps<HttpNodeType>> = ({
           readOnly
           nodesOutputVars={availableVarList}
           onFocusChange={() => { }}
-          placeholder={t('workflow.nodes.http.apiPlaceholder')!}
+          placeholder={' '}
           placeholderClassName='!leading-[21px]'
         />
       </div>
diff --git a/web/app/components/workflow/nodes/http/use-config.ts b/web/app/components/workflow/nodes/http/use-config.ts
index 9fea12ade6..3d2dd21bcf 100644
--- a/web/app/components/workflow/nodes/http/use-config.ts
+++ b/web/app/components/workflow/nodes/http/use-config.ts
@@ -88,7 +88,7 @@ const useConfig = (id: string, payload: HttpNodeType) => {
   const {
     isShowSingleRun,
     hideSingleRun,
-    toVarInputs,
+    getInputVars,
     runningStatus,
     handleRun,
     handleStop,
@@ -100,7 +100,15 @@ const useConfig = (id: string, payload: HttpNodeType) => {
     data: inputs,
     defaultRunInputData: {},
   })
-  const varInputs = toVarInputs(inputs.variables)
+  const hasVarTexts = (() => {
+    return [
+      inputs.url,
+      // inputs.headers,
+      // inputs.params,
+      // inputs.body.data,
+    ]
+  })()
+  const varInputs = getInputVars(hasVarTexts)
 
   const inputVarValues = (() => {
     const vars: Record<string, any> = {}
diff --git a/web/app/components/workflow/nodes/llm/use-config.ts b/web/app/components/workflow/nodes/llm/use-config.ts
index 928fe3efe5..3b594b426f 100644
--- a/web/app/components/workflow/nodes/llm/use-config.ts
+++ b/web/app/components/workflow/nodes/llm/use-config.ts
@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import produce from 'immer'
-import { flatten, uniqBy } from 'lodash'
 import useVarList from '../_base/hooks/use-var-list'
 import { VarType } from '../../types'
 import type { Memory, ValueSelector, Var } from '../../types'
@@ -8,9 +7,7 @@ import { useStore } from '../../store'
 import {
   useIsChatMode,
   useNodesReadOnly,
-  useWorkflow,
 } from '../../hooks'
-import { getNodeInfoById } from '../_base/components/variable/utils'
 import type { LLMNodeType } from './types'
 import { Resolution } from '@/types/app'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel, useTextGenerationCurrentProviderAndModelAndModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
@@ -19,14 +16,11 @@ import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-cr
 import useOneStepRun from '@/app/components/workflow/nodes/_base/hooks/use-one-step-run'
 import type { PromptItem } from '@/models/debug'
 import { RETRIEVAL_OUTPUT_STRUCT } from '@/app/components/workflow/constants'
-import { checkHasContextBlock, checkHasHistoryBlock, checkHasQueryBlock, getInputVars } from '@/app/components/base/prompt-editor/constants'
+import { checkHasContextBlock, checkHasHistoryBlock, checkHasQueryBlock } from '@/app/components/base/prompt-editor/constants'
 
 const useConfig = (id: string, payload: LLMNodeType) => {
   const { nodesReadOnly: readOnly } = useNodesReadOnly()
   const isChatMode = useIsChatMode()
-  const { getBeforeNodesInSameBranch } = useWorkflow()
-
-  const availableNodes = getBeforeNodesInSameBranch(id)
 
   const defaultConfig = useStore(s => s.nodesDefaultConfigs)[payload.type]
   const [defaultRolePrefix, setDefaultRolePrefix] = useState<{ user: string; assistant: string }>({ user: '', assistant: '' })
@@ -201,7 +195,7 @@ const useConfig = (id: string, payload: LLMNodeType) => {
   const {
     isShowSingleRun,
     hideSingleRun,
-    toVarInputs,
+    getInputVars,
     runningStatus,
     handleRun,
     handleStop,
@@ -268,35 +262,8 @@ const useConfig = (id: string, payload: LLMNodeType) => {
       '#files#': newFiles,
     })
   }, [runInputData, setRunInputData])
-  const variables = (() => {
-    let valueSelectors: ValueSelector[] = []
-    if (isChatModel) {
-      valueSelectors = flatten(
-        (inputs.prompt_template as PromptItem[])
-          .map(item => getInputVars(item.text)),
-      )
-    }
-    else {
-      valueSelectors = getInputVars((inputs.prompt_template as PromptItem).text)
-    }
 
-    const variables = uniqBy(valueSelectors, item => item.join('.')).map((item) => {
-      const varInfo = getNodeInfoById(availableNodes, item[0])?.data
-
-      return {
-        label: {
-          nodeType: varInfo?.type,
-          nodeName: varInfo?.title || availableNodes[0]?.data.title, // default start node title
-          variable: item[item.length - 1],
-        },
-        variable: `#${item.join('.')}#`,
-        value_selector: item,
-      }
-    })
-
-    return variables
-  })()
-  const varInputs = toVarInputs(variables)
+  const varInputs = getInputVars(isChatModel ? (inputs.prompt_template as PromptItem[]).map(item => item.text) : [(inputs.prompt_template as PromptItem).text])
 
   return {
     readOnly,