diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
index da5357d87d..b48922bdb9 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
@@ -8,7 +8,7 @@ import Button from '@/app/components/base/button'
 import { Trans, useTranslation } from 'react-i18next'
 import { RiLoader2Line } from '@remixicon/react'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
-import { installPackageFromLocal } from '@/service/plugins'
+import { useInstallPackageFromLocal } from '@/service/use-plugins'
 import checkTaskStatus from '../../base/check-task-status'
 import { usePluginTasksStore } from '@/app/components/plugins/plugin-page/store'
 
@@ -33,6 +33,8 @@ const Installed: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const [isInstalling, setIsInstalling] = React.useState(false)
+  const { mutateAsync: installPackageFromLocal } = useInstallPackageFromLocal()
+
   const {
     check,
     stop,
diff --git a/web/service/plugins.ts b/web/service/plugins.ts
index 999ed4f1b9..0b10196096 100644
--- a/web/service/plugins.ts
+++ b/web/service/plugins.ts
@@ -24,12 +24,6 @@ export const uploadPackageFile = async (file: File) => {
   }, false, '/workspaces/current/plugin/upload/pkg')
 }
 
-export const installPackageFromLocal = async (uniqueIdentifier: string) => {
-  return post<InstallPackageResponse>('/workspaces/current/plugin/install/pkg', {
-    body: { plugin_unique_identifiers: [uniqueIdentifier] },
-  })
-}
-
 export const updateFromMarketPlace = async (body: Record<string, string>) => {
   return post<InstallPackageResponse>('/workspaces/current/plugin/upgrade/marketplace', {
     body,
diff --git a/web/service/use-plugins.ts b/web/service/use-plugins.ts
index 2274250b58..3b72bee919 100644
--- a/web/service/use-plugins.ts
+++ b/web/service/use-plugins.ts
@@ -43,6 +43,16 @@ export const useInstallPackageFromMarketPlace = () => {
   })
 }
 
+export const useInstallPackageFromLocal = () => {
+  return useMutation({
+    mutationFn: (uniqueIdentifier: string) => {
+      return post<InstallPackageResponse>('/workspaces/current/plugin/install/pkg', {
+        body: { plugin_unique_identifiers: [uniqueIdentifier] },
+      })
+    },
+  })
+}
+
 export const useDebugKey = () => {
   return useQuery({
     queryKey: [NAME_SPACE, 'debugKey'],