diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx
index dabb8f4a9a..d86795826a 100644
--- a/web/app/components/workflow/block-selector/all-tools.tsx
+++ b/web/app/components/workflow/block-selector/all-tools.tsx
@@ -29,6 +29,9 @@ import { PluginCategoryEnum } from '../../plugins/types'
 import { useMarketplacePlugins } from '../../plugins/marketplace/hooks'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import RAGToolSuggestions from './rag-tool-suggestions'
+import FeaturedTools from './featured-tools'
+import { useCheckInstalled, useRecommendedMarketplacePlugins } from '@/service/use-plugins'
+import { useInvalidateAllBuiltInTools } from '@/service/use-tools'
 import Link from 'next/link'
 
 type AllToolsProps = {
@@ -80,6 +83,16 @@ const AllTools = ({
   const isMatchingKeywords = (text: string, keywords: string) => {
     return text.toLowerCase().includes(keywords.toLowerCase())
   }
+  const allProviders = useMemo(() => [...buildInTools, ...customTools, ...workflowTools, ...mcpTools], [buildInTools, customTools, workflowTools, mcpTools])
+  const providerMap = useMemo(() => {
+    const map = new Map<string, ToolWithProvider>()
+    allProviders.forEach((provider) => {
+      const key = provider.plugin_id || provider.id
+      if (key)
+        map.set(key, provider)
+    })
+    return map
+  }, [allProviders])
   const tools = useMemo(() => {
     let mergedTools: ToolWithProvider[] = []
     if (activeTab === ToolTypeEnum.All)
@@ -136,6 +149,27 @@ const AllTools = ({
   } = useMarketplacePlugins()
 
   const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
+  const {
+    data: recommendedPlugins = [],
+    isLoading: isLoadingRecommended,
+  } = useRecommendedMarketplacePlugins({
+    enabled: enable_marketplace,
+  })
+  const recommendedPluginIds = useMemo(
+    () => recommendedPlugins.map(plugin => plugin.plugin_id),
+    [recommendedPlugins],
+  )
+  const installedCheck = useCheckInstalled({
+    pluginIds: recommendedPluginIds,
+    enabled: recommendedPluginIds.length > 0,
+  })
+  const installedPluginIds = useMemo(
+    () => new Set(installedCheck.data?.plugins.map(plugin => plugin.plugin_id) ?? []),
+    [installedCheck.data],
+  )
+  const loadingRecommendedInstallStatus = installedCheck.isLoading || installedCheck.isRefetching
+  const invalidateBuiltInTools = useInvalidateAllBuiltInTools()
+
   useEffect(() => {
     if (!enable_marketplace) return
     if (hasFilter) {
@@ -155,6 +189,11 @@ const AllTools = ({
   const hasToolsContent = tools.length > 0
   const hasPluginContent = enable_marketplace && notInstalledPlugins.length > 0
   const shouldShowEmptyState = hasFilter && !hasToolsContent && !hasPluginContent
+  const shouldShowFeatured = enable_marketplace
+    && activeTab === ToolTypeEnum.All
+    && !hasFilter
+    && !isLoadingRecommended
+    && recommendedPlugins.length > 0
 
   return (
     <div className={cn('min-w-[400px] max-w-[500px]', className)}>
@@ -193,6 +232,21 @@ const AllTools = ({
               onTagsChange={onTagsChange}
             />
           )}
+          {shouldShowFeatured && (
+            <FeaturedTools
+              plugins={recommendedPlugins}
+              providerMap={providerMap}
+              onSelect={onSelect}
+              selectedTools={selectedTools}
+              canChooseMCPTool={canChooseMCPTool}
+              installedPluginIds={installedPluginIds}
+              loadingInstalledStatus={loadingRecommendedInstallStatus}
+              onInstallSuccess={async () => {
+                invalidateBuiltInTools()
+                await installedCheck.refetch()
+              }}
+            />
+          )}
           <Tools
             className={toolContentClassName}
             tools={tools}
diff --git a/web/app/components/workflow/block-selector/featured-tools.tsx b/web/app/components/workflow/block-selector/featured-tools.tsx
new file mode 100644
index 0000000000..ba58a34f89
--- /dev/null
+++ b/web/app/components/workflow/block-selector/featured-tools.tsx
@@ -0,0 +1,283 @@
+'use client'
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { BlockEnum, type ToolWithProvider } from '../types'
+import type { ToolDefaultValue, ToolValue } from './types'
+import type { Plugin } from '@/app/components/plugins/types'
+import { useGetLanguage } from '@/context/i18n'
+import Button from '@/app/components/base/button'
+import ActionItem from './tool/action-item'
+import type { Tool } from '@/app/components/tools/types'
+import { CollectionType } from '@/app/components/tools/types'
+import BlockIcon from '../block-icon'
+import { RiArrowDownSLine, RiArrowUpSLine, RiLoader2Line } from '@remixicon/react'
+import { useInstallPackageFromMarketPlace } from '@/service/use-plugins'
+
+const MAX_RECOMMENDED_COUNT = 15
+const INITIAL_VISIBLE_COUNT = 5
+
+type FeaturedToolsProps = {
+  plugins: Plugin[]
+  providerMap: Map<string, ToolWithProvider>
+  onSelect: (type: BlockEnum, tool: ToolDefaultValue) => void
+  selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
+  installedPluginIds: Set<string>
+  loadingInstalledStatus: boolean
+  onInstallSuccess?: () => void
+}
+
+function isToolSelected(tool: Tool, provider: ToolWithProvider, selectedTools?: ToolValue[]): boolean {
+  if (!selectedTools || !selectedTools.length)
+    return false
+  return selectedTools.some(item => (item.provider_name === provider.name || item.provider_name === provider.id) && item.tool_name === tool.name)
+}
+
+const FeaturedTools = ({
+  plugins,
+  providerMap,
+  onSelect,
+  selectedTools,
+  canChooseMCPTool,
+  installedPluginIds,
+  loadingInstalledStatus,
+  onInstallSuccess,
+}: FeaturedToolsProps) => {
+  const { t } = useTranslation()
+  const language = useGetLanguage()
+  const [visibleCount, setVisibleCount] = useState(INITIAL_VISIBLE_COUNT)
+  const [installingIdentifier, setInstallingIdentifier] = useState<string | null>(null)
+  const installMutation = useInstallPackageFromMarketPlace({
+    onSuccess: () => {
+      onInstallSuccess?.()
+    },
+    onSettled: () => {
+      setInstallingIdentifier(null)
+    },
+  })
+
+  useEffect(() => {
+    setVisibleCount(INITIAL_VISIBLE_COUNT)
+  }, [plugins])
+
+  const visiblePlugins = useMemo(
+    () => plugins.slice(0, Math.min(MAX_RECOMMENDED_COUNT, visibleCount)),
+    [plugins, visibleCount],
+  )
+
+  if (!visiblePlugins.length)
+    return null
+
+  const showMore = visibleCount < Math.min(MAX_RECOMMENDED_COUNT, plugins.length)
+
+  return (
+    <div className='px-3 pb-3 pt-2'>
+      <div className='system-xs-medium mb-2 text-text-tertiary'>
+        {t('workflow.tabs.featuredTools')}
+      </div>
+      <div className='space-y-2'>
+        {visiblePlugins.map(plugin => renderFeaturedToolItem({
+          plugin,
+          providerMap,
+          installedPluginIds,
+          installMutationPending: installMutation.isPending,
+          installingIdentifier,
+          loadingInstalledStatus,
+          canChooseMCPTool,
+          onSelect,
+          selectedTools,
+          language,
+          installPlugin: installMutation.mutate,
+          setInstallingIdentifier,
+        }))}
+      </div>
+      {showMore && (
+        <Button
+          className='mt-2 w-full'
+          size='small'
+          variant='ghost'
+          onClick={() => {
+            setVisibleCount(count => Math.min(count + INITIAL_VISIBLE_COUNT, MAX_RECOMMENDED_COUNT, plugins.length))
+          }}
+        >
+          {t('workflow.tabs.showMoreFeatured')}
+        </Button>
+      )}
+    </div>
+  )
+}
+
+type FeaturedToolItemProps = {
+  plugin: Plugin
+  provider: ToolWithProvider | undefined
+  isInstalled: boolean
+  installDisabled: boolean
+  canChooseMCPTool?: boolean
+  onSelect: (type: BlockEnum, tool: ToolDefaultValue) => void
+  selectedTools?: ToolValue[]
+  language: string
+  onInstall: () => void
+  isInstalling: boolean
+}
+
+function FeaturedToolItem({
+  plugin,
+  provider,
+  isInstalled,
+  installDisabled,
+  canChooseMCPTool,
+  onSelect,
+  selectedTools,
+  language,
+  onInstall,
+  isInstalling,
+}: FeaturedToolItemProps) {
+  const { t } = useTranslation()
+  const [isExpanded, setExpanded] = useState(false)
+  const hasProvider = Boolean(provider)
+  const installCountLabel = t('plugin.install', { num: plugin.install_count?.toLocaleString() ?? 0 })
+  const description = typeof plugin.brief === 'object' ? plugin.brief[language] : plugin.brief
+
+  useEffect(() => {
+    if (!hasProvider)
+      setExpanded(false)
+  }, [hasProvider])
+
+  let toggleLabel: string
+  if (!hasProvider)
+    toggleLabel = t('workflow.common.syncingData')
+  else if (isExpanded)
+    toggleLabel = t('workflow.tabs.hideActions')
+  else
+    toggleLabel = t('workflow.tabs.usePlugin')
+
+  return (
+    <div className='rounded-lg border border-divider-subtle bg-components-panel-bg-blur px-3 py-2'>
+      <div className='flex items-start gap-2'>
+        <BlockIcon type={BlockEnum.Tool} toolIcon={plugin.icon} />
+        <div className='min-w-0 flex-1'>
+          <div className='flex items-center gap-2'>
+            <div className='truncate text-sm font-medium text-text-primary'>
+              {plugin.label?.[language] || plugin.name}
+            </div>
+            {isInstalled && (
+              <span className='system-xs-regular rounded-full border border-divider-subtle px-2 py-0.5 text-text-tertiary'>
+                {t('workflow.tabs.installed')}
+              </span>
+            )}
+          </div>
+          <div className='system-xs-regular mt-0.5 line-clamp-2 text-text-secondary'>
+            {description}
+          </div>
+          <div className='system-xs-regular mt-1 flex items-center gap-2 text-text-tertiary'>
+            <span>{installCountLabel}</span>
+            {plugin.org && <span>{t('workflow.tabs.pluginByAuthor', { author: plugin.org })}</span>}
+          </div>
+        </div>
+        <div className='ml-2 flex shrink-0 flex-col items-end gap-1'>
+          {!isInstalled && (
+            <Button
+              size='small'
+              variant='primary'
+              disabled={installDisabled}
+              onClick={onInstall}
+              className='flex items-center gap-1'
+            >
+              {isInstalling ? t('workflow.nodes.agent.pluginInstaller.installing') : t('workflow.nodes.agent.pluginInstaller.install')}
+              {isInstalling && <RiLoader2Line className='size-3 animate-spin' />}
+            </Button>
+          )}
+          {isInstalled && (
+            <Button
+              size='small'
+              variant='secondary'
+              onClick={() => setExpanded(expanded => !expanded)}
+              disabled={!hasProvider}
+              className='flex items-center gap-1'
+            >
+              {toggleLabel}
+              {hasProvider && (isExpanded ? <RiArrowUpSLine className='size-3.5' /> : <RiArrowDownSLine className='size-3.5' />)}
+            </Button>
+          )}
+        </div>
+      </div>
+      {isInstalled && hasProvider && isExpanded && (
+        <div className='mt-2 space-y-1 border-t border-divider-subtle pt-2'>
+          {provider.tools.map((tool) => {
+            const isSelected = isToolSelected(tool, provider, selectedTools)
+            const isMCPTool = provider.type === CollectionType.mcp
+            const disabled = isSelected || (!canChooseMCPTool && isMCPTool)
+
+            return (
+              <ActionItem
+                key={tool.name}
+                provider={provider}
+                payload={tool}
+                onSelect={onSelect}
+                disabled={disabled}
+                isAdded={isSelected}
+              />
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+type RenderFeaturedToolParams = {
+  plugin: Plugin
+  providerMap: Map<string, ToolWithProvider>
+  installedPluginIds: Set<string>
+  installMutationPending: boolean
+  installingIdentifier: string | null
+  loadingInstalledStatus: boolean
+  canChooseMCPTool?: boolean
+  onSelect: (type: BlockEnum, tool: ToolDefaultValue) => void
+  selectedTools?: ToolValue[]
+  language: string
+  installPlugin: (uniqueIdentifier: string) => void
+  setInstallingIdentifier: (identifier: string | null) => void
+}
+
+function renderFeaturedToolItem({
+  plugin,
+  providerMap,
+  installedPluginIds,
+  installMutationPending,
+  installingIdentifier,
+  loadingInstalledStatus,
+  canChooseMCPTool,
+  onSelect,
+  selectedTools,
+  language,
+  installPlugin,
+  setInstallingIdentifier,
+}: RenderFeaturedToolParams) {
+  const provider = providerMap.get(plugin.plugin_id)
+  const isInstalled = installedPluginIds.has(plugin.plugin_id)
+  const isInstalling = installMutationPending && installingIdentifier === plugin.latest_package_identifier
+
+  return (
+    <FeaturedToolItem
+      key={plugin.plugin_id}
+      plugin={plugin}
+      provider={provider}
+      isInstalled={isInstalled}
+      installDisabled={loadingInstalledStatus || installMutationPending}
+      canChooseMCPTool={canChooseMCPTool}
+      onSelect={onSelect}
+      selectedTools={selectedTools}
+      language={language}
+      onInstall={() => {
+        if (installMutationPending)
+          return
+        setInstallingIdentifier(plugin.latest_package_identifier)
+        installPlugin(plugin.latest_package_identifier)
+      }}
+      isInstalling={isInstalling}
+    />
+  )
+}
+
+export default FeaturedTools
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index a967a82bb2..e26ff5e859 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -277,6 +277,12 @@ const translation = {
     'addAll': 'Add all',
     'sources': 'Sources',
     'searchDataSource': 'Search Data Source',
+    'featuredTools': 'Featured',
+    'showMoreFeatured': 'Show more',
+    'installed': 'Installed',
+    'pluginByAuthor': 'By {{author}}',
+    'usePlugin': 'Select tool',
+    'hideActions': 'Hide tools',
   },
   blocks: {
     'start': 'User Input',
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index a7206db9df..90a2d915b9 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -263,6 +263,12 @@ const translation = {
     'sources': '数据源',
     'searchDataSource': '搜索数据源',
     'start': '开始',
+    'featuredTools': '精选推荐',
+    'showMoreFeatured': '查看更多',
+    'installed': '已安装',
+    'pluginByAuthor': '来自 {{author}}',
+    'usePlugin': '选择工具',
+    'hideActions': '收起工具',
   },
   blocks: {
     'start': '用户输入',
diff --git a/web/service/use-plugins.ts b/web/service/use-plugins.ts
index 21a3cc00fd..fcd626b58e 100644
--- a/web/service/use-plugins.ts
+++ b/web/service/use-plugins.ts
@@ -43,6 +43,7 @@ import useReferenceSetting from '@/app/components/plugins/plugin-page/use-refere
 import { uninstallPlugin } from '@/service/plugins'
 import useRefreshPluginList from '@/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list'
 import { cloneDeep } from 'lodash-es'
+import { getFormattedPlugin } from '@/app/components/plugins/marketplace/utils'
 
 const NAME_SPACE = 'plugins'
 
@@ -66,6 +67,35 @@ export const useCheckInstalled = ({
   })
 }
 
+const useRecommendedMarketplacePluginsKey = [NAME_SPACE, 'recommendedMarketplacePlugins']
+export const useRecommendedMarketplacePlugins = ({
+  category = PluginCategoryEnum.tool,
+  enabled = true,
+  limit = 15,
+}: {
+  category?: string
+  enabled?: boolean
+  limit?: number
+} = {}) => {
+  return useQuery<Plugin[]>({
+    queryKey: [...useRecommendedMarketplacePluginsKey, category, limit],
+    queryFn: async () => {
+      const response = await postMarketplace<{ data: { plugins: Plugin[] } }>(
+        '/collections/__recommended-plugins-overall/plugins',
+        {
+          body: {
+            category,
+            limit,
+          },
+        },
+      )
+      return response.data.plugins.map(plugin => getFormattedPlugin(plugin))
+    },
+    enabled,
+    staleTime: 60 * 1000,
+  })
+}
+
 export const useInstalledPluginList = (disable?: boolean, pageSize = 100) => {
   const fetchPlugins = async ({ pageParam = 1 }) => {
     const response = await get<InstalledPluginListWithTotalResponse>(