diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source-options/hooks.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source-options/hooks.tsx
index 4ceec18733..7f3a736da8 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source-options/hooks.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source-options/hooks.tsx
@@ -24,7 +24,7 @@ export const useDatasourceIcon = (data: DataSourceNodeType) => {
   useDataSourceList(!!pipelineId, handleUpdateDataSourceList)
 
   const datasourceIcon = useMemo(() => {
-    return dataSourceList?.find(toolWithProvider => toolWithProvider.name === data.provider_id)?.icon
+    return dataSourceList?.find(toolWithProvider => toolWithProvider.plugin_id === data.plugin_id)?.icon
   }, [data, dataSourceList])
 
   return datasourceIcon
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
index 3349192087..e7bda95140 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
@@ -31,7 +31,10 @@ import { useToastContext } from '@/app/components/base/toast'
 import { useParams, useRouter } from 'next/navigation'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useInvalid } from '@/service/use-base'
-import { publishedPipelineInfoQueryKeyPrefix } from '@/service/use-pipeline'
+import {
+  publishedPipelineInfoQueryKeyPrefix,
+  usePublishAsCustomizedPipeline,
+} from '@/service/use-pipeline'
 import Confirm from '@/app/components/base/confirm'
 
 const PUBLISH_SHORTCUT = ['⌘', '⇧', 'P']
@@ -58,6 +61,10 @@ const Popup = () => {
     setFalse: hidePublishing,
     setTrue: showPublishing,
   }] = useBoolean(false)
+  const {
+    mutate: publishAsCustomizedPipeline,
+    isPending: isPublishingAsCustomizedPipeline,
+  } = usePublishAsCustomizedPipeline()
 
   const invalidPublishedPipelineInfo = useInvalid([...publishedPipelineInfoQueryKeyPrefix, pipelineId])
 
@@ -168,21 +175,25 @@ const Popup = () => {
           </div>
           <RiArrowRightUpLine className='ml-2 h-4 w-4 shrink-0' />
         </Button>
-        <Button
-          className='w-full hover:bg-state-accent-hover hover:text-text-accent'
-          variant='tertiary'
-          disabled={!publishedAt}
-        >
-          <div className='flex grow items-center'>
-            <RiTerminalBoxLine className='mr-2 h-4 w-4' />
-            {t('workflow.common.accessAPIReference')}
-          </div>
-          <RiArrowRightUpLine className='ml-2 h-4 w-4 shrink-0' />
-        </Button>
+        <a href='/datasets?category=api' target='_blank'>
+          <Button
+            className='w-full hover:bg-state-accent-hover hover:text-text-accent'
+            variant='tertiary'
+            disabled={!publishedAt}
+          >
+            <div className='flex grow items-center'>
+              <RiTerminalBoxLine className='mr-2 h-4 w-4' />
+              {t('workflow.common.accessAPIReference')}
+            </div>
+            <RiArrowRightUpLine className='ml-2 h-4 w-4 shrink-0' />
+          </Button>
+        </a>
         <Divider className='my-2' />
         <Button
           className='w-full hover:bg-state-accent-hover hover:text-text-accent'
           variant='tertiary'
+          onClick={() => publishAsCustomizedPipeline({ pipelineId: pipelineId || '' })}
+          disabled={!publishedAt || isPublishingAsCustomizedPipeline}
         >
           <div className='flex grow items-center'>
             <RiHammerLine className='mr-2 h-4 w-4' />
diff --git a/web/app/components/workflow/hooks/use-nodes-meta-data.ts b/web/app/components/workflow/hooks/use-nodes-meta-data.ts
index 885e6f147f..cfeb41de34 100644
--- a/web/app/components/workflow/hooks/use-nodes-meta-data.ts
+++ b/web/app/components/workflow/hooks/use-nodes-meta-data.ts
@@ -30,7 +30,7 @@ export const useNodeMetaData = (node: Node) => {
   const nodeMetaData = availableNodesMetaData.nodesMap?.[data.type]
   const author = useMemo(() => {
     if (data.type === BlockEnum.DataSource)
-      return dataSourceList?.find(dataSource => dataSource.id === data.provider_id)?.author
+      return dataSourceList?.find(dataSource => dataSource.plugin_id === data.plugin_id)?.author
 
     if (data.type === BlockEnum.Tool) {
       if (data.provider_type === CollectionType.builtIn)
@@ -44,7 +44,7 @@ export const useNodeMetaData = (node: Node) => {
 
   const description = useMemo(() => {
     if (data.type === BlockEnum.DataSource)
-      return dataSourceList?.find(dataSource => dataSource.id === data.provider_id)?.description[language]
+      return dataSourceList?.find(dataSource => dataSource.plugin_id === data.plugin_id)?.description[language]
     if (data.type === BlockEnum.Tool) {
       if (data.provider_type === CollectionType.builtIn)
         return buildInTools.find(toolWithProvider => canFindTool(toolWithProvider.id, data.provider_id))?.description[language]
diff --git a/web/app/components/workflow/hooks/use-tool-icon.ts b/web/app/components/workflow/hooks/use-tool-icon.ts
index 3df15f5565..49c413a2e4 100644
--- a/web/app/components/workflow/hooks/use-tool-icon.ts
+++ b/web/app/components/workflow/hooks/use-tool-icon.ts
@@ -33,7 +33,7 @@ export const useToolIcon = (data: Node['data']) => {
       return targetTools.find(toolWithProvider => canFindTool(toolWithProvider.id, data.provider_id))?.icon
     }
     if (data.type === BlockEnum.DataSource)
-      return dataSourceList?.find(toolWithProvider => toolWithProvider.name === data.provider_id)?.icon
+      return dataSourceList?.find(toolWithProvider => toolWithProvider.plugin_id === data.plugin_id)?.icon
   }, [data, buildInTools, customTools, workflowTools, dataSourceList])
 
   return toolIcon
@@ -61,7 +61,7 @@ export const useGetToolIcon = () => {
     }
 
     if (data.type === BlockEnum.DataSource)
-      return dataSourceList?.find(toolWithProvider => toolWithProvider.name === data.provider_id)?.icon
+      return dataSourceList?.find(toolWithProvider => toolWithProvider.plugin_id === data.plugin_id)?.icon
   }, [workflowStore])
 
   return getToolIcon
diff --git a/web/app/components/workflow/nodes/data-source/panel.tsx b/web/app/components/workflow/nodes/data-source/panel.tsx
index 1148efc2bd..1d79e5a119 100644
--- a/web/app/components/workflow/nodes/data-source/panel.tsx
+++ b/web/app/components/workflow/nodes/data-source/panel.tsx
@@ -107,7 +107,7 @@ const Panel: FC<NodePanelProps<DataSourceNodeType>> = ({ id, data }) => {
         )
       }
       {
-        isAuthorized && !isLocalFile && (
+        isAuthorized && !isLocalFile && !!formSchemas?.length && (
           <BoxGroupField
             boxGroupProps={{
               boxProps: { withBorderBottom: true },
diff --git a/web/service/use-pipeline.ts b/web/service/use-pipeline.ts
index 4736b28948..8a5de3cc21 100644
--- a/web/service/use-pipeline.ts
+++ b/web/service/use-pipeline.ts
@@ -342,3 +342,14 @@ export const useExportPipelineDSL = () => {
     },
   })
 }
+
+export const usePublishAsCustomizedPipeline = () => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'publish-as-customized-pipeline'],
+    mutationFn: ({
+      pipelineId,
+    }: { pipelineId: string }) => {
+      return post(`/rag/pipelines/${pipelineId}/customized/publish`)
+    },
+  })
+}