diff --git a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
index daeac6e28f..0f4568425d 100644
--- a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
@@ -7,7 +7,6 @@ import type { Body } from '../../types'
 import { BodyType } from '../../types'
 import useKeyValueList from '../../hooks/use-key-value-list'
 import KeyValue from '../key-value'
-import TextEditor from '../../../_base/components/editor/text-editor'
 import useAvailableVarList from '../../../_base/hooks/use-available-var-list'
 import InputWithVar from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import type { Var } from '@/app/components/workflow/types'
@@ -127,22 +126,15 @@ const EditBody: FC<Props> = ({
         )}
 
         {type === BodyType.rawText && (
-          <TextEditor
+          <InputWithVar
             title={<div className='uppercase'>Raw text</div>}
             onChange={handleBodyValueChange}
             value={payload.data}
-            minHeight={150}
-            readonly={readonly}
+            readOnly={readonly}
           />
         )}
 
         {type === BodyType.json && (
-          // <CodeEditor
-          //   readOnly={readonly}
-          //   title={<div className='uppercase'>JSON</div>}
-          //   value={payload.data} onChange={handleBodyValueChange}
-          //   language={CodeLanguage.json}
-          // />
           <InputWithVar
             title='JSON'
             value={payload.data}
diff --git a/web/app/components/workflow/nodes/http/node.tsx b/web/app/components/workflow/nodes/http/node.tsx
index 161bf97f8f..5178d0e4ff 100644
--- a/web/app/components/workflow/nodes/http/node.tsx
+++ b/web/app/components/workflow/nodes/http/node.tsx
@@ -1,22 +1,39 @@
 import type { FC } from 'react'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
 import type { HttpNodeType } from './types'
-import type { NodeProps } from '@/app/components/workflow/types'
-import SupportVarInput from '@/app/components/workflow/nodes/_base/components/support-var-input'
+import type { NodeProps, Var } from '@/app/components/workflow/types'
+import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
+import { VarType } from '@/app/components/workflow/types'
+import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
 
 const Node: FC<NodeProps<HttpNodeType>> = ({
+  id,
   data,
 }) => {
+  const { t } = useTranslation()
+
   const { method, url } = data
+  const availableVarList = useAvailableVarList(id, {
+    onlyLeafNodeVar: false,
+    filterVar: (varPayload: Var) => {
+      return [VarType.string, VarType.number].includes(varPayload.type)
+    },
+  })
   return (
     <div className='mb-1 px-3 py-1'>
       <div className='flex items-center p-1 rounded-md bg-gray-100'>
         <div className='shrink-0 px-1 h-7 leading-7 rounded bg-gray-25 text-xs font-semibold text-gray-700 uppercase'>{method}</div>
-        <SupportVarInput
-          wrapClassName='w-0 grow truncate flex items-center'
-          textClassName='ml-1 text-xs font-normal text-gray-700'
+        <Input
+          className={cn('bg-gray-100 border-gray-100', 'w-0 grow rounded-lg px-3 py-[6px] border')}
           value={url}
-          readonly
+          onChange={() => { }}
+          readOnly
+          nodesOutputVars={availableVarList}
+          onFocusChange={() => { }}
+          placeholder={t('workflow.nodes.http.apiPlaceholder')!}
+          placeholderClassName='!leading-[21px]'
         />
       </div>
     </div>
diff --git a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
index 4b44bc185c..5b49e9b778 100644
--- a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
+++ b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
@@ -38,7 +38,6 @@ const ConfigPrompt: FC<Props> = ({
   isChatModel,
   isChatApp,
   payload,
-  variables,
   onChange,
   isShowContext,
   hasSetBlockStatus,
@@ -137,7 +136,6 @@ const ConfigPrompt: FC<Props> = ({
                       }
                       value={item.text}
                       onChange={handleChatModePromptChange(index)}
-                      variables={variables}
                       readOnly={readOnly}
                       showRemove={(payload as PromptItem[]).length > 1}
                       onRemove={handleRemove(index)}
@@ -165,7 +163,6 @@ const ConfigPrompt: FC<Props> = ({
               title={<span className='capitalize'>{t(`${i18nPrefix}.prompt`)}</span>}
               value={(payload as PromptItem).text}
               onChange={handleCompletionPromptChange}
-              variables={variables}
               readOnly={readOnly}
               isChatModel={isChatModel}
               isChatApp={isChatApp}
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index bd7083428c..c609529127 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -193,7 +193,6 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
                 </div>}
                 value={QUERY_PLACEHOLDER_TEXT}
                 onChange={() => { }}
-                variables={[]}
                 readOnly
                 isShowContext={false}
                 isChatApp
@@ -243,7 +242,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
         <OutputVars>
           <>
             <VarItem
-              name='output'
+              name='text'
               type='string'
               description={t(`${i18nPrefix}.outputVars.output`)}
             />