diff --git a/web/app/components/workflow/block-selector/data-sources.tsx b/web/app/components/workflow/block-selector/data-sources.tsx
index f54c113b83..16a08e01ef 100644
--- a/web/app/components/workflow/block-selector/data-sources.tsx
+++ b/web/app/components/workflow/block-selector/data-sources.tsx
@@ -1,6 +1,8 @@
 import {
+  useCallback,
   useRef,
 } from 'react'
+import { BlockEnum } from '../types'
 import type {
   OnSelectBlock,
   ToolWithProvider,
@@ -27,6 +29,10 @@ const DataSources = ({
 }: AllToolsProps) => {
   const pluginRef = useRef<ListRef>(null)
   const wrapElemRef = useRef<HTMLDivElement>(null)
+  const formatedDataSources = dataSources.map(item => ({ ...item, tools: item.datasources || [] }))
+  const handleSelect = useCallback<OnSelectBlock>((_, toolDefaultValue) => {
+    onSelect(BlockEnum.DataSource, toolDefaultValue)
+  }, [onSelect])
 
   return (
     <div className={cn(className)}>
@@ -38,8 +44,8 @@ const DataSources = ({
         <Tools
           className={toolContentClassName}
           showWorkflowEmpty={false}
-          tools={dataSources}
-          onSelect={onSelect}
+          tools={formatedDataSources}
+          onSelect={handleSelect}
           viewType={ViewType.flat}
           hasSearchText={!!searchText}
         />
diff --git a/web/app/components/workflow/block-selector/index-bar.tsx b/web/app/components/workflow/block-selector/index-bar.tsx
index 4d8bedffbe..fec3281565 100644
--- a/web/app/components/workflow/block-selector/index-bar.tsx
+++ b/web/app/components/workflow/block-selector/index-bar.tsx
@@ -6,6 +6,7 @@ import classNames from '@/utils/classnames'
 
 export const CUSTOM_GROUP_NAME = '@@@custom@@@'
 export const WORKFLOW_GROUP_NAME = '@@@workflow@@@'
+export const DATA_SOURCE_GROUP_NAME = '@@@data_source@@@'
 export const AGENT_GROUP_NAME = '@@@agent@@@'
 /*
 {
@@ -49,6 +50,8 @@ export const groupItems = (items: ToolWithProvider[], getFirstChar: (item: ToolW
       groupName = CUSTOM_GROUP_NAME
     else if (item.type === CollectionType.workflow)
       groupName = WORKFLOW_GROUP_NAME
+    else if (item.type === CollectionType.datasource)
+      groupName = DATA_SOURCE_GROUP_NAME
     else
       groupName = AGENT_GROUP_NAME
 
diff --git a/web/app/components/workflow/nodes/data-source/node.tsx b/web/app/components/workflow/nodes/data-source/node.tsx
index 37489df34c..f97098e52f 100644
--- a/web/app/components/workflow/nodes/data-source/node.tsx
+++ b/web/app/components/workflow/nodes/data-source/node.tsx
@@ -4,8 +4,7 @@ import type { DataSourceNodeType } from './types'
 import type { NodeProps } from '@/app/components/workflow/types'
 const Node: FC<NodeProps<DataSourceNodeType>> = () => {
   return (
-    <div className='mb-1 px-3 py-1'>
-      DataSource
+    <div>
     </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/data-source/panel.tsx b/web/app/components/workflow/nodes/data-source/panel.tsx
index 7083dfcc3f..1497ea747a 100644
--- a/web/app/components/workflow/nodes/data-source/panel.tsx
+++ b/web/app/components/workflow/nodes/data-source/panel.tsx
@@ -1,27 +1,100 @@
 import type { FC } from 'react'
+import {
+  useMemo,
+} from 'react'
+import { useTranslation } from 'react-i18next'
 import { memo } from 'react'
 import type { DataSourceNodeType } from './types'
 import type { NodePanelProps } from '@/app/components/workflow/types'
-import VariableOrConstantInputField from '@/app/components/base/form/components/field/variable-or-constant-input'
-import VariableSelector from '@/app/components/base/form/components/field/variable-selector'
+import { GroupWithBox } from '@/app/components/workflow/nodes/_base/components/layout'
+import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
+import StructureOutputItem from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show'
+import { Type } from '../llm/types'
+
+const Panel: FC<NodePanelProps<DataSourceNodeType>> = ({ data }) => {
+  const { t } = useTranslation()
+  const { output_schema = {} } = data
+  const outputSchema = useMemo(() => {
+      const res: any[] = []
+      if (!output_schema)
+        return []
+      Object.keys(output_schema.properties).forEach((outputKey) => {
+        const output = output_schema.properties[outputKey]
+        const type = output.type
+        if (type === 'object') {
+          res.push({
+            name: outputKey,
+            value: output,
+          })
+        }
+        else {
+          res.push({
+            name: outputKey,
+            type: output.type === 'array'
+              ? `Array[${output.items?.type.slice(0, 1).toLocaleUpperCase()}${output.items?.type.slice(1)}]`
+              : `${output.type.slice(0, 1).toLocaleUpperCase()}${output.type.slice(1)}`,
+            description: output.description,
+          })
+        }
+      })
+      return res
+    }, [output_schema])
+  const hasObjectOutput = useMemo(() => {
+    if (!output_schema)
+      return false
+    const properties = output_schema.properties
+    return Object.keys(properties).some(key => properties[key].type === 'object')
+  }, [output_schema])
 
-const Panel: FC<NodePanelProps<DataSourceNodeType>> = () => {
   return (
-    <div className='mb-2 mt-2 space-y-4 px-4'>
-      datasource
-      <div className='space-y-1'>
-        <VariableSelector
-          className='py-1'
-          label='Child delimiter'
-          labelOptions={{
-            isRequired: true,
-          }}
-        />
-        <VariableOrConstantInputField
-          className='py-1'
-          label='Parent maximum chunk length'
-        />
-      </div>
+    <div >
+      <GroupWithBox boxProps={{ withBorderBottom: true }}>
+
+      </GroupWithBox>
+      <OutputVars>
+        <VarItem
+            name='text'
+            type='string'
+            description={t('workflow.nodes.tool.outputVars.text')}
+            isIndent={hasObjectOutput}
+          />
+          <VarItem
+            name='files'
+            type='array[file]'
+            description={t('workflow.nodes.tool.outputVars.files.title')}
+            isIndent={hasObjectOutput}
+          />
+          <VarItem
+            name='json'
+            type='array[object]'
+            description={t('workflow.nodes.tool.outputVars.json')}
+            isIndent={hasObjectOutput}
+          />
+          {outputSchema.map((outputItem: any) => (
+            <div key={outputItem.name}>
+              {outputItem.value?.type === 'object' ? (
+                <StructureOutputItem
+                  rootClassName='code-sm-semibold text-text-secondary'
+                  payload={{
+                    schema: {
+                      type: Type.object,
+                      properties: {
+                        [outputItem.name]: outputItem.value,
+                      },
+                      additionalProperties: false,
+                    },
+                  }} />
+              ) : (
+                <VarItem
+                  name={outputItem.name}
+                  type={outputItem.type.toLocaleLowerCase()}
+                  description={outputItem.description}
+                  isIndent={hasObjectOutput}
+                />
+              )}
+            </div>
+          ))}
+      </OutputVars>
     </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/data-source/types.ts b/web/app/components/workflow/nodes/data-source/types.ts
index 969ef15647..f7729502e7 100644
--- a/web/app/components/workflow/nodes/data-source/types.ts
+++ b/web/app/components/workflow/nodes/data-source/types.ts
@@ -3,4 +3,5 @@ import type { RAGPipelineVariables } from '@/models/pipeline'
 
 export type DataSourceNodeType = CommonNodeType & {
   variables: RAGPipelineVariables
+  output_schema: Record<string, any>
 }
diff --git a/web/app/components/workflow/types.ts b/web/app/components/workflow/types.ts
index c4c4aeef6c..15e438b0c0 100644
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@@ -412,6 +412,7 @@ export type MoreInfo = {
 
 export type ToolWithProvider = Collection & {
   tools: Tool[]
+  datasources?: Tool[]
 }
 
 export enum SupportUploadFileTypes {