feat(editor): Add RAG starter template callouts experiment (#16282)

Co-authored-by: Charlie Kolb <charlie@n8n.io>

packages/frontend/editor-ui/src/Interface.ts

@@ -797,6 +797,15 @@ export interface LinkItemProps {
 	icon: string;
 	tag?: NodeCreatorTag;
 }
+
+export interface OpenTemplateItemProps {
+	key: 'rag-starter-template';
+	title: string;
+	description: string;
+	icon: string;
+	tag?: NodeCreatorTag;
+}
+
 export interface ActionTypeDescription extends SimplifiedNodeType {
 	displayOptions?: IDisplayOptions;
 	values?: IDataObject;
@@ -859,6 +868,11 @@ export interface LinkCreateElement extends CreateElementBase {
 	properties: LinkItemProps;
 }
 
+export interface OpenTemplateElement extends CreateElementBase {
+	type: 'openTemplate';
+	properties: OpenTemplateItemProps;
+}
+
 export interface ActionCreateElement extends CreateElementBase {
 	type: 'action';
 	subcategory: string;
@@ -873,7 +887,8 @@ export type INodeCreateElement =
 	| ViewCreateElement
 	| LabelCreateElement
 	| ActionCreateElement
-	| LinkCreateElement;
+	| LinkCreateElement
+	| OpenTemplateElement;
 
 export type NodeTypeSelectedPayload = {
 	type: string;

packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/OpenTemplateItem.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { OpenTemplateItemProps } from '@/Interface';
+
+export interface Props {
+	openTemplate: OpenTemplateItemProps;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+	<n8n-node-creator-node
+		:class="$style.creatorOpenTemplate"
+		:title="openTemplate.title"
+		:is-trigger="false"
+		:description="openTemplate.description"
+		:tag="openTemplate.tag"
+		:show-action-arrow="true"
+	>
+		<template #icon>
+			<n8n-node-icon type="icon" :name="openTemplate.icon" :circle="false" :show-tooltip="false" />
+		</template>
+	</n8n-node-creator-node>
+</template>
+
+<style lang="scss" module>
+.creatorOpenTemplate {
+	--action-arrow-color: var(--color-text-light);
+	margin-left: var(--spacing-s);
+	margin-right: var(--spacing-xs);
+}
+</style>

packages/frontend/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue

@@ -27,6 +27,7 @@ import {
 	filterAndSearchNodes,
 	prepareCommunityNodeDetailsViewStack,
 	transformNodeType,
+	getRootSearchCallouts,
 } from '../utils';
 import { useViewStacks } from '../composables/useViewStacks';
 import { useKeyboardNavigation } from '../composables/useKeyboardNavigation';
@@ -42,6 +43,7 @@ import { SEND_AND_WAIT_OPERATION, type INodeParameters } from 'n8n-workflow';
 
 import { isCommunityPackageName } from '@/utils/nodeTypesUtils';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import { useCalloutHelpers } from '@/composables/useCalloutHelpers';
 
 export interface Props {
 	rootView: 'trigger' | 'action';
@@ -53,6 +55,8 @@ const emit = defineEmits<{
 
 const i18n = useI18n();
 
+const calloutHelpers = useCalloutHelpers();
+
 const { mergedNodes, actions, onSubcategorySelected } = useNodeCreatorStore();
 const { pushViewStack, popViewStack, isAiSubcategoryView } = useViewStacks();
 const { setAddedNodeActionParameters, nodeCreateElementToNodeTypeSelectedPayload } = useActions();
@@ -76,7 +80,10 @@ const moreFromCommunity = computed(() => {
 const isSearchResultEmpty = computed(() => {
 	return (
 		(activeViewStack.value.items || []).length === 0 &&
-		globalSearchItemsDiff.value.length + moreFromCommunity.value.length === 0
+		globalCallouts.value.length +
+			globalSearchItemsDiff.value.length +
+			moreFromCommunity.value.length ===
+			0
 	);
 });
 
@@ -216,6 +223,12 @@ function onSelected(item: INodeCreateElement) {
 	if (item.type === 'link') {
 		window.open(item.properties.url, '_blank');
 	}
+
+	if (item.type === 'openTemplate') {
+		if (item.properties.key === 'rag-starter-template') {
+			void calloutHelpers.openRagStarterTemplate();
+		}
+	}
 }
 
 function subcategoriesMapper(item: INodeCreateElement) {
@@ -254,6 +267,12 @@ function baseSubcategoriesFilter(item: INodeCreateElement): boolean {
 	return hasActions || !hasTriggerGroup;
 }
 
+const globalCallouts = computed<INodeCreateElement[]>(() =>
+	getRootSearchCallouts(activeViewStack.value.search ?? '', {
+		isRagStarterCalloutVisible: calloutHelpers.isRagStarterCalloutVisible.value,
+	}),
+);
+
 function arrowLeft() {
 	popViewStack();
 }
@@ -286,6 +305,9 @@ registerKeyHook('MainViewArrowLeft', {
 
 <template>
 	<span>
+		<!-- Global Callouts-->
+		<ItemsRenderer :elements="globalCallouts" :class="$style.items" @selected="onSelected" />
+
 		<!-- Main Node Items -->
 		<ItemsRenderer
 			v-memo="[activeViewStack.search]"

packages/frontend/editor-ui/src/components/Node/NodeCreator/NodesListPanel.test.ts

@@ -10,6 +10,12 @@ import { REGULAR_NODE_CREATOR_VIEW } from '@/constants';
 import type { NodeFilterType } from '@/Interface';
 import { createComponentRenderer } from '@/__tests__/render';
 
+vi.mock('vue-router', () => ({
+	useRoute: vi.fn(() => ({ query: {}, params: {} })),
+	useRouter: vi.fn(),
+	RouterLink: vi.fn(),
+}));
+
 function getWrapperComponent(setup: () => void) {
 	const wrapperComponent = defineComponent({
 		components: {

packages/frontend/editor-ui/src/components/Node/NodeCreator/Renderers/ItemsRenderer.vue

@@ -13,6 +13,7 @@ import CommunityNodeItem from '../ItemTypes/CommunityNodeItem.vue';
 import CategorizedItemsRenderer from './CategorizedItemsRenderer.vue';
 
 import { useViewStacks } from '../composables/useViewStacks';
+import OpenTemplateItem from '../ItemTypes/OpenTemplateItem.vue';
 
 export interface Props {
 	elements?: INodeCreateElement[];
@@ -206,6 +207,12 @@ watch(
 						:link="item.properties"
 						:class="$style.linkItem"
 					/>
+
+					<OpenTemplateItem
+						v-else-if="item.type === 'openTemplate'"
+						:open-template="item.properties"
+						:class="$style.linkItem"
+					/>
 				</div>
 			</div>
 			<n8n-loading v-else :loading="true" :rows="1" variant="p" :class="$style.itemSkeleton" />

packages/frontend/editor-ui/src/components/Node/NodeCreator/utils.ts

@@ -305,3 +305,26 @@ export function prepareCommunityNodeDetailsViewStack(
 		communityNodeDetails,
 	};
 }
+
+export function getRootSearchCallouts(search: string, { isRagStarterCalloutVisible = false }) {
+	const results: INodeCreateElement[] = [];
+
+	const ragKeywords = ['rag', 'vec', 'know'];
+	if (isRagStarterCalloutVisible && ragKeywords.some((x) => search.toLowerCase().startsWith(x))) {
+		results.push({
+			key: 'rag-starter-template',
+			type: 'openTemplate',
+			properties: {
+				key: 'rag-starter-template',
+				title: i18n.baseText('nodeCreator.ragStarterTemplate.openTemplateItem.title'),
+				icon: 'database',
+				description: i18n.baseText('nodeCreator.ragStarterTemplate.openTemplateItem.description'),
+				tag: {
+					type: 'info',
+					text: i18n.baseText('nodeCreator.triggerHelperPanel.manualTriggerTag'),
+				},
+			},
+		});
+	}
+	return results;
+}

packages/frontend/editor-ui/src/components/ParameterInputList.test.constants.ts

@@ -33,6 +33,32 @@ export const TEST_PARAMETERS: INodeProperties[] = [
 			},
 		],
 	},
+	{
+		displayName:
+			'Note: This is a notice with <a href="notice.n8n.io" target="_blank">notice link</a>',
+		name: 'testNotice',
+		type: 'notice',
+		default: '',
+		displayOptions: {
+			show: { '@version': [{ _cnd: { gte: 1.1 } }] },
+		},
+	},
+	{
+		displayName:
+			'Tip: This is a callout with <a href="callout.n8n.io" target="_blank">callout link</a>',
+		name: 'testCallout',
+		type: 'callout',
+		default: '',
+		displayOptions: {
+			show: { '@version': [{ _cnd: { gte: 1.1 } }] },
+		},
+		typeOptions: {
+			calloutAction: {
+				label: 'and action!',
+				type: 'openRagStarterTemplate',
+			},
+		},
+	},
 ];
 
 export const FIXED_COLLECTION_PARAMETERS: INodeProperties[] = TEST_PARAMETERS.filter(

packages/frontend/editor-ui/src/components/ParameterInputList.test.ts

@@ -83,9 +83,10 @@ describe('ParameterInputList', () => {
 		});
 
 		// Should render labels for all parameters
-		TEST_PARAMETERS.forEach((parameter) => {
+		FIXED_COLLECTION_PARAMETERS.forEach((parameter) => {
 			expect(getByText(parameter.displayName)).toBeInTheDocument();
 		});
+
 		// Should render input placeholders for all fixed collection parameters
 		expect(getAllByTestId('suspense-stub')).toHaveLength(FIXED_COLLECTION_PARAMETERS.length);
 	});
@@ -100,7 +101,7 @@ describe('ParameterInputList', () => {
 		});
 
 		// Should render labels for all parameters
-		TEST_PARAMETERS.forEach((parameter) => {
+		FIXED_COLLECTION_PARAMETERS.forEach((parameter) => {
 			expect(getByText(parameter.displayName)).toBeInTheDocument();
 		});
 		// Should render error message for fixed collection parameter
@@ -110,6 +111,35 @@ describe('ParameterInputList', () => {
 		expect(getByText(TEST_ISSUE)).toBeInTheDocument();
 	});
 
+	it('renders notice correctly', () => {
+		ndvStore.activeNode = TEST_NODE_NO_ISSUES;
+		const { getByText } = renderComponent({
+			props: {
+				parameters: TEST_PARAMETERS,
+				nodeValues: TEST_NODE_VALUES,
+			},
+		});
+		expect(getByText('Note: This is a notice with')).toBeInTheDocument();
+		expect(getByText('notice link')).toBeInTheDocument();
+		expect(getByText('notice link').getAttribute('href')).toEqual('notice.n8n.io');
+	});
+
+	it('renders callout correctly', () => {
+		ndvStore.activeNode = TEST_NODE_NO_ISSUES;
+		const { getByTestId, getByText } = renderComponent({
+			props: {
+				parameters: TEST_PARAMETERS,
+				nodeValues: TEST_NODE_VALUES,
+			},
+		});
+
+		expect(getByText('Tip: This is a callout with')).toBeInTheDocument();
+		expect(getByText('callout link')).toBeInTheDocument();
+		expect(getByText('callout link').getAttribute('href')).toEqual('callout.n8n.io');
+		expect(getByText('and action!')).toBeInTheDocument();
+		expect(getByTestId('callout-dismiss-icon')).toBeInTheDocument();
+	});
+
 	describe('updateFormParameters', () => {
 		const workflowHelpersMock: MockInstance = vi.spyOn(workflowHelpers, 'useWorkflowHelpers');
 		const formParameters = [

packages/frontend/editor-ui/src/components/ParameterInputList.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type {
+	CalloutActionType,
 	INodeParameters,
 	INodeProperties,
 	NodeParameterValue,
@@ -20,10 +21,12 @@ import ResourceMapper from '@/components/ResourceMapper/ResourceMapper.vue';
 import { useI18n } from '@n8n/i18n';
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
 import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
+import { useMessage } from '@/composables/useMessage';
 import {
 	FORM_NODE_TYPE,
 	FORM_TRIGGER_NODE_TYPE,
 	KEEP_AUTH_IN_NDV_FOR_NODES,
+	MODAL_CONFIRM,
 	WAIT_NODE_TYPE,
 } from '@/constants';
 import { useNDVStore } from '@/stores/ndv.store';
@@ -38,8 +41,17 @@ import { captureException } from '@sentry/vue';
 import { computedWithControl } from '@vueuse/core';
 import get from 'lodash/get';
 import set from 'lodash/set';
-import { N8nIcon, N8nIconButton, N8nInputLabel, N8nNotice, N8nText } from '@n8n/design-system';
+import {
+	N8nCallout,
+	N8nIcon,
+	N8nIconButton,
+	N8nInputLabel,
+	N8nLink,
+	N8nNotice,
+	N8nText,
+} from '@n8n/design-system';
 import { storeToRefs } from 'pinia';
+import { useCalloutHelpers } from '@/composables/useCalloutHelpers';
 
 const LazyFixedCollectionParameter = defineAsyncComponent(
 	async () => await import('./FixedCollectionParameter.vue'),
@@ -72,10 +84,13 @@ const emit = defineEmits<{
 const nodeTypesStore = useNodeTypesStore();
 const ndvStore = useNDVStore();
 
+const message = useMessage();
 const nodeHelpers = useNodeHelpers();
 const asyncLoadingError = ref(false);
 const workflowHelpers = useWorkflowHelpers();
 const i18n = useI18n();
+const { dismissCallout, isCalloutDismissed, openRagStarterTemplate, isRagStarterCalloutVisible } =
+	useCalloutHelpers();
 
 const { activeNode } = storeToRefs(ndvStore);
 
@@ -525,6 +540,47 @@ function getParameterValue<T extends NodeParameterValueType = NodeParameterValue
 ): T {
 	return nodeHelpers.getParameterValue(props.nodeValues, name, props.path) as T;
 }
+
+function isRagStarterCallout(parameter: INodeProperties): boolean {
+	return parameter.type === 'callout' && parameter.name === 'ragStarterCallout';
+}
+
+function isCalloutVisible(parameter: INodeProperties): boolean {
+	if (isCalloutDismissed(parameter.name)) return false;
+
+	if (isRagStarterCallout(parameter)) {
+		return isRagStarterCalloutVisible.value;
+	}
+
+	return true;
+}
+
+async function onCalloutAction(action: CalloutActionType) {
+	if (action === 'openRagStarterTemplate') {
+		await openRagStarterTemplate(activeNode.value?.type ?? 'no active node');
+	}
+}
+
+const onCalloutDismiss = async (parameter: INodeProperties) => {
+	const dismissConfirmed = await message.confirm(
+		i18n.baseText('parameterInputList.callout.dismiss.confirm.text'),
+		{
+			showClose: true,
+			confirmButtonText: i18n.baseText(
+				'parameterInputList.callout.dismiss.confirm.confirmButtonText',
+			),
+			cancelButtonText: i18n.baseText(
+				'parameterInputList.callout.dismiss.confirm.cancelButtonText',
+			),
+		},
+	);
+
+	if (dismissConfirmed !== MODAL_CONFIRM) {
+		return;
+	}
+
+	await dismissCallout(parameter.name);
+};
 </script>
 
 <template>
@@ -564,6 +620,46 @@ function getParameterValue<T extends NodeParameterValueType = NodeParameterValue
 				@action="onNoticeAction"
 			/>
 
+			<template v-else-if="parameter.type === 'callout'">
+				<N8nCallout
+					v-if="isCalloutVisible(parameter)"
+					:class="['parameter-item', parameter.typeOptions?.containerClass ?? '']"
+					theme="secondary"
+				>
+					<N8nText size="small">
+						<N8nText
+							size="small"
+							v-n8n-html="i18n.nodeText(activeNode?.type).inputLabelDisplayName(parameter, path)"
+						/>
+						<template v-if="parameter.typeOptions?.calloutAction">
+							{{ ' ' }}
+							<N8nLink
+								v-if="parameter.typeOptions?.calloutAction"
+								theme="secondary"
+								size="small"
+								:bold="true"
+								:underline="true"
+								@click="onCalloutAction(parameter.typeOptions.calloutAction.type)"
+							>
+								{{ parameter.typeOptions.calloutAction.label }}
+							</N8nLink>
+						</template>
+					</N8nText>
+
+					<template #trailingContent>
+						<N8nIcon
+							icon="times"
+							title="Dismiss"
+							size="medium"
+							type="secondary"
+							class="callout-dismiss"
+							data-test-id="callout-dismiss-icon"
+							@click="onCalloutDismiss(parameter)"
+						/>
+					</template>
+				</N8nCallout>
+			</template>
+
 			<div v-else-if="parameter.type === 'button'" class="parameter-item">
 				<ButtonParameter
 					:parameter="parameter"
@@ -766,5 +862,14 @@ function getParameterValue<T extends NodeParameterValueType = NodeParameterValue
 		display: block;
 		padding: var(--spacing-3xs) 0;
 	}
+
+	.callout-dismiss {
+		margin-left: var(--spacing-xs);
+		line-height: 1;
+		cursor: pointer;
+	}
+	.callout-dismiss:hover {
+		color: var(--color-icon-hover);
+	}
 }
 </style>

packages/frontend/editor-ui/src/composables/useCalloutHelpers.test.ts

@@ -0,0 +1,161 @@
+import { useCalloutHelpers } from '@/composables/useCalloutHelpers';
+import { updateCurrentUserSettings } from '@/api/users';
+
+const mocks = vi.hoisted(() => ({
+	resolve: vi.fn(),
+	track: vi.fn(),
+	useRoute: vi.fn(() => ({ query: {}, params: {} })),
+	getVariant: vi.fn(() => 'default'),
+	isCalloutDismissed: vi.fn(() => false),
+	setCalloutDismissed: vi.fn(),
+	restApiContext: vi.fn(() => ({})),
+	getWorkflowById: vi.fn(),
+}));
+
+vi.mock('vue-router', () => ({
+	useRouter: () => ({
+		resolve: mocks.resolve,
+	}),
+	useRoute: mocks.useRoute,
+	RouterLink: vi.fn(),
+}));
+
+vi.mock('@/composables/useTelemetry', () => ({
+	useTelemetry: () => ({ track: mocks.track }),
+}));
+
+vi.mock('@/stores/posthog.store', () => ({
+	usePostHog: () => ({
+		getVariant: mocks.getVariant,
+	}),
+}));
+
+vi.mock('@/stores/users.store', () => ({
+	useUsersStore: () => ({
+		isCalloutDismissed: mocks.isCalloutDismissed,
+		setCalloutDismissed: mocks.setCalloutDismissed,
+		currentUser: { settings: { dismissedCallouts: {} } },
+	}),
+}));
+
+vi.mock('@/stores/workflows.store', () => ({
+	useWorkflowsStore: () => ({
+		getCurrentWorkflow: vi.fn(() => ({
+			id: '1',
+		})),
+		getWorkflowById: mocks.getWorkflowById,
+	}),
+}));
+
+vi.mock('@n8n/stores/useRootStore', () => ({
+	useRootStore: () => ({
+		restApiContext: mocks.restApiContext,
+	}),
+}));
+
+vi.mock('@/api/users', () => ({
+	updateCurrentUserSettings: vi.fn(),
+}));
+
+describe('useCalloutHelpers()', () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	describe('openRagStarterTemplate()', () => {
+		it('opens the RAG starter template successfully', async () => {
+			vi.spyOn(window, 'open').mockImplementation(() => null);
+			mocks.resolve.mockReturnValue({ href: 'n8n.io' });
+
+			const { openRagStarterTemplate } = useCalloutHelpers();
+			const nodeType = 'testNode';
+
+			await openRagStarterTemplate('testNode');
+
+			expect(window.open).toHaveBeenCalledWith('n8n.io', '_blank');
+			expect(mocks.track).toHaveBeenCalledWith('User clicked on RAG callout', {
+				node_type: nodeType,
+			});
+		});
+	});
+
+	describe('isRagStarterWorkflowExperimentEnabled', () => {
+		it('should be false if the RAG starter workflow experiment is not enabled', () => {
+			const { isRagStarterWorkflowExperimentEnabled } = useCalloutHelpers();
+			expect(isRagStarterWorkflowExperimentEnabled.value).toBe(false);
+		});
+
+		it('should be true if the RAG starter workflow experiment is enabled', () => {
+			mocks.getVariant.mockReturnValueOnce('variant');
+
+			const { isRagStarterWorkflowExperimentEnabled } = useCalloutHelpers();
+			expect(isRagStarterWorkflowExperimentEnabled.value).toBe(true);
+		});
+	});
+
+	describe('isRagStarterCalloutVisible', () => {
+		it('should be false if the feature flag is disabled', () => {
+			const { isRagStarterCalloutVisible } = useCalloutHelpers();
+			expect(isRagStarterCalloutVisible.value).toBe(false);
+		});
+
+		it('should be true if the feature flag is enabled and not on the RAG starter template', () => {
+			mocks.getVariant.mockReturnValueOnce('variant');
+
+			const { isRagStarterCalloutVisible } = useCalloutHelpers();
+			expect(isRagStarterCalloutVisible.value).toBe(true);
+		});
+
+		it('should be false if the feature flag is enabled and currently on unsaved RAG starter template', () => {
+			mocks.getVariant.mockReturnValueOnce('variant');
+			mocks.useRoute.mockReturnValueOnce({
+				query: { templateId: 'rag-starter-template' },
+				params: {},
+			});
+
+			const { isRagStarterCalloutVisible } = useCalloutHelpers();
+			expect(isRagStarterCalloutVisible.value).toBe(false);
+		});
+
+		it('should be false if the feature flag is enabled and currently on saved RAG starter template', () => {
+			mocks.getVariant.mockReturnValueOnce('variant');
+			mocks.getWorkflowById.mockReturnValueOnce({
+				meta: { templateId: 'rag-starter-template' },
+			});
+
+			const { isRagStarterCalloutVisible } = useCalloutHelpers();
+			expect(isRagStarterCalloutVisible.value).toBe(false);
+		});
+	});
+
+	describe('isCalloutDismissed()', () => {
+		it('should return false if callout is not dismissed', async () => {
+			const { isCalloutDismissed } = useCalloutHelpers();
+			const result = isCalloutDismissed('testNode');
+			expect(result).toBe(false);
+		});
+
+		it('should return true if callout is dismissed', async () => {
+			mocks.isCalloutDismissed.mockReturnValueOnce(true);
+
+			const { isCalloutDismissed } = useCalloutHelpers();
+			const result = isCalloutDismissed('testNode');
+			expect(result).toBe(true);
+		});
+	});
+
+	describe('dismissCallout()', () => {
+		it('should dismiss the callout and update user settings', async () => {
+			const { dismissCallout } = useCalloutHelpers();
+
+			await dismissCallout('testCallout');
+			expect(mocks.setCalloutDismissed).toHaveBeenCalledWith('testCallout');
+
+			expect(updateCurrentUserSettings).toHaveBeenCalledWith(mocks.restApiContext, {
+				dismissedCallouts: {
+					testCallout: true,
+				},
+			});
+		});
+	});
+});

packages/frontend/editor-ui/src/composables/useCalloutHelpers.ts

@@ -0,0 +1,81 @@
+import { computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { useRootStore } from '@n8n/stores/useRootStore';
+import { usePostHog } from '@/stores/posthog.store';
+import { useUsersStore } from '@/stores/users.store';
+import { RAG_STARTER_WORKFLOW_EXPERIMENT, VIEWS } from '@/constants';
+import { getRagStarterWorkflowJson } from '@/utils/easyAiWorkflowUtils';
+import { updateCurrentUserSettings } from '@/api/users';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+
+export function useCalloutHelpers() {
+	const route = useRoute();
+	const router = useRouter();
+	const telemetry = useTelemetry();
+	const posthogStore = usePostHog();
+	const rootStore = useRootStore();
+	const workflowsStore = useWorkflowsStore();
+	const usersStore = useUsersStore();
+
+	const openRagStarterTemplate = async (nodeType?: string) => {
+		telemetry.track('User clicked on RAG callout', {
+			node_type: nodeType ?? null,
+		});
+
+		const template = getRagStarterWorkflowJson();
+
+		const { href } = router.resolve({
+			name: VIEWS.TEMPLATE_IMPORT,
+			params: { id: template.meta.templateId },
+			query: { fromJson: 'true', parentFolderId: route.params.folderId },
+		});
+
+		window.open(href, '_blank');
+	};
+
+	const isRagStarterWorkflowExperimentEnabled = computed(() => {
+		return (
+			posthogStore.getVariant(RAG_STARTER_WORKFLOW_EXPERIMENT.name) ===
+			RAG_STARTER_WORKFLOW_EXPERIMENT.variant
+		);
+	});
+
+	const isRagStarterCalloutVisible = computed(() => {
+		const template = getRagStarterWorkflowJson();
+
+		const routeTemplateId = route.query.templateId;
+		const currentWorkflow = workflowsStore.getCurrentWorkflow();
+		const workflow = workflowsStore.getWorkflowById(currentWorkflow.id);
+
+		// Hide the RAG starter callout if we're currently on the RAG starter template
+		if ((routeTemplateId ?? workflow?.meta?.templateId) === template.meta.templateId) {
+			return false;
+		}
+
+		return isRagStarterWorkflowExperimentEnabled.value;
+	});
+
+	const isCalloutDismissed = (callout: string) => {
+		return usersStore.isCalloutDismissed(callout);
+	};
+
+	const dismissCallout = async (callout: string) => {
+		usersStore.setCalloutDismissed(callout);
+
+		await updateCurrentUserSettings(rootStore.restApiContext, {
+			dismissedCallouts: {
+				...usersStore.currentUser?.settings?.dismissedCallouts,
+				[callout]: true,
+			},
+		});
+	};
+
+	return {
+		openRagStarterTemplate,
+		isRagStarterWorkflowExperimentEnabled,
+		isRagStarterCalloutVisible,
+		isCalloutDismissed,
+		dismissCallout,
+	};
+}

packages/frontend/editor-ui/src/constants.ts

@@ -738,10 +738,17 @@ export const WORKFLOW_BUILDER_EXPERIMENT = {
 	variant: 'variant',
 };
 
+export const RAG_STARTER_WORKFLOW_EXPERIMENT = {
+	name: '033_rag_template',
+	control: 'control',
+	variant: 'variant',
+};
+
 export const EXPERIMENTS_TO_TRACK = [
 	EASY_AI_WORKFLOW_EXPERIMENT.name,
 	AI_CREDITS_EXPERIMENT.name,
 	WORKFLOW_BUILDER_EXPERIMENT.name,
+	RAG_STARTER_WORKFLOW_EXPERIMENT.name,
 ];
 
 export const WORKFLOW_EVALUATION_EXPERIMENT = '032_evaluation_mvp';

packages/frontend/editor-ui/src/stores/users.store.test.ts

@@ -90,4 +90,71 @@ describe('users.store', () => {
 			);
 		});
 	});
+
+	describe('isCalloutDismissed', () => {
+		it('should return true if callout is dismissed', () => {
+			const usersStore = useUsersStore();
+
+			usersStore.usersById['1'] = {
+				...mockUser,
+				isDefaultUser: false,
+				isPendingUser: false,
+				mfaEnabled: false,
+				settings: {
+					dismissedCallouts: {
+						testCallout: true,
+					},
+				},
+			};
+			usersStore.currentUserId = '1';
+
+			const isDismissed = usersStore.isCalloutDismissed('testCallout');
+			expect(isDismissed).toBe(true);
+		});
+	});
+
+	describe('setCalloutDismissed', () => {
+		it('should set callout as dismissed in user settings', () => {
+			const usersStore = useUsersStore();
+
+			usersStore.usersById['1'] = {
+				...mockUser,
+				isDefaultUser: false,
+				isPendingUser: false,
+				mfaEnabled: false,
+				settings: {},
+			};
+			usersStore.currentUserId = '1';
+
+			usersStore.setCalloutDismissed('testCallout');
+
+			expect(usersStore.usersById['1'].settings?.dismissedCallouts).toEqual({
+				testCallout: true,
+			});
+		});
+
+		it('should not lose existing dismissed callouts', () => {
+			const usersStore = useUsersStore();
+
+			usersStore.usersById['1'] = {
+				...mockUser,
+				isDefaultUser: false,
+				isPendingUser: false,
+				mfaEnabled: false,
+				settings: {
+					dismissedCallouts: {
+						previousCallout: true,
+					},
+				},
+			};
+			usersStore.currentUserId = '1';
+
+			usersStore.setCalloutDismissed('testCallout');
+
+			expect(usersStore.usersById['1'].settings?.dismissedCallouts).toEqual({
+				previousCallout: true,
+				testCallout: true,
+			});
+		});
+	});
 });

packages/frontend/editor-ui/src/stores/users.store.ts

@@ -91,6 +91,19 @@ export const useUsersStore = defineStore(STORES.USERS, () => {
 		}
 	};
 
+	const isCalloutDismissed = (callout: string) =>
+		Boolean(currentUser.value?.settings?.dismissedCallouts?.[callout]);
+
+	const setCalloutDismissed = (callout: string) => {
+		if (currentUser.value?.settings) {
+			if (!currentUser.value?.settings?.dismissedCallouts) {
+				currentUser.value.settings.dismissedCallouts = {};
+			}
+
+			currentUser.value.settings.dismissedCallouts[callout] = true;
+		}
+	};
+
 	const personalizedNodeTypes = computed(() => {
 		const user = currentUser.value;
 		if (!user) {
@@ -437,6 +450,8 @@ export const useUsersStore = defineStore(STORES.USERS, () => {
 		updateGlobalRole,
 		reset,
 		setEasyAIWorkflowOnboardingDone,
+		isCalloutDismissed,
+		setCalloutDismissed,
 		submitContactEmail,
 	};
 });

packages/frontend/editor-ui/src/utils/easyAiWorkflowUtils.ts

@@ -3,13 +3,6 @@ import { NodeConnectionTypes } from 'n8n-workflow';
 
 /**
  * Generates a workflow JSON object for an AI Agent in n8n.
- *
- * @param {Object} params - The parameters for generating the workflow JSON.
- * @param {boolean} params.isInstanceInAiFreeCreditsExperiment - Indicates if the instance is part of the AI free credits experiment.
- * @param {number} params.withOpenAiFreeCredits - The number of free OpenAI calls available.
- *
- * @remarks
- * This function can be deleted once the free AI credits experiment is removed.
  */
 export const getEasyAiWorkflowJson = (): WorkflowDataWithTemplateId => {
 	return {
@@ -94,3 +87,252 @@ export const getEasyAiWorkflowJson = (): WorkflowDataWithTemplateId => {
 		pinData: {},
 	};
 };
+
+export const getRagStarterWorkflowJson = (): WorkflowDataWithTemplateId => {
+	return {
+		name: 'Demo: RAG in n8n',
+		meta: {
+			templateId: 'rag-starter-template',
+		},
+		nodes: [
+			{
+				parameters: {
+					formTitle: 'Upload your data to test RAG',
+					formFields: {
+						values: [
+							{
+								fieldLabel: 'Upload your file(s)',
+								fieldType: 'file',
+								acceptFileTypes: '.pdf, .csv',
+								requiredField: true,
+							},
+						],
+					},
+					options: {},
+				},
+				type: 'n8n-nodes-base.formTrigger',
+				typeVersion: 2.2,
+				position: [-120, 0],
+				id: 'f7a656ec-83fc-4ed2-a089-57a9def662b7',
+				name: 'Upload your file here',
+				webhookId: '82848bc4-5ea2-4e5a-8bb6-3c09b94a8c5d',
+			},
+			{
+				parameters: {
+					options: {},
+				},
+				type: '@n8n/n8n-nodes-langchain.embeddingsOpenAi',
+				typeVersion: 1.2,
+				position: [520, 480],
+				id: '6ea78663-cf2f-4f2d-8e68-43047c2afd87',
+				name: 'Embeddings OpenAI',
+				credentials: {
+					openAiApi: {
+						id: '14',
+						name: 'OpenAi account',
+					},
+				},
+			},
+			{
+				parameters: {
+					dataType: 'binary',
+					options: {},
+				},
+				type: '@n8n/n8n-nodes-langchain.documentDefaultDataLoader',
+				typeVersion: 1.1,
+				position: [320, 160],
+				id: '94aecac0-03f9-4915-932b-d14a2576607b',
+				name: 'Default Data Loader',
+			},
+			{
+				parameters: {
+					content:
+						'### Readme\nLoad your data into a vector database with the 📚 **Load Data** flow, and then use your data as chat context with the 🐕 **Retriever** flow.\n\n**Quick start**\n1. Click on the `Execute Workflow` button to run the 📚 **Load Data** flow.\n2. Click on `Open Chat` button to run the 🐕 **Retriever** flow. Then ask a question about content from your document(s)\n\n\nFor more info, check our docs on RAG in n8n',
+					height: 300,
+					width: 440,
+					color: 4,
+				},
+				type: 'n8n-nodes-base.stickyNote',
+				position: [-660, -60],
+				typeVersion: 1,
+				id: '0d07742b-0b36-4c2e-990c-266cbe6e2d4d',
+				name: 'Sticky Note',
+			},
+			{
+				parameters: {
+					content: '### 📚 Load Data Flow',
+					height: 460,
+					width: 700,
+					color: 7,
+				},
+				type: 'n8n-nodes-base.stickyNote',
+				position: [-180, -60],
+				typeVersion: 1,
+				id: 'd19d04f3-5231-4e47-bed7-9f24a4a8f582',
+				name: 'Sticky Note1',
+			},
+			{
+				parameters: {
+					mode: 'insert',
+					memoryKey: {
+						__rl: true,
+						value: 'vector_store_key',
+						mode: 'list',
+						cachedResultName: 'vector_store_key',
+					},
+				},
+				type: '@n8n/n8n-nodes-langchain.vectorStoreInMemory',
+				typeVersion: 1.2,
+				position: [60, 0],
+				id: 'bf50a11f-ca6a-4e04-a6d2-42fee272b260',
+				name: 'Insert Data to Store',
+			},
+			{
+				parameters: {
+					mode: 'retrieve-as-tool',
+					toolName: 'knowledge_base',
+					toolDescription: 'Use this knowledge base to answer questions from the user',
+					memoryKey: {
+						__rl: true,
+						mode: 'list',
+						value: 'vector_store_key',
+					},
+				},
+				type: '@n8n/n8n-nodes-langchain.vectorStoreInMemory',
+				typeVersion: 1.2,
+				position: [940, 200],
+				id: '09c0db62-5413-440e-8c13-fb6bb66d9b6a',
+				name: 'Query Data Tool',
+			},
+			{
+				parameters: {
+					options: {},
+				},
+				type: '@n8n/n8n-nodes-langchain.agent',
+				typeVersion: 2,
+				position: [940, -20],
+				id: '579aed76-9644-42d1-ac13-7369059ff1c2',
+				name: 'AI Agent',
+			},
+			{
+				parameters: {
+					options: {},
+				},
+				type: '@n8n/n8n-nodes-langchain.chatTrigger',
+				typeVersion: 1.1,
+				position: [720, -20],
+				id: '9c30de61-935a-471f-ae88-ec5f67beeefc',
+				name: 'When chat message received',
+				webhookId: '4091fa09-fb9a-4039-9411-7104d213f601',
+			},
+			{
+				parameters: {
+					model: {
+						__rl: true,
+						mode: 'list',
+						value: 'gpt-4o-mini',
+					},
+					options: {},
+				},
+				type: '@n8n/n8n-nodes-langchain.lmChatOpenAi',
+				typeVersion: 1.2,
+				position: [720, 200],
+				id: 'b5aa8942-9cd5-4c2f-bd77-7a0ceb921bac',
+				name: 'OpenAI Chat Model',
+				credentials: {
+					openAiApi: {
+						id: '14',
+						name: 'OpenAi account',
+					},
+				},
+			},
+			{
+				parameters: {
+					content: '### 🐕 2. Retriever Flow',
+					height: 460,
+					width: 680,
+					color: 7,
+				},
+				type: 'n8n-nodes-base.stickyNote',
+				position: [600, -60],
+				typeVersion: 1,
+				id: '28bc73a1-e64a-47bf-ac1c-ffe644894ea5',
+				name: 'Sticky Note2',
+			},
+		],
+		connections: {
+			'Upload your file here': {
+				main: [
+					[
+						{
+							node: 'Insert Data to Store',
+							type: 'main',
+							index: 0,
+						},
+					],
+				],
+			},
+			'Embeddings OpenAI': {
+				ai_embedding: [
+					[
+						{
+							node: 'Insert Data to Store',
+							type: 'ai_embedding',
+							index: 0,
+						},
+						{
+							node: 'Query Data Tool',
+							type: 'ai_embedding',
+							index: 0,
+						},
+					],
+				],
+			},
+			'Default Data Loader': {
+				ai_document: [
+					[
+						{
+							node: 'Insert Data to Store',
+							type: 'ai_document',
+							index: 0,
+						},
+					],
+				],
+			},
+			'Query Data Tool': {
+				ai_tool: [
+					[
+						{
+							node: 'AI Agent',
+							type: 'ai_tool',
+							index: 0,
+						},
+					],
+				],
+			},
+			'When chat message received': {
+				main: [
+					[
+						{
+							node: 'AI Agent',
+							type: 'main',
+							index: 0,
+						},
+					],
+				],
+			},
+			'OpenAI Chat Model': {
+				ai_languageModel: [
+					[
+						{
+							node: 'AI Agent',
+							type: 'ai_languageModel',
+							index: 0,
+						},
+					],
+				],
+			},
+		},
+		pinData: {},
+	};
+};

packages/frontend/editor-ui/src/views/NodeView.vue

@@ -121,7 +121,7 @@ import { getResourcePermissions } from '@/permissions';
 import NodeViewUnfinishedWorkflowMessage from '@/components/NodeViewUnfinishedWorkflowMessage.vue';
 import { createCanvasConnectionHandleString } from '@/utils/canvasUtils';
 import { isValidNodeConnectionType } from '@/utils/typeGuards';
-import { getEasyAiWorkflowJson } from '@/utils/easyAiWorkflowUtils';
+import { getEasyAiWorkflowJson, getRagStarterWorkflowJson } from '@/utils/easyAiWorkflowUtils';
 import type { CanvasLayoutEvent } from '@/composables/useCanvasLayout';
 import { useWorkflowSaving } from '@/composables/useWorkflowSaving';
 import { useBuilderStore } from '@/stores/builder.store';
@@ -374,7 +374,22 @@ async function initializeRoute(force = false) {
 
 		if (loadWorkflowFromJSON) {
 			const easyAiWorkflowJson = getEasyAiWorkflowJson();
-			await openTemplateFromWorkflowJSON(easyAiWorkflowJson);
+			const ragStarterWorkflowJson = getRagStarterWorkflowJson();
+
+			switch (templateId) {
+				case easyAiWorkflowJson.meta.templateId:
+					await openTemplateFromWorkflowJSON(easyAiWorkflowJson);
+					break;
+				case ragStarterWorkflowJson.meta.templateId:
+					await openTemplateFromWorkflowJSON(ragStarterWorkflowJson);
+					break;
+				default:
+					toast.showError(
+						new Error(i18n.baseText('nodeView.couldntLoadWorkflow.invalidWorkflowObject')),
+						i18n.baseText('nodeView.couldntImportWorkflow'),
+					);
+					await router.replace({ name: VIEWS.NEW_WORKFLOW });
+			}
 		} else {
 			await openWorkflowTemplate(templateId.toString());
 		}