diff --git a/web/app/components/app/configuration/index.tsx b/web/app/components/app/configuration/index.tsx
index fbb375aa27..9c55e42547 100644
--- a/web/app/components/app/configuration/index.tsx
+++ b/web/app/components/app/configuration/index.tsx
@@ -72,6 +72,7 @@ import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import NewFeaturePanel from '@/app/components/base/features/new-feature-panel'
 import { fetchFileUploadConfig } from '@/service/common'
 import { correctProvider } from '@/utils'
+import PluginDependency from '@/app/components/workflow/plugin-dependency'
 
 type PublishConfig = {
   modelConfig: ModelConfig
@@ -1041,6 +1042,7 @@ const Configuration: FC = () => {
               onAutoAddPromptVariable={handleAddPromptVariable}
             />
           )}
+          <PluginDependency />
         </>
       </FeaturesProvider>
     </ConfigContext.Provider>
diff --git a/web/app/components/app/create-from-dsl-modal/index.tsx b/web/app/components/app/create-from-dsl-modal/index.tsx
index 12e2266c22..26e175eb56 100644
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -25,8 +25,7 @@ import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { getRedirection } from '@/utils/app-redirection'
 import cn from '@/utils/classnames'
-import { useStore as usePluginDependencyStore } from '@/app/components/workflow/plugin-dependency/store'
-import PluginDependency from '@/app/components/workflow/plugin-dependency'
+import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 
 type CreateFromDSLModalProps = {
   show: boolean
@@ -52,6 +51,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
   const [showErrorModal, setShowErrorModal] = useState(false)
   const [versions, setVersions] = useState<{ importedVersion: string; systemVersion: string }>()
   const [importId, setImportId] = useState<string>()
+  const { handleCheckPluginDependencies } = usePluginDependencies()
 
   const readFile = (file: File) => {
     const reader = new FileReader()
@@ -103,11 +103,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
       if (!response)
         return
 
-      const { id, status, app_id, imported_dsl_version, current_dsl_version, leaked_dependencies } = response
-      if (leaked_dependencies?.length) {
-        const { setDependencies } = usePluginDependencyStore.getState()
-        setDependencies(leaked_dependencies)
-      }
+      const { id, status, app_id, imported_dsl_version, current_dsl_version } = response
       if (status === DSLImportStatus.COMPLETED || status === DSLImportStatus.COMPLETED_WITH_WARNINGS) {
         if (onSuccess)
           onSuccess()
@@ -120,6 +116,8 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
           children: status === DSLImportStatus.COMPLETED_WITH_WARNINGS && t('app.newApp.appCreateDSLWarning'),
         })
         localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
+        if (app_id)
+          await handleCheckPluginDependencies(app_id)
         getRedirection(isCurrentWorkspaceEditor, { id: app_id }, push)
       }
       else if (status === DSLImportStatus.PENDING) {
@@ -138,6 +136,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         notify({ type: 'error', message: t('app.newApp.appCreateFailed') })
       }
     }
+    // eslint-disable-next-line unused-imports/no-unused-vars
     catch (e) {
       notify({ type: 'error', message: t('app.newApp.appCreateFailed') })
     }
@@ -164,6 +163,8 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
           type: 'success',
           message: t('app.newApp.appCreated'),
         })
+        if (app_id)
+          await handleCheckPluginDependencies(app_id)
         localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
         getRedirection(isCurrentWorkspaceEditor, { id: app_id }, push)
       }
@@ -171,6 +172,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         notify({ type: 'error', message: t('app.newApp.appCreateFailed') })
       }
     }
+    // eslint-disable-next-line unused-imports/no-unused-vars
     catch (e) {
       notify({ type: 'error', message: t('app.newApp.appCreateFailed') })
     }
@@ -282,7 +284,6 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
             <div>{t('app.newApp.appCreateDSLErrorPart4')}<span className='system-md-medium'>{versions?.systemVersion}</span></div>
           </div>
         </div>
-        <PluginDependency />
         <div className='flex pt-6 justify-end items-start gap-2 self-stretch'>
           <Button variant='secondary' onClick={() => setShowErrorModal(false)}>{t('app.newApp.Cancel')}</Button>
           <Button variant='primary' destructive onClick={onDSLConfirm}>{t('app.newApp.Confirm')}</Button>
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index ecd35876e7..f92478d794 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -72,6 +72,7 @@ import SyncingDataModal from './syncing-data-modal'
 import UpdateDSLModal from './update-dsl-modal'
 import DSLExportConfirmModal from './dsl-export-confirm-modal'
 import LimitTips from './limit-tips'
