diff --git a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
index 4b773c01ba..a3149447d4 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import copy from 'copy-to-clipboard'
@@ -32,6 +32,7 @@ import cn from '@/utils/classnames'
 import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
 import type { ToolDefaultValue } from '@/app/components/workflow/block-selector/types'
 import { canFindTool } from '@/utils'
+import { useMittContextSelector } from '@/context/mitt-context'
 
 type AgentToolWithMoreInfo = AgentTool & { icon: any; collection?: Collection } | null
 const AgentTools: FC = () => {
@@ -39,7 +40,6 @@ const AgentTools: FC = () => {
   const [isShowChooseTool, setIsShowChooseTool] = useState(false)
   const { modelConfig, setModelConfig, collectionList } = useContext(ConfigContext)
   const formattingChangedDispatcher = useFormattingChangedDispatcher()
-
   const [currentTool, setCurrentTool] = useState<AgentToolWithMoreInfo>(null)
   const currentCollection = useMemo(() => {
     if (!currentTool) return null
@@ -61,6 +61,17 @@ const AgentTools: FC = () => {
       collection,
     }
   })
+  const useSubscribe = useMittContextSelector(s => s.useSubscribe)
+  const handleUpdateToolsWhenInstallToolSuccess = useCallback((installedPluginNames: string[]) => {
+    const newModelConfig = produce(modelConfig, (draft) => {
+      draft.agentConfig.tools.forEach((item: any) => {
+        if (item.isDeleted && installedPluginNames.includes(item.provider_id))
+          item.isDeleted = false
+      })
+    })
+    setModelConfig(newModelConfig)
+  }, [modelConfig, setModelConfig])
+  useSubscribe('plugin:install:success', handleUpdateToolsWhenInstallToolSuccess as any)
 
   const handleToolSettingChange = (value: Record<string, any>) => {
     const newModelConfig = produce(modelConfig, (draft) => {
@@ -132,7 +143,7 @@ const AgentTools: FC = () => {
                   disabled={false}
                   supportAddCustomTool
                   onSelect={handleSelectTool}
-                  selectedTools={tools}
+                  selectedTools={tools as any}
                 />
               </>
             )}
diff --git a/web/app/components/app/configuration/index.tsx b/web/app/components/app/configuration/index.tsx
index 5b8f8659f8..2b97a64f5b 100644
--- a/web/app/components/app/configuration/index.tsx
+++ b/web/app/components/app/configuration/index.tsx
@@ -79,6 +79,7 @@ import {
 } from '@/utils'
 import PluginDependency from '@/app/components/workflow/plugin-dependency'
 import { supportFunctionCall } from '@/utils/tool-call'
+import { MittProvider } from '@/context/mitt-context'
 
 type PublishConfig = {
   modelConfig: ModelConfig
@@ -908,7 +909,7 @@ const Configuration: FC = () => {
     }}
     >
       <FeaturesProvider features={featuresData}>
-        <>
+        <MittProvider>
           <div className="flex h-full flex-col">
             <div className='relative flex h-[200px] grow pt-14'>
               {/* Header */}
@@ -1060,7 +1061,7 @@ const Configuration: FC = () => {
             />
           )}
           <PluginDependency />
-        </>
+        </MittProvider>
       </FeaturesProvider>
     </ConfigContext.Provider>
   )
diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
index ee2699b4bb..db24bdd97a 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
@@ -9,6 +9,7 @@ import InstallMulti from './install-multi'
 import { useInstallOrUpdate } from '@/service/use-plugins'
 import useRefreshPluginList from '../../hooks/use-refresh-plugin-list'
 import { useCanInstallPluginFromMarketplace } from '@/app/components/plugins/plugin-page/use-permission'
+import { useMittContextSelector } from '@/context/mitt-context'
 const i18nPrefix = 'plugin.installModal'
 
 type Props = {
@@ -29,6 +30,7 @@ const Install: FC<Props> = ({
   isHideButton,
 }) => {
   const { t } = useTranslation()
+  const emit = useMittContextSelector(s => s.emit)
   const [selectedPlugins, setSelectedPlugins] = React.useState<Plugin[]>([])
   const [selectedIndexes, setSelectedIndexes] = React.useState<number[]>([])
   const selectedPluginsNum = selectedPlugins.length
@@ -63,8 +65,12 @@ const Install: FC<Props> = ({
         })
       }))
       const hasInstallSuccess = res.some(r => r.success)
-      if (hasInstallSuccess)
+      if (hasInstallSuccess) {
         refreshPluginList(undefined, true)
+        emit('plugin:install:success', selectedPlugins.map((p) => {
+          return `${p.plugin_id}/${p.name}`
+        }))
+      }
     },
   })
   const handleInstall = () => {
diff --git a/web/context/mitt-context.tsx b/web/context/mitt-context.tsx
new file mode 100644
index 0000000000..2b437b0c30
--- /dev/null
+++ b/web/context/mitt-context.tsx
@@ -0,0 +1,27 @@
+import { createContext, useContext, useContextSelector } from 'use-context-selector'
+import { useMitt } from '@/hooks/use-mitt'
+import { noop } from 'lodash-es'
+
+type ContextValueType = ReturnType<typeof useMitt>
+export const MittContext = createContext<ContextValueType>({
+  emit: noop,
+  useSubscribe: noop,
+})
+
+export const MittProvider = ({ children }: { children: React.ReactNode }) => {
+  const mitt = useMitt()
+
+  return (
+    <MittContext.Provider value={mitt}>
+      {children}
+    </MittContext.Provider>
+  )
+}
+
+export const useMittContext = () => {
+  return useContext(MittContext)
+}
+
+export function useMittContextSelector<T>(selector: (value: ContextValueType) => T): T {
+  return useContextSelector(MittContext, selector)
+}