diff --git a/web/app/components/workflow/nodes/_base/components/config-vision.tsx b/web/app/components/workflow/nodes/_base/components/config-vision.tsx
new file mode 100644
index 0000000000..4a8d299986
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/config-vision.tsx
@@ -0,0 +1,55 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import produce from 'immer'
+import ResolutionPicker from '@/app/components/workflow/nodes/llm/components/resolution-picker'
+import Field from '@/app/components/workflow/nodes/_base/components/field'
+import Switch from '@/app/components/base/switch'
+import type { VisionSetting } from '@/app/components/workflow/types'
+import type { Resolution } from '@/types/app'
+const i18nPrefix = 'workflow.nodes.llm'
+
+type Props = {
+  enabled: boolean
+  onEnabledChange: (enabled: boolean) => void
+  config: VisionSetting
+  onConfigChange: (config: VisionSetting) => void
+}
+
+const ConfigVision: FC<Props> = ({
+  enabled,
+  onEnabledChange,
+  config,
+  onConfigChange,
+}) => {
+  const { t } = useTranslation()
+
+  const handleVisionResolutionChange = useCallback((resolution: Resolution) => {
+    const newConfig = produce(config, (draft) => {
+      draft.resolution = resolution
+    })
+    onConfigChange(newConfig)
+  }, [config, onConfigChange])
+
+  return (
+    <Field
+      title={t(`${i18nPrefix}.vision`)}
+      tooltip={t('appDebug.vision.description')!}
+      operations={
+        <Switch size='md' defaultValue={enabled} onChange={onEnabledChange} />
+      }
+    >
+      {enabled
+        ? (
+          <ResolutionPicker
+            value={config.resolution}
+            onChange={handleVisionResolutionChange}
+          />
+        )
+        : null}
+
+    </Field>
+  )
+}
+export default React.memo(ConfigVision)
diff --git a/web/app/components/workflow/types.ts b/web/app/components/workflow/types.ts
index 73042b94ae..69cb7d8fe4 100644
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@@ -3,7 +3,7 @@ import type {
   Node as ReactFlowNode,
   Viewport,
 } from 'reactflow'
-import type { TransferMethod } from '@/types/app'
+import type { Resolution, TransferMethod } from '@/types/app'
 import type { ToolDefaultValue } from '@/app/components/workflow/block-selector/types'
 import type { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
 import type { NodeTracing } from '@/types/workflow'
@@ -344,3 +344,8 @@ export type UploadFileSetting = {
   supportFileTypes: SupportUploadFileTypes
   customFileTypes?: string[]
 }
+
+export type VisionSetting = {
+  valueSelector: ValueSelector
+  resolution: Resolution
+}