feat: the frontend part of mcp (#22131)

Co-authored-by: jZonG <jzongcode@gmail.com> Co-authored-by: Novice <novice12185727@gmail.com> Co-authored-by: nite-knite <nkCoding@gmail.com> Co-authored-by: Hanqing Zhao <sherry9277@gmail.com>
2025-07-10 14:14:02 +08:00
parent 535fff62f3
commit 5375d9bb27
152 changed files with 6340 additions and 695 deletions
--- a/web/app/components/workflow/block-selector/all-tools.tsx
+++ b/web/app/components/workflow/block-selector/all-tools.tsx
@@ -5,10 +5,11 @@ import {
  useState,
 } from 'react'
 import type {
+  BlockEnum,
  OnSelectBlock,
  ToolWithProvider,
 } from '../types'
-import type { ToolValue } from './types'
+import type { ToolDefaultValue, ToolValue } from './types'
 import { ToolTypeEnum } from './types'
 import Tools from './tools'
 import { useToolTabs } from './hooks'
@@ -17,8 +18,6 @@ import cn from '@/utils/classnames'
 import { useGetLanguage } from '@/context/i18n'
 import type { ListRef } from '@/app/components/workflow/block-selector/market-place-plugin/list'
 import PluginList, { type ListProps } from '@/app/components/workflow/block-selector/market-place-plugin/list'
-import ActionButton from '../../base/action-button'
-import { RiAddLine } from '@remixicon/react'
 import { PluginType } from '../../plugins/types'
 import { useMarketplacePlugins } from '../../plugins/marketplace/hooks'
 import { useGlobalPublicStore } from '@/context/global-public-context'
@@ -31,11 +30,12 @@ type AllToolsProps = {
  buildInTools: ToolWithProvider[]
  customTools: ToolWithProvider[]
  workflowTools: ToolWithProvider[]
+  mcpTools: ToolWithProvider[]
  onSelect: OnSelectBlock
-  supportAddCustomTool?: boolean
-  onAddedCustomTool?: () => void
-  onShowAddCustomCollectionModal?: () => void
+  canNotSelectMultiple?: boolean
+  onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
  selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
 }

 const DEFAULT_TAGS: AllToolsProps['tags'] = []
@@ -46,12 +46,14 @@ const AllTools = ({
  searchText,
  tags = DEFAULT_TAGS,
  onSelect,
+  canNotSelectMultiple,
+  onSelectMultiple,
  buildInTools,
  workflowTools,
  customTools,
-  supportAddCustomTool,
-  onShowAddCustomCollectionModal,
+  mcpTools = [],
  selectedTools,
+  canChooseMCPTool,
 }: AllToolsProps) => {
  const language = useGetLanguage()
  const tabs = useToolTabs()
@@ -64,13 +66,15 @@ const AllTools = ({
  const tools = useMemo(() => {
    let mergedTools: ToolWithProvider[] = []
    if (activeTab === ToolTypeEnum.All)
-      mergedTools = [...buildInTools, ...customTools, ...workflowTools]
+      mergedTools = [...buildInTools, ...customTools, ...workflowTools, ...mcpTools]
    if (activeTab === ToolTypeEnum.BuiltIn)
      mergedTools = buildInTools
    if (activeTab === ToolTypeEnum.Custom)
      mergedTools = customTools
    if (activeTab === ToolTypeEnum.Workflow)
      mergedTools = workflowTools
+    if (activeTab === ToolTypeEnum.MCP)
+      mergedTools = mcpTools

    if (!hasFilter)
      return mergedTools.filter(toolWithProvider => toolWithProvider.tools.length > 0)
@@ -80,7 +84,7 @@ const AllTools = ({
        return tool.label[language].toLowerCase().includes(searchText.toLowerCase()) || tool.name.toLowerCase().includes(searchText.toLowerCase())
      })
    })
-  }, [activeTab, buildInTools, customTools, workflowTools, searchText, language, hasFilter])
+  }, [activeTab, buildInTools, customTools, workflowTools, mcpTools, searchText, language, hasFilter])

  const {
    queryPluginsWithDebounced: fetchPlugins,
@@ -88,7 +92,6 @@ const AllTools = ({
  } = useMarketplacePlugins()

  const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
-
  useEffect(() => {
    if (!enable_marketplace) return
    if (searchText || tags.length > 0) {
@@ -103,10 +106,11 @@ const AllTools = ({

  const pluginRef = useRef<ListRef>(null)
  const wrapElemRef = useRef<HTMLDivElement>(null)
+  const isSupportGroupView = [ToolTypeEnum.All, ToolTypeEnum.BuiltIn].includes(activeTab)

  return (
-    <div className={cn(className)}>
-      <div className='flex items-center justify-between border-b-[0.5px] border-divider-subtle bg-background-default-hover px-3 shadow-xs'>
+    <div className={cn('min-w-[400px] max-w-[500px]', className)}>
+      <div className='flex items-center justify-between border-b border-divider-subtle px-3'>
        <div className='flex h-8 items-center space-x-1'>
          {
            tabs.map(tab => (
@@ -124,17 +128,8 @@ const AllTools = ({
            ))
          }
        </div>
-        <ViewTypeSelect viewType={activeView} onChange={setActiveView} />
-        {supportAddCustomTool && (
-          <div className='flex items-center'>
-            <div className='mr-1.5 h-3.5 w-px  bg-divider-regular'></div>
-            <ActionButton
-              className='bg-components-button-primary-bg text-components-button-primary-text hover:bg-components-button-primary-bg hover:text-components-button-primary-text'
-              onClick={onShowAddCustomCollectionModal}
-            >
-              <RiAddLine className='h-4 w-4' />
-            </ActionButton>
-          </div>
+        {isSupportGroupView && (
+          <ViewTypeSelect viewType={activeView} onChange={setActiveView} />
        )}
      </div>
      <div
@@ -144,12 +139,15 @@ const AllTools = ({
      >
        <Tools
          className={toolContentClassName}
-          showWorkflowEmpty={activeTab === ToolTypeEnum.Workflow}
          tools={tools}
          onSelect={onSelect}
-          viewType={activeView}
+          canNotSelectMultiple={canNotSelectMultiple}
+          onSelectMultiple={onSelectMultiple}
+          toolType={activeTab}
+          viewType={isSupportGroupView ? activeView : ViewType.flat}
          hasSearchText={!!searchText}
          selectedTools={selectedTools}
+          canChooseMCPTool={canChooseMCPTool}
        />
        {/* Plugins from marketplace */}
        {enable_marketplace && <PluginList
--- a/web/app/components/workflow/block-selector/hooks.ts
+++ b/web/app/components/workflow/block-selector/hooks.ts
@@ -31,10 +31,9 @@ export const useTabs = () => {
  ]
 }

-export const useToolTabs = () => {
+export const useToolTabs = (isHideMCPTools?: boolean) => {
  const { t } = useTranslation()
-
-  return [
+  const tabs = [
    {
      key: ToolTypeEnum.All,
      name: t('workflow.tabs.allTool'),
@@ -52,4 +51,12 @@ export const useToolTabs = () => {
      name: t('workflow.tabs.workflowTool'),
    },
  ]
+  if(!isHideMCPTools) {
+    tabs.push({
+      key: ToolTypeEnum.MCP,
+      name: 'MCP',
+    })
+  }
+
+  return tabs
 }
--- a/web/app/components/workflow/block-selector/index-bar.tsx
+++ b/web/app/components/workflow/block-selector/index-bar.tsx
@@ -83,8 +83,8 @@ const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs, className }) => {
      element.scrollIntoView({ behavior: 'smooth' })
  }
  return (
-    <div className={classNames('index-bar absolute right-0 top-36 flex flex-col items-center w-6 justify-center text-xs font-medium text-text-quaternary', className)}>
-      <div className='absolute left-0 top-0 h-full w-px bg-[linear-gradient(270deg,rgba(255,255,255,0)_0%,rgba(16,24,40,0.08)_30%,rgba(16,24,40,0.08)_50%,rgba(16,24,40,0.08)_70.5%,rgba(255,255,255,0)_100%)]'></div>
+    <div className={classNames('index-bar sticky top-[20px] flex h-full w-6 flex-col items-center justify-center text-xs font-medium text-text-quaternary', className)}>
+      <div className={classNames('absolute left-0 top-0 h-full w-px bg-[linear-gradient(270deg,rgba(255,255,255,0)_0%,rgba(16,24,40,0.08)_30%,rgba(16,24,40,0.08)_50%,rgba(16,24,40,0.08)_70.5%,rgba(255,255,255,0)_100%)]')}></div>
      {letters.map(letter => (
        <div className="cursor-pointer hover:text-text-secondary" key={letter} onClick={() => handleIndexClick(letter)}>
          {letter}
--- a/web/app/components/workflow/block-selector/index.tsx
+++ b/web/app/components/workflow/block-selector/index.tsx
@@ -129,33 +129,35 @@ const NodeSelector: FC<NodeSelectorProps> = ({
      </PortalToFollowElemTrigger>
      <PortalToFollowElemContent className='z-[1000]'>
        <div className={`rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg ${popupClassName}`}>
-          <div className='px-2 pt-2' onClick={e => e.stopPropagation()}>
-            {activeTab === TabsEnum.Blocks && (
-              <Input
-                showLeftIcon
-                showClearIcon
-                autoFocus
-                value={searchText}
-                placeholder={searchPlaceholder}
-                onChange={e => setSearchText(e.target.value)}
-                onClear={() => setSearchText('')}
-              />
-            )}
-            {activeTab === TabsEnum.Tools && (
-              <SearchBox
-                search={searchText}
-                onSearchChange={setSearchText}
-                tags={tags}
-                onTagsChange={setTags}
-                size='small'
-                placeholder={t('plugin.searchTools')!}
-              />
-            )}
-
-          </div>
          <Tabs
            activeTab={activeTab}
            onActiveTabChange={handleActiveTabChange}
+            filterElem={
+              <div className='relative m-2' onClick={e => e.stopPropagation()}>
+                {activeTab === TabsEnum.Blocks && (
+                  <Input
+                    showLeftIcon
+                    showClearIcon
+                    autoFocus
+                    value={searchText}
+                    placeholder={searchPlaceholder}
+                    onChange={e => setSearchText(e.target.value)}
+                    onClear={() => setSearchText('')}
+                  />
+                )}
+                {activeTab === TabsEnum.Tools && (
+                  <SearchBox
+                    search={searchText}
+                    onSearchChange={setSearchText}
+                    tags={tags}
+                    onTagsChange={setTags}
+                    size='small'
+                    placeholder={t('plugin.searchTools')!}
+                    inputClassName='grow'
+                  />
+                )}
+              </div>
+            }
            onSelect={handleSelect}
            searchText={searchText}
            tags={tags}
--- a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
@@ -80,7 +80,7 @@ const List = forwardRef<ListRef, ListProps>(({
    )
  }

-  const maxWidthClassName = toolContentClassName || 'max-w-[300px]'
+  const maxWidthClassName = toolContentClassName || 'max-w-[100%]'

  return (
    <>
@@ -109,18 +109,20 @@ const List = forwardRef<ListRef, ListProps>(({
            onAction={noop}
          />
        ))}
-        <div className='mb-3 mt-2 flex items-center justify-center space-x-2'>
-          <div className="h-[2px] w-[90px] bg-gradient-to-l from-[rgba(16,24,40,0.08)] to-[rgba(255,255,255,0.01)]"></div>
-          <Link
-            href={urlWithSearchText}
-            target='_blank'
-            className='system-sm-medium flex h-4 shrink-0 items-center text-text-accent-light-mode-only'
-          >
-            <RiSearchLine className='mr-0.5 h-3 w-3' />
-            <span>{t('plugin.searchInMarketplace')}</span>
-          </Link>
-          <div className="h-[2px] w-[90px] bg-gradient-to-l from-[rgba(255,255,255,0.01)] to-[rgba(16,24,40,0.08)]"></div>
-        </div>
+        {list.length > 0 && (
+          <div className='mb-3 mt-2 flex items-center justify-center space-x-2'>
+            <div className="h-[2px] w-[90px] bg-gradient-to-l from-[rgba(16,24,40,0.08)] to-[rgba(255,255,255,0.01)]"></div>
+            <Link
+              href={urlWithSearchText}
+              target='_blank'
+              className='system-sm-medium flex h-4 shrink-0 items-center text-text-accent-light-mode-only'
+            >
+              <RiSearchLine className='mr-0.5 h-3 w-3' />
+              <span>{t('plugin.searchInMarketplace')}</span>
+            </Link>
+            <div className="h-[2px] w-[90px] bg-gradient-to-l from-[rgba(255,255,255,0.01)] to-[rgba(16,24,40,0.08)]"></div>
+          </div>
+        )}
      </div>
    </>
  )
--- a/web/app/components/workflow/block-selector/tabs.tsx
+++ b/web/app/components/workflow/block-selector/tabs.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 import { memo } from 'react'
-import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools } from '@/service/use-tools'
+import { useAllBuiltInTools, useAllCustomTools, useAllMCPTools, useAllWorkflowTools } from '@/service/use-tools'
 import type { BlockEnum } from '../types'
 import { useTabs } from './hooks'
 import type { ToolDefaultValue } from './types'
@@ -16,6 +16,7 @@ export type TabsProps = {
  tags: string[]
  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
  availableBlocksTypes?: BlockEnum[]
+  filterElem: React.ReactNode
  noBlocks?: boolean
 }
 const Tabs: FC<TabsProps> = ({
@@ -25,26 +26,28 @@ const Tabs: FC<TabsProps> = ({
  searchText,
  onSelect,
  availableBlocksTypes,
+  filterElem,
  noBlocks,
 }) => {
  const tabs = useTabs()
  const { data: buildInTools } = useAllBuiltInTools()
  const { data: customTools } = useAllCustomTools()
  const { data: workflowTools } = useAllWorkflowTools()
+  const { data: mcpTools } = useAllMCPTools()

  return (
    <div onClick={e => e.stopPropagation()}>
      {
        !noBlocks && (
-          <div className='flex items-center border-b-[0.5px] border-divider-subtle px-3'>
+          <div className='relative flex bg-background-section-burn pl-1 pt-1'>
            {
              tabs.map(tab => (
                <div
                  key={tab.key}
                  className={cn(
-                    'system-sm-medium relative mr-4 cursor-pointer pb-2 pt-1',
+                    'system-sm-medium relative mr-0.5 flex h-8 cursor-pointer  items-center rounded-t-lg px-3 ',
                    activeTab === tab.key
-                      ? 'text-text-primary after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-util-colors-blue-brand-blue-brand-600'
+                      ? 'sm-no-bottom cursor-default bg-components-panel-bg text-text-accent'
                      : 'text-text-tertiary',
                  )}
                  onClick={() => onActiveTabChange(tab.key)}
@@ -56,25 +59,30 @@ const Tabs: FC<TabsProps> = ({
          </div>
        )
      }
+      {filterElem}
      {
        activeTab === TabsEnum.Blocks && !noBlocks && (
-          <Blocks
-            searchText={searchText}
-            onSelect={onSelect}
-            availableBlocksTypes={availableBlocksTypes}
-          />
+          <div className='border-t border-divider-subtle'>
+            <Blocks
+              searchText={searchText}
+              onSelect={onSelect}
+              availableBlocksTypes={availableBlocksTypes}
+            />
+          </div>
        )
      }
      {
        activeTab === TabsEnum.Tools && (
          <AllTools
-            className='w-[315px]'
            searchText={searchText}
            onSelect={onSelect}
            tags={tags}
+            canNotSelectMultiple
            buildInTools={buildInTools || []}
            customTools={customTools || []}
            workflowTools={workflowTools || []}
+            mcpTools={mcpTools || []}
+            canChooseMCPTool
          />
        )
      }
--- a/web/app/components/workflow/block-selector/tool-picker.tsx
+++ b/web/app/components/workflow/block-selector/tool-picker.tsx
@@ -23,7 +23,7 @@ import {
 } from '@/service/tools'
 import type { CustomCollectionBackend } from '@/app/components/tools/types'
 import Toast from '@/app/components/base/toast'
-import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools, useInvalidateAllCustomTools } from '@/service/use-tools'
+import { useAllBuiltInTools, useAllCustomTools, useAllMCPTools, useAllWorkflowTools, useInvalidateAllCustomTools } from '@/service/use-tools'
 import cn from '@/utils/classnames'

 type Props = {
@@ -35,9 +35,11 @@ type Props = {
  isShow: boolean
  onShowChange: (isShow: boolean) => void
  onSelect: (tool: ToolDefaultValue) => void
+  onSelectMultiple: (tools: ToolDefaultValue[]) => void
  supportAddCustomTool?: boolean
  scope?: string
  selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
 }

 const ToolPicker: FC<Props> = ({
@@ -48,10 +50,12 @@ const ToolPicker: FC<Props> = ({
  isShow,
  onShowChange,
  onSelect,
+  onSelectMultiple,
  supportAddCustomTool,
  scope = 'all',
  selectedTools,
  panelClassName,
+  canChooseMCPTool,
 }) => {
  const { t } = useTranslation()
  const [searchText, setSearchText] = useState('')
@@ -61,6 +65,7 @@ const ToolPicker: FC<Props> = ({
  const { data: customTools } = useAllCustomTools()
  const invalidateCustomTools = useInvalidateAllCustomTools()
  const { data: workflowTools } = useAllWorkflowTools()
+  const { data: mcpTools } = useAllMCPTools()

  const { builtinToolList, customToolList, workflowToolList } = useMemo(() => {
    if (scope === 'plugins') {
@@ -102,6 +107,10 @@ const ToolPicker: FC<Props> = ({
    onSelect(tool!)
  }

+  const handleSelectMultiple = (_type: BlockEnum, tools: ToolDefaultValue[]) => {
+    onSelectMultiple(tools)
+  }
+
  const [isShowEditCollectionToolModal, {
    setFalse: hideEditCustomCollectionModal,
    setTrue: showEditCustomCollectionModal,
@@ -142,7 +151,7 @@ const ToolPicker: FC<Props> = ({
      </PortalToFollowElemTrigger>

      <PortalToFollowElemContent className='z-[1000]'>
-        <div className={cn('relative min-h-20 w-[356px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm', panelClassName)}>
+        <div className={cn('relative min-h-20 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm', panelClassName)}>
          <div className='p-2 pb-1'>
            <SearchBox
              search={searchText}
@@ -151,21 +160,26 @@ const ToolPicker: FC<Props> = ({
              onTagsChange={setTags}
              size='small'
              placeholder={t('plugin.searchTools')!}
+              supportAddCustomTool={supportAddCustomTool}
+              onAddedCustomTool={handleAddedCustomTool}
+              onShowAddCustomCollectionModal={showEditCustomCollectionModal}
+              inputClassName='grow'
+
            />
          </div>
          <AllTools
            className='mt-1'
-            toolContentClassName='max-w-[360px]'
+            toolContentClassName='max-w-[100%]'
            tags={tags}
            searchText={searchText}
            onSelect={handleSelect}
+            onSelectMultiple={handleSelectMultiple}
            buildInTools={builtinToolList || []}
            customTools={customToolList || []}
            workflowTools={workflowToolList || []}
-            supportAddCustomTool={supportAddCustomTool}
-            onAddedCustomTool={handleAddedCustomTool}
-            onShowAddCustomCollectionModal={showEditCustomCollectionModal}
+            mcpTools={mcpTools || []}
            selectedTools={selectedTools}
+            canChooseMCPTool={canChooseMCPTool}
          />
        </div>
      </PortalToFollowElemContent>
--- a/web/app/components/workflow/block-selector/tool/action-item.tsx
+++ b/web/app/components/workflow/block-selector/tool/action-item.tsx
@@ -10,13 +10,12 @@ import { useGetLanguage } from '@/context/i18n'
 import BlockIcon from '../../block-icon'
 import cn from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
-import { RiCheckLine } from '@remixicon/react'
-import Badge from '@/app/components/base/badge'

 type Props = {
  provider: ToolWithProvider
  payload: Tool
  disabled?: boolean
+  isAdded?: boolean
  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
 }

@@ -25,6 +24,7 @@ const ToolItem: FC<Props> = ({
  payload,
  onSelect,
  disabled,
+  isAdded,
 }) => {
  const { t } = useTranslation()

@@ -71,18 +71,16 @@ const ToolItem: FC<Props> = ({
            output_schema: payload.output_schema,
            paramSchemas: payload.parameters,
            params,
+            meta: provider.meta,
          })
        }}
      >
-        <div className={cn('system-sm-medium h-8 truncate border-l-2 border-divider-subtle pl-4 leading-8 text-text-secondary', disabled && 'opacity-30')}>{payload.label[language]}</div>
-        {disabled && <Badge
-          className='flex h-5 items-center space-x-0.5 text-text-tertiary'
-          uppercase
-        >
-          <RiCheckLine className='h-3 w-3 ' />
-          <div>{t('tools.addToolModal.added')}</div>
-        </Badge>
-        }
+        <div className={cn('system-sm-medium h-8 truncate border-l-2 border-divider-subtle pl-4 leading-8 text-text-secondary')}>
+          <span className={cn(disabled && 'opacity-30')}>{payload.label[language]}</span>
+        </div>
+        {isAdded && (
+          <div className='system-xs-regular mr-4 text-text-tertiary'>{t('tools.addToolModal.added')}</div>
+        )}
      </div>
    </Tooltip >
  )
--- a/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx
@@ -11,21 +11,29 @@ import { useMemo } from 'react'
 type Props = {
  payload: ToolWithProvider[]
  isShowLetterIndex: boolean
+  indexBar: React.ReactNode
  hasSearchText: boolean
  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+  canNotSelectMultiple?: boolean
+  onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
  letters: string[]
  toolRefs: any
  selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
 }

 const ToolViewFlatView: FC<Props> = ({
  letters,
  payload,
  isShowLetterIndex,
+  indexBar,
  hasSearchText,
  onSelect,
+  canNotSelectMultiple,
+  onSelectMultiple,
  toolRefs,
  selectedTools,
+  canChooseMCPTool,
 }) => {
  const firstLetterToolIds = useMemo(() => {
    const res: Record<string, string> = {}
@@ -37,26 +45,31 @@ const ToolViewFlatView: FC<Props> = ({
    return res
  }, [payload, letters])
  return (
-    <div>
-      {payload.map(tool => (
-        <div
-          key={tool.id}
-          ref={(el) => {
-            const letter = firstLetterToolIds[tool.id]
-            if (letter)
-              toolRefs.current[letter] = el
-          }}
-        >
-          <Tool
-            payload={tool}
-            viewType={ViewType.flat}
-            isShowLetterIndex={isShowLetterIndex}
-            hasSearchText={hasSearchText}
-            onSelect={onSelect}
-            selectedTools={selectedTools}
-          />
-        </div>
-      ))}
+    <div className='flex w-full'>
+      <div className='mr-1 grow'>
+        {payload.map(tool => (
+          <div
+            key={tool.id}
+            ref={(el) => {
+              const letter = firstLetterToolIds[tool.id]
+              if (letter)
+                toolRefs.current[letter] = el
+            }}
+          >
+            <Tool
+              payload={tool}
+              viewType={ViewType.flat}
+              hasSearchText={hasSearchText}
+              onSelect={onSelect}
+              canNotSelectMultiple={canNotSelectMultiple}
+              onSelectMultiple={onSelectMultiple}
+              selectedTools={selectedTools}
+              canChooseMCPTool={canChooseMCPTool}
+            />
+          </div>
+        ))}
+      </div>
+      {isShowLetterIndex && indexBar}
    </div>
  )
 }
--- a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx
@@ -12,7 +12,10 @@ type Props = {
  toolList: ToolWithProvider[]
  hasSearchText: boolean
  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+  canNotSelectMultiple?: boolean
+  onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
  selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
 }

 const Item: FC<Props> = ({
@@ -20,7 +23,10 @@ const Item: FC<Props> = ({
  toolList,
  hasSearchText,
  onSelect,
+  canNotSelectMultiple,
+  onSelectMultiple,
  selectedTools,
+  canChooseMCPTool,
 }) => {
  return (
    <div>
@@ -36,7 +42,10 @@ const Item: FC<Props> = ({
            isShowLetterIndex={false}
            hasSearchText={hasSearchText}
            onSelect={onSelect}
+            canNotSelectMultiple={canNotSelectMultiple}
+            onSelectMultiple={onSelectMultiple}
            selectedTools={selectedTools}
+            canChooseMCPTool={canChooseMCPTool}
          />
        ))}
      </div>
--- a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx
@@ -12,14 +12,20 @@ type Props = {
  payload: Record<string, ToolWithProvider[]>
  hasSearchText: boolean
  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+  canNotSelectMultiple?: boolean
+  onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
  selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
 }

 const ToolListTreeView: FC<Props> = ({
  payload,
  hasSearchText,
  onSelect,
+  canNotSelectMultiple,
+  onSelectMultiple,
  selectedTools,
+  canChooseMCPTool,
 }) => {
  const { t } = useTranslation()
  const getI18nGroupName = useCallback((name: string) => {
@@ -46,7 +52,10 @@ const ToolListTreeView: FC<Props> = ({
          toolList={payload[groupName]}
          hasSearchText={hasSearchText}
          onSelect={onSelect}
+          canNotSelectMultiple={canNotSelectMultiple}
+          onSelectMultiple={onSelectMultiple}
          selectedTools={selectedTools}
+          canChooseMCPTool={canChooseMCPTool}
        />
      ))}
    </div>
--- a/web/app/components/workflow/block-selector/tool/tool.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useEffect, useMemo } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import cn from '@/utils/classnames'
 import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
 import { useGetLanguage } from '@/context/i18n'
@@ -13,36 +13,108 @@ import { ViewType } from '../view-type-select'
 import ActionItem from './action-item'
 import BlockIcon from '../../block-icon'
 import { useTranslation } from 'react-i18next'
+import { useHover } from 'ahooks'
+import McpToolNotSupportTooltip from '../../nodes/_base/components/mcp-tool-not-support-tooltip'
+import { Mcp } from '@/app/components/base/icons/src/vender/other'

 type Props = {
  className?: string
  payload: ToolWithProvider
  viewType: ViewType
-  isShowLetterIndex: boolean
  hasSearchText: boolean
  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+  canNotSelectMultiple?: boolean
+  onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
  selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
 }

 const Tool: FC<Props> = ({
  className,
  payload,
  viewType,
-  isShowLetterIndex,
  hasSearchText,
  onSelect,
+  canNotSelectMultiple,
+  onSelectMultiple,
  selectedTools,
+  canChooseMCPTool,
 }) => {
  const { t } = useTranslation()
  const language = useGetLanguage()
  const isFlatView = viewType === ViewType.flat
+  const notShowProvider = payload.type === CollectionType.workflow
  const actions = payload.tools
-  const hasAction = true // Now always support actions
+  const hasAction = !notShowProvider
  const [isFold, setFold] = React.useState<boolean>(true)
-  const getIsDisabled = (tool: ToolType) => {
+  const ref = useRef(null)
+  const isHovering = useHover(ref)
+  const isMCPTool = payload.type === CollectionType.mcp
+  const isShowCanNotChooseMCPTip = !canChooseMCPTool && isMCPTool
+  const getIsDisabled = useCallback((tool: ToolType) => {
    if (!selectedTools || !selectedTools.length) return false
-    return selectedTools.some(selectedTool => selectedTool.provider_name === payload.name && selectedTool.tool_name === tool.name)
-  }
+    return selectedTools.some(selectedTool => (selectedTool.provider_name === payload.name || selectedTool.provider_name === payload.id) && selectedTool.tool_name === tool.name)
+  }, [payload.id, payload.name, selectedTools])
+
+  const totalToolsNum = actions.length
+  const selectedToolsNum = actions.filter(action => getIsDisabled(action)).length
+  const isAllSelected = selectedToolsNum === totalToolsNum
+
+  const notShowProviderSelectInfo = useMemo(() => {
+    if (isAllSelected) {
+      return (
+        <span className='system-xs-regular text-text-tertiary'>
+          {t('tools.addToolModal.added')}
+        </span>
+      )
+    }
+  }, [isAllSelected, t])
+  const selectedInfo = useMemo(() => {
+    if (isHovering && !isAllSelected) {
+      return (
+        <span className='system-xs-regular text-components-button-secondary-accent-text'
+          onClick={(e) => {
+            onSelectMultiple?.(BlockEnum.Tool, actions.filter(action => !getIsDisabled(action)).map((tool) => {
+              const params: Record<string, string> = {}
+              if (tool.parameters) {
+                tool.parameters.forEach((item) => {
+                  params[item.name] = ''
+                })
+              }
+              return {
+                provider_id: payload.id,
+                provider_type: payload.type,
+                provider_name: payload.name,
+                tool_name: tool.name,
+                tool_label: tool.label[language],
+                tool_description: tool.description[language],
+                title: tool.label[language],
+                is_team_authorization: payload.is_team_authorization,
+                output_schema: tool.output_schema,
+                paramSchemas: tool.parameters,
+                params,
+              }
+            }))
+          }}
+        >
+          {t('workflow.tabs.addAll')}
+        </span>
+      )
+    }
+
+    if (selectedToolsNum === 0)
+      return <></>
+
+    return (
+      <span className='system-xs-regular text-text-tertiary'>
+        {isAllSelected
+          ? t('workflow.tabs.allAdded')
+          : `${selectedToolsNum} / ${totalToolsNum}`
+        }
+      </span>
+    )
+  }, [actions, getIsDisabled, isAllSelected, isHovering, language, onSelectMultiple, payload.id, payload.is_team_authorization, payload.name, payload.type, selectedToolsNum, t, totalToolsNum])
+
  useEffect(() => {
    if (hasSearchText && isFold) {
      setFold(false)
@@ -71,59 +143,73 @@ const Tool: FC<Props> = ({
  return (
    <div
      key={payload.id}
-      className={cn('mb-1 last-of-type:mb-0', isShowLetterIndex && 'mr-6')}
+      className={cn('mb-1 last-of-type:mb-0')}
+      ref={ref}
    >
      <div className={cn(className)}>
        <div
-          className='flex w-full cursor-pointer select-none items-center justify-between rounded-lg pl-3 pr-1 hover:bg-state-base-hover'
+          className='group/item flex w-full cursor-pointer select-none items-center justify-between rounded-lg pl-3 pr-1 hover:bg-state-base-hover'
          onClick={() => {
-            if (hasAction)
+            if (hasAction) {
              setFold(!isFold)
+              return
+            }

-            // Now always support actions
-            // if (payload.parameters) {
-            //   payload.parameters.forEach((item) => {
-            //     params[item.name] = ''
-            //   })
-            // }
-            // onSelect(BlockEnum.Tool, {
-            //   provider_id: payload.id,
-            //   provider_type: payload.type,
-            //   provider_name: payload.name,
-            //   tool_name: payload.name,
-            //   tool_label: payload.label[language],
-            //   title: payload.label[language],
-            //   params: {},
-            // })
+            const tool = actions[0]
+            const params: Record<string, string> = {}
+            if (tool.parameters) {
+              tool.parameters.forEach((item) => {
+                params[item.name] = ''
+              })
+            }
+            onSelect(BlockEnum.Tool, {
+              provider_id: payload.id,
+              provider_type: payload.type,
+              provider_name: payload.name,
+              tool_name: tool.name,
+              tool_label: tool.label[language],
+              tool_description: tool.description[language],
+              title: tool.label[language],
+              is_team_authorization: payload.is_team_authorization,
+              output_schema: tool.output_schema,
+              paramSchemas: tool.parameters,
+              params,
+            })
          }}
        >
-          <div className='flex h-8 grow items-center'>
+          <div className={cn('flex h-8 grow items-center', isShowCanNotChooseMCPTip && 'opacity-30')}>
            <BlockIcon
              className='shrink-0'
              type={BlockEnum.Tool}
              toolIcon={payload.icon}
            />
-            <div className='ml-2 w-0 flex-1 grow truncate text-sm text-text-primary'>{payload.label[language]}</div>
+            <div className='ml-2 flex w-0 grow items-center text-sm text-text-primary'>
+              <span className='max-w-[250px] truncate'>{notShowProvider ? actions[0]?.label[language] : payload.label[language]}</span>
+              {isFlatView && groupName && (
+                <span className='system-xs-regular ml-2 shrink-0 text-text-quaternary'>{groupName}</span>
+              )}
+              {isMCPTool && <Mcp className='ml-2 size-3.5 shrink-0 text-text-quaternary' />}
+            </div>
          </div>

-          <div className='flex items-center'>
-            {isFlatView && (
-              <div className='system-xs-regular text-text-tertiary'>{groupName}</div>
-            )}
+          <div className='ml-2 flex items-center'>
+            {!isShowCanNotChooseMCPTip && !canNotSelectMultiple && (notShowProvider ? notShowProviderSelectInfo : selectedInfo)}
+            {isShowCanNotChooseMCPTip && <McpToolNotSupportTooltip />}
            {hasAction && (
-              <FoldIcon className={cn('h-4 w-4 shrink-0 text-text-quaternary', isFold && 'text-text-tertiary')} />
+              <FoldIcon className={cn('h-4 w-4 shrink-0 text-text-tertiary group-hover/item:text-text-tertiary', isFold && 'text-text-quaternary')} />
            )}
          </div>
        </div>

-        {hasAction && !isFold && (
+        {!notShowProvider && hasAction && !isFold && (
          actions.map(action => (
            <ActionItem
              key={action.name}
              provider={payload}
              payload={action}
              onSelect={onSelect}
-              disabled={getIsDisabled(action)}
+              disabled={getIsDisabled(action) || isShowCanNotChooseMCPTip}
+              isAdded={getIsDisabled(action)}
            />
          ))
        )}
--- a/web/app/components/workflow/block-selector/tools.tsx
+++ b/web/app/components/workflow/block-selector/tools.tsx
@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next'
 import type { BlockEnum, ToolWithProvider } from '../types'
 import IndexBar, { groupItems } from './index-bar'
 import type { ToolDefaultValue, ToolValue } from './types'
+import type { ToolTypeEnum } from './types'
 import { ViewType } from './view-type-select'
 import Empty from '@/app/components/tools/add-tool-modal/empty'
 import { useGetLanguage } from '@/context/i18n'
@@ -15,25 +16,34 @@ import ToolListFlatView from './tool/tool-list-flat-view/list'
 import classNames from '@/utils/classnames'

 type ToolsProps = {
-  showWorkflowEmpty: boolean
  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+  canNotSelectMultiple?: boolean
+  onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
  tools: ToolWithProvider[]
  viewType: ViewType
  hasSearchText: boolean
+  toolType?: ToolTypeEnum
+  isAgent?: boolean
  className?: string
  indexBarClassName?: string
  selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
 }
 const Blocks = ({
-  showWorkflowEmpty,
  onSelect,
+  canNotSelectMultiple,
+  onSelectMultiple,
  tools,
  viewType,
  hasSearchText,
+  toolType,
+  isAgent,
  className,
  indexBarClassName,
  selectedTools,
+  canChooseMCPTool,
 }: ToolsProps) => {
+  // const tools: any = []
  const { t } = useTranslation()
  const language = useGetLanguage()
  const isFlatView = viewType === ViewType.flat
@@ -87,15 +97,15 @@ const Blocks = ({
  const toolRefs = useRef({})

  return (
-    <div className={classNames('p-1 max-w-[320px]', className)}>
+    <div className={classNames('max-w-[100%] p-1', className)}>
      {
-        !tools.length && !showWorkflowEmpty && (
-          <div className='flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary'>{t('workflow.tabs.noResult')}</div>
+        !tools.length && hasSearchText && (
+          <div className='mt-2 flex h-[22px] items-center px-3 text-xs font-medium text-text-secondary'>{t('workflow.tabs.noResult')}</div>
        )
      }
-      {!tools.length && showWorkflowEmpty && (
+      {!tools.length && !hasSearchText && (
        <div className='py-10'>
-          <Empty />
+          <Empty type={toolType!} isAgent={isAgent}/>
        </div>
      )}
      {!!tools.length && (
@@ -107,19 +117,24 @@ const Blocks = ({
            isShowLetterIndex={isShowLetterIndex}
            hasSearchText={hasSearchText}
            onSelect={onSelect}
+            canNotSelectMultiple={canNotSelectMultiple}
+            onSelectMultiple={onSelectMultiple}
            selectedTools={selectedTools}
+            canChooseMCPTool={canChooseMCPTool}
+            indexBar={<IndexBar letters={letters} itemRefs={toolRefs} className={indexBarClassName} />}
          />
        ) : (
          <ToolListTreeView
            payload={treeViewToolsData}
            hasSearchText={hasSearchText}
            onSelect={onSelect}
+            canNotSelectMultiple={canNotSelectMultiple}
+            onSelectMultiple={onSelectMultiple}
            selectedTools={selectedTools}
+            canChooseMCPTool={canChooseMCPTool}
          />
        )
      )}
-
-      {isShowLetterIndex && <IndexBar letters={letters} itemRefs={toolRefs} className={indexBarClassName} />}
    </div>
  )
 }
--- a/web/app/components/workflow/block-selector/types.ts
+++ b/web/app/components/workflow/block-selector/types.ts
@@ -1,3 +1,5 @@
+import type { PluginMeta } from '../../plugins/types'
+
 export enum TabsEnum {
  Blocks = 'blocks',
  Tools = 'tools',
@@ -8,6 +10,7 @@ export enum ToolTypeEnum {
  BuiltIn = 'built-in',
  Custom = 'custom',
  Workflow = 'workflow',
+  MCP = 'mcp',
 }

 export enum BlockClassificationEnum {
@@ -30,10 +33,12 @@ export type ToolDefaultValue = {
  params: Record<string, any>
  paramSchemas: Record<string, any>[]
  output_schema: Record<string, any>
+  meta?: PluginMeta
 }

 export type ToolValue = {
  provider_name: string
+  provider_show_name?: string
  tool_name: string
  tool_label: string
  tool_description?: string
--- a/web/app/components/workflow/block-selector/use-check-vertical-scrollbar.ts
+++ b/web/app/components/workflow/block-selector/use-check-vertical-scrollbar.ts
@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react'
+
+const useCheckVerticalScrollbar = (ref: React.RefObject<HTMLElement>) => {
+  const [hasVerticalScrollbar, setHasVerticalScrollbar] = useState(false)
+
+  useEffect(() => {
+    const elem = ref.current
+    if (!elem) return
+
+    const checkScrollbar = () => {
+      setHasVerticalScrollbar(elem.scrollHeight > elem.clientHeight)
+    }
+
+    checkScrollbar()
+
+    const resizeObserver = new ResizeObserver(checkScrollbar)
+    resizeObserver.observe(elem)
+
+    const mutationObserver = new MutationObserver(checkScrollbar)
+    mutationObserver.observe(elem, { childList: true, subtree: true, characterData: true })
+
+    return () => {
+      resizeObserver.disconnect()
+      mutationObserver.disconnect()
+    }
+  }, [ref])
+
+  return hasVerticalScrollbar
+}
+
+export default useCheckVerticalScrollbar