From a3dc4a7a54e6900611fcea5a78819723cd56b35e Mon Sep 17 00:00:00 2001
From: Svetoslav Dekov <svetoslav.dekov@n8n.io>
Date: Fri, 14 Nov 2025 17:31:47 +0200
Subject: [PATCH] fix(editor): Show templates link on empty canvas when ai
 builder is enabled (no-changelog) (#21818)

---
 .../render-types/CanvasNodeChoicePrompt.vue   | 56 +++++++++++++++++--
 1 file changed, 52 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/nodes/render-types/CanvasNodeChoicePrompt.vue b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/nodes/render-types/CanvasNodeChoicePrompt.vue
index 4fb2f153df6..78e0c6d584c 100644
--- a/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/nodes/render-types/CanvasNodeChoicePrompt.vue
+++ b/packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/nodes/render-types/CanvasNodeChoicePrompt.vue
@@ -1,20 +1,42 @@
 <script setup lang="ts">
-import { NODE_CREATOR_OPEN_SOURCES } from '@/app/constants';
+import {
+	NODE_CREATOR_OPEN_SOURCES,
+	VIEWS,
+	EXPERIMENT_TEMPLATES_DATA_QUALITY_KEY,
+} from '@/app/constants';
+import {
+	isExtraTemplateLinksExperimentEnabled,
+	TemplateClickSource,
+	trackTemplatesClick,
+} from '@/experiments/utils';
 import { useNodeCreatorStore } from '@/features/shared/nodeCreator/nodeCreator.store';
 import { useChatPanelStore } from '@/features/ai/assistant/chatPanel.store';
+import { useSettingsStore } from '@/app/stores/settings.store';
+import { useTemplatesStore } from '@/features/workflows/templates/templates.store';
 import { useI18n } from '@n8n/i18n';
 import { computed } from 'vue';
-
-import { N8nIcon } from '@n8n/design-system';
+import { useRouter } from 'vue-router';
+import { N8nIcon, N8nLink } from '@n8n/design-system';
+import { useUIStore } from '@/app/stores/ui.store';
+import { useTemplatesDataQualityStore } from '@/experiments/templatesDataQuality/stores/templatesDataQuality.store';
 
 const nodeCreatorStore = useNodeCreatorStore();
 const chatPanelStore = useChatPanelStore();
 const i18n = useI18n();
+const settingsStore = useSettingsStore();
+const templatesStore = useTemplatesStore();
+const router = useRouter();
+const uiStore = useUIStore();
+const templatesDataQualityStore = useTemplatesDataQualityStore();
 
 const isChatWindowOpen = computed(
 	() => chatPanelStore.isOpen && chatPanelStore.isBuilderModeActive,
 );
 
+const templatesLinkEnabled = computed(() => {
+	return isExtraTemplateLinksExperimentEnabled() && settingsStore.isTemplatesEnabled;
+});
+
 const onAddFirstStepClick = () => {
 	if (nodeCreatorStore.isCreateNodeActive) {
 		nodeCreatorStore.isCreateNodeActive = false;
@@ -28,6 +50,21 @@ const onAddFirstStepClick = () => {
 async function onBuildWithAIClick() {
 	await chatPanelStore.toggle({ mode: 'builder' });
 }
+
+async function onClickTemplatesLink() {
+	trackTemplatesClick(TemplateClickSource.emptyWorkflowLink);
+	if (templatesStore.hasCustomTemplatesHost) {
+		await router.push({ name: VIEWS.TEMPLATES });
+		return;
+	}
+
+	if (templatesDataQualityStore.isFeatureEnabled()) {
+		uiStore.openModal(EXPERIMENT_TEMPLATES_DATA_QUALITY_KEY);
+		return;
+	}
+
+	window.open(templatesStore.websiteTemplateRepositoryURL, '_blank');
+}
 </script>
 
 <template>
@@ -50,6 +87,15 @@ async function onBuildWithAIClick() {
 			</div>
 			<p :class="$style.label">
 				{{ i18n.baseText('nodeView.canvasAddButton.addFirstStep') }}
+				<N8nLink
+					v-if="templatesLinkEnabled"
+					:underline="true"
+					size="small"
+					data-test-id="canvas-template-link"
+					@click="onClickTemplatesLink"
+				>
+					{{ i18n.baseText('nodeView.templateLink') }}
+				</N8nLink>
 			</p>
 		</div>
 
@@ -80,7 +126,7 @@ async function onBuildWithAIClick() {
 .choicePrompt {
 	display: flex;
 	flex-direction: row;
-	align-items: center;
+	align-items: flex-start;
 	justify-content: center;
 	gap: var(--spacing--lg);
 }
@@ -119,6 +165,8 @@ async function onBuildWithAIClick() {
 	color: var(--color--text--shade-1);
 	margin-top: var(--spacing--2xs);
 	text-align: center;
+	display: flex;
+	flex-direction: column;
 }
 
 .orDivider {