diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
index f4e23b566b..abad9479ee 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
@@ -77,6 +77,7 @@ const Form: FC<FormProps> = ({
       provider: model.provider,
       model: model.modelId,
       mode: model.mode,
+      type: FormTypeEnum.modelSelector,
     }
     onChange({ ...value, [key]: newValue })
   }, [onChange, value])
@@ -286,7 +287,6 @@ const Form: FC<FormProps> = ({
         label,
         required,
       } = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput)
-
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
           <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
@@ -303,7 +303,7 @@ const Form: FC<FormProps> = ({
             isAdvancedMode
             isInWorkflow
             provider={value[variable]?.provider}
-            modelId={value[variable]?.name}
+            modelId={value[variable]?.model}
             mode={value[variable]?.mode}
             completionParams={value[variable]?.completion_params}
             setModel={model => handleModelChanged(variable, model)}
@@ -368,7 +368,7 @@ const Form: FC<FormProps> = ({
           <AppSelector
             disabled={readonly}
             value={value[variable]}
-            onSelect={item => handleFormChange(variable, item as any)}
+            onSelect={item => handleFormChange(variable, { ...item, type: FormTypeEnum.appSelector } as any)}
           />
           {fieldMoreInfo?.(formSchema)}
           {validating && changeKey === variable && <ValidatingTip />}
diff --git a/web/app/components/workflow/nodes/tool/node.tsx b/web/app/components/workflow/nodes/tool/node.tsx
index 4de03394c3..d7ed993aab 100644
--- a/web/app/components/workflow/nodes/tool/node.tsx
+++ b/web/app/components/workflow/nodes/tool/node.tsx
@@ -2,6 +2,7 @@ import type { FC } from 'react'
 import React from 'react'
 import type { ToolNodeType } from './types'
 import type { NodeProps } from '@/app/components/workflow/types'
+import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 
 const Node: FC<NodeProps<ToolNodeType>> = ({
   data,
@@ -20,9 +21,21 @@ const Node: FC<NodeProps<ToolNodeType>> = ({
             <div title={key} className='max-w-[100px] shrink-0 truncate text-xs font-medium text-gray-500 uppercase'>
               {key}
             </div>
-            <div title={tool_configurations[key]} className='grow w-0 shrink-0 truncate text-right text-xs font-normal text-gray-700'>
-              {tool_configurations[key]}
-            </div>
+            {typeof tool_configurations[key] === 'string' && (
+              <div title={tool_configurations[key]} className='grow w-0 shrink-0 truncate text-right text-xs font-normal text-gray-700'>
+                {tool_configurations[key]}
+              </div>
+            )}
+            {typeof tool_configurations[key] !== 'string' && tool_configurations[key]?.type === FormTypeEnum.modelSelector && (
+              <div title={tool_configurations[key].model} className='grow w-0 shrink-0 truncate text-right text-xs font-normal text-gray-700'>
+                {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>
 
         ))}