diff --git a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
index c2276e10ed..497b62fb7d 100644
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -19,7 +19,6 @@ import TooltipPlus from '@/app/components/base/tooltip-plus'
 type Props = {
   title: string | JSX.Element
   value: string
-  variables: string[]
   onChange: (value: string) => void
   readOnly?: boolean
   showRemove?: boolean
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 06b9feca13..34753218b4 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
@@ -8,11 +8,14 @@ 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 CodeEditor from '../../../_base/components/editor/code-editor'
-import { CodeLanguage } from '../../../code/types'
+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'
+import { VarType } from '@/app/components/workflow/types'
 
 type Props = {
   readonly: boolean
+  nodeId: string
   payload: Body
   onChange: (payload: Body) => void
 }
@@ -34,10 +37,17 @@ const bodyTextMap = {
 
 const EditBody: FC<Props> = ({
   readonly,
+  nodeId,
   payload,
   onChange,
 }) => {
   const { type } = payload
+  const availableVarList = useAvailableVarList(nodeId, {
+    onlyLeafNodeVar: false,
+    filterVar: (varPayload: Var) => {
+      return [VarType.string, VarType.number].includes(varPayload.type)
+    },
+  })
 
   const handleTypeChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const newType = e.target.value as BodyType
@@ -111,11 +121,10 @@ const EditBody: FC<Props> = ({
         {(type === BodyType.formData || type === BodyType.xWwwFormUrlencoded) && (
           <KeyValue
             readonly={readonly}
+            nodeId={nodeId}
             list={body}
             onChange={setBody}
             onAdd={addBody}
-            isKeyValueEdit={isBodyKeyValueEdit}
-            toggleKeyValueEdit={toggleIsBodyKeyValueEdit}
           />
         )}
 
@@ -130,11 +139,18 @@ const EditBody: FC<Props> = ({
         )}
 
         {type === BodyType.json && (
-          <CodeEditor
-            readOnly={readonly}
-            title={<div className='uppercase'>JSON</div>}
-            value={payload.data} onChange={handleBodyValueChange}
-            language={CodeLanguage.json}
+          // <CodeEditor
+          //   readOnly={readonly}
+          //   title={<div className='uppercase'>JSON</div>}
+          //   value={payload.data} onChange={handleBodyValueChange}
+          //   language={CodeLanguage.json}
+          // />
+          <InputWithVar
+            title='JSON'
+            value={payload.data}
+            onChange={handleBodyValueChange}
+            justVar
+            nodesOutputVars={availableVarList}
           />
         )}
       </div>
diff --git a/web/app/components/workflow/nodes/http/panel.tsx b/web/app/components/workflow/nodes/http/panel.tsx
index d2649962e4..91ea68cd2c 100644
--- a/web/app/components/workflow/nodes/http/panel.tsx
+++ b/web/app/components/workflow/nodes/http/panel.tsx
@@ -105,6 +105,7 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
           title={t(`${i18nPrefix}.body`)}
         >
           <EditBody
+            nodeId={id}
             readonly={readOnly}
             payload={inputs.body}
             onChange={setBody}