refactor(web): MCP tool availability to context-based version gating (#30955)

web/app/components/app/configuration/config/agent/agent-tools/index.tsx

@@ -183,7 +183,6 @@ const AgentTools: FC = () => {
                   onSelect={handleSelectTool}
                   onSelectMultiple={handleSelectMultipleTool}
                   selectedTools={tools as unknown as ToolValue[]}
-                  canChooseMCPTool
                 />
               </>
             )}

web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx

@@ -55,7 +55,6 @@ type FormProps<
   nodeId?: string
   nodeOutputVars?: NodeOutPutVar[]
   availableNodes?: Node[]
-  canChooseMCPTool?: boolean
 }
 
 function Form<
@@ -81,7 +80,6 @@ function Form<
   nodeId,
   nodeOutputVars,
   availableNodes,
-  canChooseMCPTool,
 }: FormProps<CustomFormSchema>) {
   const language = useLanguage()
   const [changeKey, setChangeKey] = useState('')
@@ -407,7 +405,6 @@ function Form<
             value={value[variable] || []}
             onChange={item => handleFormChange(variable, item as any)}
             supportCollapse
-            canChooseMCPTool={canChooseMCPTool}
           />
           {fieldMoreInfo?.(formSchema)}
           {validating && changeKey === variable && <ValidatingTip />}

web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.spec.tsx

@@ -7,6 +7,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 // ==================== Imports (after mocks) ====================
 
+import { MCPToolAvailabilityProvider } from '@/app/components/workflow/nodes/_base/components/mcp-tool-availability'
 import MultipleToolSelector from './index'
 
 // ==================== Mock Setup ====================
@@ -190,10 +191,11 @@ type RenderOptions = {
   nodeOutputVars?: NodeOutPutVar[]
   availableNodes?: Node[]
   nodeId?: string
-  canChooseMCPTool?: boolean
+  versionSupported?: boolean
 }
 
 const renderComponent = (options: RenderOptions = {}) => {
+  const { versionSupported, ...overrides } = options
   const defaultProps = {
     disabled: false,
     value: [],
@@ -206,16 +208,17 @@ const renderComponent = (options: RenderOptions = {}) => {
     nodeOutputVars: [createNodeOutputVar()],
     availableNodes: [createNode()],
     nodeId: 'test-node-id',
-    canChooseMCPTool: false,
   }
 
-  const props = { ...defaultProps, ...options }
+  const props = { ...defaultProps, ...overrides }
   const queryClient = createQueryClient()
 
   return {
     ...render(
       <QueryClientProvider client={queryClient}>
-        <MultipleToolSelector {...props} />
+        <MCPToolAvailabilityProvider versionSupported={versionSupported}>
+          <MultipleToolSelector {...props} />
+        </MCPToolAvailabilityProvider>
       </QueryClientProvider>,
     ),
     props,
@@ -410,7 +413,7 @@ describe('MultipleToolSelector', () => {
       expect(screen.getByText('2/3')).toBeInTheDocument()
     })
 
-    it('should track enabled count with MCP tools when canChooseMCPTool is true', () => {
+    it('should track enabled count with MCP tools when version is supported', () => {
       // Arrange
       const mcpTools = [createMCPTool({ id: 'mcp-provider' })]
       mockMCPToolsData.mockReturnValue(mcpTools)
@@ -421,13 +424,13 @@ describe('MultipleToolSelector', () => {
       ]
 
       // Act
-      renderComponent({ value: tools, canChooseMCPTool: true })
+      renderComponent({ value: tools, versionSupported: true })
 
       // Assert
       expect(screen.getByText('2/2')).toBeInTheDocument()
     })
 
-    it('should not count MCP tools when canChooseMCPTool is false', () => {
+    it('should not count MCP tools when version is unsupported', () => {
       // Arrange
       const mcpTools = [createMCPTool({ id: 'mcp-provider' })]
       mockMCPToolsData.mockReturnValue(mcpTools)
@@ -438,7 +441,7 @@ describe('MultipleToolSelector', () => {
       ]
 
       // Act
-      renderComponent({ value: tools, canChooseMCPTool: false })
+      renderComponent({ value: tools, versionSupported: false })
 
       // Assert
       expect(screen.getByText('1/2')).toBeInTheDocument()
@@ -721,14 +724,6 @@ describe('MultipleToolSelector', () => {
       expect(screen.getByTestId('tool-selector-add')).toBeInTheDocument()
     })
 
-    it('should pass canChooseMCPTool prop correctly', () => {
-      // Arrange & Act
-      renderComponent({ canChooseMCPTool: true })
-
-      // Assert
-      expect(screen.getByTestId('tool-selector-add')).toBeInTheDocument()
-    })
-
     it('should render with supportEnableSwitch for edit selectors', () => {
       // Arrange
       const tools = [createToolValue()]
@@ -771,13 +766,13 @@ describe('MultipleToolSelector', () => {
       ]
 
       // Act
-      renderComponent({ value: tools, canChooseMCPTool: true })
+      renderComponent({ value: tools, versionSupported: true })
 
       // Assert
       expect(screen.getByText('2/2')).toBeInTheDocument()
     })
 
-    it('should exclude MCP tools from enabled count when canChooseMCPTool is false', () => {
+    it('should exclude MCP tools from enabled count when strategy version is unsupported', () => {
       // Arrange
       const mcpTools = [createMCPTool({ id: 'mcp-provider' })]
       mockMCPToolsData.mockReturnValue(mcpTools)
@@ -788,7 +783,7 @@ describe('MultipleToolSelector', () => {
       ]
 
       // Act
-      renderComponent({ value: tools, canChooseMCPTool: false })
+      renderComponent({ value: tools, versionSupported: false })
 
       // Assert - Only regular tool should be counted
       expect(screen.getByText('1/2')).toBeInTheDocument()

web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx

@@ -12,6 +12,7 @@ import Divider from '@/app/components/base/divider'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
 import Tooltip from '@/app/components/base/tooltip'
 import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector'
+import { useMCPToolAvailability } from '@/app/components/workflow/nodes/_base/components/mcp-tool-availability'
 import { useAllMCPTools } from '@/service/use-tools'
 import { cn } from '@/utils/classnames'
 
@@ -27,7 +28,6 @@ type Props = {
   nodeOutputVars: NodeOutPutVar[]
   availableNodes: Node[]
   nodeId?: string
-  canChooseMCPTool?: boolean
 }
 
 const MultipleToolSelector = ({
@@ -42,14 +42,14 @@ const MultipleToolSelector = ({
   nodeOutputVars,
   availableNodes,
   nodeId,
-  canChooseMCPTool,
 }: Props) => {
   const { t } = useTranslation()
+  const { allowed: isMCPToolAllowed } = useMCPToolAvailability()
   const { data: mcpTools } = useAllMCPTools()
   const enabledCount = value.filter((item) => {
     const isMCPTool = mcpTools?.find(tool => tool.id === item.provider_name)
     if (isMCPTool)
-      return item.enabled && canChooseMCPTool
+      return item.enabled && isMCPToolAllowed
     return item.enabled
   }).length
   // collapse control
@@ -167,7 +167,6 @@ const MultipleToolSelector = ({
                 onSelectMultiple={handleAddMultiple}
                 onDelete={() => handleDelete(index)}
                 supportEnableSwitch
-                canChooseMCPTool={canChooseMCPTool}
                 isEdit
               />
             </div>
@@ -190,7 +189,6 @@ const MultipleToolSelector = ({
         panelShowState={panelShowState}
         onPanelShowStateChange={setPanelShowState}
         isEdit={false}
-        canChooseMCPTool={canChooseMCPTool}
         onSelectMultiple={handleAddMultiple}
       />
     </>

web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx

@@ -64,7 +64,6 @@ type Props = {
   nodeOutputVars: NodeOutPutVar[]
   availableNodes: Node[]
   nodeId?: string
-  canChooseMCPTool?: boolean
 }
 const ToolSelector: FC<Props> = ({
   value,
@@ -86,7 +85,6 @@ const ToolSelector: FC<Props> = ({
   nodeOutputVars,
   availableNodes,
   nodeId = '',
-  canChooseMCPTool,
 }) => {
   const { t } = useTranslation()
   const [isShow, onShowChange] = useState(false)
@@ -267,7 +265,6 @@ const ToolSelector: FC<Props> = ({
                   </p>
                 </div>
               )}
-              canChooseMCPTool={canChooseMCPTool}
             />
           )}
         </PortalToFollowElemTrigger>
@@ -300,7 +297,6 @@ const ToolSelector: FC<Props> = ({
                     onSelectMultiple={handleSelectMultipleTool}
                     scope={scope}
                     selectedTools={selectedTools}
-                    canChooseMCPTool={canChooseMCPTool}
                   />
                 </div>
                 <div className="flex flex-col gap-1">

web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx

@@ -16,6 +16,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import { ToolTipContent } from '@/app/components/base/tooltip/content'
 import Indicator from '@/app/components/header/indicator'
 import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/components/install-plugin-button'
+import { useMCPToolAvailability } from '@/app/components/workflow/nodes/_base/components/mcp-tool-availability'
 import McpToolNotSupportTooltip from '@/app/components/workflow/nodes/_base/components/mcp-tool-not-support-tooltip'
 import { SwitchPluginVersion } from '@/app/components/workflow/nodes/_base/components/switch-plugin-version'
 import { cn } from '@/utils/classnames'
@@ -39,7 +40,6 @@ type Props = {
   versionMismatch?: boolean
   open: boolean
   authRemoved?: boolean
-  canChooseMCPTool?: boolean
 }
 
 const ToolItem = ({
@@ -61,13 +61,13 @@ const ToolItem = ({
   errorTip,
   versionMismatch,
   authRemoved,
-  canChooseMCPTool,
 }: Props) => {
   const { t } = useTranslation()
+  const { allowed: isMCPToolAllowed } = useMCPToolAvailability()
   const providerNameText = isMCPTool ? providerShowName : providerName?.split('/').pop()
   const isTransparent = uninstalled || versionMismatch || isError
   const [isDeleting, setIsDeleting] = useState(false)
-  const isShowCanNotChooseMCPTip = isMCPTool && !canChooseMCPTool
+  const isShowCanNotChooseMCPTip = isMCPTool && !isMCPToolAllowed
 
   return (
     <div className={cn(
@@ -125,9 +125,7 @@ const ToolItem = ({
           />
         </div>
       )}
-      {isShowCanNotChooseMCPTip && (
+      {isShowCanNotChooseMCPTip && <McpToolNotSupportTooltip />}
-        <McpToolNotSupportTooltip />
-      )}
       {!isError && !uninstalled && !versionMismatch && noAuth && (
         <Button variant="secondary" size="small">
           {t('notAuthorized', { ns: 'tools' })}

web/app/components/workflow/block-selector/all-tools.tsx

@@ -47,7 +47,6 @@ type AllToolsProps = {
   canNotSelectMultiple?: boolean
   onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
   selectedTools?: ToolValue[]
-  canChooseMCPTool?: boolean
   onTagsChange?: Dispatch<SetStateAction<string[]>>
   isInRAGPipeline?: boolean
   featuredPlugins?: Plugin[]
@@ -71,7 +70,6 @@ const AllTools = ({
   customTools,
   mcpTools = [],
   selectedTools,
-  canChooseMCPTool,
   onTagsChange,
   isInRAGPipeline = false,
   featuredPlugins = [],
@@ -249,7 +247,6 @@ const AllTools = ({
                   providerMap={providerMap}
                   onSelect={onSelect}
                   selectedTools={selectedTools}
-                  canChooseMCPTool={canChooseMCPTool}
                   isLoading={featuredLoading}
                   onInstallSuccess={async () => {
                     await onFeaturedInstallSuccess?.()
@@ -275,7 +272,6 @@ const AllTools = ({
                   viewType={isSupportGroupView ? activeView : ViewType.flat}
                   hasSearchText={hasSearchText}
                   selectedTools={selectedTools}
-                  canChooseMCPTool={canChooseMCPTool}
                 />
               </>
             )}

web/app/components/workflow/block-selector/featured-tools.tsx

@@ -30,7 +30,6 @@ type FeaturedToolsProps = {
   providerMap: Map<string, ToolWithProvider>
   onSelect: (type: BlockEnum, tool: ToolDefaultValue) => void
   selectedTools?: ToolValue[]
-  canChooseMCPTool?: boolean
   isLoading?: boolean
   onInstallSuccess?: () => void
 }
@@ -42,7 +41,6 @@ const FeaturedTools = ({
   providerMap,
   onSelect,
   selectedTools,
-  canChooseMCPTool,
   isLoading = false,
   onInstallSuccess,
 }: FeaturedToolsProps) => {
@@ -166,7 +164,6 @@ const FeaturedTools = ({
                   viewType={ViewType.flat}
                   hasSearchText={false}
                   selectedTools={selectedTools}
-                  canChooseMCPTool={canChooseMCPTool}
                 />
               )}
 

web/app/components/workflow/block-selector/tabs.tsx

@@ -223,7 +223,6 @@ const Tabs: FC<TabsProps> = ({
             customTools={customTools || []}
             workflowTools={workflowTools || []}
             mcpTools={mcpTools || []}
-            canChooseMCPTool
             onTagsChange={onTagsChange}
             isInRAGPipeline={inRAGPipeline}
             featuredPlugins={featuredPlugins}

web/app/components/workflow/block-selector/tool-picker.tsx

@@ -50,7 +50,6 @@ type Props = {
   supportAddCustomTool?: boolean
   scope?: string
   selectedTools?: ToolValue[]
-  canChooseMCPTool?: boolean
 }
 
 const ToolPicker: FC<Props> = ({
@@ -66,7 +65,6 @@ const ToolPicker: FC<Props> = ({
   scope = 'all',
   selectedTools,
   panelClassName,
-  canChooseMCPTool,
 }) => {
   const { t } = useTranslation()
   const [searchText, setSearchText] = useState('')
@@ -198,7 +196,6 @@ const ToolPicker: FC<Props> = ({
             workflowTools={workflowToolList || []}
             mcpTools={mcpTools || []}
             selectedTools={selectedTools}
-            canChooseMCPTool={canChooseMCPTool}
             onTagsChange={setTags}
             featuredPlugins={featuredPlugins}
             featuredLoading={isFeaturedLoading}

web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx

@@ -18,7 +18,6 @@ type Props = {
   letters: string[]
   toolRefs: any
   selectedTools?: ToolValue[]
-  canChooseMCPTool?: boolean
 }
 
 const ToolViewFlatView: FC<Props> = ({
@@ -32,7 +31,6 @@ const ToolViewFlatView: FC<Props> = ({
   onSelectMultiple,
   toolRefs,
   selectedTools,
-  canChooseMCPTool,
 }) => {
   const firstLetterToolIds = useMemo(() => {
     const res: Record<string, string> = {}
@@ -63,7 +61,6 @@ const ToolViewFlatView: FC<Props> = ({
               canNotSelectMultiple={canNotSelectMultiple}
               onSelectMultiple={onSelectMultiple}
               selectedTools={selectedTools}
-              canChooseMCPTool={canChooseMCPTool}
             />
           </div>
         ))}

web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx

@@ -14,7 +14,6 @@ type Props = {
   canNotSelectMultiple?: boolean
   onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
   selectedTools?: ToolValue[]
-  canChooseMCPTool?: boolean
 }
 
 const Item: FC<Props> = ({
@@ -25,7 +24,6 @@ const Item: FC<Props> = ({
   canNotSelectMultiple,
   onSelectMultiple,
   selectedTools,
-  canChooseMCPTool,
 }) => {
   return (
     <div>
@@ -43,7 +41,6 @@ const Item: FC<Props> = ({
             canNotSelectMultiple={canNotSelectMultiple}
             onSelectMultiple={onSelectMultiple}
             selectedTools={selectedTools}
-            canChooseMCPTool={canChooseMCPTool}
           />
         ))}
       </div>

web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx

@@ -15,7 +15,6 @@ type Props = {
   canNotSelectMultiple?: boolean
   onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
   selectedTools?: ToolValue[]
-  canChooseMCPTool?: boolean
 }
 
 const ToolListTreeView: FC<Props> = ({
@@ -25,7 +24,6 @@ const ToolListTreeView: FC<Props> = ({
   canNotSelectMultiple,
   onSelectMultiple,
   selectedTools,
-  canChooseMCPTool,
 }) => {
   const { t } = useTranslation()
   const getI18nGroupName = useCallback((name: string) => {
@@ -56,7 +54,6 @@ const ToolListTreeView: FC<Props> = ({
           canNotSelectMultiple={canNotSelectMultiple}
           onSelectMultiple={onSelectMultiple}
           selectedTools={selectedTools}
-          canChooseMCPTool={canChooseMCPTool}
         />
       ))}
     </div>

web/app/components/workflow/block-selector/tool/tool.tsx

@@ -9,6 +9,7 @@ import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Mcp } from '@/app/components/base/icons/src/vender/other'
+import { useMCPToolAvailability } from '@/app/components/workflow/nodes/_base/components/mcp-tool-availability'
 import { useGetLanguage } from '@/context/i18n'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
@@ -38,7 +39,6 @@ type Props = {
   canNotSelectMultiple?: boolean
   onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
   selectedTools?: ToolValue[]
-  canChooseMCPTool?: boolean
   isShowLetterIndex?: boolean
 }
 
@@ -51,9 +51,9 @@ const Tool: FC<Props> = ({
   canNotSelectMultiple,
   onSelectMultiple,
   selectedTools,
-  canChooseMCPTool,
 }) => {
   const { t } = useTranslation()
+  const { allowed: isMCPToolAllowed } = useMCPToolAvailability()
   const language = useGetLanguage()
   const isFlatView = viewType === ViewType.flat
   const notShowProvider = payload.type === CollectionType.workflow
@@ -63,7 +63,7 @@ const Tool: FC<Props> = ({
   const ref = useRef(null)
   const isHovering = useHover(ref)
   const isMCPTool = payload.type === CollectionType.mcp
-  const isShowCanNotChooseMCPTip = !canChooseMCPTool && isMCPTool
+  const isShowCanNotChooseMCPTip = !isMCPToolAllowed && isMCPTool
   const { theme } = useTheme()
   const normalizedIcon = useMemo<ToolWithProvider['icon']>(() => {
     return normalizeProviderIcon(payload.icon) ?? payload.icon

web/app/components/workflow/block-selector/tools.tsx

@@ -21,7 +21,6 @@ type ToolsProps = {
   className?: string
   indexBarClassName?: string
   selectedTools?: ToolValue[]
-  canChooseMCPTool?: boolean
 }
 const Tools = ({
   onSelect,
@@ -35,7 +34,6 @@ const Tools = ({
   className,
   indexBarClassName,
   selectedTools,
-  canChooseMCPTool,
 }: ToolsProps) => {
   // const tools: any = []
   const language = useGetLanguage()
@@ -109,7 +107,6 @@ const Tools = ({
                 canNotSelectMultiple={canNotSelectMultiple}
                 onSelectMultiple={onSelectMultiple}
                 selectedTools={selectedTools}
-                canChooseMCPTool={canChooseMCPTool}
                 indexBar={<IndexBar letters={letters} itemRefs={toolRefs} className={indexBarClassName} />}
               />
             )
@@ -121,7 +118,6 @@ const Tools = ({
                 canNotSelectMultiple={canNotSelectMultiple}
                 onSelectMultiple={onSelectMultiple}
                 selectedTools={selectedTools}
-                canChooseMCPTool={canChooseMCPTool}
               />
             )
       )}

web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx

@@ -92,13 +92,12 @@ 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 { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
 
-  const { value, onChange, canChooseMCPTool } = props
+  const { value, onChange } = props
   const [open, setOpen] = useState(false)
   const [viewType, setViewType] = useState<ViewType>(ViewType.flat)
   const [query, setQuery] = useState('')
@@ -242,7 +241,6 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
               indexBarClassName="top-0 xl:top-36"
               hasSearchText={false}
               canNotSelectMultiple
-              canChooseMCPTool={canChooseMCPTool}
               isAgent
             />
             {enable_marketplace && (

web/app/components/workflow/nodes/_base/components/agent-strategy.tsx

@@ -43,7 +43,6 @@ export type AgentStrategyProps = {
   nodeOutputVars?: NodeOutPutVar[]
   availableNodes?: Node[]
   nodeId?: string
-  canChooseMCPTool: boolean
 }
 
 type CustomSchema<Type, Field = {}> = Omit<CredentialFormSchema, 'type'> & { type: Type } & Field
@@ -54,7 +53,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, canChooseMCPTool } = props
+  const { strategy, onStrategyChange, formSchema, formValue, onFormValueChange, nodeOutputVars, availableNodes, nodeId } = props
   const { t } = useTranslation()
   const docLink = useDocLink()
   const defaultModel = useDefaultModel(ModelTypeEnum.textGeneration)
@@ -189,7 +188,6 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
               value={value}
               onSelect={item => onChange(item)}
               onDelete={() => onChange(null)}
-              canChooseMCPTool={canChooseMCPTool}
               onSelectMultiple={noop}
             />
           </Field>
@@ -212,7 +210,6 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
             onChange={onChange}
             supportCollapse
             required={schema.required}
-            canChooseMCPTool={canChooseMCPTool}
           />
         )
       }
@@ -220,7 +217,7 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
   }
   return (
     <div className="space-y-2">
-      <AgentStrategySelector value={strategy} onChange={onStrategyChange} canChooseMCPTool={canChooseMCPTool} />
+      <AgentStrategySelector value={strategy} onChange={onStrategyChange} />
       {
         strategy
           ? (
@@ -241,7 +238,6 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
                   nodeId={nodeId}
                   nodeOutputVars={nodeOutputVars || []}
                   availableNodes={availableNodes || []}
-                  canChooseMCPTool={canChooseMCPTool}
                 />
               </div>
             )

web/app/components/workflow/nodes/_base/components/mcp-tool-availability.tsx

@@ -0,0 +1,38 @@
+'use client'
+import type { ReactNode } from 'react'
+import { createContext, useContext } from 'react'
+
+type MCPToolAvailabilityContextValue = {
+  versionSupported?: boolean
+}
+
+const MCPToolAvailabilityContext = createContext<MCPToolAvailabilityContextValue | undefined>(undefined)
+
+export type MCPToolAvailability = {
+  allowed: boolean
+  versionSupported?: boolean
+}
+
+export const MCPToolAvailabilityProvider = ({
+  versionSupported,
+  children,
+}: {
+  versionSupported?: boolean
+  children: ReactNode
+}) => (
+  <MCPToolAvailabilityContext.Provider value={{ versionSupported }}>
+    {children}
+  </MCPToolAvailabilityContext.Provider>
+)
+
+export const useMCPToolAvailability = (): MCPToolAvailability => {
+  const context = useContext(MCPToolAvailabilityContext)
+  if (context === undefined)
+    return { allowed: true }
+
+  const { versionSupported } = context
+  return {
+    allowed: versionSupported === true,
+    versionSupported,
+  }
+}

web/app/components/workflow/nodes/agent/panel.tsx

@@ -6,9 +6,11 @@ import type { StrategyParamItem } from '@/app/components/plugins/types'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { toType } from '@/app/components/tools/utils/to-form-schema'
+import { isSupportMCP } from '@/utils/plugin-version-feature'
 import { useStore } from '../../store'
 import { AgentStrategy } from '../_base/components/agent-strategy'
 import Field from '../_base/components/field'
+import { MCPToolAvailabilityProvider } from '../_base/components/mcp-tool-availability'
 import MemoryConfig from '../_base/components/memory-config'
 import OutputVars, { VarItem } from '../_base/components/output-vars'
 import Split from '../_base/components/split'
@@ -40,9 +42,9 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
     readOnly,
     outputSchema,
     handleMemoryChange,
-    canChooseMCPTool,
   } = useConfig(props.id, props.data)
   const { t } = useTranslation()
+  const isMCPVersionSupported = isSupportMCP(inputs.meta?.version)
 
   const resetEditor = useStore(s => s.setControlPromptEditorRerenderKey)
   return (
@@ -53,37 +55,38 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
         className="px-4 py-2"
         tooltip={t('nodes.agent.strategy.tooltip', { ns: 'workflow' })}
       >
-        <AgentStrategy
+        <MCPToolAvailabilityProvider versionSupported={isMCPVersionSupported}>
-          strategy={inputs.agent_strategy_name
+          <AgentStrategy
-            ? {
+            strategy={inputs.agent_strategy_name
-                agent_strategy_provider_name: inputs.agent_strategy_provider_name!,
+              ? {
-                agent_strategy_name: inputs.agent_strategy_name!,
+                  agent_strategy_provider_name: inputs.agent_strategy_provider_name!,
-                agent_strategy_label: inputs.agent_strategy_label!,
+                  agent_strategy_name: inputs.agent_strategy_name!,
-                agent_output_schema: inputs.output_schema,
+                  agent_strategy_label: inputs.agent_strategy_label!,
-                plugin_unique_identifier: inputs.plugin_unique_identifier!,
+                  agent_output_schema: inputs.output_schema,
-                meta: inputs.meta,
+                  plugin_unique_identifier: inputs.plugin_unique_identifier!,
-              }
+                  meta: inputs.meta,
-            : undefined}
+                }
-          onStrategyChange={(strategy) => {
+              : undefined}
-            setInputs({
+            onStrategyChange={(strategy) => {
-              ...inputs,
+              setInputs({
-              agent_strategy_provider_name: strategy?.agent_strategy_provider_name,
+                ...inputs,
-              agent_strategy_name: strategy?.agent_strategy_name,
+                agent_strategy_provider_name: strategy?.agent_strategy_provider_name,
-              agent_strategy_label: strategy?.agent_strategy_label,
+                agent_strategy_name: strategy?.agent_strategy_name,
-              output_schema: strategy!.agent_output_schema,
+                agent_strategy_label: strategy?.agent_strategy_label,
-              plugin_unique_identifier: strategy!.plugin_unique_identifier,
+                output_schema: strategy!.agent_output_schema,
-              meta: strategy?.meta,
+                plugin_unique_identifier: strategy!.plugin_unique_identifier,
-            })
+                meta: strategy?.meta,
-            resetEditor(Date.now())
+              })
-          }}
+              resetEditor(Date.now())
-          formSchema={currentStrategy?.parameters?.map(strategyParamToCredientialForm) || []}
+            }}
-          formValue={formData}
+            formSchema={currentStrategy?.parameters?.map(strategyParamToCredientialForm) || []}
-          onFormValueChange={onFormChange}
+            formValue={formData}
-          nodeOutputVars={availableVars}
+            onFormValueChange={onFormChange}
-          availableNodes={availableNodesWithParent}
+            nodeOutputVars={availableVars}
-          nodeId={props.id}
+            availableNodes={availableNodesWithParent}
-          canChooseMCPTool={canChooseMCPTool}
+            nodeId={props.id}
-        />
+          />
+        </MCPToolAvailabilityProvider>
       </Field>
       <div className="px-4 py-2">
         {isChatMode && currentStrategy?.features?.includes(AgentFeature.HISTORY_MESSAGES) && (

web/app/components/workflow/nodes/agent/use-config.ts

@@ -11,7 +11,6 @@ import {
 } from '@/app/components/workflow/hooks'
 import { useCheckInstalled, useFetchPluginsInMarketPlaceByIds } from '@/service/use-plugins'
 import { useStrategyProviderDetail } from '@/service/use-strategy'
-import { isSupportMCP } from '@/utils/plugin-version-feature'
 import { VarType as VarKindType } from '../../types'
 import useAvailableVarList from '../_base/hooks/use-available-var-list'
 import useNodeCrud from '../_base/hooks/use-node-crud'
@@ -222,7 +221,6 @@ const useConfig = (id: string, payload: AgentNodeType) => {
     outputSchema,
     handleMemoryChange,
     isChatMode,
-    canChooseMCPTool: isSupportMCP(inputs.meta?.version),
   }
 }