diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
index 5eb63a3126..220edc22ca 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@@ -32,7 +32,7 @@ import {
   useInvalidateAllBuiltInTools,
   useUpdateProviderCredentials,
 } from '@/service/use-tools'
-import { useInstallPackageFromMarketPlace, useInvalidateInstalledPluginList } from '@/service/use-plugins'
+import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
 import { usePluginInstalledCheck } from '@/app/components/plugins/plugin-detail-panel/tool-selector/hooks'
 import { CollectionType } from '@/app/components/tools/types'
 import type { ToolDefaultValue } from '@/app/components/workflow/block-selector/types'
@@ -172,23 +172,15 @@ const ToolSelector: FC<Props> = ({
   })
 
   // install from marketplace
-  const { mutateAsync: installPackageFromMarketPlace, isPending } = useInstallPackageFromMarketPlace()
+
   const manifestIcon = useMemo(() => {
     if (!manifest)
       return ''
     return `${MARKETPLACE_API_PREFIX}/plugins/${(manifest as any).plugin_id}/icon`
   }, [manifest])
   const handleInstall = async () => {
-    if (!manifest)
-      return
-    try {
-      await installPackageFromMarketPlace(manifest.latest_package_identifier)
-      invalidateAllBuiltinTools()
-      invalidateInstalledPluginList()
-    }
-    catch (e: any) {
-      Toast.notify({ type: 'error', message: `${e.message || e}` })
-    }
+    invalidateAllBuiltinTools()
+    invalidateInstalledPluginList()
   }
 
   return (
@@ -225,7 +217,7 @@ const ToolSelector: FC<Props> = ({
               noAuth={currentProvider && !currentProvider.is_team_authorization}
               onAuth={() => setShowSettingAuth(true)}
               uninstalled={!currentProvider && inMarketPlace}
-              isInstalling={isPending}
+              installInfo={manifest?.latest_package_identifier}
               onInstall={() => handleInstall()}
               isError={!currentProvider && !inMarketPlace}
               errorTip={<div className='space-y-1 max-w-[240px] text-xs'>
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
index 5927318619..45a9abd592 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
@@ -5,8 +5,6 @@ import {
   RiDeleteBinLine,
   RiEqualizer2Line,
   RiErrorWarningFill,
-  RiInstallLine,
-  RiLoader2Line,
 } from '@remixicon/react'
 import { Group } from '@/app/components/base/icons/src/vender/other'
 import AppIcon from '@/app/components/base/app-icon'
@@ -15,6 +13,7 @@ import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
+import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/components/install-plugin-button'
 import cn from '@/utils/classnames'
 
 type Props = {
@@ -30,7 +29,7 @@ type Props = {
   isError?: boolean
   errorTip?: any
   uninstalled?: boolean
-  isInstalling?: boolean
+  installInfo?: string
   onInstall?: () => void
   open: boolean
 }
@@ -47,7 +46,7 @@ const ToolItem = ({
   noAuth,
   onAuth,
   uninstalled,
-  isInstalling,
+  installInfo,
   onInstall,
   isError,
   errorTip,
@@ -115,20 +114,15 @@ const ToolItem = ({
           <Indicator className='ml-2' color='orange' />
         </Button>
       )}
-      {!isError && uninstalled && (
-        <Button
-          className={cn('flex items-center')}
-          size='small'
-          variant='secondary'
-          disabled={isInstalling}
-          onClick={(e) => {
-            e.stopPropagation()
+      {!isError && uninstalled && installInfo && (
+        <InstallPluginButton
+          onClick={e => e.stopPropagation()}
+          size={'small'}
+          uniqueIdentifier={installInfo}
+          onSuccess={() => {
             onInstall?.()
           }}
-        >
-          {!isInstalling ? t('workflow.nodes.agent.pluginInstaller.install') : t('workflow.nodes.agent.pluginInstaller.installing')}
-          {!isInstalling ? <RiInstallLine className='size-4 ml-1' /> : <RiLoader2Line className='size-4 ml-1 animate-spin' />}
-        </Button>
+        />
       )}
       {isError && (
         <Tooltip