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>

web/app/components/plugins/marketplace/search-box/index.tsx

@@ -1,8 +1,9 @@
 'use client'
-import { RiCloseLine } from '@remixicon/react'
+import { RiCloseLine, RiSearchLine } from '@remixicon/react'
 import TagsFilter from './tags-filter'
 import ActionButton from '@/app/components/base/action-button'
 import cn from '@/utils/classnames'
+import { RiAddLine } from '@remixicon/react'
 
 type SearchBoxProps = {
   search: string
@@ -13,6 +14,9 @@ type SearchBoxProps = {
   size?: 'small' | 'large'
   placeholder?: string
   locale?: string
+  supportAddCustomTool?: boolean
+  onShowAddCustomCollectionModal?: () => void
+  onAddedCustomTool?: () => void
 }
 const SearchBox = ({
   search,
@@ -23,46 +27,62 @@ const SearchBox = ({
   size = 'small',
   placeholder = '',
   locale,
+  supportAddCustomTool,
+  onShowAddCustomCollectionModal,
 }: SearchBoxProps) => {
   return (
     <div
-      className={cn(
-        'z-[11] flex items-center',
-        size === 'large' && 'rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur p-1.5 shadow-md',
-        size === 'small' && 'rounded-lg bg-components-input-bg-normal p-0.5',
-        inputClassName,
-      )}
+      className='z-[11] flex items-center'
     >
-      <TagsFilter
-        tags={tags}
-        onTagsChange={onTagsChange}
-        size={size}
-        locale={locale}
-      />
-      <div className='mx-1 h-3.5 w-[1px] bg-divider-regular'></div>
-      <div className='relative flex grow items-center p-1 pl-2'>
-        <div className='mr-2 flex w-full items-center'>
-          <input
-            className={cn(
-              'body-md-medium block grow appearance-none bg-transparent text-text-secondary outline-none',
-            )}
-            value={search}
-            onChange={(e) => {
-              onSearchChange(e.target.value)
-            }}
-            placeholder={placeholder}
-          />
-          {
-            search && (
-              <div className='absolute right-2 top-1/2 -translate-y-1/2'>
-                <ActionButton onClick={() => onSearchChange('')}>
-                  <RiCloseLine className='h-4 w-4' />
-                </ActionButton>
-              </div>
-            )
-          }
+      <div className={
+        cn('flex items-center',
+          size === 'large' && 'rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur p-1.5 shadow-md',
+          size === 'small' && 'rounded-lg bg-components-input-bg-normal p-0.5',
+          inputClassName,
+        )
+      }>
+        <div className='relative flex grow items-center p-1 pl-2'>
+          <div className='mr-2 flex w-full items-center'>
+            <RiSearchLine className='mr-1.5 size-4 text-text-placeholder' />
+            <input
+              className={cn(
+                'body-md-medium block grow appearance-none bg-transparent text-text-secondary outline-none',
+              )}
+              value={search}
+              onChange={(e) => {
+                onSearchChange(e.target.value)
+              }}
+              placeholder={placeholder}
+            />
+            {
+              search && (
+                <div className='absolute right-2 top-1/2 -translate-y-1/2'>
+                  <ActionButton onClick={() => onSearchChange('')}>
+                    <RiCloseLine className='h-4 w-4' />
+                  </ActionButton>
+                </div>
+              )
+            }
+          </div>
         </div>
+        <div className='mx-1 h-3.5 w-[1px] bg-divider-regular'></div>
+        <TagsFilter
+          tags={tags}
+          onTagsChange={onTagsChange}
+          size={size}
+          locale={locale}
+        />
       </div>
+      {supportAddCustomTool && (
+        <div className='flex shrink-0 items-center'>
+          <ActionButton
+            className='ml-2 rounded-full 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>
+      )}
     </div>
   )
 }

web/app/components/plugins/marketplace/search-box/tags-filter.tsx

@@ -2,9 +2,7 @@
 
 import { useState } from 'react'
 import {
-  RiArrowDownSLine,
-  RiCloseCircleFill,
-  RiFilter3Line,
+  RiPriceTag3Line,
 } from '@remixicon/react'
 import {
   PortalToFollowElem,
@@ -57,47 +55,15 @@ const TagsFilter = ({
         onClick={() => setOpen(v => !v)}
       >
         <div className={cn(
-          'flex cursor-pointer items-center rounded-lg text-text-tertiary hover:bg-state-base-hover',
-          size === 'large' && 'h-8 px-2 py-1',
-          size === 'small' && 'h-7 py-0.5 pl-1 pr-1.5 ',
-          selectedTagsLength && 'text-text-secondary',
-          open && 'bg-state-base-hover',
+          'ml-0.5 mr-1.5 flex  items-center text-text-tertiary ',
+          size === 'large' && 'h-8 py-1',
+          size === 'small' && 'h-7 py-0.5 ',
+          // selectedTagsLength && 'text-text-secondary',
+          // open && 'bg-state-base-hover',
         )}>
-          <div className='p-0.5'>
-            <RiFilter3Line className='h-4 w-4' />
+          <div className='cursor-pointer rounded-md p-0.5 hover:bg-state-base-hover'>
+            <RiPriceTag3Line className='h-4 w-4 text-text-tertiary' />
           </div>
-          <div className={cn(
-            'system-sm-medium flex items-center p-1',
-            size === 'large' && 'p-1',
-            size === 'small' && 'px-0.5 py-1',
-          )}>
-            {
-              !selectedTagsLength && t('pluginTags.allTags')
-            }
-            {
-              !!selectedTagsLength && tags.map(tag => tagsMap[tag].label).slice(0, 2).join(',')
-            }
-            {
-              selectedTagsLength > 2 && (
-                <div className='system-xs-medium ml-1 text-text-tertiary'>
-                  +{selectedTagsLength - 2}
-                </div>
-              )
-            }
-          </div>
-          {
-            !!selectedTagsLength && (
-              <RiCloseCircleFill
-                className='h-4 w-4 cursor-pointer text-text-quaternary'
-                onClick={() => onTagsChange([])}
-              />
-            )
-          }
-          {
-            !selectedTagsLength && (
-              <RiArrowDownSLine className='h-4 w-4' />
-            )
-          }
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[1000]'>

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

@@ -13,6 +13,7 @@ import type { Node } from 'reactflow'
 import type { NodeOutPutVar } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
+import { useAllMCPTools } from '@/service/use-tools'
 
 type Props = {
   disabled?: boolean
@@ -26,6 +27,7 @@ type Props = {
   nodeOutputVars: NodeOutPutVar[],
   availableNodes: Node[],
   nodeId?: string
+  canChooseMCPTool?: boolean
 }
 
 const MultipleToolSelector = ({
@@ -40,9 +42,16 @@ const MultipleToolSelector = ({
   nodeOutputVars,
   availableNodes,
   nodeId,
+  canChooseMCPTool,
 }: Props) => {
   const { t } = useTranslation()
-  const enabledCount = value.filter(item => item.enabled).length
+    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
+  }).length
   // collapse control
   const [collapse, setCollapse] = React.useState(false)
   const handleCollapse = () => {
@@ -66,6 +75,19 @@ const MultipleToolSelector = ({
     setOpen(false)
   }
 
+  const handleAddMultiple = (val: ToolValue[]) => {
+    const newValue = [...value, ...val]
+    // deduplication
+    const deduplication = newValue.reduce((acc, cur) => {
+      if (!acc.find(item => item.provider_name === cur.provider_name && item.tool_name === cur.tool_name))
+        acc.push(cur)
+      return acc
+    }, [] as ToolValue[])
+    // update value
+    onChange(deduplication)
+    setOpen(false)
+  }
+
   // delete tool
   const handleDelete = (index: number) => {
     const newValue = [...value]
@@ -140,8 +162,10 @@ const MultipleToolSelector = ({
                 value={item}
                 selectedTools={value}
                 onSelect={item => handleConfigure(item, index)}
+                onSelectMultiple={handleAddMultiple}
                 onDelete={() => handleDelete(index)}
                 supportEnableSwitch
+                canChooseMCPTool={canChooseMCPTool}
                 isEdit
               />
             </div>
@@ -164,6 +188,8 @@ const MultipleToolSelector = ({
         panelShowState={panelShowState}
         onPanelShowStateChange={setPanelShowState}
         isEdit={false}
+        canChooseMCPTool={canChooseMCPTool}
+        onSelectMultiple={handleAddMultiple}
       />
     </>
   )

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

@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
 import {
   RiArrowLeftLine,
-  RiArrowRightUpLine,
 } from '@remixicon/react'
 import {
   PortalToFollowElem,
@@ -15,6 +14,7 @@ import {
 import ToolTrigger from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger'
 import ToolItem from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-item'
 import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
+import ToolForm from '@/app/components/workflow/nodes/tool/components/tool-form'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
 import ToolCredentialForm from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form'
@@ -23,13 +23,13 @@ import Textarea from '@/app/components/base/textarea'
 import Divider from '@/app/components/base/divider'
 import TabSlider from '@/app/components/base/tab-slider-plain'
 import ReasoningConfigForm from '@/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form'
-import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import { generateFormValue, getPlainValue, getStructureValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
 
 import { useAppContext } from '@/context/app-context'
 import {
   useAllBuiltInTools,
   useAllCustomTools,
+  useAllMCPTools,
   useAllWorkflowTools,
   useInvalidateAllBuiltInTools,
   useUpdateProviderCredentials,
@@ -54,15 +54,9 @@ type Props = {
   scope?: string
   value?: ToolValue
   selectedTools?: ToolValue[]
+  onSelect: (tool: ToolValue) => void
+  onSelectMultiple: (tool: ToolValue[]) => void
   isEdit?: boolean
-  onSelect: (tool: {
-    provider_name: string
-    tool_name: string
-    tool_label: string
-    settings?: Record<string, any>
-    parameters?: Record<string, any>
-    extra?: Record<string, any>
-  }) => void
   onDelete?: () => void
   supportEnableSwitch?: boolean
   supportAddCustomTool?: boolean
@@ -74,6 +68,7 @@ type Props = {
   nodeOutputVars: NodeOutPutVar[],
   availableNodes: Node[],
   nodeId?: string,
+  canChooseMCPTool?: boolean,
 }
 const ToolSelector: FC<Props> = ({
   value,
@@ -83,6 +78,7 @@ const ToolSelector: FC<Props> = ({
   placement = 'left',
   offset = 4,
   onSelect,
+  onSelectMultiple,
   onDelete,
   scope,
   supportEnableSwitch,
@@ -94,6 +90,7 @@ const ToolSelector: FC<Props> = ({
   nodeOutputVars,
   availableNodes,
   nodeId = '',
+  canChooseMCPTool,
 }) => {
   const { t } = useTranslation()
   const [isShow, onShowChange] = useState(false)
@@ -105,6 +102,7 @@ const ToolSelector: FC<Props> = ({
   const { data: buildInTools } = useAllBuiltInTools()
   const { data: customTools } = useAllCustomTools()
   const { data: workflowTools } = useAllWorkflowTools()
+  const { data: mcpTools } = useAllMCPTools()
   const invalidateAllBuiltinTools = useInvalidateAllBuiltInTools()
   const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
 
@@ -112,18 +110,19 @@ const ToolSelector: FC<Props> = ({
   const { inMarketPlace, manifest } = usePluginInstalledCheck(value?.provider_name)
 
   const currentProvider = useMemo(() => {
-    const mergedTools = [...(buildInTools || []), ...(customTools || []), ...(workflowTools || [])]
+    const mergedTools = [...(buildInTools || []), ...(customTools || []), ...(workflowTools || []), ...(mcpTools || [])]
     return mergedTools.find((toolWithProvider) => {
       return toolWithProvider.id === value?.provider_name
     })
-  }, [value, buildInTools, customTools, workflowTools])
+  }, [value, buildInTools, customTools, workflowTools, mcpTools])
 
   const [isShowChooseTool, setIsShowChooseTool] = useState(false)
-  const handleSelectTool = (tool: ToolDefaultValue) => {
+  const getToolValue = (tool: ToolDefaultValue) => {
     const settingValues = generateFormValue(tool.params, toolParametersToFormSchemas(tool.paramSchemas.filter(param => param.form !== 'llm') as any))
     const paramValues = generateFormValue(tool.params, toolParametersToFormSchemas(tool.paramSchemas.filter(param => param.form === 'llm') as any), true)
-    const toolValue = {
+    return {
       provider_name: tool.provider_id,
+      provider_show_name: tool.provider_name,
       type: tool.provider_type,
       tool_name: tool.tool_name,
       tool_label: tool.tool_label,
@@ -136,9 +135,16 @@ const ToolSelector: FC<Props> = ({
       },
       schemas: tool.paramSchemas,
     }
+  }
+  const handleSelectTool = (tool: ToolDefaultValue) => {
+    const toolValue = getToolValue(tool)
     onSelect(toolValue)
     // setIsShowChooseTool(false)
   }
+  const handleSelectMultipleTool = (tool: ToolDefaultValue[]) => {
+    const toolValues = tool.map(item => getToolValue(item))
+    onSelectMultiple(toolValues)
+  }
 
   const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     onSelect({
@@ -169,7 +175,6 @@ const ToolSelector: FC<Props> = ({
 
   const handleSettingsFormChange = (v: Record<string, any>) => {
     const newValue = getStructureValue(v)
-
     const toolValue = {
       ...value,
       settings: newValue,
@@ -250,7 +255,9 @@ const ToolSelector: FC<Props> = ({
             <ToolItem
               open={isShow}
               icon={currentProvider?.icon || manifestIcon}
+              isMCPTool={currentProvider?.type === CollectionType.mcp}
               providerName={value.provider_name}
+              providerShowName={value.provider_show_name}
               toolLabel={value.tool_label || value.tool_name}
               showSwitch={supportEnableSwitch}
               switchValue={value.enabled}
@@ -272,6 +279,7 @@ const ToolSelector: FC<Props> = ({
                   </p>
                 </div>
               }
+              canChooseMCPTool={canChooseMCPTool}
             />
           )}
         </PortalToFollowElemTrigger>
@@ -285,7 +293,6 @@ const ToolSelector: FC<Props> = ({
                   <div className='flex flex-col gap-1'>
                     <div className='system-sm-semibold flex h-6 items-center text-text-secondary'>{t('plugin.detailPanel.toolSelector.toolLabel')}</div>
                     <ToolPicker
-                      panelClassName='w-[328px]'
                       placement='bottom'
                       offset={offset}
                       trigger={
@@ -300,8 +307,10 @@ const ToolSelector: FC<Props> = ({
                       disabled={false}
                       supportAddCustomTool
                       onSelect={handleSelectTool}
+                      onSelectMultiple={handleSelectMultipleTool}
                       scope={scope}
                       selectedTools={selectedTools}
+                      canChooseMCPTool={canChooseMCPTool}
                     />
                   </div>
                   <div className='flex flex-col gap-1'>
@@ -390,24 +399,13 @@ const ToolSelector: FC<Props> = ({
                     {/* user settings form */}
                     {(currType === 'settings' || userSettingsOnly) && (
                       <div className='px-4 py-2'>
-                        <Form
+                        <ToolForm
+                          inPanel
+                          readOnly={false}
+                          nodeId={nodeId}
+                          schema={settingsFormSchemas as any}
                           value={getPlainValue(value?.settings || {})}
                           onChange={handleSettingsFormChange}
-                          formSchemas={settingsFormSchemas as any}
-                          isEditMode={true}
-                          showOnVariableMap={{}}
-                          validating={false}
-                          inputClassName='bg-components-input-bg-normal hover:bg-components-input-bg-hover'
-                          fieldMoreInfo={item => item.url
-                            ? (<a
-                              href={item.url}
-                              target='_blank' rel='noopener noreferrer'
-                              className='inline-flex items-center text-xs text-text-accent'
-                            >
-                              {t('tools.howToGet')}
-                              <RiArrowRightUpLine className='ml-1 h-3 w-3' />
-                            </a>)
-                            : null}
                         />
                       </div>
                     )}

web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx

@@ -3,25 +3,34 @@ import { useTranslation } from 'react-i18next'
 import produce from 'immer'
 import {
   RiArrowRightUpLine,
+  RiBracesLine,
 } from '@remixicon/react'
 import Tooltip from '@/app/components/base/tooltip'
 import Switch from '@/app/components/base/switch'
-import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
+import MixedVariableTextInput from '@/app/components/workflow/nodes/tool/components/mixed-variable-text-input'
+import Input from '@/app/components/base/input'
+import FormInputTypeSwitch from '@/app/components/workflow/nodes/_base/components/form-input-type-switch'
+import FormInputBoolean from '@/app/components/workflow/nodes/_base/components/form-input-boolean'
+import { SimpleSelect } from '@/app/components/base/select'
+import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
 import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'
 import ModelParameterModal from '@/app/components/plugins/plugin-detail-panel/model-selector'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 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 type { Node } from 'reactflow'
 import type {
   NodeOutPutVar,
   ValueSelector,
-  Var,
 } from '@/app/components/workflow/types'
 import type { ToolVarInputs } from '@/app/components/workflow/nodes/tool/types'
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
 import { VarType } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
+import { useBoolean } from 'ahooks'
+import SchemaModal from './schema-modal'
+import type { SchemaRoot } from '@/app/components/workflow/nodes/llm/types'
 
 type Props = {
   value: Record<string, any>
@@ -42,73 +51,46 @@ const ReasoningConfigForm: React.FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const language = useLanguage()
-  const handleAutomatic = (key: string, val: any) => {
+  const getVarKindType = (type: FormTypeEnum) => {
+    if (type === FormTypeEnum.file || type === FormTypeEnum.files)
+      return VarKindType.variable
+    if (type === FormTypeEnum.select || type === FormTypeEnum.boolean || type === FormTypeEnum.textNumber || type === FormTypeEnum.array || type === FormTypeEnum.object)
+      return VarKindType.constant
+    if (type === FormTypeEnum.textInput || type === FormTypeEnum.secretInput)
+      return VarKindType.mixed
+  }
+
+  const handleAutomatic = (key: string, val: any, type: FormTypeEnum) => {
     onChange({
       ...value,
       [key]: {
-        value: val ? null : value[key]?.value,
+        value: val ? null : { type: getVarKindType(type), value: null },
         auto: val ? 1 : 0,
       },
     })
   }
-
-  const [inputsIsFocus, setInputsIsFocus] = useState<Record<string, boolean>>({})
-  const handleInputFocus = useCallback((variable: string) => {
-    return (value: boolean) => {
-      setInputsIsFocus((prev) => {
-        return {
-          ...prev,
-          [variable]: value,
-        }
-      })
-    }
-  }, [])
-  const handleNotMixedTypeChange = useCallback((variable: string) => {
-    return (varValue: ValueSelector | string, varKindType: VarKindType) => {
-      const newValue = produce(value, (draft: ToolVarInputs) => {
-        const target = draft[variable].value
-        if (target) {
-          target.type = varKindType
-          target.value = varValue
-        }
-        else {
-          draft[variable].value = {
-            type: varKindType,
-            value: varValue,
-          }
-        }
-      })
-      onChange(newValue)
-    }
-  }, [value, onChange])
-  const handleMixedTypeChange = useCallback((variable: string) => {
-    return (itemValue: string) => {
-      const newValue = produce(value, (draft: ToolVarInputs) => {
-        const target = draft[variable].value
-        if (target) {
-          target.value = itemValue
-        }
-        else {
-          draft[variable].value = {
-            type: VarKindType.mixed,
-            value: itemValue,
-          }
-        }
-      })
-      onChange(newValue)
-    }
-  }, [value, onChange])
-  const handleFileChange = useCallback((variable: string) => {
-    return (varValue: ValueSelector | string) => {
-      const newValue = produce(value, (draft: ToolVarInputs) => {
+  const handleTypeChange = useCallback((variable: string, defaultValue: any) => {
+    return (newType: VarKindType) => {
+      const res = produce(value, (draft: ToolVarInputs) => {
         draft[variable].value = {
-          type: VarKindType.variable,
-          value: varValue,
+          type: newType,
+          value: newType === VarKindType.variable ? '' : defaultValue,
         }
       })
-      onChange(newValue)
+      onChange(res)
     }
-  }, [value, onChange])
+  }, [onChange, value])
+  const handleValueChange = useCallback((variable: string, varType: FormTypeEnum) => {
+    return (newValue: any) => {
+      const res = produce(value, (draft: ToolVarInputs) => {
+        draft[variable].value = {
+          type: getVarKindType(varType),
+          value: newValue,
+        }
+      })
+      onChange(res)
+    }
+  }, [onChange, value])
   const handleAppChange = useCallback((variable: string) => {
     return (app: {
       app_id: string
@@ -132,9 +114,29 @@ const ReasoningConfigForm: React.FC<Props> = ({
       onChange(newValue)
     }
   }, [onChange, value])
+  const handleVariableSelectorChange = useCallback((variable: string) => {
+    return (newValue: ValueSelector | string) => {
+      const res = produce(value, (draft: ToolVarInputs) => {
+        draft[variable].value = {
+          type: VarKindType.variable,
+          value: newValue,
+        }
+      })
+      onChange(res)
+    }
+  }, [onChange, value])
 
-  const renderField = (schema: any) => {
+  const [isShowSchema, {
+    setTrue: showSchema,
+    setFalse: hideSchema,
+  }] = useBoolean(false)
+
+  const [schema, setSchema] = useState<SchemaRoot | null>(null)
+  const [schemaRootName, setSchemaRootName] = useState<string>('')
+
+  const renderField = (schema: any, showSchema: (schema: SchemaRoot, rootName: string) => void) => {
     const {
+      default: defaultValue,
       variable,
       label,
       required,
@@ -142,6 +144,9 @@ const ReasoningConfigForm: React.FC<Props> = ({
       type,
       scope,
       url,
+      input_schema,
+      placeholder,
+      options,
     } = schema
     const auto = value[variable]?.auto
     const tooltipContent = (tooltip && (
@@ -149,89 +154,150 @@ const ReasoningConfigForm: React.FC<Props> = ({
         popupContent={<div className='w-[200px]'>
           {tooltip[language] || tooltip.en_US}
         </div>}
-        triggerClassName='ml-1 w-4 h-4'
+        triggerClassName='ml-0.5 w-4 h-4'
         asChild={false} />
     ))
     const varInput = value[variable].value
+    const isString = type === FormTypeEnum.textInput || type === FormTypeEnum.secretInput
     const isNumber = type === FormTypeEnum.textNumber
-    const isSelect = type === FormTypeEnum.select
+    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
     const isAppSelector = type === FormTypeEnum.appSelector
     const isModelSelector = type === FormTypeEnum.modelSelector
-    // const isToolSelector = type === FormTypeEnum.toolSelector
-    const isString = !isNumber && !isSelect && !isFile && !isAppSelector && !isModelSelector
+    const showTypeSwitch = isNumber || isObject || isArray
+    const isConstant = varInput?.type === VarKindType.constant || !varInput?.type
+    const showVariableSelector = isFile || varInput?.type === VarKindType.variable
+    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 (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
+    }
+
     return (
-      <div key={variable} className='space-y-1'>
+      <div key={variable} className='space-y-0.5'>
         <div className='system-sm-semibold flex items-center justify-between py-2 text-text-secondary'>
-          <div className='flex items-center space-x-2'>
-            <span className={cn('code-sm-semibold text-text-secondary')}>{label[language] || label.en_US}</span>
+          <div className='flex items-center'>
+            <span className={cn('code-sm-semibold max-w-[140px] truncate text-text-secondary')} title={label[language] || label.en_US}>{label[language] || label.en_US}</span>
             {required && (
               <span className='ml-1 text-red-500'>*</span>
             )}
             {tooltipContent}
+            <span className='system-xs-regular mx-1 text-text-quaternary'>·</span>
+            <span className='system-xs-regular text-text-tertiary'>{targetVarType()}</span>
+            {isShowJSONEditor && (
+              <Tooltip
+                popupContent={<div className='system-xs-medium text-text-secondary'>
+                  {t('workflow.nodes.agent.clickToViewParameterSchema')}
+                </div>}
+                asChild={false}>
+                  <div
+                    className='ml-0.5 cursor-pointer rounded-[4px] p-px text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary'
+                    onClick={() => showSchema(input_schema as SchemaRoot, label[language] || label.en_US)}
+                  >
+                    <RiBracesLine className='size-3.5'/>
+                  </div>
+              </Tooltip>
+            )}
+
           </div>
-          <div className='flex cursor-pointer items-center gap-1 rounded-[6px] border border-divider-subtle bg-background-default-lighter px-2 py-1 hover:bg-state-base-hover' onClick={() => handleAutomatic(variable, !auto)}>
+          <div className='flex cursor-pointer items-center gap-1 rounded-[6px] border border-divider-subtle bg-background-default-lighter px-2 py-1 hover:bg-state-base-hover' onClick={() => handleAutomatic(variable, !auto, type)}>
             <span className='system-xs-medium text-text-secondary'>{t('plugin.detailPanel.toolSelector.auto')}</span>
             <Switch
               size='xs'
               defaultValue={!!auto}
-              onChange={val => handleAutomatic(variable, val)}
+              onChange={val => handleAutomatic(variable, val, type)}
             />
           </div>
         </div>
         {auto === 0 && (
-          <>
+          <div className={cn('gap-1', !(isShowJSONEditor && isConstant) && 'flex')}>
+            {showTypeSwitch && (
+              <FormInputTypeSwitch value={varInput?.type || VarKindType.constant} onChange={handleTypeChange(variable, defaultValue)}/>
+            )}
             {isString && (
-              <Input
-                className={cn(inputsIsFocus[variable] ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'rounded-lg border px-3 py-[6px]')}
+              <MixedVariableTextInput
                 value={varInput?.value as string || ''}
-                onChange={handleMixedTypeChange(variable)}
+                onChange={handleValueChange(variable, type)}
                 nodesOutputVars={nodeOutputVars}
                 availableNodes={availableNodes}
-                onFocusChange={handleInputFocus(variable)}
-                placeholder={t('workflow.nodes.http.insertVarPlaceholder')!}
-                placeholderClassName='!leading-[21px]'
               />
             )}
-            {/* {isString && (
-              <VarReferencePicker
-                zIndex={1001}
-                readonly={false}
-                isShowNodeName
-                nodeId={nodeId}
+            {isNumber && isConstant && (
+              <Input
+                className='h-8 grow'
+                type='number'
                 value={varInput?.value || ''}
-                onChange={handleNotMixedTypeChange(variable)}
-                defaultVarKindType={VarKindType.variable}
-                filterVar={(varPayload: Var) => varPayload.type === VarType.number || varPayload.type === VarType.secret || varPayload.type === VarType.string}
-              />
-            )} */}
-            {(isNumber || isSelect) && (
-              <VarReferencePicker
-                zIndex={1001}
-                readonly={false}
-                isShowNodeName
-                nodeId={nodeId}
-                value={varInput?.type === VarKindType.constant ? (varInput?.value ?? '') : (varInput?.value ?? [])}
-                onChange={handleNotMixedTypeChange(variable)}
-                defaultVarKindType={varInput?.type || (isNumber ? VarKindType.constant : VarKindType.variable)}
-                isSupportConstantValue
-                filterVar={isNumber ? (varPayload: Var) => varPayload.type === schema._type : undefined}
-                availableVars={isSelect ? nodeOutputVars : undefined}
-                schema={schema}
+                onChange={handleValueChange(variable, type)}
+                placeholder={placeholder?.[language] || placeholder?.en_US}
               />
             )}
-            {isFile && (
-              <VarReferencePicker
-                zIndex={1001}
-                readonly={false}
-                isShowNodeName
-                nodeId={nodeId}
-                value={varInput?.value || []}
-                onChange={handleFileChange(variable)}
-                defaultVarKindType={VarKindType.variable}
-                filterVar={(varPayload: Var) => varPayload.type === VarType.file || varPayload.type === VarType.arrayFile}
+            {isBoolean && (
+              <FormInputBoolean
+                value={varInput?.value as boolean}
+                onChange={handleValueChange(variable, type)}
               />
             )}
+            {isSelect && (
+              <SimpleSelect
+                wrapperClassName='h-8 grow'
+                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(variable, type)(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
+                  height={100}
+                  language={CodeLanguage.json}
+                  onChange={handleValueChange(variable, type)}
+                  className='w-full'
+                  placeholder={<div className='whitespace-pre'>{placeholder?.[language] || placeholder?.en_US}</div>}
+                />
+              </div>
+            )}
             {isAppSelector && (
               <AppSelector
                 disabled={false}
@@ -250,7 +316,21 @@ const ReasoningConfigForm: React.FC<Props> = ({
                 scope={scope}
               />
             )}
-          </>
+            {showVariableSelector && (
+              <VarReferencePicker
+                zIndex={1001}
+                className='h-8 grow'
+                readonly={false}
+                isShowNodeName
+                nodeId={nodeId}
+                value={varInput?.value || []}
+                onChange={handleVariableSelectorChange(variable)}
+                filterVar={getFilterVar()}
+                schema={schema}
+                valueTypePlaceHolder={targetVarType()}
+              />
+            )}
+          </div>
         )}
         {url && (
           <a
@@ -267,7 +347,19 @@ const ReasoningConfigForm: React.FC<Props> = ({
   }
   return (
     <div className='space-y-3 px-4 py-2'>
-      {schemas.map(schema => renderField(schema))}
+      {!isShowSchema && schemas.map(schema => renderField(schema, (s: SchemaRoot, rootName: string) => {
+        setSchema(s)
+        setSchemaRootName(rootName)
+        showSchema()
+      }))}
+      {isShowSchema && (
+        <SchemaModal
+          isShow={isShowSchema}
+          schema={schema!}
+          rootName={schemaRootName}
+          onClose={hideSchema}
+        />
+      )}
     </div>
   )
 }

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

@@ -0,0 +1,59 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import Modal from '@/app/components/base/modal'
+import VisualEditor from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor'
+import type { SchemaRoot } from '@/app/components/workflow/nodes/llm/types'
+import { MittProvider, VisualEditorContextProvider } from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/context'
+import { useTranslation } from 'react-i18next'
+import { RiCloseLine } from '@remixicon/react'
+
+type Props = {
+  isShow: boolean
+  schema: SchemaRoot
+  rootName: string
+  onClose: () => void
+}
+
+const SchemaModal: FC<Props> = ({
+  isShow,
+  schema,
+  rootName,
+  onClose,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <Modal
+      isShow={isShow}
+      onClose={onClose}
+      className='max-w-[960px] p-0'
+      wrapperClassName='z-[9999]'
+    >
+      <div className='pb-6'>
+        {/* Header */}
+        <div className='relative flex p-6 pb-3 pr-14'>
+          <div className='title-2xl-semi-bold grow truncate text-text-primary'>
+            {t('workflow.nodes.agent.parameterSchema')}
+          </div>
+          <div className='absolute right-5 top-5 flex h-8 w-8 items-center justify-center p-1.5' onClick={onClose}>
+            <RiCloseLine className='h-[18px] w-[18px] text-text-tertiary' />
+          </div>
+        </div>
+        {/* Content */}
+        <div className='flex max-h-[700px] overflow-y-auto px-6 py-2'>
+          <MittProvider>
+            <VisualEditorContextProvider>
+              <VisualEditor
+                className='w-full'
+                schema={schema}
+                rootName={rootName}
+                readOnly
+              ></VisualEditor>
+            </VisualEditorContextProvider>
+          </MittProvider>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+export default React.memo(SchemaModal)

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

@@ -17,10 +17,13 @@ import { ToolTipContent } from '@/app/components/base/tooltip/content'
 import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/components/install-plugin-button'
 import { SwitchPluginVersion } from '@/app/components/workflow/nodes/_base/components/switch-plugin-version'
 import cn from '@/utils/classnames'
+import McpToolNotSupportTooltip from '@/app/components/workflow/nodes/_base/components/mcp-tool-not-support-tooltip'
 
 type Props = {
   icon?: any
   providerName?: string
+  isMCPTool?: boolean
+  providerShowName?: string
   toolLabel?: string
   showSwitch?: boolean
   switchValue?: boolean
@@ -35,11 +38,14 @@ type Props = {
   onInstall?: () => void
   versionMismatch?: boolean
   open: boolean
+  canChooseMCPTool?: boolean,
 }
 
 const ToolItem = ({
   open,
   icon,
+  isMCPTool,
+  providerShowName,
   providerName,
   toolLabel,
   showSwitch,
@@ -54,11 +60,13 @@ const ToolItem = ({
   isError,
   errorTip,
   versionMismatch,
+  canChooseMCPTool,
 }: Props) => {
   const { t } = useTranslation()
-  const providerNameText = providerName?.split('/').pop()
+  const providerNameText = isMCPTool ? providerShowName : providerName?.split('/').pop()
   const isTransparent = uninstalled || versionMismatch || isError
   const [isDeleting, setIsDeleting] = useState(false)
+  const isShowCanNotChooseMCPTip = isMCPTool && !canChooseMCPTool
 
   return (
     <div className={cn(
@@ -67,7 +75,7 @@ const ToolItem = ({
       isDeleting && 'border-state-destructive-border shadow-xs hover:bg-state-destructive-hover',
     )}>
       {icon && (
-        <div className={cn('shrink-0', isTransparent && 'opacity-50')}>
+        <div className={cn('shrink-0', isTransparent && 'opacity-50', isShowCanNotChooseMCPTip && 'opacity-30')}>
           {typeof icon === 'string' && <div className='h-7 w-7 rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge bg-cover bg-center' style={{ backgroundImage: `url(${icon})` }} />}
           {typeof icon !== 'string' && <AppIcon className='h-7 w-7 rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge' size='xs' icon={icon?.content} background={icon?.background} />}
         </div>
@@ -75,18 +83,19 @@ const ToolItem = ({
       {!icon && (
         <div className={cn(
           'flex h-7 w-7 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle',
+          isTransparent && 'opacity-50', isShowCanNotChooseMCPTip && 'opacity-30',
         )}>
           <div className='flex h-5 w-5 items-center justify-center opacity-35'>
             <Group className='text-text-tertiary' />
           </div>
         </div>
       )}
-      <div className={cn('grow truncate pl-0.5', isTransparent && 'opacity-50')}>
+      <div className={cn('grow truncate pl-0.5', isTransparent && 'opacity-50', isShowCanNotChooseMCPTip && 'opacity-30')}>
         <div className='system-2xs-medium-uppercase text-text-tertiary'>{providerNameText}</div>
         <div className='system-xs-medium text-text-secondary'>{toolLabel}</div>
       </div>
       <div className='hidden items-center gap-1 group-hover:flex'>
-        {!noAuth && !isError && !uninstalled && !versionMismatch && (
+        {!noAuth && !isError && !uninstalled && !versionMismatch && !isShowCanNotChooseMCPTip && (
           <ActionButton>
             <RiEqualizer2Line className='h-4 w-4' />
           </ActionButton>
@@ -103,7 +112,7 @@ const ToolItem = ({
           <RiDeleteBinLine className='h-4 w-4' />
         </div>
       </div>
-      {!isError && !uninstalled && !noAuth && !versionMismatch && showSwitch && (
+      {!isError && !uninstalled && !noAuth && !versionMismatch && !isShowCanNotChooseMCPTip && showSwitch && (
         <div className='mr-1' onClick={e => e.stopPropagation()}>
           <Switch
             size='md'
@@ -112,6 +121,9 @@ const ToolItem = ({
           />
         </div>
       )}
+      {isShowCanNotChooseMCPTip && (
+        <McpToolNotSupportTooltip />
+      )}
       {!isError && !uninstalled && !versionMismatch && noAuth && (
         <Button variant='secondary' size='small' onClick={onAuth}>
           {t('tools.notAuthorized')}

web/app/components/plugins/types.ts

@@ -462,9 +462,14 @@ export type StrategyDeclaration = {
   strategies: StrategyDetail[]
 }
 
+export type PluginMeta = {
+  version: string // the version of dify sdk
+}
+
 export type StrategyPluginDetail = {
   provider: string
   plugin_unique_identifier: string
   plugin_id: string
   declaration: StrategyDeclaration
+  meta: PluginMeta
 }