+import PluginDependency from './plugin-dependency'
 import {
   useStore,
   useWorkflowStore,
@@ -327,6 +328,7 @@ const Workflow: FC<WorkflowProps> = memo(({
         )
       }
       <LimitTips />
+      <PluginDependency />
       <ReactFlow
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
diff --git a/web/app/components/workflow/plugin-dependency/hooks.ts b/web/app/components/workflow/plugin-dependency/hooks.ts
new file mode 100644
index 0000000000..73c3a481da
--- /dev/null
+++ b/web/app/components/workflow/plugin-dependency/hooks.ts
@@ -0,0 +1,17 @@
+import { useCallback } from 'react'
+import { useStore as usePluginDependenciesStore } from './store'
+import { useMutationCheckDependecies } from '@/service/use-plugins'
+
+export const usePluginDependencies = () => {
+  const { mutateAsync } = useMutationCheckDependecies()
+
+  const handleCheckPluginDependencies = useCallback(async (appId: string) => {
+    const { leaked_dependencies } = await mutateAsync(appId)
+    const { setDependencies } = usePluginDependenciesStore.getState()
+    setDependencies(leaked_dependencies)
+  }, [mutateAsync])
+
+  return {
+    handleCheckPluginDependencies,
+  }
+}
diff --git a/web/app/components/workflow/plugin-dependency/index.tsx b/web/app/components/workflow/plugin-dependency/index.tsx
index 8fd87b9627..185722e1b7 100644
--- a/web/app/components/workflow/plugin-dependency/index.tsx
+++ b/web/app/components/workflow/plugin-dependency/index.tsx
@@ -1,45 +1,23 @@
-import {
-  useCallback,
-  useState,
-} from 'react'
-import { useTranslation } from 'react-i18next'
+import { useCallback } from 'react'
 import { useStore } from './store'
-import ReadyToInstall from '@/app/components/plugins/install-plugin/install-bundle/ready-to-install'
-import { InstallStep } from '@/app/components/plugins/types'
+import InstallBundle from '@/app/components/plugins/install-plugin/install-bundle'
 
-const i18nPrefix = 'plugin.installModal'
 const PluginDependency = () => {
   const dependencies = useStore(s => s.dependencies)
 
-  const [step, setStep] = useState<InstallStep>(InstallStep.readyToInstall)
-
-  const { t } = useTranslation()
-  const getTitle = useCallback(() => {
-    if (step === InstallStep.uploadFailed)
-      return t(`${i18nPrefix}.uploadFailed`)
-    if (step === InstallStep.installed)
-      return t(`${i18nPrefix}.installComplete`)
-
-    return t(`${i18nPrefix}.installPlugin`)
-  }, [step, t])
+  const handleCancelInstallBundle = useCallback(() => {
+    const { setDependencies } = useStore.getState()
+    setDependencies([])
+  }, [])
 
   if (!dependencies.length)
     return null
 
   return (
-    <div>
-      <div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
-        <div className='self-stretch text-text-primary title-2xl-semi-bold'>
-          {getTitle()}
-        </div>
-      </div>
-      <ReadyToInstall
-        step={step}
-        onStepChange={setStep}
-        allPlugins={dependencies}
-        onClose={() => {}}
-      />
-    </div>
+    <InstallBundle
+      fromDSLPayload={dependencies}
+      onClose={handleCancelInstallBundle}
+    />
   )
 }
 
diff --git a/web/app/components/workflow/update-dsl-modal.tsx b/web/app/components/workflow/update-dsl-modal.tsx
index e815223d59..fc65806487 100644
--- a/web/app/components/workflow/update-dsl-modal.tsx
+++ b/web/app/components/workflow/update-dsl-modal.tsx
@@ -38,8 +38,7 @@ import { ToastContext } from '@/app/components/base/toast'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
-import PluginDependency from '@/app/components/workflow/plugin-dependency'
-import { useStore as usePluginDependencyStore } from '@/app/components/workflow/plugin-dependency/store'
+import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 
 type UpdateDSLModalProps = {
   onCancel: () => void
@@ -63,6 +62,7 @@ const UpdateDSLModal = ({
   const [showErrorModal, setShowErrorModal] = useState(false)
   const [versions, setVersions] = useState<{ importedVersion: string; systemVersion: string }>()
   const [importId, setImportId] = useState<string>()
+  const { handleCheckPluginDependencies } = usePluginDependencies()
 
   const readFile = (file: File) => {
     const reader = new FileReader()
@@ -137,11 +137,8 @@ const UpdateDSLModal = ({
       if (appDetail && fileContent) {
         setLoading(true)
         const response = await importDSL({ mode: DSLImportMode.YAML_CONTENT, yaml_content: fileContent, app_id: appDetail.id })
-        const { id, status, app_id, imported_dsl_version, current_dsl_version, leaked_dependencies } = response
-        if (leaked_dependencies?.length) {
-          const { setDependencies } = usePluginDependencyStore.getState()
-          setDependencies(leaked_dependencies)
-        }
+        const { id, status, app_id, imported_dsl_version, current_dsl_version } = response
+
         if (status === DSLImportStatus.COMPLETED || status === DSLImportStatus.COMPLETED_WITH_WARNINGS) {
           if (!app_id) {
             notify({ type: 'error', message: t('workflow.common.importFailure') })
@@ -155,6 +152,7 @@ const UpdateDSLModal = ({
             message: t(status === DSLImportStatus.COMPLETED ? 'workflow.common.importSuccess' : 'workflow.common.importWarning'),
             children: status === DSLImportStatus.COMPLETED_WITH_WARNINGS && t('workflow.common.importWarningDetails'),
           })
+          await handleCheckPluginDependencies(app_id)
           setLoading(false)
           onCancel()
         }
@@ -175,12 +173,13 @@ const UpdateDSLModal = ({
         }
       }
     }
+    // eslint-disable-next-line unused-imports/no-unused-vars
     catch (e) {
       setLoading(false)
       notify({ type: 'error', message: t('workflow.common.importFailure') })
     }
     isCreatingRef.current = false
-  }, [currentFile, fileContent, onCancel, notify, t, appDetail, onImport, handleWorkflowUpdate])
+  }, [currentFile, fileContent, onCancel, notify, t, appDetail, onImport, handleWorkflowUpdate, handleCheckPluginDependencies])
 
   const onUpdateDSLConfirm: MouseEventHandler = async () => {
     try {
@@ -198,6 +197,7 @@ const UpdateDSLModal = ({
           return
         }
         handleWorkflowUpdate(app_id)
+        await handleCheckPluginDependencies(app_id)
         if (onImport)
           onImport()
         notify({ type: 'success', message: t('workflow.common.importSuccess') })
@@ -209,6 +209,7 @@ const UpdateDSLModal = ({
         notify({ type: 'error', message: t('workflow.common.importFailure') })
       }
     }
+    // eslint-disable-next-line unused-imports/no-unused-vars
     catch (e) {
       setLoading(false)
       notify({ type: 'error', message: t('workflow.common.importFailure') })
@@ -289,7 +290,6 @@ const UpdateDSLModal = ({
             <div>{t('app.newApp.appCreateDSLErrorPart4')}<span className='system-md-medium'>{versions?.systemVersion}</span></div>
           </div>
         </div>
-        <PluginDependency />
         <div className='flex pt-6 justify-end items-start gap-2 self-stretch'>
           <Button variant='secondary' onClick={() => setShowErrorModal(false)}>{t('app.newApp.Cancel')}</Button>
           <Button variant='primary' destructive onClick={onUpdateDSLConfirm}>{t('app.newApp.Confirm')}</Button>
diff --git a/web/service/use-plugins.ts b/web/service/use-plugins.ts
index 2cbe36fcf1..a901d98c8e 100644
--- a/web/service/use-plugins.ts
+++ b/web/service/use-plugins.ts
@@ -407,3 +407,11 @@ export const useDownloadPlugin = (info: { organization: string; pluginName: stri
     retry: 0,
   })
 }
+
+export const useMutationCheckDependecies = () => {
+  return useMutation({
+    mutationFn: (appId: string) => {
+      return get<{ leaked_dependencies: Dependency[] }>(`/apps/import/${appId}/check-dependencies`)
+    },
+  })
+}