diff --git a/web/app/components/workflow/nodes/data-source/panel.tsx b/web/app/components/workflow/nodes/data-source/panel.tsx
index 95db573e4d..20882b6656 100644
--- a/web/app/components/workflow/nodes/data-source/panel.tsx
+++ b/web/app/components/workflow/nodes/data-source/panel.tsx
@@ -136,23 +136,28 @@ const Panel: FC<NodePanelProps<DataSourceNodeType>> = ({ id, data }) => {
           ))
         }
         {
-          outputSchema.map(outputItem => (
+          outputSchema.map((outputItem) => {
+              const schemaType = getMatchedSchemaType(outputItem.value)
+
+            return (
             <div key={outputItem.name}>
               {outputItem.value?.type === 'object' ? (
                 <StructureOutputItem
                   rootClassName='code-sm-semibold text-text-secondary'
-                  payload={wrapStructuredVarItem(outputItem, getMatchedSchemaType(outputItem.value))} />
+                  payload={wrapStructuredVarItem(outputItem, schemaType)}
+                />
               ) : (
                 <VarItem
                   name={outputItem.name}
-                  type={outputItem.type.toLocaleLowerCase()}
+                  // eslint-disable-next-line sonarjs/no-nested-template-literals
+                  type={`${outputItem.type.toLocaleLowerCase()}${schemaType ? ` (${schemaType})` : ''}`}
                   description={outputItem.description}
                   isIndent={hasObjectOutput}
                 />
               )}
             </div>
-          ))
-        }
+          )
+        })}
       </OutputVars>
     </div>
   )
diff --git a/web/app/components/workflow/nodes/tool/panel.tsx b/web/app/components/workflow/nodes/tool/panel.tsx
index 2292d98d18..f41294d2c3 100644
--- a/web/app/components/workflow/nodes/tool/panel.tsx
+++ b/web/app/components/workflow/nodes/tool/panel.tsx
@@ -117,22 +117,27 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
               description={t(`${i18nPrefix}.outputVars.json`)}
               isIndent={hasObjectOutput}
             />
-            {outputSchema.map(outputItem => (
-              <div key={outputItem.name}>
-                {outputItem.value?.type === 'object' ? (
-                  <StructureOutputItem
-                    rootClassName='code-sm-semibold text-text-secondary'
-                    payload={wrapStructuredVarItem(outputItem, getMatchedSchemaType(outputItem.value))} />
-                ) : (
-                  <VarItem
-                    name={outputItem.name}
-                    type={outputItem.type.toLocaleLowerCase()}
-                    description={outputItem.description}
-                    isIndent={hasObjectOutput}
-                  />
-                )}
-              </div>
-            ))}
+            {outputSchema.map((outputItem) => {
+              const schemaType = getMatchedSchemaType(outputItem.value)
+              return (
+                <div key={outputItem.name}>
+                  {outputItem.value?.type === 'object' ? (
+                    <StructureOutputItem
+                      rootClassName='code-sm-semibold text-text-secondary'
+                      payload={wrapStructuredVarItem(outputItem, schemaType)}
+                    />
+                  ) : (
+                    <VarItem
+                      name={outputItem.name}
+                      // eslint-disable-next-line sonarjs/no-nested-template-literals
+                      type={`${outputItem.type.toLocaleLowerCase()}${schemaType ? ` (${schemaType})` : ''}`}
+                      description={outputItem.description}
+                      isIndent={hasObjectOutput}
+                    />
+                  )}
+                </div>
+              )
+          })}
           </>
         </OutputVars>
       </div>