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
--- a/web/app/components/workflow/hooks/use-workflow.ts
+++ b/web/app/components/workflow/hooks/use-workflow.ts
@@ -40,6 +40,7 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import {
  fetchAllBuiltInTools,
  fetchAllCustomTools,
+  fetchAllMCPTools,
  fetchAllWorkflowTools,
 } from '@/service/tools'
 import { CollectionType } from '@/app/components/tools/types'
@@ -445,6 +446,13 @@ export const useFetchToolsData = () => {
        workflowTools: workflowTools || [],
      })
    }
+    if(type === 'mcp') {
+      const mcpTools = await fetchAllMCPTools()
+
+      workflowStore.setState({
+        mcpTools: mcpTools || [],
+      })
+    }
  }, [workflowStore])

  return {
@@ -491,6 +499,8 @@ export const useToolIcon = (data: Node['data']) => {
  const buildInTools = useStore(s => s.buildInTools)
  const customTools = useStore(s => s.customTools)
  const workflowTools = useStore(s => s.workflowTools)
+  const mcpTools = useStore(s => s.mcpTools)
+
  const toolIcon = useMemo(() => {
    if(!data)
      return ''
@@ -500,11 +510,13 @@ export const useToolIcon = (data: Node['data']) => {
        targetTools = buildInTools
      else if (data.provider_type === CollectionType.custom)
        targetTools = customTools
+      else if (data.provider_type === CollectionType.mcp)
+        targetTools = mcpTools
      else
        targetTools = workflowTools
      return targetTools.find(toolWithProvider => canFindTool(toolWithProvider.id, data.provider_id))?.icon
    }
-  }, [data, buildInTools, customTools, workflowTools])
+  }, [data, buildInTools, customTools, mcpTools, workflowTools])

  return toolIcon
 }
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -234,6 +234,7 @@ export const Workflow: FC<WorkflowProps> = memo(({
    handleFetchAllTools('builtin')
    handleFetchAllTools('custom')
    handleFetchAllTools('workflow')
+    handleFetchAllTools('mcp')
  }, [handleFetchAllTools])

  const {
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
@@ -68,6 +68,7 @@ function formatStrategy(input: StrategyPluginDetail[], getIcon: (i: string) => s
      icon: getIcon(item.declaration.identity.icon),
      label: item.declaration.identity.label as any,
      type: CollectionType.all,
+      meta: item.meta,
      tools: item.declaration.strategies.map(strategy => ({
        name: strategy.identity.name,
        author: strategy.identity.author,
@@ -89,10 +90,13 @@ function formatStrategy(input: StrategyPluginDetail[], getIcon: (i: string) => s
 export type AgentStrategySelectorProps = {
  value?: Strategy,
  onChange: (value?: Strategy) => void,
+  canChooseMCPTool: boolean,
 }

 export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) => {
-  const { value, onChange } = props
+    const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
+
+  const { value, onChange, canChooseMCPTool } = props
  const [open, setOpen] = useState(false)
  const [viewType, setViewType] = useState<ViewType>(ViewType.flat)
  const [query, setQuery] = useState('')
@@ -132,8 +136,6 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
    plugins: notInstalledPlugins = [],
  } = useMarketplacePlugins()

-  const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
-
  useEffect(() => {
    if (!enable_marketplace) return
    if (query) {
@@ -214,21 +216,25 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
                agent_strategy_label: tool!.tool_label,
                agent_output_schema: tool!.output_schema,
                plugin_unique_identifier: tool!.provider_id,
+                meta: tool!.meta,
              })
              setOpen(false)
            }}
            className='h-full max-h-full max-w-none overflow-y-auto'
-            indexBarClassName='top-0 xl:top-36' showWorkflowEmpty={false} hasSearchText={false} />
-          {enable_marketplace
-          && <PluginList
+            indexBarClassName='top-0 xl:top-36'
+            hasSearchText={false}
+            canNotSelectMultiple
+            canChooseMCPTool={canChooseMCPTool}
+            isAgent
+          />
+          {enable_marketplace && <PluginList
            ref={pluginRef}
            wrapElemRef={wrapElemRef}
            list={notInstalledPlugins}
            searchText={query}
            tags={DEFAULT_TAGS}
            disableMaxWidth
-          />
-          }
+          />}
        </main>
      </div>
    </PortalToFollowElemContent>
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
@@ -19,6 +19,8 @@ import { useWorkflowStore } from '../../../store'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import type { NodeOutPutVar } from '../../../types'
 import type { Node } from 'reactflow'
+import type { PluginMeta } from '@/app/components/plugins/types'
+import { noop } from 'lodash'
 import { useDocLink } from '@/context/i18n'

 export type Strategy = {
@@ -27,6 +29,7 @@ export type Strategy = {
  agent_strategy_label: string
  agent_output_schema: Record<string, any>
  plugin_unique_identifier: string
+  meta?: PluginMeta
 }

 export type AgentStrategyProps = {
@@ -38,6 +41,7 @@ export type AgentStrategyProps = {
  nodeOutputVars?: NodeOutPutVar[],
  availableNodes?: Node[],
  nodeId?: string
+  canChooseMCPTool: boolean
 }

 type CustomSchema<Type, Field = {}> = Omit<CredentialFormSchema, 'type'> & { type: Type } & Field
@@ -48,7 +52,7 @@ type MultipleToolSelectorSchema = CustomSchema<'array[tools]'>
 type CustomField = ToolSelectorSchema | MultipleToolSelectorSchema

 export const AgentStrategy = memo((props: AgentStrategyProps) => {
-  const { strategy, onStrategyChange, formSchema, formValue, onFormValueChange, nodeOutputVars, availableNodes, nodeId } = props
+  const { strategy, onStrategyChange, formSchema, formValue, onFormValueChange, nodeOutputVars, availableNodes, nodeId, canChooseMCPTool } = props
  const { t } = useTranslation()
  const docLink = useDocLink()
  const defaultModel = useDefaultModel(ModelTypeEnum.textGeneration)
@@ -57,6 +61,7 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
  const {
    setControlPromptEditorRerenderKey,
  } = workflowStore.getState()
+
  const override: ComponentProps<typeof Form<CustomField>>['override'] = [
    [FormTypeEnum.textNumber, FormTypeEnum.textInput],
    (schema, props) => {
@@ -168,6 +173,8 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
              value={value}
              onSelect={item => onChange(item)}
              onDelete={() => onChange(null)}
+              canChooseMCPTool={canChooseMCPTool}
+              onSelectMultiple={noop}
            />
          </Field>
        )
@@ -189,13 +196,14 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
            onChange={onChange}
            supportCollapse
            required={schema.required}
+            canChooseMCPTool={canChooseMCPTool}
          />
        )
      }
    }
  }
  return <div className='space-y-2'>
-    <AgentStrategySelector value={strategy} onChange={onStrategyChange} />
+    <AgentStrategySelector value={strategy} onChange={onStrategyChange} canChooseMCPTool={canChooseMCPTool} />
    {
      strategy
        ? <div>
@@ -215,6 +223,7 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
            nodeId={nodeId}
            nodeOutputVars={nodeOutputVars || []}
            availableNodes={availableNodes || []}
+            canChooseMCPTool={canChooseMCPTool}
          />
        </div>
        : <ListEmpty
--- a/web/app/components/workflow/nodes/_base/components/editor/base.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
@@ -76,7 +76,7 @@ const Base: FC<Props> = ({

  return (
    <Wrap className={cn(wrapClassName)} style={wrapStyle} isInNode={isInNode} isExpand={isExpand}>
-      <div ref={ref} className={cn(className, isExpand && 'h-full', 'rounded-lg border', isFocus ? 'border-transparent bg-components-input-bg-normal' : 'overflow-hidden border-components-input-border-hover bg-components-input-bg-hover')}>
+      <div ref={ref} className={cn(className, isExpand && 'h-full', 'rounded-lg border', !isFocus ? 'border-transparent bg-components-input-bg-normal' : 'overflow-hidden border-components-input-border-hover bg-components-input-bg-hover')}>
        <div className='flex h-7 items-center justify-between pl-3 pr-2 pt-1'>
          <div className='system-xs-semibold-uppercase text-text-secondary'>{title}</div>
          <div className='flex items-center' onClick={(e) => {
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
@@ -23,7 +23,7 @@ export type Props = {
  value?: string | object
  placeholder?: React.JSX.Element | string
  onChange?: (value: string) => void
-  title?: React.JSX.Element
+  title?: string | React.JSX.Element
  language: CodeLanguage
  headerRight?: React.JSX.Element
  readOnly?: boolean
--- a/web/app/components/workflow/nodes/_base/components/form-input-boolean.tsx
+++ b/web/app/components/workflow/nodes/_base/components/form-input-boolean.tsx
@@ -0,0 +1,35 @@
+'use client'
+import type { FC } from 'react'
+import cn from '@/utils/classnames'
+
+type Props = {
+  value: boolean
+  onChange: (value: boolean) => void
+}
+
+const FormInputBoolean: FC<Props> = ({
+  value,
+  onChange,
+}) => {
+  return (
+    <div className='flex w-full space-x-1'>
+      <div
+        className={cn(
+          'system-sm-regular flex h-8 grow cursor-default items-center justify-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary',
+          !value && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+          value && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs',
+        )}
+        onClick={() => onChange(true)}
+      >True</div>
+      <div
+        className={cn(
+          'system-sm-regular flex h-8 grow cursor-default items-center justify-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary',
+          value && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+          !value && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs',
+        )}
+        onClick={() => onChange(false)}
+      >False</div>
+    </div>
+  )
+}
+export default FormInputBoolean
--- a/web/app/components/workflow/nodes/_base/components/form-input-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/form-input-item.tsx
@@ -0,0 +1,279 @@
+'use client'
+import type { FC } from 'react'
+import type { ToolVarInputs } from '@/app/components/workflow/nodes/tool/types'
+import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
+import { VarType } from '@/app/components/workflow/types'
+
+import type { ToolWithProvider, ValueSelector, Var } from '@/app/components/workflow/types'
+import FormInputTypeSwitch from './form-input-type-switch'
+import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
+import Input from '@/app/components/base/input'
+import { SimpleSelect } from '@/app/components/base/select'
+import MixedVariableTextInput from '@/app/components/workflow/nodes/tool/components/mixed-variable-text-input'
+import FormInputBoolean from './form-input-boolean'
+import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'
+import ModelParameterModal from '@/app/components/plugins/plugin-detail-panel/model-selector'
+import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
+import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import cn from '@/utils/classnames'
+import type { Tool } from '@/app/components/tools/types'
+
+type Props = {
+  readOnly: boolean
+  nodeId: string
+  schema: CredentialFormSchema
+  value: ToolVarInputs
+  onChange: (value: any) => void
+  inPanel?: boolean
+  currentTool?: Tool
+  currentProvider?: ToolWithProvider
+}
+
+const FormInputItem: FC<Props> = ({
+  readOnly,
+  nodeId,
+  schema,
+  value,
+  onChange,
+  inPanel,
+  currentTool,
+  currentProvider,
+}) => {
+  const language = useLanguage()
+
+  const {
+    placeholder,
+    variable,
+    type,
+    default: defaultValue,
+    options,
+    scope,
+  } = schema as any
+  const varInput = value[variable]
+  const isString = type === FormTypeEnum.textInput || type === FormTypeEnum.secretInput
+  const isNumber = type === FormTypeEnum.textNumber
+  const isObject = type === FormTypeEnum.object
+  const isArray = type === FormTypeEnum.array
+  const isShowJSONEditor = isObject || isArray
+  const isFile = type === FormTypeEnum.file || type === FormTypeEnum.files
+  const isBoolean = type === FormTypeEnum.boolean
+  const isSelect = type === FormTypeEnum.select || type === FormTypeEnum.dynamicSelect
+  const isAppSelector = type === FormTypeEnum.appSelector
+  const isModelSelector = type === FormTypeEnum.modelSelector
+  const showTypeSwitch = isNumber || isObject || isArray
+  const isConstant = varInput?.type === VarKindType.constant || !varInput?.type
+  const showVariableSelector = isFile || varInput?.type === VarKindType.variable
+
+  const { availableVars, availableNodesWithParent } = useAvailableVarList(nodeId, {
+    onlyLeafNodeVar: false,
+    filterVar: (varPayload: Var) => {
+      return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
+    },
+  })
+
+  const targetVarType = () => {
+    if (isString)
+      return VarType.string
+    else if (isNumber)
+      return VarType.number
+    else if (type === FormTypeEnum.files)
+      return VarType.arrayFile
+    else if (type === FormTypeEnum.file)
+      return VarType.file
+    // else if (isSelect)
+    //   return VarType.select
+    // else if (isAppSelector)
+    //   return VarType.appSelector
+    // else if (isModelSelector)
+    //   return VarType.modelSelector
+    // else if (isBoolean)
+    //   return VarType.boolean
+    else if (isObject)
+      return VarType.object
+    else if (isArray)
+      return VarType.arrayObject
+    else
+      return VarType.string
+  }
+
+  const getFilterVar = () => {
+    if (isNumber)
+      return (varPayload: any) => varPayload.type === VarType.number
+    else if (isString)
+      return (varPayload: any) => [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
+    else if (isFile)
+      return (varPayload: any) => [VarType.file, VarType.arrayFile].includes(varPayload.type)
+    else if (isBoolean)
+      return (varPayload: any) => varPayload.type === VarType.boolean
+    else if (isObject)
+      return (varPayload: any) => varPayload.type === VarType.object
+    else if (isArray)
+      return (varPayload: any) => [VarType.array, VarType.arrayString, VarType.arrayNumber, VarType.arrayObject].includes(varPayload.type)
+    return undefined
+  }
+
+  const getVarKindType = () => {
+    if (isFile)
+      return VarKindType.variable
+    if (isSelect || isBoolean || isNumber || isArray || isObject)
+      return VarKindType.constant
+    if (isString)
+      return VarKindType.mixed
+  }
+
+  const handleTypeChange = (newType: string) => {
+    if (newType === VarKindType.variable) {
+      onChange({
+        ...value,
+        [variable]: {
+          ...varInput,
+          type: VarKindType.variable,
+          value: '',
+        },
+      })
+    }
+    else {
+      onChange({
+        ...value,
+        [variable]: {
+          ...varInput,
+          type: VarKindType.constant,
+          value: defaultValue,
+        },
+      })
+    }
+  }
+
+  const handleValueChange = (newValue: any) => {
+    onChange({
+      ...value,
+      [variable]: {
+        ...varInput,
+        type: getVarKindType(),
+        value: isNumber ? Number.parseFloat(newValue) : newValue,
+      },
+    })
+  }
+
+  const handleAppOrModelSelect = (newValue: any) => {
+    onChange({
+      ...value,
+      [variable]: {
+        ...varInput,
+        ...newValue,
+      },
+    })
+  }
+
+  const handleVariableSelectorChange = (newValue: ValueSelector | string, variable: string) => {
+    onChange({
+      ...value,
+      [variable]: {
+        ...varInput,
+        type: VarKindType.variable,
+        value: newValue || '',
+      },
+    })
+  }
+
+  return (
+    <div className={cn('gap-1', !(isShowJSONEditor && isConstant) && 'flex')}>
+      {showTypeSwitch && (
+        <FormInputTypeSwitch value={varInput?.type || VarKindType.constant} onChange={handleTypeChange}/>
+      )}
+      {isString && (
+        <MixedVariableTextInput
+          readOnly={readOnly}
+          value={varInput?.value as string || ''}
+          onChange={handleValueChange}
+          nodesOutputVars={availableVars}
+          availableNodes={availableNodesWithParent}
+        />
+      )}
+      {isNumber && isConstant && (
+        <Input
+          className='h-8 grow'
+          type='number'
+          value={varInput?.value || ''}
+          onChange={e => handleValueChange(e.target.value)}
+          placeholder={placeholder?.[language] || placeholder?.en_US}
+        />
+      )}
+      {isBoolean && (
+        <FormInputBoolean
+          value={varInput?.value as boolean}
+          onChange={handleValueChange}
+        />
+      )}
+      {isSelect && (
+        <SimpleSelect
+          wrapperClassName='h-8 grow'
+          disabled={readOnly}
+          defaultValue={varInput?.value}
+          items={options.filter((option: { show_on: any[] }) => {
+            if (option.show_on.length)
+              return option.show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value)
+
+            return true
+          }).map((option: { value: any; label: { [x: string]: any; en_US: any } }) => ({ value: option.value, name: option.label[language] || option.label.en_US }))}
+          onSelect={item => handleValueChange(item.value as string)}
+          placeholder={placeholder?.[language] || placeholder?.en_US}
+        />
+      )}
+      {isShowJSONEditor && isConstant && (
+        <div className='mt-1 w-full'>
+          <CodeEditor
+            title='JSON'
+            value={varInput?.value as any}
+            isExpand
+            isInNode
+            language={CodeLanguage.json}
+            onChange={handleValueChange}
+            className='w-full'
+            placeholder={<div className='whitespace-pre'>{placeholder?.[language] || placeholder?.en_US}</div>}
+          />
+        </div>
+      )}
+      {isAppSelector && (
+        <AppSelector
+          disabled={readOnly}
+          scope={scope || 'all'}
+          value={varInput?.value as any}
+          onSelect={handleAppOrModelSelect}
+        />
+      )}
+      {isModelSelector && isConstant && (
+        <ModelParameterModal
+          popupClassName='!w-[387px]'
+          isAdvancedMode
+          isInWorkflow
+          value={varInput?.value as any}
+          setModel={handleAppOrModelSelect}
+          readonly={readOnly}
+          scope={scope}
+        />
+      )}
+      {showVariableSelector && (
+        <VarReferencePicker
+          zIndex={inPanel ? 1000 : undefined}
+          className='h-8 grow'
+          readonly={readOnly}
+          isShowNodeName
+          nodeId={nodeId}
+          value={varInput?.value || []}
+          onChange={value => handleVariableSelectorChange(value, variable)}
+          filterVar={getFilterVar()}
+          schema={schema}
+          valueTypePlaceHolder={targetVarType()}
+          currentTool={currentTool}
+          currentProvider={currentProvider}
+        />
+      )}
+    </div>
+  )
+}
+export default FormInputItem
--- a/web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx
+++ b/web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx
@@ -0,0 +1,47 @@
+'use client'
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiEditLine,
+} from '@remixicon/react'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+import Tooltip from '@/app/components/base/tooltip'
+import { VarType } from '@/app/components/workflow/nodes/tool/types'
+import cn from '@/utils/classnames'
+
+type Props = {
+  value: VarType
+  onChange: (value: VarType) => void
+}
+
+const FormInputTypeSwitch: FC<Props> = ({
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <div className='inline-flex h-8 shrink-0 gap-px rounded-[10px] bg-components-segmented-control-bg-normal p-0.5'>
+      <Tooltip
+        popupContent={value === VarType.variable ? '' : t('workflow.nodes.common.typeSwitch.variable')}
+      >
+        <div
+          className={cn('cursor-pointer rounded-lg px-2.5 py-1.5 text-text-tertiary hover:bg-state-base-hover', value === VarType.variable && 'bg-components-segmented-control-item-active-bg text-text-secondary shadow-xs hover:bg-components-segmented-control-item-active-bg')}
+          onClick={() => onChange(VarType.variable)}
+        >
+          <Variable02 className='h-4 w-4' />
+        </div>
+      </Tooltip>
+      <Tooltip
+        popupContent={value === VarType.constant ? '' : t('workflow.nodes.common.typeSwitch.input')}
+      >
+        <div
+          className={cn('cursor-pointer rounded-lg px-2.5 py-1.5 text-text-tertiary hover:bg-state-base-hover', value === VarType.constant && 'bg-components-segmented-control-item-active-bg text-text-secondary shadow-xs hover:bg-components-segmented-control-item-active-bg')}
+          onClick={() => onChange(VarType.constant)}
+        >
+          <RiEditLine className='h-4 w-4' />
+        </div>
+      </Tooltip>
+    </div>
+  )
+}
+export default FormInputTypeSwitch
--- a/web/app/components/workflow/nodes/_base/components/mcp-tool-not-support-tooltip.tsx
+++ b/web/app/components/workflow/nodes/_base/components/mcp-tool-not-support-tooltip.tsx
@@ -0,0 +1,22 @@
+'use client'
+import Tooltip from '@/app/components/base/tooltip'
+import { RiAlertFill } from '@remixicon/react'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+const McpToolNotSupportTooltip: FC = () => {
+  const { t } = useTranslation()
+  return (
+    <Tooltip
+      popupContent={
+        <div className='w-[256px]'>
+        {t('plugin.detailPanel.toolSelector.unsupportedMCPTool')}
+        </div>
+      }
+    >
+      <RiAlertFill className='size-4 text-text-warning-secondary' />
+    </Tooltip>
+  )
+}
+export default React.memo(McpToolNotSupportTooltip)
--- a/web/app/components/workflow/nodes/_base/components/setting-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/setting-item.tsx
@@ -13,7 +13,7 @@ export const SettingItem = memo(({ label, children, status, tooltip }: SettingIt
  const indicator: ComponentProps<typeof Indicator>['color'] = status === 'error' ? 'red' : status === 'warning' ? 'yellow' : undefined
  const needTooltip = ['error', 'warning'].includes(status as any)
  return <div className='relative flex items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1.5 py-1 text-xs font-normal'>
-    <div className={classNames('shrink-0 truncate text-text-tertiary system-xs-medium-uppercase', !!children && 'max-w-[100px]')}>
+    <div className={classNames('system-xs-medium-uppercase max-w-full shrink-0 truncate text-text-tertiary', !!children && 'max-w-[100px]')}>
      {label}
    </div>
    <Tooltip popupContent={tooltip} disabled={!needTooltip}>
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
@@ -528,6 +528,7 @@ const VarReferencePicker: FC<Props> = ({
              onChange={handleVarReferenceChange}
              itemWidth={isAddBtnTrigger ? 260 : (minWidth || triggerWidth)}
              isSupportFileVar={isSupportFileVar}
+              zIndex={zIndex}
            />
          )}
        </PortalToFollowElemContent>
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
@@ -13,6 +13,7 @@ type Props = {
  onChange: (value: ValueSelector, varDetail: Var) => void
  itemWidth?: number
  isSupportFileVar?: boolean
+  zIndex?: number
 }
 const VarReferencePopup: FC<Props> = ({
  vars,
@@ -20,6 +21,7 @@ const VarReferencePopup: FC<Props> = ({
  onChange,
  itemWidth,
  isSupportFileVar = true,
+  zIndex,
 }) => {
  const { t } = useTranslation()
  const docLink = useDocLink()
@@ -60,6 +62,7 @@ const VarReferencePopup: FC<Props> = ({
          onChange={onChange}
          itemWidth={itemWidth}
          isSupportFileVar={isSupportFileVar}
+          zIndex={zIndex}
        />
      }
    </div >
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -46,6 +46,7 @@ type ItemProps = {
  isSupportFileVar?: boolean
  isException?: boolean
  isLoopVar?: boolean
+  zIndex?: number
 }

 const objVarTypes = [VarType.object, VarType.file]
@@ -60,6 +61,7 @@ const Item: FC<ItemProps> = ({
  isSupportFileVar,
  isException,
  isLoopVar,
+  zIndex,
 }) => {
  const isStructureOutput = itemData.type === VarType.object && (itemData.children as StructuredOutput)?.schema?.properties
  const isFile = itemData.type === VarType.file && !isStructureOutput
@@ -171,7 +173,7 @@ const Item: FC<ItemProps> = ({
        </div >
      </PortalToFollowElemTrigger >
      <PortalToFollowElemContent style={{
-        zIndex: 100,
+        zIndex: zIndex || 100,
      }}>
        {(isStructureOutput || isObj) && (
          <PickerStructurePanel
@@ -260,6 +262,7 @@ type Props = {
  maxHeightClass?: string
  onClose?: () => void
  onBlur?: () => void
+  zIndex?: number
  autoFocus?: boolean
 }
 const VarReferenceVars: FC<Props> = ({
@@ -272,6 +275,7 @@ const VarReferenceVars: FC<Props> = ({
  maxHeightClass,
  onClose,
  onBlur,
+  zIndex,
  autoFocus = true,
 }) => {
  const { t } = useTranslation()
@@ -357,6 +361,7 @@ const VarReferenceVars: FC<Props> = ({
                    isSupportFileVar={isSupportFileVar}
                    isException={v.isException}
                    isLoopVar={item.isLoop}
+                    zIndex={zIndex}
                  />
                ))}
              </div>))
--- a/web/app/components/workflow/nodes/_base/node.tsx
+++ b/web/app/components/workflow/nodes/_base/node.tsx
@@ -32,6 +32,7 @@ import {
 import { useNodeIterationInteractions } from '../iteration/use-interactions'
 import { useNodeLoopInteractions } from '../loop/use-interactions'
 import type { IterationNodeType } from '../iteration/types'
+import CopyID from '../tool/components/copy-id'
 import {
  NodeSourceHandle,
  NodeTargetHandle,
@@ -321,6 +322,11 @@ const BaseNode: FC<BaseNodeProps> = ({
            </div>
          )
        }
+        {data.type === BlockEnum.Tool && (
+          <div className='px-3 pb-2'>
+            <CopyID content={data.provider_id || ''} />
+          </div>
+        )}
      </div>
    </div>
  )
--- a/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
+++ b/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
@@ -2,10 +2,11 @@ import Tooltip from '@/app/components/base/tooltip'
 import Indicator from '@/app/components/header/indicator'
 import classNames from '@/utils/classnames'
 import { memo, useMemo, useRef, useState } from 'react'
-import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools } from '@/service/use-tools'
+import { useAllBuiltInTools, useAllCustomTools, useAllMCPTools, useAllWorkflowTools } from '@/service/use-tools'
 import { getIconFromMarketPlace } from '@/utils/get-icon'
 import { useTranslation } from 'react-i18next'
 import { Group } from '@/app/components/base/icons/src/vender/other'
+import AppIcon from '@/app/components/base/app-icon'

 type Status = 'not-installed' | 'not-authorized' | undefined

@@ -19,19 +20,21 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
  const { data: buildInTools } = useAllBuiltInTools()
  const { data: customTools } = useAllCustomTools()
  const { data: workflowTools } = useAllWorkflowTools()
-  const isDataReady = !!buildInTools && !!customTools && !!workflowTools
+  const { data: mcpTools } = useAllMCPTools()
+  const isDataReady = !!buildInTools && !!customTools && !!workflowTools && !!mcpTools
  const currentProvider = useMemo(() => {
-    const mergedTools = [...(buildInTools || []), ...(customTools || []), ...(workflowTools || [])]
+    const mergedTools = [...(buildInTools || []), ...(customTools || []), ...(workflowTools || []), ...(mcpTools || [])]
    return mergedTools.find((toolWithProvider) => {
-      return toolWithProvider.name === providerName
+      return toolWithProvider.name === providerName || toolWithProvider.id === providerName
    })
-  }, [buildInTools, customTools, providerName, workflowTools])
+  }, [buildInTools, customTools, providerName, workflowTools, mcpTools])
+
  const providerNameParts = providerName.split('/')
  const author = providerNameParts[0]
  const name = providerNameParts[1]
  const icon = useMemo(() => {
    if (!isDataReady) return ''
-    if (currentProvider) return currentProvider.icon as string
+    if (currentProvider) return currentProvider.icon
    const iconFromMarketPlace = getIconFromMarketPlace(`${author}/${name}`)
    return iconFromMarketPlace
  }, [author, currentProvider, name, isDataReady])
@@ -62,19 +65,32 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
      )}
      ref={containerRef}
    >
-      {(!iconFetchError && isDataReady)
-
-        ? <img
-          src={icon}
-          alt='tool icon'
-          className={classNames(
-            'w-full h-full size-3.5 object-cover',
-            notSuccess && 'opacity-50',
-          )}
-          onError={() => setIconFetchError(true)}
-        />
-        : <Group className="h-3 w-3 opacity-35" />
-      }
+      {(() => {
+        if (iconFetchError || !icon)
+          return <Group className="h-3 w-3 opacity-35" />
+        if (typeof icon === 'string') {
+          return <img
+            src={icon}
+            alt='tool icon'
+            className={classNames(
+              'w-full h-full size-3.5 object-cover',
+              notSuccess && 'opacity-50',
+            )}
+            onError={() => setIconFetchError(true)}
+          />
+        }
+        if (typeof icon === 'object') {
+          return <AppIcon
+            className={classNames(
+              'w-full h-full size-3.5 object-cover',
+              notSuccess && 'opacity-50',
+            )}
+            icon={icon?.content}
+            background={icon?.background}
+          />
+        }
+        return <Group className="h-3 w-3 opacity-35" />
+      })()}
      {indicator && <Indicator color={indicator} className="absolute right-[-1px] top-[-1px]" />}
    </div>
  </Tooltip>
--- a/web/app/components/workflow/nodes/agent/default.ts
+++ b/web/app/components/workflow/nodes/agent/default.ts
@@ -7,6 +7,7 @@ import { renderI18nObject } from '@/i18n'

 const nodeDefault: NodeDefault<AgentNodeType> = {
  defaultValue: {
+    version: '2',
  },
  getAvailablePrevNodes(isChatMode) {
    return isChatMode
@@ -60,15 +61,28 @@ const nodeDefault: NodeDefault<AgentNodeType> = {
          const schemas = toolValue.schemas || []
          const userSettings = toolValue.settings
          const reasoningConfig = toolValue.parameters
+          const version = payload.version
          schemas.forEach((schema: any) => {
            if (schema?.required) {
-              if (schema.form === 'form' && !userSettings[schema.name]?.value) {
+              if (schema.form === 'form' && !version && !userSettings[schema.name]?.value) {
                return {
                  isValid: false,
                  errorMessage: t('workflow.errorMsg.toolParameterRequired', { field: renderI18nObject(param.label, language), param: renderI18nObject(schema.label, language) }),
                }
              }
-              if (schema.form === 'llm' && reasoningConfig[schema.name].auto === 0 && !userSettings[schema.name]?.value) {
+              if (schema.form === 'form' && version && !userSettings[schema.name]?.value.value) {
+                return {
+                  isValid: false,
+                  errorMessage: t('workflow.errorMsg.toolParameterRequired', { field: renderI18nObject(param.label, language), param: renderI18nObject(schema.label, language) }),
+                }
+              }
+              if (schema.form === 'llm' && !version && reasoningConfig[schema.name].auto === 0 && !reasoningConfig[schema.name]?.value) {
+                return {
+                  isValid: false,
+                  errorMessage: t('workflow.errorMsg.toolParameterRequired', { field: renderI18nObject(param.label, language), param: renderI18nObject(schema.label, language) }),
+                }
+              }
+              if (schema.form === 'llm' && version && reasoningConfig[schema.name].auto === 0 && !reasoningConfig[schema.name]?.value.value) {
                return {
                  isValid: false,
                  errorMessage: t('workflow.errorMsg.toolParameterRequired', { field: renderI18nObject(param.label, language), param: renderI18nObject(schema.label, language) }),
--- a/web/app/components/workflow/nodes/agent/node.tsx
+++ b/web/app/components/workflow/nodes/agent/node.tsx
@@ -104,7 +104,7 @@ const AgentNode: FC<NodeProps<AgentNodeType>> = (props) => {
      {t('workflow.nodes.agent.toolbox')}
    </GroupLabel>}>
      <div className='grid grid-cols-10 gap-0.5'>
-        {tools.map(tool => <ToolIcon {...tool} key={tool.id} />)}
+        {tools.map((tool, i) => <ToolIcon {...tool} key={tool.id + i} />)}
      </div>
    </Group>}
  </div>
--- a/web/app/components/workflow/nodes/agent/panel.tsx
+++ b/web/app/components/workflow/nodes/agent/panel.tsx
@@ -38,11 +38,11 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
    readOnly,
    outputSchema,
    handleMemoryChange,
+    canChooseMCPTool,
  } = useConfig(props.id, props.data)
  const { t } = useTranslation()

  const resetEditor = useStore(s => s.setControlPromptEditorRerenderKey)
-
  return <div className='my-2'>
    <Field
    required
@@ -56,6 +56,7 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
          agent_strategy_label: inputs.agent_strategy_label!,
          agent_output_schema: inputs.output_schema,
          plugin_unique_identifier: inputs.plugin_unique_identifier!,
+          meta: inputs.meta,
        } : undefined}
        onStrategyChange={(strategy) => {
          setInputs({
@@ -65,6 +66,7 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
            agent_strategy_label: strategy?.agent_strategy_label,
            output_schema: strategy!.agent_output_schema,
            plugin_unique_identifier: strategy!.plugin_unique_identifier,
+            meta: strategy?.meta,
          })
          resetEditor(Date.now())
        }}
@@ -74,6 +76,7 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
        nodeOutputVars={availableVars}
        availableNodes={availableNodesWithParent}
        nodeId={props.id}
+        canChooseMCPTool={canChooseMCPTool}
      />
    </Field>
    <div className='px-4 py-2'>
--- a/web/app/components/workflow/nodes/agent/types.ts
+++ b/web/app/components/workflow/nodes/agent/types.ts
@@ -1,14 +1,17 @@
 import type { CommonNodeType, Memory } from '@/app/components/workflow/types'
 import type { ToolVarInputs } from '../tool/types'
+import type { PluginMeta } from '@/app/components/plugins/types'

 export type AgentNodeType = CommonNodeType & {
  agent_strategy_provider_name?: string
  agent_strategy_name?: string
  agent_strategy_label?: string
  agent_parameters?: ToolVarInputs
+  meta?: PluginMeta
  output_schema: Record<string, any>
  plugin_unique_identifier?: string
  memory?: Memory
+  version?: string
 }

 export enum AgentFeature {
--- a/web/app/components/workflow/nodes/agent/use-config.ts
+++ b/web/app/components/workflow/nodes/agent/use-config.ts
@@ -6,13 +6,16 @@ import {
  useIsChatMode,
  useNodesReadOnly,
 } from '@/app/components/workflow/hooks'
-import { useCallback, useMemo } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 import { type ToolVarInputs, VarType } from '../tool/types'
 import { useCheckInstalled, useFetchPluginsInMarketPlaceByIds } from '@/service/use-plugins'
 import type { Memory, Var } from '../../types'
 import { VarType as VarKindType } from '../../types'
 import useAvailableVarList from '../_base/hooks/use-available-var-list'
 import produce from 'immer'
+import { isSupportMCP } from '@/utils/plugin-version-feature'
+import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { generateAgentToolValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'

 export type StrategyStatus = {
  plugin: {
@@ -85,11 +88,12 @@ const useConfig = (id: string, payload: AgentNodeType) => {
  })
  const formData = useMemo(() => {
    const paramNameList = (currentStrategy?.parameters || []).map(item => item.name)
-    return Object.fromEntries(
+    const res = Object.fromEntries(
      Object.entries(inputs.agent_parameters || {}).filter(([name]) => paramNameList.includes(name)).map(([key, value]) => {
        return [key, value.value]
      }),
    )
+    return res
  }, [inputs.agent_parameters, currentStrategy?.parameters])
  const onFormChange = (value: Record<string, any>) => {
    const res: ToolVarInputs = {}
@@ -105,6 +109,42 @@ const useConfig = (id: string, payload: AgentNodeType) => {
    })
  }

+  const formattingToolData = (data: any) => {
+    const settingValues = generateAgentToolValue(data.settings, toolParametersToFormSchemas(data.schemas.filter((param: { form: string }) => param.form !== 'llm') as any))
+    const paramValues = generateAgentToolValue(data.parameters, toolParametersToFormSchemas(data.schemas.filter((param: { form: string }) => param.form === 'llm') as any), true)
+    const res = produce(data, (draft: any) => {
+      draft.settings = settingValues
+      draft.parameters = paramValues
+    })
+    return res
+  }
+
+  const formattingLegacyData = () => {
+    if (inputs.version)
+      return inputs
+    const newData = produce(inputs, (draft) => {
+      const schemas = currentStrategy?.parameters || []
+      Object.keys(draft.agent_parameters || {}).forEach((key) => {
+        const targetSchema = schemas.find(schema => schema.name === key)
+        if (targetSchema?.type === FormTypeEnum.toolSelector)
+          draft.agent_parameters![key].value = formattingToolData(draft.agent_parameters![key].value)
+        if (targetSchema?.type === FormTypeEnum.multiToolSelector)
+          draft.agent_parameters![key].value = draft.agent_parameters![key].value.map((tool: any) => formattingToolData(tool))
+      })
+      draft.version = '2'
+    })
+    return newData
+  }
+
+  // formatting legacy data
+  useEffect(() => {
+    if (!currentStrategy)
+      return
+    const newData = formattingLegacyData()
+    setInputs(newData)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentStrategy])
+
  // vars

  const filterMemoryPromptVar = useCallback((varPayload: Var) => {
@@ -172,6 +212,7 @@ const useConfig = (id: string, payload: AgentNodeType) => {
    outputSchema,
    handleMemoryChange,
    isChatMode,
+    canChooseMCPTool: isSupportMCP(inputs.meta?.version),
  }
 }

--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts
@@ -6,6 +6,7 @@ import type { EditData } from './edit-card'
 import { ArrayType, type Field, Type } from '../../../types'
 import Toast from '@/app/components/base/toast'
 import { findPropertyWithPath } from '../../../utils'
+import _ from 'lodash'

 type ChangeEventParams = {
  path: string[],
@@ -19,7 +20,8 @@ type AddEventParams = {
 }

 export const useSchemaNodeOperations = (props: VisualEditorProps) => {
-  const { schema: jsonSchema, onChange } = props
+  const { schema: jsonSchema, onChange: doOnChange } = props
+  const onChange = doOnChange || _.noop
  const backupSchema = useVisualEditorStore(state => state.backupSchema)
  const setBackupSchema = useVisualEditorStore(state => state.setBackupSchema)
  const isAddingNewField = useVisualEditorStore(state => state.isAddingNewField)
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx
@@ -2,24 +2,29 @@ import type { FC } from 'react'
 import type { SchemaRoot } from '../../../types'
 import SchemaNode from './schema-node'
 import { useSchemaNodeOperations } from './hooks'
+import cn from '@/utils/classnames'

 export type VisualEditorProps = {
+  className?: string
  schema: SchemaRoot
-  onChange: (schema: SchemaRoot) => void
+  rootName?: string
+  readOnly?: boolean
+  onChange?: (schema: SchemaRoot) => void
 }

 const VisualEditor: FC<VisualEditorProps> = (props) => {
-  const { schema } = props
+  const { className, schema, readOnly } = props
  useSchemaNodeOperations(props)

  return (
-    <div className='h-full overflow-auto rounded-xl bg-background-section-burn p-1 pl-2'>
+    <div className={cn('h-full overflow-auto rounded-xl bg-background-section-burn p-1 pl-2', className)}>
      <SchemaNode
-        name='structured_output'
+        name={props.rootName || 'structured_output'}
        schema={schema}
        required={false}
        path={[]}
        depth={0}
+        readOnly={readOnly}
      />
    </div>
  )
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
@@ -19,6 +19,7 @@ type SchemaNodeProps = {
  path: string[]
  parentPath?: string[]
  depth: number
+  readOnly?: boolean
 }

 // Support 10 levels of indentation
@@ -57,6 +58,7 @@ const SchemaNode: FC<SchemaNodeProps> = ({
  path,
  parentPath,
  depth,
+  readOnly,
 }) => {
  const [isExpanded, setIsExpanded] = useState(true)
  const hoveringProperty = useVisualEditorStore(state => state.hoveringProperty)
@@ -77,11 +79,13 @@ const SchemaNode: FC<SchemaNodeProps> = ({
  }

  const handleMouseEnter = () => {
+    if(!readOnly) return
    if (advancedEditing || isAddingNewField) return
    setHoveringPropertyDebounced(path.join('.'))
  }

  const handleMouseLeave = () => {
+    if(!readOnly) return
    if (advancedEditing || isAddingNewField) return
    setHoveringPropertyDebounced(null)
  }
@@ -183,7 +187,7 @@ const SchemaNode: FC<SchemaNodeProps> = ({
      )}

      {
-        depth === 0 && !isAddingNewField && (
+        !readOnly && depth === 0 && !isAddingNewField && (
          <AddField />
        )
      }
--- a/web/app/components/workflow/nodes/tool/components/copy-id.tsx
+++ b/web/app/components/workflow/nodes/tool/components/copy-id.tsx
@@ -0,0 +1,51 @@
+'use client'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiFileCopyLine } from '@remixicon/react'
+import copy from 'copy-to-clipboard'
+import { debounce } from 'lodash-es'
+import Tooltip from '@/app/components/base/tooltip'
+
+type Props = {
+  content: string
+}
+
+const prefixEmbedded = 'appOverview.overview.appInfo.embedded'
+
+const CopyFeedbackNew = ({ content }: Props) => {
+  const { t } = useTranslation()
+  const [isCopied, setIsCopied] = useState<boolean>(false)
+
+  const onClickCopy = debounce(() => {
+    copy(content)
+    setIsCopied(true)
+  }, 100)
+
+  const onMouseLeave = debounce(() => {
+    setIsCopied(false)
+  }, 100)
+
+  return (
+    <div className='inline-flex pb-0.5' onClick={e => e.stopPropagation()} onMouseLeave={onMouseLeave}>
+      <Tooltip
+        popupContent={
+          (isCopied
+            ? t(`${prefixEmbedded}.copied`)
+            : t(`${prefixEmbedded}.copy`)) || ''
+        }
+      >
+        <div
+          className='group/copy flex items-center gap-0.5 '
+          onClick={onClickCopy}
+        >
+          <div
+            className='system-2xs-regular cursor-pointer text-text-quaternary group-hover:text-text-tertiary'
+          >{content}</div>
+          <RiFileCopyLine className='h-3 w-3 text-text-tertiary opacity-0 group-hover/copy:opacity-100' />
+        </div>
+      </Tooltip>
+    </div>
+  )
+}
+
+export default CopyFeedbackNew
--- a/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/index.tsx
+++ b/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/index.tsx
@@ -0,0 +1,62 @@
+import {
+  memo,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import PromptEditor from '@/app/components/base/prompt-editor'
+import Placeholder from './placeholder'
+import type {
+  Node,
+  NodeOutPutVar,
+} from '@/app/components/workflow/types'
+import { BlockEnum } from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'
+
+type MixedVariableTextInputProps = {
+  readOnly?: boolean
+  nodesOutputVars?: NodeOutPutVar[]
+  availableNodes?: Node[]
+  value?: string
+  onChange?: (text: string) => void
+}
+const MixedVariableTextInput = ({
+  readOnly = false,
+  nodesOutputVars,
+  availableNodes = [],
+  value = '',
+  onChange,
+}: MixedVariableTextInputProps) => {
+  const { t } = useTranslation()
+  return (
+    <PromptEditor
+      wrapperClassName={cn(
+        'w-full rounded-lg border border-transparent bg-components-input-bg-normal px-2 py-1',
+        'hover:border-components-input-border-hover hover:bg-components-input-bg-hover',
+        'focus-within:border-components-input-border-active focus-within:bg-components-input-bg-active focus-within:shadow-xs',
+      )}
+      className='caret:text-text-accent'
+      editable={!readOnly}
+      value={value}
+      workflowVariableBlock={{
+        show: true,
+        variables: nodesOutputVars || [],
+        workflowNodesMap: availableNodes.reduce((acc, node) => {
+          acc[node.id] = {
+            title: node.data.title,
+            type: node.data.type,
+          }
+          if (node.data.type === BlockEnum.Start) {
+            acc.sys = {
+              title: t('workflow.blocks.start'),
+              type: BlockEnum.Start,
+            }
+          }
+          return acc
+        }, {} as any),
+      }}
+      placeholder={<Placeholder />}
+      onChange={onChange}
+    />
+  )
+}
+
+export default memo(MixedVariableTextInput)
--- a/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/placeholder.tsx
+++ b/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/placeholder.tsx
@@ -0,0 +1,51 @@
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { FOCUS_COMMAND } from 'lexical'
+import { $insertNodes } from 'lexical'
+import { CustomTextNode } from '@/app/components/base/prompt-editor/plugins/custom-text/node'
+import Badge from '@/app/components/base/badge'
+
+const Placeholder = () => {
+  const { t } = useTranslation()
+  const [editor] = useLexicalComposerContext()
+
+  const handleInsert = useCallback((text: string) => {
+    editor.update(() => {
+      const textNode = new CustomTextNode(text)
+      $insertNodes([textNode])
+    })
+    editor.dispatchCommand(FOCUS_COMMAND, undefined as any)
+  }, [editor])
+
+  return (
+    <div
+      className='pointer-events-auto flex h-full w-full cursor-text items-center px-2'
+      onClick={(e) => {
+        e.stopPropagation()
+        handleInsert('')
+      }}
+    >
+      <div className='flex grow items-center'>
+        {t('workflow.nodes.tool.insertPlaceholder1')}
+        <div className='system-kbd mx-0.5 flex h-4 w-4 items-center justify-center rounded bg-components-kbd-bg-gray text-text-placeholder'>/</div>
+        <div
+          className='system-sm-regular cursor-pointer text-components-input-text-placeholder underline decoration-dotted decoration-auto underline-offset-auto hover:text-text-tertiary'
+          onClick={((e) => {
+            e.stopPropagation()
+            handleInsert('/')
+          })}
+        >
+          {t('workflow.nodes.tool.insertPlaceholder2')}
+        </div>
+      </div>
+      <Badge
+        className='shrink-0'
+        text='String'
+        uppercase={false}
+      />
+    </div>
+  )
+}
+
+export default Placeholder
--- a/web/app/components/workflow/nodes/tool/components/tool-form/index.tsx
+++ b/web/app/components/workflow/nodes/tool/components/tool-form/index.tsx
@@ -0,0 +1,51 @@
+'use client'
+import type { FC } from 'react'
+import type { ToolVarInputs } from '../../types'
+import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import ToolFormItem from './item'
+import type { ToolWithProvider } from '@/app/components/workflow/types'
+import type { Tool } from '@/app/components/tools/types'
+
+type Props = {
+  readOnly: boolean
+  nodeId: string
+  schema: CredentialFormSchema[]
+  value: ToolVarInputs
+  onChange: (value: ToolVarInputs) => void
+  onOpen?: (index: number) => void
+  inPanel?: boolean
+  currentTool?: Tool
+  currentProvider?: ToolWithProvider
+}
+
+const ToolForm: FC<Props> = ({
+  readOnly,
+  nodeId,
+  schema,
+  value,
+  onChange,
+  inPanel,
+  currentTool,
+  currentProvider,
+}) => {
+  return (
+    <div className='space-y-1'>
+      {
+        schema.map((schema, index) => (
+          <ToolFormItem
+            key={index}
+            readOnly={readOnly}
+            nodeId={nodeId}
+            schema={schema}
+            value={value}
+            onChange={onChange}
+            inPanel={inPanel}
+            currentTool={currentTool}
+            currentProvider={currentProvider}
+          />
+        ))
+      }
+    </div>
+  )
+}
+export default ToolForm
--- a/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
+++ b/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
@@ -0,0 +1,105 @@
+'use client'
+import type { FC } from 'react'
+import {
+  RiBracesLine,
+} from '@remixicon/react'
+import type { ToolVarInputs } from '../../types'
+import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import Button from '@/app/components/base/button'
+import Tooltip from '@/app/components/base/tooltip'
+import FormInputItem from '@/app/components/workflow/nodes/_base/components/form-input-item'
+import { useBoolean } from 'ahooks'
+import SchemaModal from '@/app/components/plugins/plugin-detail-panel/tool-selector/schema-modal'
+import type { ToolWithProvider } from '@/app/components/workflow/types'
+import type { Tool } from '@/app/components/tools/types'
+
+type Props = {
+  readOnly: boolean
+  nodeId: string
+  schema: CredentialFormSchema
+  value: ToolVarInputs
+  onChange: (value: ToolVarInputs) => void
+  inPanel?: boolean
+  currentTool?: Tool
+  currentProvider?: ToolWithProvider
+}
+
+const ToolFormItem: FC<Props> = ({
+  readOnly,
+  nodeId,
+  schema,
+  value,
+  onChange,
+  inPanel,
+  currentTool,
+  currentProvider,
+}) => {
+  const language = useLanguage()
+  const { name, label, type, required, tooltip, input_schema } = schema
+  const showSchemaButton = type === FormTypeEnum.object || type === FormTypeEnum.array
+  const showDescription = type === FormTypeEnum.textInput || type === FormTypeEnum.secretInput
+  const [isShowSchema, {
+    setTrue: showSchema,
+    setFalse: hideSchema,
+  }] = useBoolean(false)
+  return (
+    <div className='space-y-0.5 py-1'>
+      <div>
+        <div className='flex h-6 items-center'>
+          <div className='system-sm-medium text-text-secondary'>{label[language] || label.en_US}</div>
+          {required && (
+            <div className='system-xs-regular ml-1 text-text-destructive-secondary'>*</div>
+          )}
+          {!showDescription && tooltip && (
+            <Tooltip
+              popupContent={<div className='w-[200px]'>
+                {tooltip[language] || tooltip.en_US}
+              </div>}
+              triggerClassName='ml-1 w-4 h-4'
+              asChild={false}
+            />
+          )}
+          {showSchemaButton && (
+            <>
+              <div className='system-xs-regular ml-1 mr-0.5 text-text-quaternary'>·</div>
+              <Button
+                variant='ghost'
+                size='small'
+                onClick={showSchema}
+                className='system-xs-regular px-1 text-text-tertiary'
+              >
+                <RiBracesLine className='mr-1 size-3.5' />
+                <span>JSON Schema</span>
+              </Button>
+            </>
+          )}
+        </div>
+        {showDescription && tooltip && (
+          <div className='body-xs-regular pb-0.5 text-text-tertiary'>{tooltip[language] || tooltip.en_US}</div>
+        )}
+      </div>
+      <FormInputItem
+        readOnly={readOnly}
+        nodeId={nodeId}
+        schema={schema}
+        value={value}
+        onChange={onChange}
+        inPanel={inPanel}
+        currentTool={currentTool}
+        currentProvider={currentProvider}
+      />
+
+      {isShowSchema && (
+        <SchemaModal
+          isShow
+          onClose={hideSchema}
+          rootName={name}
+          schema={input_schema!}
+        />
+      )}
+    </div>
+  )
+}
+export default ToolFormItem
--- a/web/app/components/workflow/nodes/tool/default.ts
+++ b/web/app/components/workflow/nodes/tool/default.ts
@@ -10,6 +10,7 @@ const nodeDefault: NodeDefault<ToolNodeType> = {
  defaultValue: {
    tool_parameters: {},
    tool_configurations: {},
+    version: '2',
  },
  getAvailablePrevNodes(isChatMode: boolean) {
    const nodes = isChatMode
@@ -55,6 +56,8 @@ const nodeDefault: NodeDefault<ToolNodeType> = {
        const value = payload.tool_configurations[field.variable]
        if (!errorMessages && (value === undefined || value === null || value === ''))
          errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: field.label[language] })
+        if (!errorMessages && typeof value === 'object' && !!value.type && (value.value === undefined || value.value === null || value.value === '' || (Array.isArray(value.value) && value.value.length === 0)))
+          errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: field.label[language] })
      })
    }

--- a/web/app/components/workflow/nodes/tool/node.tsx
+++ b/web/app/components/workflow/nodes/tool/node.tsx
@@ -21,14 +21,14 @@ const Node: FC<NodeProps<ToolNodeType>> = ({
            <div title={key} className='max-w-[100px] shrink-0 truncate text-xs font-medium uppercase text-text-tertiary'>
              {key}
            </div>
-            {typeof tool_configurations[key] === 'string' && (
+            {typeof tool_configurations[key].value === 'string' && (
              <div title={tool_configurations[key]} className='w-0 shrink-0 grow truncate text-right text-xs font-normal text-text-secondary'>
-                {paramSchemas?.find(i => i.name === key)?.type === FormTypeEnum.secretInput ? '********' : tool_configurations[key]}
+                {paramSchemas?.find(i => i.name === key)?.type === FormTypeEnum.secretInput ? '********' : tool_configurations[key].value}
              </div>
            )}
-            {typeof tool_configurations[key] === 'number' && (
+            {typeof tool_configurations[key].value === 'number' && (
              <div title={tool_configurations[key].toString()} className='w-0 shrink-0 grow truncate text-right text-xs font-normal text-text-secondary'>
-                {tool_configurations[key]}
+                {tool_configurations[key].value}
              </div>
            )}
            {typeof tool_configurations[key] !== 'string' && tool_configurations[key]?.type === FormTypeEnum.modelSelector && (
@@ -36,11 +36,6 @@ const Node: FC<NodeProps<ToolNodeType>> = ({
                {tool_configurations[key].model}
              </div>
            )}
-            {/* {typeof tool_configurations[key] !== 'string' && tool_configurations[key]?.type === FormTypeEnum.appSelector && (
-              <div title={tool_configurations[key].app_id} className='grow w-0 shrink-0 truncate text-right text-xs font-normal text-gray-700'>
-                {tool_configurations[key].app_id}
-              </div>
-            )} */}
          </div>

        ))}
--- a/web/app/components/workflow/nodes/tool/panel.tsx
+++ b/web/app/components/workflow/nodes/tool/panel.tsx
@@ -4,11 +4,10 @@ import { useTranslation } from 'react-i18next'
 import Split from '../_base/components/split'
 import type { ToolNodeType } from './types'
 import useConfig from './use-config'
-import InputVarList from './components/input-var-list'
+import ToolForm from './components/tool-form'
 import Button from '@/app/components/base/button'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import type { NodePanelProps } from '@/app/components/workflow/types'
-import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
 import Loading from '@/app/components/base/loading'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
@@ -28,8 +27,6 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
    inputs,
    toolInputVarSchema,
    setInputVar,
-    handleOnVarOpen,
-    filterVar,
    toolSettingSchema,
    toolSettingValue,
    setToolSettingValue,
@@ -45,6 +42,8 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
    currTool,
  } = useConfig(id, data)

+  const [collapsed, setCollapsed] = React.useState(false)
+
  if (isLoading) {
    return <div className='flex h-[200px] items-center justify-center'>
      <Loading />
@@ -66,21 +65,19 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
          </div>
        </>
      )}
-      {!isShowAuthBtn && <>
-        <div className='space-y-4 px-4'>
+      {!isShowAuthBtn && (
+        <div className='relative'>
          {toolInputVarSchema.length > 0 && (
            <Field
+              className='px-4'
              title={t(`${i18nPrefix}.inputVars`)}
            >
-              <InputVarList
+              <ToolForm
                readOnly={readOnly}
                nodeId={id}
                schema={toolInputVarSchema as any}
                value={inputs.tool_parameters}
                onChange={setInputVar}
-                filterVar={filterVar}
-                isSupportConstantValue
-                onOpen={handleOnVarOpen}
                currentProvider={currCollection}
                currentTool={currTool}
              />
@@ -88,24 +85,29 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
          )}

          {toolInputVarSchema.length > 0 && toolSettingSchema.length > 0 && (
-            <Split />
+            <Split className='mt-1' />
          )}

-          <Form
-            className='space-y-4'
-            itemClassName='!py-0'
-            fieldLabelClassName='!text-[13px] !font-semibold !text-text-secondary uppercase'
-            value={toolSettingValue}
-            onChange={setToolSettingValue}
-            formSchemas={toolSettingSchema as any}
-            isEditMode={false}
-            showOnVariableMap={{}}
-            validating={false}
-            // inputClassName='!bg-gray-50'
-            readonly={readOnly}
-          />
+          {toolSettingSchema.length > 0 && (
+            <>
+              <OutputVars
+                title={t(`${i18nPrefix}.settings`)}
+                collapsed={collapsed}
+                onCollapse={setCollapsed}
+              >
+                <ToolForm
+                  readOnly={readOnly}
+                  nodeId={id}
+                  schema={toolSettingSchema as any}
+                  value={toolSettingValue}
+                  onChange={setToolSettingValue}
+                />
+              </OutputVars>
+              <Split />
+            </>
+          )}
        </div>
-      </>}
+      )}

      {showSetAuth && (
        <ConfigCredential
--- a/web/app/components/workflow/nodes/tool/types.ts
+++ b/web/app/components/workflow/nodes/tool/types.ts
@@ -22,4 +22,5 @@ export type ToolNodeType = CommonNodeType & {
  tool_configurations: Record<string, any>
  output_schema: Record<string, any>
  paramSchemas?: Record<string, any>[]
+  version?: string
 }
--- a/web/app/components/workflow/nodes/tool/use-config.ts
+++ b/web/app/components/workflow/nodes/tool/use-config.ts
@@ -8,10 +8,12 @@ import { useLanguage } from '@/app/components/header/account-setting/model-provi
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 import { CollectionType } from '@/app/components/tools/types'
 import { updateBuiltInToolCredential } from '@/service/tools'
-import { addDefaultValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
+import {
+  getConfiguredValue,
+  toolParametersToFormSchemas,
+} from '@/app/components/tools/utils/to-form-schema'
 import Toast from '@/app/components/base/toast'
-import { VarType as VarVarType } from '@/app/components/workflow/types'
-import type { InputVar, Var } from '@/app/components/workflow/types'
+import type { InputVar } from '@/app/components/workflow/types'
 import {
  useFetchToolsData,
  useNodesReadOnly,
@@ -26,17 +28,18 @@ const useConfig = (id: string, payload: ToolNodeType) => {
  const language = useLanguage()
  const { inputs, setInputs: doSetInputs } = useNodeCrud<ToolNodeType>(id, payload)
  /*
-  * tool_configurations: tool setting, not dynamic setting
-  * tool_parameters: tool dynamic setting(by user)
+  * tool_configurations: tool setting, not dynamic setting (form type = form)
+  * tool_parameters: tool dynamic setting(form type = llm)
  * output_schema: tool dynamic output
  */
-  const { provider_id, provider_type, tool_name, tool_configurations, output_schema } = inputs
+  const { provider_id, provider_type, tool_name, tool_configurations, output_schema, tool_parameters } = inputs
  const isBuiltIn = provider_type === CollectionType.builtIn
  const buildInTools = useStore(s => s.buildInTools)
  const customTools = useStore(s => s.customTools)
  const workflowTools = useStore(s => s.workflowTools)
+  const mcpTools = useStore(s => s.mcpTools)

-  const currentTools = (() => {
+  const currentTools = useMemo(() => {
    switch (provider_type) {
      case CollectionType.builtIn:
        return buildInTools
@@ -44,10 +47,12 @@ const useConfig = (id: string, payload: ToolNodeType) => {
        return customTools
      case CollectionType.workflow:
        return workflowTools
+      case CollectionType.mcp:
+        return mcpTools
      default:
        return []
    }
-  })()
+  }, [buildInTools, customTools, mcpTools, provider_type, workflowTools])
  const currCollection = currentTools.find(item => canFindTool(item.id, provider_id))

  // Auth
@@ -91,10 +96,10 @@ const useConfig = (id: string, payload: ToolNodeType) => {
        const value = newConfig[key]
        if (schema?.type === 'boolean') {
          if (typeof value === 'string')
-            newConfig[key] = Number.parseInt(value, 10)
+            newConfig[key] = value === 'true' || value === '1'

-          if (typeof value === 'boolean')
-            newConfig[key] = value ? 1 : 0
+          if (typeof value === 'number')
+            newConfig[key] = value === 1
        }

        if (schema?.type === 'number-input') {
@@ -107,12 +112,11 @@ const useConfig = (id: string, payload: ToolNodeType) => {
    doSetInputs(newInputs)
  }, [doSetInputs, formSchemas, hasShouldTransferTypeSettingInput])
  const [notSetDefaultValue, setNotSetDefaultValue] = useState(false)
-  const toolSettingValue = (() => {
+  const toolSettingValue = useMemo(() => {
    if (notSetDefaultValue)
      return tool_configurations
-
-    return addDefaultValue(tool_configurations, toolSettingSchema)
-  })()
+    return getConfiguredValue(tool_configurations, toolSettingSchema)
+  }, [notSetDefaultValue, toolSettingSchema, tool_configurations])
  const setToolSettingValue = useCallback((value: Record<string, any>) => {
    setNotSetDefaultValue(true)
    setInputs({
@@ -121,16 +125,20 @@ const useConfig = (id: string, payload: ToolNodeType) => {
    })
  }, [inputs, setInputs])

+  const formattingParameters = () => {
+    const inputsWithDefaultValue = produce(inputs, (draft) => {
+      if (!draft.tool_configurations || Object.keys(draft.tool_configurations).length === 0)
+        draft.tool_configurations = getConfiguredValue(tool_configurations, toolSettingSchema)
+      if (!draft.tool_parameters || Object.keys(draft.tool_parameters).length === 0)
+        draft.tool_parameters = getConfiguredValue(tool_parameters, toolInputVarSchema)
+    })
+    return inputsWithDefaultValue
+  }
+
  useEffect(() => {
    if (!currTool)
      return
-    const inputsWithDefaultValue = produce(inputs, (draft) => {
-      if (!draft.tool_configurations || Object.keys(draft.tool_configurations).length === 0)
-        draft.tool_configurations = addDefaultValue(tool_configurations, toolSettingSchema)
-
-      if (!draft.tool_parameters)
-        draft.tool_parameters = {}
-    })
+    const inputsWithDefaultValue = formattingParameters()
    setInputs(inputsWithDefaultValue)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currTool])
@@ -143,19 +151,6 @@ const useConfig = (id: string, payload: ToolNodeType) => {
    })
  }, [inputs, setInputs])

-  const [currVarIndex, setCurrVarIndex] = useState(-1)
-  const currVarType = toolInputVarSchema[currVarIndex]?._type
-  const handleOnVarOpen = useCallback((index: number) => {
-    setCurrVarIndex(index)
-  }, [])
-
-  const filterVar = useCallback((varPayload: Var) => {
-    if (currVarType)
-      return varPayload.type === currVarType
-
-    return varPayload.type !== VarVarType.arrayFile
-  }, [currVarType])
-
  const isLoading = currTool && (isBuiltIn ? !currCollection : false)

  const getMoreDataForCheckValid = () => {
@@ -220,8 +215,6 @@ const useConfig = (id: string, payload: ToolNodeType) => {
    setToolSettingValue,
    toolInputVarSchema,
    setInputVar,
-    handleOnVarOpen,
-    filterVar,
    currCollection,
    isShowAuthBtn,
    showSetAuth,
--- a/web/app/components/workflow/nodes/tool/use-single-run-form-params.ts
+++ b/web/app/components/workflow/nodes/tool/use-single-run-form-params.ts
@@ -34,7 +34,12 @@ const useSingleRunFormParams = ({
  const hadVarParams = Object.keys(inputs.tool_parameters)
    .filter(key => inputs.tool_parameters[key].type !== VarType.constant)
    .map(k => inputs.tool_parameters[k])
-  const varInputs = getInputVars(hadVarParams.map((p) => {
+
+  const hadVarSettings = Object.keys(inputs.tool_configurations)
+    .filter(key => typeof inputs.tool_configurations[key] === 'object' && inputs.tool_configurations[key].type && inputs.tool_configurations[key].type !== VarType.constant)
+    .map(k => inputs.tool_configurations[k])
+
+  const varInputs = getInputVars([...hadVarParams, ...hadVarSettings].map((p) => {
    if (p.type === VarType.variable) {
      // handle the old wrong value not crash the page
      if (!(p.value as any).join)
@@ -55,8 +60,11 @@ const useSingleRunFormParams = ({
    const res = produce(inputVarValues, (draft) => {
      Object.keys(inputs.tool_parameters).forEach((key: string) => {
        const { type, value } = inputs.tool_parameters[key]
-        if (type === VarType.constant && (value === undefined || value === null))
+        if (type === VarType.constant && (value === undefined || value === null)) {
+            if(!draft.tool_parameters || !draft.tool_parameters[key])
+            return
          draft[key] = value
+        }
      })
    })
    return res
--- a/web/app/components/workflow/store/workflow/tool-slice.ts
+++ b/web/app/components/workflow/store/workflow/tool-slice.ts
@@ -10,6 +10,8 @@ export type ToolSliceShape = {
  setCustomTools: (tools: ToolWithProvider[]) => void
  workflowTools: ToolWithProvider[]
  setWorkflowTools: (tools: ToolWithProvider[]) => void
+  mcpTools: ToolWithProvider[]
+  setMcpTools: (tools: ToolWithProvider[]) => void
  toolPublished: boolean
  setToolPublished: (toolPublished: boolean) => void
 }
@@ -21,6 +23,8 @@ export const createToolSlice: StateCreator<ToolSliceShape> = set => ({
  setCustomTools: customTools => set(() => ({ customTools })),
  workflowTools: [],
  setWorkflowTools: workflowTools => set(() => ({ workflowTools })),
+  mcpTools: [],
+  setMcpTools: mcpTools => set(() => ({ mcpTools })),
  toolPublished: false,
  setToolPublished: toolPublished => set(() => ({ toolPublished })),
 })
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@@ -16,6 +16,7 @@ import type {
 } from '@/app/components/workflow/nodes/_base/components/error-handle/types'
 import type { WorkflowRetryConfig } from '@/app/components/workflow/nodes/_base/components/retry/types'
 import type { StructuredOutput } from '@/app/components/workflow/nodes/llm/types'
+import type { PluginMeta } from '../plugins/types'

 export enum BlockEnum {
  Start = 'start',
@@ -410,6 +411,7 @@ export type MoreInfo = {

 export type ToolWithProvider = Collection & {
  tools: Tool[]
+  meta: PluginMeta
 }

 export enum SupportUploadFileTypes {
--- a/web/app/components/workflow/utils/workflow-init.ts
+++ b/web/app/components/workflow/utils/workflow-init.ts
@@ -28,6 +28,7 @@ import type { IfElseNodeType } from '../nodes/if-else/types'
 import { branchNameCorrect } from '../nodes/if-else/utils'
 import type { IterationNodeType } from '../nodes/iteration/types'
 import type { LoopNodeType } from '../nodes/loop/types'
+import type { ToolNodeType } from '../nodes/tool/types'
 import {
  getIterationStartNode,
  getLoopStartNode,
@@ -276,6 +277,7 @@ export const initialNodes = (originNodes: Node[], originEdges: Edge[]) => {

    if (node.data.type === BlockEnum.ParameterExtractor)
      (node as any).data.model.provider = correctModelProvider((node as any).data.model.provider)
+
    if (node.data.type === BlockEnum.HttpRequest && !node.data.retry_config) {
      node.data.retry_config = {
        retry_enabled: true,
@@ -284,6 +286,24 @@ export const initialNodes = (originNodes: Node[], originEdges: Edge[]) => {
      }
    }

+    if (node.data.type === BlockEnum.Tool && !(node as Node<ToolNodeType>).data.version) {
+      (node as Node<ToolNodeType>).data.version = '2'
+
+      const toolConfigurations = (node as Node<ToolNodeType>).data.tool_configurations
+      if (toolConfigurations && Object.keys(toolConfigurations).length > 0) {
+        const newValues = { ...toolConfigurations }
+        Object.keys(toolConfigurations).forEach((key) => {
+          if (typeof toolConfigurations[key] !== 'object' || toolConfigurations[key] === null) {
+            newValues[key] = {
+              type: 'constant',
+              value: toolConfigurations[key],
+            }
+          }
+        });
+        (node as Node<ToolNodeType>).data.tool_configurations = newValues
+      }
+    }
+
    return node
  })
 }