feat(core): Add support for building LLM applications (#7235)

This extracts all core and editor changes from #7246 and #7137, so that
we can get these changes merged first.

ADO-1120

[DB Tests](https://github.com/n8n-io/n8n/actions/runs/6379749011)
[E2E Tests](https://github.com/n8n-io/n8n/actions/runs/6379751480)
[Workflow Tests](https://github.com/n8n-io/n8n/actions/runs/6379752828)

---------

Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
Co-authored-by: Oleg Ivaniv <me@olegivaniv.com>
Co-authored-by: Alex Grozav <alex@grozav.com>
Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>

cypress/e2e/12-canvas.cy.ts

@@ -158,7 +158,7 @@ describe('Canvas Node Manipulation and Navigation', () => {
 		WorkflowPage.getters.canvasNodeByName(MANUAL_TRIGGER_NODE_DISPLAY_NAME).click();
 		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
 		WorkflowPage.actions.zoomToFit();
-		cy.drag('[data-test-id="canvas-node"].jtk-drag-selected', [50, 150]);
+		cy.drag('[data-test-id="canvas-node"].jtk-drag-selected', [50, 150], { clickToFinish: true });
 		WorkflowPage.getters
 			.canvasNodes()
 			.last()

packages/cli/src/ActiveWorkflowRunner.ts

@@ -515,6 +515,7 @@ export class ActiveWorkflowRunner implements IWebhookManager {
 			},
 			executionData: {
 				contextData: {},
+				metadata: {},
 				nodeExecutionStack,
 				waitingExecution: {},
 				waitingExecutionSource: {},

packages/cli/src/GenericHelpers.ts

@@ -141,6 +141,7 @@ export async function createErrorExecution(
 		},
 		executionData: {
 			contextData: {},
+			metadata: {},
 			nodeExecutionStack: [
 				{
 					node,

packages/cli/src/Server.ts

@@ -249,6 +249,7 @@ export class Server extends AbstractServer {
 			urlBaseWebhook,
 			urlBaseEditor: instanceBaseUrl,
 			versionCli: '',
+			isBetaRelease: config.getEnv('generic.isBetaRelease'),
 			oauthCallbackUrls: {
 				oauth1: `${instanceBaseUrl}/${this.restEndpoint}/oauth1-credential/callback`,
 				oauth2: `${instanceBaseUrl}/${this.restEndpoint}/oauth2-credential/callback`,

packages/cli/src/WorkflowExecuteAdditionalData.ts

@@ -32,6 +32,7 @@ import type {
 import {
 	ErrorReporterProxy as ErrorReporter,
 	LoggerProxy as Logger,
+	NodeOperationError,
 	Workflow,
 	WorkflowHooks,
 } from 'n8n-workflow';
@@ -46,6 +47,7 @@ import type {
 	IWorkflowExecuteProcess,
 	IWorkflowExecutionDataProcess,
 	IWorkflowErrorData,
+	IPushDataType,
 	ExecutionPayload,
 } from '@/Interfaces';
 import { NodeTypes } from '@/NodeTypes';
@@ -69,6 +71,41 @@ import { restoreBinaryDataId } from './executionLifecycleHooks/restoreBinaryData
 
 const ERROR_TRIGGER_TYPE = config.getEnv('nodes.errorTriggerType');
 
+export function objectToError(errorObject: unknown, workflow: Workflow): Error {
+	// TODO: Expand with other error types
+	if (errorObject instanceof Error) {
+		// If it's already an Error instance, return it as is.
+		return errorObject;
+	} else if (errorObject && typeof errorObject === 'object' && 'message' in errorObject) {
+		// If it's an object with a 'message' property, create a new Error instance.
+		let error: Error | undefined;
+		if ('node' in errorObject) {
+			const node = workflow.getNode((errorObject.node as { name: string }).name);
+			if (node) {
+				error = new NodeOperationError(
+					node,
+					errorObject as unknown as Error,
+					errorObject as object,
+				);
+			}
+		}
+
+		if (error === undefined) {
+			error = new Error(errorObject.message as string);
+		}
+
+		if ('stack' in errorObject) {
+			// If there's a 'stack' property, set it on the new Error instance.
+			error.stack = errorObject.stack as string;
+		}
+
+		return error;
+	} else {
+		// If it's neither an Error nor an object with a 'message' property, create a generic Error.
+		return new Error('An error occurred');
+	}
+}
+
 /**
  * Checks if there was an error and if errorWorkflow or a trigger is defined. If so it collects
  * all the data and executes it
@@ -369,6 +406,7 @@ export function hookFunctionsPreExecute(parentProcessMode?: string): IWorkflowEx
 							},
 							executionData: {
 								contextData: {},
+								metadata: {},
 								nodeExecutionStack: [],
 								waitingExecution: {},
 								waitingExecutionSource: {},
@@ -709,6 +747,7 @@ export async function getRunData(
 		},
 		executionData: {
 			contextData: {},
+			metadata: {},
 			nodeExecutionStack,
 			waitingExecution: {},
 			waitingExecutionSource: {},
@@ -743,7 +782,7 @@ export async function getWorkflowData(
 
 		workflowData = await WorkflowsService.get({ id: workflowInfo.id }, { relations });
 
-		if (workflowData === undefined) {
+		if (workflowData === undefined || workflowData === null) {
 			throw new Error(`The workflow with the id "${workflowInfo.id}" does not exist.`);
 		}
 	} else {
@@ -910,11 +949,14 @@ async function executeWorkflow(
 			executionId,
 			fullExecutionData,
 		);
-		throw {
-			...error,
-			stack: error.stack,
-			message: error.message,
-		};
+		throw objectToError(
+			{
+				...error,
+				stack: error.stack,
+				message: error.message,
+			},
+			workflow,
+		);
 	}
 
 	await externalHooks.run('workflow.postExecute', [data, workflowData, executionId]);
@@ -932,10 +974,13 @@ async function executeWorkflow(
 	// Workflow did fail
 	const { error } = data.data.resultData;
 	// eslint-disable-next-line @typescript-eslint/no-throw-literal
-	throw {
-		...error,
-		stack: error!.stack,
-	};
+	throw objectToError(
+		{
+			...error,
+			stack: error!.stack,
+		},
+		workflow,
+	);
 }
 
 export function setExecutionStatus(status: ExecutionStatus) {
@@ -951,8 +996,7 @@ export function setExecutionStatus(status: ExecutionStatus) {
 		});
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function sendMessageToUI(source: string, messages: any[]) {
+export function sendDataToUI(type: string, data: IDataObject | IDataObject[]) {
 	const { sessionId } = this;
 	if (sessionId === undefined) {
 		return;
@@ -961,14 +1005,7 @@ export function sendMessageToUI(source: string, messages: any[]) {
 	// Push data to session which started workflow
 	try {
 		const pushInstance = Container.get(Push);
-		pushInstance.send(
-			'sendConsoleMessage',
-			{
-				source: `[Node: "${source}"]`,
-				messages,
-			},
-			sessionId,
-		);
+		pushInstance.send(type as IPushDataType, data, sessionId);
 	} catch (error) {
 		Logger.warn(`There was a problem sending message to UI: ${error.message}`);
 	}

packages/cli/src/WorkflowHelpers.ts

@@ -74,6 +74,7 @@ export function generateFailedExecutionFromError(
 			},
 			executionData: {
 				contextData: {},
+				metadata: {},
 				nodeExecutionStack: [
 					{
 						node,
@@ -252,6 +253,7 @@ export async function executeErrorWorkflow(
 			},
 			executionData: {
 				contextData: {},
+				metadata: {},
 				nodeExecutionStack,
 				waitingExecution: {},
 				waitingExecutionSource: {},

packages/cli/src/WorkflowRunner.ts

@@ -327,7 +327,7 @@ export class WorkflowRunner {
 				executionId,
 			});
 
-			additionalData.sendMessageToUI = WorkflowExecuteAdditionalData.sendMessageToUI.bind({
+			additionalData.sendDataToUI = WorkflowExecuteAdditionalData.sendDataToUI.bind({
 				sessionId: data.sessionId,
 			});
 
@@ -344,8 +344,7 @@ export class WorkflowRunner {
 			} else if (
 				data.runData === undefined ||
 				data.startNodes === undefined ||
-				data.startNodes.length === 0 ||
-				data.destinationNode === undefined
+				data.startNodes.length === 0
 			) {
 				Logger.debug(`Execution ID ${executionId} will run executing all nodes.`, { executionId });
 				// Execute all nodes
@@ -736,11 +735,11 @@ export class WorkflowRunner {
 				if (responsePromise) {
 					responsePromise.resolve(WebhookHelpers.decodeWebhookResponse(message.data.response));
 				}
-			} else if (message.type === 'sendMessageToUI') {
+			} else if (message.type === 'sendDataToUI') {
 				// eslint-disable-next-line @typescript-eslint/no-unsafe-call
-				WorkflowExecuteAdditionalData.sendMessageToUI.bind({ sessionId: data.sessionId })(
-					message.data.source,
-					message.data.message,
+				WorkflowExecuteAdditionalData.sendDataToUI.bind({ sessionId: data.sessionId })(
+					message.data.type,
+					message.data.data,
 				);
 			} else if (message.type === 'processError') {
 				clearTimeout(executionTimeout);

packages/cli/src/WorkflowRunnerProcess.ts

@@ -189,13 +189,13 @@ class WorkflowRunnerProcess {
 			executionId: inputData.executionId,
 		});
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		additionalData.sendMessageToUI = async (source: string, message: any) => {
+		additionalData.sendDataToUI = async (type: string, data: IDataObject | IDataObject[]) => {
 			if (workflowRunner.data!.executionMode !== 'manual') {
 				return;
 			}
 
 			try {
-				await sendToParentProcess('sendMessageToUI', { source, message });
+				await sendToParentProcess('sendDataToUI', { type, data });
 			} catch (error) {
 				ErrorReporter.error(error);
 				this.logger.error(
@@ -291,8 +291,7 @@ class WorkflowRunnerProcess {
 		if (
 			this.data.runData === undefined ||
 			this.data.startNodes === undefined ||
-			this.data.startNodes.length === 0 ||
-			this.data.destinationNode === undefined
+			this.data.startNodes.length === 0
 		) {
 			// Execute all nodes
 

packages/cli/src/config/schema.ts

@@ -431,6 +431,13 @@ export const schema = {
 			format: ['main', 'webhook', 'worker'] as const,
 			default: 'main',
 		},
+
+		isBetaRelease: {
+			doc: 'If it is a beta release',
+			format: 'Boolean',
+			default: false,
+			env: 'IS_BETA_RELEASE',
+		},
 	},
 
 	// How n8n can be reached (Editor & REST-API)

packages/core/src/NodeExecuteFunctions.ts

@@ -39,6 +39,8 @@ import pick from 'lodash/pick';
 import { extension, lookup } from 'mime-types';
 import type {
 	BinaryHelperFunctions,
+	ConnectionTypes,
+	ExecutionError,
 	FieldType,
 	FileSystemHelperFunctions,
 	FunctionsBase,
@@ -66,6 +68,8 @@ import type {
 	INodeCredentialDescription,
 	INodeCredentialsDetails,
 	INodeExecutionData,
+	INodeInputConfiguration,
+	INodeOutputConfiguration,
 	INodeProperties,
 	INodePropertyCollection,
 	INodePropertyOptions,
@@ -75,6 +79,7 @@ import type {
 	IPollFunctions,
 	IRunExecutionData,
 	ISourceData,
+	ITaskData,
 	ITaskDataConnections,
 	ITriggerFunctions,
 	IWebhookData,
@@ -106,6 +111,7 @@ import {
 	isObjectEmpty,
 	isResourceMapperValue,
 	validateFieldType,
+	ExecutionBaseError,
 } from 'n8n-workflow';
 import type { Token } from 'oauth-1.0a';
 import clientOAuth1 from 'oauth-1.0a';
@@ -2253,6 +2259,9 @@ export function getNodeParameter(
 			timezone,
 			additionalKeys,
 			executeData,
+			false,
+			{},
+			options?.contextNode?.name,
 		);
 		cleanupParameterData(returnData);
 	} catch (e) {
@@ -2380,6 +2389,106 @@ export function getWebhookDescription(
 	return undefined;
 }
 
+// TODO: Change options to an object
+const addExecutionDataFunctions = async (
+	type: 'input' | 'output',
+	nodeName: string,
+	data: INodeExecutionData[][] | ExecutionBaseError,
+	runExecutionData: IRunExecutionData,
+	connectionType: ConnectionTypes,
+	additionalData: IWorkflowExecuteAdditionalData,
+	sourceNodeName: string,
+	sourceNodeRunIndex: number,
+	currentNodeRunIndex: number,
+): Promise<void> => {
+	if (connectionType === 'main') {
+		throw new Error(`Setting the ${type} is not supported for the main connection!`);
+	}
+
+	let taskData: ITaskData | undefined;
+	if (type === 'input') {
+		taskData = {
+			startTime: new Date().getTime(),
+			executionTime: 0,
+			executionStatus: 'running',
+			source: [null],
+		};
+	} else {
+		// At the moment we expect that there is always an input sent before the output
+		taskData = get(
+			runExecutionData,
+			['resultData', 'runData', nodeName, currentNodeRunIndex],
+			undefined,
+		);
+		if (taskData === undefined) {
+			return;
+		}
+	}
+	taskData = taskData!;
+
+	if (data instanceof Error) {
+		// TODO: Or "failed", what is the difference
+		taskData.executionStatus = 'error';
+		taskData.error = data;
+	} else {
+		if (type === 'output') {
+			taskData.executionStatus = 'success';
+		}
+		taskData.data = {
+			[connectionType]: data,
+		} as ITaskDataConnections;
+	}
+
+	if (type === 'input') {
+		if (!(data instanceof Error)) {
+			taskData.inputOverride = {
+				[connectionType]: data,
+			} as ITaskDataConnections;
+		}
+
+		if (!runExecutionData.resultData.runData.hasOwnProperty(nodeName)) {
+			runExecutionData.resultData.runData[nodeName] = [];
+		}
+
+		runExecutionData.resultData.runData[nodeName][currentNodeRunIndex] = taskData;
+		if (additionalData.sendDataToUI) {
+			additionalData.sendDataToUI('nodeExecuteBefore', {
+				executionId: additionalData.executionId,
+				nodeName,
+			});
+		}
+	} else {
+		// Outputs
+		taskData.executionTime = new Date().getTime() - taskData.startTime;
+
+		if (additionalData.sendDataToUI) {
+			additionalData.sendDataToUI('nodeExecuteAfter', {
+				executionId: additionalData.executionId,
+				nodeName,
+				data: taskData,
+			});
+		}
+
+		let sourceTaskData = get(runExecutionData, `executionData.metadata[${sourceNodeName}]`);
+
+		if (!sourceTaskData) {
+			runExecutionData.executionData!.metadata[sourceNodeName] = [];
+			sourceTaskData = runExecutionData.executionData!.metadata[sourceNodeName];
+		}
+
+		if (!sourceTaskData[sourceNodeRunIndex]) {
+			sourceTaskData[sourceNodeRunIndex] = {
+				subRun: [],
+			};
+		}
+
+		sourceTaskData[sourceNodeRunIndex]!.subRun!.push({
+			node: nodeName,
+			runIndex: currentNodeRunIndex,
+		});
+	}
+};
+
 const getCommonWorkflowFunctions = (
 	workflow: Workflow,
 	node: INode,
@@ -2787,6 +2896,192 @@ export function getExecuteFunctions(
 			getContext(type: string): IContextObject {
 				return NodeHelpers.getContext(runExecutionData, type, node);
 			},
+			async getInputConnectionData(
+				inputName: ConnectionTypes,
+				itemIndex: number,
+				// TODO: Not implemented yet, and maybe also not needed
+				inputIndex?: number,
+			): Promise<unknown> {
+				const node = this.getNode();
+				const nodeType = workflow.nodeTypes.getByNameAndVersion(node.type, node.typeVersion);
+
+				const inputs = NodeHelpers.getNodeInputs(workflow, node, nodeType.description);
+
+				let inputConfiguration = inputs.find((input) => {
+					if (typeof input === 'string') {
+						return input === inputName;
+					}
+					return input.type === inputName;
+				});
+
+				if (inputConfiguration === undefined) {
+					throw new Error(`The node "${node.name}" does not have an input of type "${inputName}"`);
+				}
+
+				if (typeof inputConfiguration === 'string') {
+					inputConfiguration = {
+						type: inputConfiguration,
+					} as INodeInputConfiguration;
+				}
+
+				const parentNodes = workflow.getParentNodes(node.name, inputName, 1);
+				if (parentNodes.length === 0) {
+					return inputConfiguration.maxConnections === 1 ? undefined : [];
+				}
+
+				const constParentNodes = parentNodes
+					.map((nodeName) => {
+						return workflow.getNode(nodeName) as INode;
+					})
+					.filter((connectedNode) => connectedNode.disabled !== true)
+					.map(async (connectedNode) => {
+						const nodeType = workflow.nodeTypes.getByNameAndVersion(
+							connectedNode.type,
+							connectedNode.typeVersion,
+						);
+
+						if (!nodeType.supplyData) {
+							throw new Error(
+								`The node "${connectedNode.name}" does not have a "supplyData" method defined!`,
+							);
+						}
+
+						const context = Object.assign({}, this);
+
+						context.getNodeParameter = (
+							parameterName: string,
+							itemIndex: number,
+							fallbackValue?: any,
+							options?: IGetNodeParameterOptions,
+						) => {
+							return getNodeParameter(
+								workflow,
+								runExecutionData,
+								runIndex,
+								connectionInputData,
+								connectedNode,
+								parameterName,
+								itemIndex,
+								mode,
+								additionalData.timezone,
+								getAdditionalKeys(additionalData, mode, runExecutionData),
+								executeData,
+								fallbackValue,
+								{ ...(options || {}), contextNode: node },
+							) as any;
+						};
+
+						// TODO: Check what else should be overwritten
+						context.getNode = () => {
+							return deepCopy(connectedNode);
+						};
+
+						context.getCredentials = async (key: string) => {
+							try {
+								return await getCredentials(
+									workflow,
+									connectedNode,
+									key,
+									additionalData,
+									mode,
+									runExecutionData,
+									runIndex,
+									connectionInputData,
+									itemIndex,
+								);
+							} catch (error) {
+								// Display the error on the node which is causing it
+
+								let currentNodeRunIndex = 0;
+								if (runExecutionData.resultData.runData.hasOwnProperty(node.name)) {
+									currentNodeRunIndex = runExecutionData.resultData.runData[node.name].length;
+								}
+
+								await addExecutionDataFunctions(
+									'input',
+									connectedNode.name,
+									error,
+									runExecutionData,
+									inputName,
+									additionalData,
+									node.name,
+									runIndex,
+									currentNodeRunIndex,
+								);
+
+								throw error;
+							}
+						};
+
+						try {
+							return await nodeType.supplyData.call(context);
+						} catch (error) {
+							if (!(error instanceof ExecutionBaseError)) {
+								error = new NodeOperationError(connectedNode, error, {
+									itemIndex,
+								});
+							}
+
+							let currentNodeRunIndex = 0;
+							if (runExecutionData.resultData.runData.hasOwnProperty(node.name)) {
+								currentNodeRunIndex = runExecutionData.resultData.runData[node.name].length;
+							}
+
+							// Display the error on the node which is causing it
+							await addExecutionDataFunctions(
+								'input',
+								connectedNode.name,
+								error,
+								runExecutionData,
+								inputName,
+								additionalData,
+								node.name,
+								runIndex,
+								currentNodeRunIndex,
+							);
+
+							// Display on the calling node which node has the error
+							throw new NodeOperationError(
+								connectedNode,
+								`Error on node "${connectedNode.name}" which is connected via input "${inputName}"`,
+								{
+									itemIndex,
+								},
+							);
+						}
+					});
+
+				// Validate the inputs
+				const nodes = await Promise.all(constParentNodes);
+
+				if (inputConfiguration.required && nodes.length === 0) {
+					throw new NodeOperationError(node, `A ${inputName} processor node must be connected!`);
+				}
+				if (
+					inputConfiguration.maxConnections !== undefined &&
+					nodes.length > inputConfiguration.maxConnections
+				) {
+					throw new NodeOperationError(
+						node,
+						`Only ${inputConfiguration.maxConnections} ${inputName} processor nodes are/is allowed to be connected!`,
+					);
+				}
+
+				return inputConfiguration.maxConnections === 1
+					? (nodes || [])[0]?.response
+					: nodes.map((node) => node.response);
+			},
+			getNodeOutputs(): INodeOutputConfiguration[] {
+				const nodeType = workflow.nodeTypes.getByNameAndVersion(node.type, node.typeVersion);
+				return NodeHelpers.getNodeOutputs(workflow, node, nodeType.description).map((output) => {
+					if (typeof output === 'string') {
+						return {
+							type: output,
+						};
+					}
+					return output;
+				});
+			},
 			getInputData: (inputIndex = 0, inputName = 'main') => {
 				if (!inputData.hasOwnProperty(inputName)) {
 					// Return empty array because else it would throw error when nothing is connected to input
@@ -2863,7 +3158,7 @@ export function getExecuteFunctions(
 					return;
 				}
 				try {
-					if (additionalData.sendMessageToUI) {
+					if (additionalData.sendDataToUI) {
 						args = args.map((arg) => {
 							// prevent invalid dates from being logged as null
 							if (arg.isLuxonDateTime && arg.invalidReason) return { ...arg };
@@ -2875,7 +3170,10 @@ export function getExecuteFunctions(
 							return arg;
 						});
 
-						additionalData.sendMessageToUI(node.name, args);
+						additionalData.sendDataToUI('sendConsoleMessage', {
+							source: `[Node: "${node.name}"]`,
+							messages: args,
+						});
 					}
 				} catch (error) {
 					Logger.warn(`There was a problem sending message to UI: ${error.message}`);
@@ -2884,6 +3182,60 @@ export function getExecuteFunctions(
 			async sendResponse(response: IExecuteResponsePromiseData): Promise<void> {
 				await additionalData.hooks?.executeHookFunctions('sendResponse', [response]);
 			},
+
+			addInputData(
+				connectionType: ConnectionTypes,
+				data: INodeExecutionData[][] | ExecutionError,
+			): { index: number } {
+				const nodeName = this.getNode().name;
+				let currentNodeRunIndex = 0;
+				if (runExecutionData.resultData.runData.hasOwnProperty(nodeName)) {
+					currentNodeRunIndex = runExecutionData.resultData.runData[nodeName].length;
+				}
+
+				addExecutionDataFunctions(
+					'input',
+					this.getNode().name,
+					data,
+					runExecutionData,
+					connectionType,
+					additionalData,
+					node.name,
+					runIndex,
+					currentNodeRunIndex,
+				).catch((error) => {
+					Logger.warn(
+						`There was a problem logging input data of node "${this.getNode().name}": ${
+							error.message
+						}`,
+					);
+				});
+
+				return { index: currentNodeRunIndex };
+			},
+			addOutputData(
+				connectionType: ConnectionTypes,
+				currentNodeRunIndex: number,
+				data: INodeExecutionData[][] | ExecutionError,
+			): void {
+				addExecutionDataFunctions(
+					'output',
+					this.getNode().name,
+					data,
+					runExecutionData,
+					connectionType,
+					additionalData,
+					node.name,
+					runIndex,
+					currentNodeRunIndex,
+				).catch((error) => {
+					Logger.warn(
+						`There was a problem logging output data of node "${this.getNode().name}": ${
+							error.message
+						}`,
+					);
+				});
+			},
 			helpers: {
 				createDeferredPromise,
 				...getRequestHelperFunctions(workflow, node, additionalData),

packages/core/src/WorkflowExecute.ts

@@ -23,6 +23,7 @@ import type {
 	ITaskData,
 	ITaskDataConnections,
 	ITaskDataConnectionsSource,
+	ITaskMetadata,
 	IWaitingForExecution,
 	IWaitingForExecutionSource,
 	NodeApiError,
@@ -65,6 +66,7 @@ export class WorkflowExecute {
 			executionData: {
 				contextData: {},
 				nodeExecutionStack: [],
+				metadata: {},
 				waitingExecution: {},
 				waitingExecutionSource: {},
 			},
@@ -133,6 +135,7 @@ export class WorkflowExecute {
 			executionData: {
 				contextData: {},
 				nodeExecutionStack,
+				metadata: {},
 				waitingExecution: {},
 				waitingExecutionSource: {},
 			},
@@ -160,7 +163,7 @@ export class WorkflowExecute {
 		workflow: Workflow,
 		runData: IRunData,
 		startNodes: string[],
-		destinationNode: string,
+		destinationNode?: string,
 		pinData?: IPinData,
 	): PCancelable<IRun> {
 		let incomingNodeConnections: INodeConnections | undefined;
@@ -169,6 +172,7 @@ export class WorkflowExecute {
 		this.status = 'running';
 
 		const runIndex = 0;
+		let runNodeFilter: string[] | undefined;
 
 		// Initialize the nodeExecutionStack and waitingExecution with
 		// the data from runData
@@ -182,7 +186,6 @@ export class WorkflowExecute {
 			let incomingSourceData: ITaskDataConnectionsSource | null = null;
 
 			if (incomingNodeConnections === undefined) {
-				// If it has no incoming data add the default empty data
 				incomingData.push([
 					{
 						json: {},
@@ -202,6 +205,9 @@ export class WorkflowExecute {
 						if (node && pinData && pinData[node.name]) {
 							incomingData.push(pinData[node.name]);
 						} else {
+							if (!runData[connection.node]) {
+								continue;
+							}
 							const nodeIncomingData =
 								runData[connection.node][runIndex]?.data?.[connection.type][connection.index];
 							if (nodeIncomingData) {
@@ -226,56 +232,57 @@ export class WorkflowExecute {
 
 			nodeExecutionStack.push(executeData);
 
-			// Check if the destinationNode has to be added as waiting
-			// because some input data is already fully available
-			incomingNodeConnections = workflow.connectionsByDestinationNode[destinationNode];
-			if (incomingNodeConnections !== undefined) {
-				for (const connections of incomingNodeConnections.main) {
-					for (let inputIndex = 0; inputIndex < connections.length; inputIndex++) {
-						connection = connections[inputIndex];
+			if (destinationNode) {
+				// Check if the destinationNode has to be added as waiting
+				// because some input data is already fully available
+				incomingNodeConnections = workflow.connectionsByDestinationNode[destinationNode];
+				if (incomingNodeConnections !== undefined) {
+					for (const connections of incomingNodeConnections.main) {
+						for (let inputIndex = 0; inputIndex < connections.length; inputIndex++) {
+							connection = connections[inputIndex];
 
-						if (waitingExecution[destinationNode] === undefined) {
-							waitingExecution[destinationNode] = {};
-							waitingExecutionSource[destinationNode] = {};
-						}
-						if (waitingExecution[destinationNode][runIndex] === undefined) {
-							waitingExecution[destinationNode][runIndex] = {};
-							waitingExecutionSource[destinationNode][runIndex] = {};
-						}
-						if (waitingExecution[destinationNode][runIndex][connection.type] === undefined) {
-							waitingExecution[destinationNode][runIndex][connection.type] = [];
-							waitingExecutionSource[destinationNode][runIndex][connection.type] = [];
-						}
+							if (waitingExecution[destinationNode] === undefined) {
+								waitingExecution[destinationNode] = {};
+								waitingExecutionSource[destinationNode] = {};
+							}
+							if (waitingExecution[destinationNode][runIndex] === undefined) {
+								waitingExecution[destinationNode][runIndex] = {};
+								waitingExecutionSource[destinationNode][runIndex] = {};
+							}
+							if (waitingExecution[destinationNode][runIndex][connection.type] === undefined) {
+								waitingExecution[destinationNode][runIndex][connection.type] = [];
+								waitingExecutionSource[destinationNode][runIndex][connection.type] = [];
+							}
 
-						if (runData[connection.node] !== undefined) {
-							// Input data exists so add as waiting
-							// incomingDataDestination.push(runData[connection.node!][runIndex].data![connection.type][connection.index]);
-							waitingExecution[destinationNode][runIndex][connection.type].push(
-								runData[connection.node][runIndex].data![connection.type][connection.index],
-							);
-							waitingExecutionSource[destinationNode][runIndex][connection.type].push({
-								previousNode: connection.node,
-								previousNodeOutput: connection.index || undefined,
-								previousNodeRun: runIndex || undefined,
-							} as ISourceData);
-						} else {
-							waitingExecution[destinationNode][runIndex][connection.type].push(null);
-							waitingExecutionSource[destinationNode][runIndex][connection.type].push(null);
+							if (runData[connection.node] !== undefined) {
+								// Input data exists so add as waiting
+								// incomingDataDestination.push(runData[connection.node!][runIndex].data![connection.type][connection.index]);
+								waitingExecution[destinationNode][runIndex][connection.type].push(
+									runData[connection.node][runIndex].data![connection.type][connection.index],
+								);
+								waitingExecutionSource[destinationNode][runIndex][connection.type].push({
+									previousNode: connection.node,
+									previousNodeOutput: connection.index || undefined,
+									previousNodeRun: runIndex || undefined,
+								} as ISourceData);
+							} else {
+								waitingExecution[destinationNode][runIndex][connection.type].push(null);
+								waitingExecutionSource[destinationNode][runIndex][connection.type].push(null);
+							}
 						}
 					}
 				}
+
+				// Only run the parent nodes and no others
+				// eslint-disable-next-line prefer-const
+				runNodeFilter = workflow
+					.getParentNodes(destinationNode)
+					.filter((parentNodeName) => !workflow.getNode(parentNodeName)?.disabled);
+
+				runNodeFilter.push(destinationNode);
 			}
 		}
 
-		// Only run the parent nodes and no others
-		let runNodeFilter: string[] | undefined;
-		// eslint-disable-next-line prefer-const
-		runNodeFilter = workflow
-			.getParentNodes(destinationNode)
-			.filter((parentNodeName) => !workflow.getNode(parentNodeName)?.disabled);
-
-		runNodeFilter.push(destinationNode);
-
 		this.runExecutionData = {
 			startData: {
 				destinationNode,
@@ -288,6 +295,7 @@ export class WorkflowExecute {
 			executionData: {
 				contextData: {},
 				nodeExecutionStack,
+				metadata: {},
 				waitingExecution,
 				waitingExecutionSource,
 			},
@@ -309,6 +317,22 @@ export class WorkflowExecute {
 		return this.additionalData.hooks.executeHookFunctions(hookName, parameters);
 	}
 
+	moveNodeMetadata(): void {
+		const metadata = get(this.runExecutionData, 'executionData.metadata');
+
+		if (metadata) {
+			const runData = get(this.runExecutionData, 'resultData.runData');
+
+			let index: number;
+			let metaRunData: ITaskMetadata;
+			for (const nodeName of Object.keys(metadata)) {
+				for ([index, metaRunData] of metadata[nodeName].entries()) {
+					runData[nodeName][index].metadata = metaRunData;
+				}
+			}
+		}
+	}
+
 	/**
 	 * Checks the incoming connection does not receive any data
 	 */
@@ -1533,6 +1557,9 @@ export class WorkflowExecute {
 						// Static data of workflow changed
 						newStaticData = workflow.staticData;
 					}
+
+					this.moveNodeMetadata();
+
 					await this.executeHook('workflowExecuteAfter', [fullRunData, newStaticData]).catch(
 						// eslint-disable-next-line @typescript-eslint/no-shadow
 						(error) => {
@@ -1601,6 +1628,9 @@ export class WorkflowExecute {
 			// Static data of workflow changed
 			newStaticData = workflow.staticData;
 		}
+
+		this.moveNodeMetadata();
+
 		await this.executeHook('workflowExecuteAfter', [fullRunData, newStaticData]);
 
 		if (closeFunction) {

packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue

@@ -1,3 +1,26 @@
+<script setup lang="ts">
+import { useI18n } from '@/composables';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import N8nTooltip from '../N8nTooltip';
+
+export interface Props {
+	active?: boolean;
+	isAi?: boolean;
+	isTrigger?: boolean;
+	description?: string;
+	title: string;
+	showActionArrow?: boolean;
+}
+
+defineProps<Props>();
+
+defineEmits<{
+	(event: 'tooltipClick', $e: MouseEvent): void;
+}>();
+
+const i18n = useI18n();
+</script>
+
 <template>
 	<div
 		:class="{
@@ -12,7 +35,13 @@
 		<div>
 			<div :class="$style.details">
 				<span :class="$style.name" v-text="title" data-test-id="node-creator-item-name" />
-				<font-awesome-icon icon="bolt" v-if="isTrigger" size="xs" :class="$style.triggerIcon" />
+				<font-awesome-icon
+					icon="bolt"
+					v-if="isTrigger"
+					size="xs"
+					:title="i18n.baseText('nodeCreator.nodeItem.triggerIconTitle')"
+					:class="$style.triggerIcon"
+				/>
 				<n8n-tooltip
 					v-if="!!$slots.tooltip"
 					placement="top"
@@ -33,25 +62,6 @@
 	</div>
 </template>
 
-<script setup lang="ts">
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import N8nTooltip from '../N8nTooltip';
-
-export interface Props {
-	active?: boolean;
-	isTrigger?: boolean;
-	description?: string;
-	title: string;
-	showActionArrow?: boolean;
-}
-
-defineProps<Props>();
-
-defineEmits<{
-	(event: 'tooltipClick', $e: MouseEvent): void;
-}>();
-</script>
-
 <style lang="scss" module>
 .creatorNode {
 	display: flex;
@@ -106,6 +116,11 @@ defineEmits<{
 	color: var(--node-creator-description-colos, var(--color-text-base));
 }
 
+.aiIcon {
+	margin-left: var(--spacing-3xs);
+	color: var(--color-secondary);
+}
+
 .triggerIcon {
 	margin-left: var(--spacing-3xs);
 	color: var(--color-primary);

packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="n8n-node-icon">
+	<div class="n8n-node-icon" v-bind="$attrs">
 		<div
 			:class="{
 				[$style.nodeIconWrapper]: true,
@@ -7,7 +7,6 @@
 				[$style.disabled]: disabled,
 			}"
 			:style="iconStyleData"
-			v-bind="$attrs"
 		>
 			<!-- ElementUI tooltip is prone to memory-leaking so we only render it if we really need it -->
 			<n8n-tooltip placement="top" :disabled="!showTooltip" v-if="showTooltip">

packages/design-system/src/components/N8nNotice/Notice.vue

@@ -74,7 +74,7 @@ export default defineComponent({
 
 			if (event.target.localName !== 'a') return;
 
-			if (event.target.dataset && event.target.dataset.key) {
+			if (event.target.dataset?.key) {
 				event.stopPropagation();
 				event.preventDefault();
 

packages/design-system/src/locale/format.ts

@@ -19,7 +19,7 @@ export default function () {
 			args = args[0] as unknown as Array<string | object>;
 		}
 
-		if (!args || !args.hasOwnProperty) {
+		if (!args?.hasOwnProperty) {
 			args = {} as unknown as Array<string | object>;
 		}
 

packages/design-system/src/utils/valueByPath.ts

@@ -9,6 +9,6 @@
  */
 export function getValueByPath<T = any>(object: any, path: string): T {
 	return path.split('.').reduce((acc, part) => {
-		return acc && acc[part];
+		return acc?.[part];
 	}, object);
 }

packages/editor-ui/package.json

@@ -45,6 +45,7 @@
     "@jsplumb/connector-bezier": "^5.13.2",
     "@jsplumb/core": "^5.13.2",
     "@jsplumb/util": "^5.13.2",
+    "@lezer/common": "^1.0.4",
     "@n8n/codemirror-lang-sql": "^1.0.2",
     "@vueuse/components": "^10.2.0",
     "@vueuse/core": "^10.2.0",
@@ -66,8 +67,8 @@
     "normalize-wheel": "^1.0.1",
     "pinia": "^2.1.6",
     "prettier": "^3.0.3",
-    "stream-browserify": "^3.0.0",
     "qrcode.vue": "^3.3.4",
+    "stream-browserify": "^3.0.0",
     "timeago.js": "^4.0.2",
     "uuid": "^8.3.2",
     "v3-infinite-loading": "^1.2.2",
@@ -75,6 +76,7 @@
     "vue-agile": "^2.0.0",
     "vue-i18n": "^9.2.2",
     "vue-json-pretty": "2.2.4",
+    "vue-markdown-render": "^2.0.1",
     "vue-router": "^4.2.2",
     "vue3-touch-events": "^4.1.3",
     "xss": "^1.0.14"

packages/editor-ui/public/n8n-beta-logo.svg

@@ -0,0 +1,15 @@
+<svg width="201" height="40" viewBox="0 0 201 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_15_2918)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.9736 8C78.9736 12.4183 75.3919 16 70.9736 16C67.246 16 64.1138 13.4505 63.2257 10H52.0564C50.101 10 48.4323 11.4137 48.1108 13.3424L47.782 15.3152C47.4698 17.1883 46.5223 18.8185 45.1824 20C46.5223 21.1815 47.4698 22.8117 47.782 24.6848L48.1108 26.6576C48.4323 28.5863 50.101 30 52.0564 30H55.2257C56.1138 26.5495 59.246 24 62.9736 24C67.3919 24 70.9736 27.5817 70.9736 32C70.9736 36.4183 67.3919 40 62.9736 40C59.246 40 56.1138 37.4505 55.2257 34H52.0564C48.1457 34 44.8082 31.1727 44.1653 27.3152L43.8364 25.3424C43.515 23.4137 41.8462 22 39.8909 22H36.628C35.6294 25.2801 32.5802 27.6667 28.9736 27.6667C25.367 27.6667 22.3179 25.2801 21.3193 22H16.628C15.6294 25.2801 12.5802 27.6667 8.97363 27.6667C4.55536 27.6667 0.973633 24.0849 0.973633 19.6667C0.973633 15.2484 4.55536 11.6667 8.97363 11.6667C12.8204 11.6667 16.033 14.3817 16.7998 18H21.1475C21.9143 14.3817 25.1269 11.6667 28.9736 11.6667C32.8204 11.6667 36.033 14.3817 36.7998 18H39.8909C41.8462 18 43.515 16.5863 43.8364 14.6576L44.1653 12.6848C44.8082 8.8273 48.1457 6 52.0564 6H63.2257C64.1138 2.54955 67.246 0 70.9736 0C75.3919 0 78.9736 3.58172 78.9736 8ZM74.9736 8C74.9736 10.2091 73.1828 12 70.9736 12C68.7645 12 66.9736 10.2091 66.9736 8C66.9736 5.79086 68.7645 4 70.9736 4C73.1828 4 74.9736 5.79086 74.9736 8ZM8.97363 23.6667C11.1828 23.6667 12.9736 21.8758 12.9736 19.6667C12.9736 17.4575 11.1828 15.6667 8.97363 15.6667C6.76449 15.6667 4.97363 17.4575 4.97363 19.6667C4.97363 21.8758 6.76449 23.6667 8.97363 23.6667ZM28.9736 23.6667C31.1828 23.6667 32.9736 21.8758 32.9736 19.6667C32.9736 17.4575 31.1828 15.6667 28.9736 15.6667C26.7645 15.6667 24.9736 17.4575 24.9736 19.6667C24.9736 21.8758 26.7645 23.6667 28.9736 23.6667ZM62.9736 36C65.1828 36 66.9736 34.2091 66.9736 32C66.9736 29.7909 65.1828 28 62.9736 28C60.7645 28 58.9736 29.7909 58.9736 32C58.9736 34.2091 60.7645 36 62.9736 36Z" fill="#EA4B71"/>
+<path d="M86.9785 30.001H91.1554V21.1578C91.1554 18.2536 92.9175 16.981 94.908 16.981C96.8659 16.981 98.3996 18.2862 98.3996 20.962V30.001H102.576V20.1136C102.576 15.8389 100.096 13.3589 96.2133 13.3589C93.7659 13.3589 92.3954 14.3378 91.4164 15.6104H91.1554L90.7964 13.6852H86.9785V30.001Z" fill="#101330"/>
+<path d="M118.563 19.0041V18.8083C119.999 18.0904 121.435 16.8504 121.435 14.4031C121.435 10.8789 118.53 8.75781 114.517 8.75781C110.405 8.75781 107.468 11.0094 107.468 14.4683C107.468 16.8178 108.839 18.0904 110.34 18.8083V19.0041C108.676 19.5915 106.685 21.3536 106.685 24.2904C106.685 27.8473 109.622 30.3273 114.484 30.3273C119.346 30.3273 122.185 27.8473 122.185 24.2904C122.185 21.3536 120.227 19.6241 118.563 19.0041ZM114.484 11.7599C116.116 11.7599 117.323 12.8041 117.323 14.5662C117.323 16.3283 116.083 17.3726 114.484 17.3726C112.885 17.3726 111.547 16.3283 111.547 14.5662C111.547 12.7715 112.82 11.7599 114.484 11.7599ZM114.484 27.1947C112.591 27.1947 111.058 25.9873 111.058 23.9315C111.058 22.0715 112.33 20.6683 114.451 20.6683C116.54 20.6683 117.813 22.0389 117.813 23.9968C117.813 25.9873 116.344 27.1947 114.484 27.1947Z" fill="#101330"/>
+<path d="M126.428 30.001H130.605V21.1578C130.605 18.2536 132.367 16.981 134.358 16.981C136.316 16.981 137.849 18.2862 137.849 20.962V30.001H142.026V20.1136C142.026 15.8389 139.546 13.3589 135.663 13.3589C133.216 13.3589 131.845 14.3378 130.866 15.6104H130.605L130.246 13.6852H126.428V30.001Z" fill="#101330"/>
+</g>
+<rect x="154" y="12.5" width="47" height="19" rx="3" fill="#EA4B71"/>
+<path d="M164.496 21.334C165.196 21.586 166.134 22.272 166.134 23.784C166.134 25.506 164.944 26.5 162.97 26.5H158.966V16.7H162.998C164.93 16.7 165.854 17.708 165.854 19.15C165.854 20.326 165.21 20.914 164.496 21.25V21.334ZM160.772 18.184V20.718H162.718C163.558 20.718 164.006 20.214 164.006 19.444C164.006 18.66 163.502 18.184 162.746 18.184H160.772ZM162.802 25.016C163.754 25.016 164.244 24.442 164.244 23.644C164.244 22.818 163.712 22.202 162.802 22.202H160.772V25.016H162.802ZM170.963 24.89H175.863V26.5H169.157V16.7H175.723V18.31H170.963V20.746H175.065V22.314H170.963V24.89ZM185.606 16.7V18.352H182.834V26.5H180.986V18.352H178.214V16.7H185.606ZM193.795 26.5L192.997 24.134H189.329L188.531 26.5H186.557L190.057 16.7H192.283L195.769 26.5H193.795ZM189.833 22.608H192.493L191.219 18.828H191.107L189.833 22.608Z" fill="white"/>
+<defs>
+<clipPath id="clip0_15_2918">
+<rect width="143" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/editor-ui/src/App.vue

@@ -43,7 +43,7 @@ import { HIRING_BANNER, LOCAL_STORAGE_THEME, VIEWS } from '@/constants';
 
 import { userHelpers } from '@/mixins/userHelpers';
 import { loadLanguage } from '@/plugins/i18n';
-import { useGlobalLinkActions, useToast } from '@/composables';
+import { useGlobalLinkActions, useTitleChange, useToast, useExternalHooks } from '@/composables';
 import {
 	useUIStore,
 	useSettingsStore,
@@ -58,7 +58,6 @@ import {
 import { useHistoryHelper } from '@/composables/useHistoryHelper';
 import { newVersions } from '@/mixins/newVersions';
 import { useRoute } from 'vue-router';
-import { useExternalHooks } from '@/composables';
 import { ExpressionEvaluatorProxy } from 'n8n-workflow';
 
 export default defineComponent({
@@ -114,6 +113,8 @@ export default defineComponent({
 			try {
 				await this.settingsStore.getSettings();
 				this.settingsInitialized = true;
+				// Re-compute title since settings are now available
+				useTitleChange().titleReset();
 			} catch (e) {
 				this.showToast({
 					title: this.$locale.baseText('startupError'),
@@ -155,7 +156,7 @@ export default defineComponent({
 		},
 		trackPage(): void {
 			this.uiStore.currentView = this.$route.name || '';
-			if (this.$route && this.$route.meta && this.$route.meta.templatesEnabled) {
+			if (this.$route?.meta?.templatesEnabled) {
 				this.templatesStore.setSessionId();
 			} else {
 				this.templatesStore.resetSessionId(); // reset telemetry session id when user leaves template pages

packages/editor-ui/src/Interface.ts

@@ -1,9 +1,11 @@
 import type {
+	AI_NODE_CREATOR_VIEW,
 	CREDENTIAL_EDIT_MODAL_KEY,
 	SignInType,
 	FAKE_DOOR_FEATURES,
 	TRIGGER_NODE_CREATOR_VIEW,
 	REGULAR_NODE_CREATOR_VIEW,
+	AI_OTHERS_NODE_CREATOR_VIEW,
 } from './constants';
 
 import type { IMenuItem } from 'n8n-design-system';
@@ -41,6 +43,7 @@ import type {
 	IUserSettings,
 	IN8nUISettings,
 	BannerName,
+	INodeExecutionData,
 	INodeProperties,
 } from 'n8n-workflow';
 import type { BulkCommand, Undoable } from '@/models/history';
@@ -164,6 +167,22 @@ export interface INodeTranslationHeaders {
 	};
 }
 
+export interface IAiDataContent {
+	data: INodeExecutionData[] | null;
+	inOut: 'input' | 'output';
+	type: NodeConnectionType;
+	metadata: {
+		executionTime: number;
+		startTime: number;
+	};
+}
+
+export interface IAiData {
+	data: IAiDataContent[];
+	node: string;
+	runIndex: number;
+}
+
 export interface IStartRunData {
 	workflowData: IWorkflowData;
 	startNodes?: string[];
@@ -740,12 +759,24 @@ export type ActionsRecord<T extends SimplifiedNodeType[]> = {
 
 export type SimplifiedNodeType = Pick<
 	INodeTypeDescription,
-	'displayName' | 'description' | 'name' | 'group' | 'icon' | 'iconUrl' | 'codex' | 'defaults'
+	| 'displayName'
+	| 'description'
+	| 'name'
+	| 'group'
+	| 'icon'
+	| 'iconUrl'
+	| 'codex'
+	| 'defaults'
+	| 'outputs'
 >;
 export interface SubcategoryItemProps {
 	description?: string;
 	iconType?: string;
 	icon?: string;
+	iconProps?: {
+		color?: string;
+	};
+	panelClass?: string;
 	title?: string;
 	subcategory?: string;
 	defaults?: INodeParameters;
@@ -891,7 +922,7 @@ export interface WorkflowsState {
 	activeWorkflowExecution: IExecutionsSummary | null;
 	currentWorkflowExecutions: IExecutionsSummary[];
 	activeExecutionId: string | null;
-	executingNode: string | null;
+	executingNode: string[];
 	executionWaitingForWebhook: boolean;
 	finishedExecutionsCount: number;
 	nodeMetadata: NodeMetadataMap;
@@ -939,7 +970,7 @@ export interface IRootState {
 	endpointWebhook: string;
 	endpointWebhookTest: string;
 	executionId: string | null;
-	executingNode: string | null;
+	executingNode: string[];
 	executionWaitingForWebhook: boolean;
 	pushConnectionActive: boolean;
 	saveDataErrorExecution: string;
@@ -1013,7 +1044,7 @@ export type NewCredentialsModal = ModalState & {
 	showAuthSelector?: boolean;
 };
 
-export type IRunDataDisplayMode = 'table' | 'json' | 'binary' | 'schema' | 'html';
+export type IRunDataDisplayMode = 'table' | 'json' | 'binary' | 'schema' | 'html' | 'ai';
 export type NodePanelType = 'input' | 'output';
 
 export interface TargetItem {
@@ -1080,6 +1111,7 @@ export interface UIState {
 	stateIsDirty: boolean;
 	lastSelectedNode: string | null;
 	lastSelectedNodeOutputIndex: number | null;
+	lastSelectedNodeEndpointUuid: string | null;
 	nodeViewOffsetPosition: XYPosition;
 	nodeViewMoveInProgress: boolean;
 	selectedNodes: INodeUi[];
@@ -1109,12 +1141,17 @@ export type IFakeDoorLocation =
 	| 'credentialsModal'
 	| 'workflowShareModal';
 
-export type NodeFilterType = typeof REGULAR_NODE_CREATOR_VIEW | typeof TRIGGER_NODE_CREATOR_VIEW;
+export type NodeFilterType =
+	| typeof REGULAR_NODE_CREATOR_VIEW
+	| typeof TRIGGER_NODE_CREATOR_VIEW
+	| typeof AI_NODE_CREATOR_VIEW
+	| typeof AI_OTHERS_NODE_CREATOR_VIEW;
 
 export type NodeCreatorOpenSource =
 	| ''
 	| 'no_trigger_execution_tooltip'
 	| 'plus_endpoint'
+	| 'add_input_endpoint'
 	| 'trigger_placeholder_button'
 	| 'tab'
 	| 'node_connection_action'

packages/editor-ui/src/components/ChatEmbedModal.vue

@@ -0,0 +1,170 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+import { computed, ref } from 'vue';
+import type { EventBus } from 'n8n-design-system/utils';
+import { createEventBus } from 'n8n-design-system/utils';
+import Modal from './Modal.vue';
+import { CHAT_EMBED_MODAL_KEY, WEBHOOK_NODE_TYPE } from '../constants';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useRootStore } from '@/stores/n8nRoot.store';
+import { useWorkflowsStore } from '@/stores';
+import HtmlEditor from '@/components/HtmlEditor/HtmlEditor.vue';
+import CodeNodeEditor from '@/components/CodeNodeEditor/CodeNodeEditor.vue';
+import { useI18n } from '@/composables';
+
+const props = defineProps({
+	modalBus: {
+		type: Object as PropType<EventBus>,
+		default: () => createEventBus(),
+	},
+});
+
+const i18n = useI18n();
+const rootStore = useRootStore();
+const workflowsStore = useWorkflowsStore();
+const settingsStore = useSettingsStore();
+
+const tabs = ref([
+	{
+		label: 'CDN Embed',
+		value: 'cdn',
+	},
+	{
+		label: 'Vue Embed',
+		value: 'vue',
+	},
+	{
+		label: 'React Embed',
+		value: 'react',
+	},
+	{
+		label: 'Other',
+		value: 'other',
+	},
+]);
+const currentTab = ref('cdn');
+
+const webhookNode = computed(() => {
+	return workflowsStore.workflow.nodes.find((node) => node.type === WEBHOOK_NODE_TYPE);
+});
+
+const webhookUrl = computed(() => {
+	return `${rootStore.getWebhookUrl}${webhookNode.value ? `/${webhookNode.value.webhookId}` : ''}`;
+});
+
+function indentLines(code: string, indent: string = '	') {
+	return code
+		.split('\n')
+		.map((line) => `${indent}${line}`)
+		.join('\n');
+}
+
+const commonCode = computed(() => ({
+	import: `import '@n8n/chat/style.css';
+import { createChat } from '@n8n/chat';`,
+	createChat: `createChat({
+	webhookUrl: '${webhookUrl.value}'
+});`,
+	install: 'npm install @n8n/chat',
+}));
+
+const cdnCode = computed(
+	() => `<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/style.css" type="text/css" />
+<script type="module">
+import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/chat.js';
+
+${commonCode.value.createChat}
+</${'script'}>`,
+);
+
+const vueCode = computed(
+	() => `<script lang="ts" setup>
+import { onMounted } from 'vue';
+${commonCode.value.import}
+
+onMounted(() => {
+${indentLines(commonCode.value.createChat)}
+});
+</${'script'}>`,
+);
+
+const reactCode = computed(
+	() => `import { useEffect } from 'react';
+${commonCode.value.import}
+
+export const App = () => {
+	useEffect(() => {
+${indentLines(commonCode.value.createChat, '		')}
+	}, []);
+
+	return (<div></div>);
+};
+
+</${'script'}>`,
+);
+
+const otherCode = computed(
+	() => `${commonCode.value.import}
+
+${commonCode.value.createChat}`,
+);
+
+function closeDialog() {
+	props.modalBus.emit('close');
+}
+</script>
+
+<template>
+	<Modal
+		max-width="960px"
+		:title="i18n.baseText('chatEmbed.title')"
+		:eventBus="modalBus"
+		:name="CHAT_EMBED_MODAL_KEY"
+		:center="true"
+	>
+		<template #content>
+			<div :class="$style.container">
+				<n8n-tabs :options="tabs" v-model="currentTab" />
+
+				<div v-if="currentTab !== 'cdn'">
+					<n8n-text>
+						{{ i18n.baseText('chatEmbed.install') }}
+					</n8n-text>
+					<CodeNodeEditor :modelValue="commonCode.install" isReadOnly />
+				</div>
+
+				<n8n-text>
+					<i18n-t :keypath="`chatEmbed.paste.${currentTab}`">
+						<template #code>
+							<code>{{ i18n.baseText(`chatEmbed.paste.${currentTab}.file`) }}</code>
+						</template>
+					</i18n-t>
+				</n8n-text>
+				<HtmlEditor v-if="currentTab === 'cdn'" :modelValue="cdnCode" isReadOnly />
+				<HtmlEditor v-if="currentTab === 'vue'" :modelValue="vueCode" isReadOnly />
+				<CodeNodeEditor v-if="currentTab === 'react'" :modelValue="reactCode" isReadOnly />
+				<CodeNodeEditor v-if="currentTab === 'other'" :modelValue="otherCode" isReadOnly />
+
+				<n8n-info-tip>
+					{{ i18n.baseText('chatEmbed.packageInfo.description') }}
+					<n8n-link :href="i18n.baseText('chatEmbed.url')" new-window size="small" bold>
+						{{ i18n.baseText('chatEmbed.packageInfo.link') }}
+					</n8n-link>
+				</n8n-info-tip>
+			</div>
+		</template>
+
+		<template #footer>
+			<div class="action-buttons">
+				<n8n-button @click="closeDialog" float="right" :label="i18n.baseText('chatEmbed.close')" />
+			</div>
+		</template>
+	</Modal>
+</template>
+
+<style module lang="scss">
+.container > * {
+	margin-bottom: var(--spacing-s);
+	overflow-wrap: break-word;
+}
+</style>

packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue

@@ -95,7 +95,9 @@ export default defineComponent({
 					{ key: 'Mod-Shift-z', run: redo },
 				]),
 				indentOnInput(),
-				theme,
+				theme({
+					isReadOnly: this.isReadOnly,
+				}),
 				lineNumbers(),
 				highlightActiveLineGutter(),
 				history(),
@@ -103,6 +105,7 @@ export default defineComponent({
 				dropCursor(),
 				indentOnInput(),
 				highlightActiveLine(),
+				EditorView.editable.of(!this.isReadOnly),
 				EditorState.readOnly.of(this.isReadOnly),
 				EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
 					if (!viewUpdate.docChanged) return;

packages/editor-ui/src/components/HtmlEditor/theme.ts

@@ -2,7 +2,7 @@ import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { EditorView } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
 
-export const theme = [
+export const theme = ({ isReadOnly }: { isReadOnly: boolean }) => [
 	EditorView.theme({
 		'&': {
 			'font-size': '0.8em',
@@ -18,6 +18,9 @@ export const theme = [
 		'.cm-cursor, .cm-dropCursor': {
 			borderLeftColor: 'var(--color-code-caret)',
 		},
+		'&.cm-editor': {
+			...(isReadOnly ? { backgroundColor: 'var(--color-code-background-readonly)' } : {}),
+		},
 		'&.cm-editor.cm-focused': {
 			outline: '0',
 		},
@@ -31,7 +34,9 @@ export const theme = [
 			backgroundColor: 'var(--color-code-lineHighlight)',
 		},
 		'.cm-gutters': {
-			backgroundColor: 'var(--color-code-gutterBackground)',
+			backgroundColor: isReadOnly
+				? 'var(--color-code-background-readonly)'
+				: 'var(--color-code-gutterBackground)',
 			color: 'var(--color-code-gutterForeground)',
 			borderTopLeftRadius: 'var(--border-radius-base)',
 			borderBottomLeftRadius: 'var(--border-radius-base)',

packages/editor-ui/src/components/InputPanel.vue

@@ -3,14 +3,14 @@
 		:nodeUi="currentNode"
 		:runIndex="runIndex"
 		:linkedRuns="linkedRuns"
-		:canLinkRuns="canLinkRuns"
+		:canLinkRuns="!mappedNode && canLinkRuns"
 		:tooMuchDataTitle="$locale.baseText('ndv.input.tooMuchData.title')"
 		:noDataInBranchMessage="$locale.baseText('ndv.input.noOutputDataInBranch')"
 		:isExecuting="isExecutingPrevious"
 		:executingMessage="$locale.baseText('ndv.input.executingPrevious')"
 		:sessionId="sessionId"
 		:overrideOutputs="connectedCurrentNodeOutputs"
-		:mappingEnabled="!readOnly"
+		:mappingEnabled="isMappingEnabled"
 		:distanceFromActive="currentNodeDepth"
 		:isProductionExecutionPreview="isProductionExecutionPreview"
 		paneType="input"
@@ -55,11 +55,43 @@
 					</n8n-option>
 				</n8n-select>
 				<span v-else :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
+				<n8n-radio-buttons
+					v-if="isActiveNodeConfig && !readOnly"
+					:options="inputModes"
+					:modelValue="inputMode"
+					@update:modelValue="onInputModeChange"
+				/>
+			</div>
+		</template>
+		<template #before-data v-if="isMappingMode">
+			<!--
+						Hide the run linking buttons for both input and ouput panels when in 'Mapping Mode' because the run indices wouldn't match.
+						Although this is not the most elegant solution, it's straightforward and simpler than introducing a new props and logic to handle this.
+				-->
+			<component :is="'style'">button.linkRun { display: none }</component>
+			<div :class="$style.mappedNode">
+				<n8n-select
+					:modelValue="mappedNode"
+					@update:modelValue="onMappedNodeSelected"
+					size="small"
+					@click.stop
+					teleported
+				>
+					<template #prepend>{{ $locale.baseText('ndv.input.previousNode') }}</template>
+					<n8n-option
+						v-for="nodeName in rootNodesParents"
+						:key="nodeName"
+						:label="nodeName"
+						:value="nodeName"
+					/>
+				</n8n-select>
 			</div>
 		</template>
-
 		<template #node-not-run>
-			<div :class="$style.noOutputData" v-if="parentNodes.length">
+			<div
+				:class="$style.noOutputData"
+				v-if="(isActiveNodeConfig && rootNode) || parentNodes.length"
+			>
 				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
 					$locale.baseText('ndv.input.noOutputData.title')
 				}}</n8n-text>
@@ -76,7 +108,7 @@
 					<NodeExecuteButton
 						type="secondary"
 						:transparent="true"
-						:nodeName="currentNodeName"
+						:nodeName="isActiveNodeConfig ? rootNode : currentNodeName"
 						:label="$locale.baseText('ndv.input.noOutputData.executePrevious')"
 						@execute="onNodeExecute"
 						telemetrySource="inputs"
@@ -130,7 +162,8 @@
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
 import type { INodeUi } from '@/Interface';
-import type { IConnectedNode, INodeTypeDescription, Workflow } from 'n8n-workflow';
+import { NodeHelpers, NodeConnectionType } from 'n8n-workflow';
+import type { ConnectionTypes, IConnectedNode, INodeTypeDescription, Workflow } from 'n8n-workflow';
 import RunData from './RunData.vue';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import NodeExecuteButton from './NodeExecuteButton.vue';
@@ -145,6 +178,8 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 
+type MappingMode = 'debugging' | 'mapping';
+
 export default defineComponent({
 	name: 'InputPanel',
 	mixins: [workflowHelpers],
@@ -178,6 +213,12 @@ export default defineComponent({
 		return {
 			showDraggableHintWithDelay: false,
 			draggableHintShown: false,
+			inputMode: 'debugging' as MappingMode,
+			mappedNode: null as string | null,
+			inputModes: [
+				{ value: 'mapping', label: this.$locale.baseText('ndv.input.mapping') },
+				{ value: 'debugging', label: this.$locale.baseText('ndv.input.debugging') },
+			],
 		};
 	},
 	computed: {
@@ -188,6 +229,9 @@ export default defineComponent({
 		isUserOnboarded(): boolean {
 			return this.ndvStore.isMappingOnboarded;
 		},
+		isMappingMode(): boolean {
+			return this.isActiveNodeConfig && this.inputMode === 'mapping';
+		},
 		showDraggableHint(): boolean {
 			const toIgnore = [
 				START_NODE_TYPE,
@@ -201,23 +245,59 @@ export default defineComponent({
 
 			return !!this.focusedMappableInput && !this.isUserOnboarded;
 		},
+		isActiveNodeConfig(): boolean {
+			let inputs = this.activeNodeType?.inputs ?? [];
+			let outputs = this.activeNodeType?.outputs ?? [];
+			if (this.activeNode !== null && this.currentWorkflow !== null) {
+				const node = this.currentWorkflow.getNode(this.activeNode.name);
+				inputs = NodeHelpers.getNodeInputs(this.currentWorkflow, node!, this.activeNodeType!);
+				outputs = NodeHelpers.getNodeOutputs(this.currentWorkflow, node!, this.activeNodeType!);
+			} else {
+				// If we can not figure out the node type we set no outputs
+				if (!Array.isArray(inputs)) {
+					inputs = [] as ConnectionTypes[];
+				}
+				if (!Array.isArray(outputs)) {
+					outputs = [] as ConnectionTypes[];
+				}
+			}
+
+			if (
+				(inputs.length === 0 ||
+					inputs.find((inputName) => inputName !== NodeConnectionType.Main)) &&
+				outputs.find((outputName) => outputName !== NodeConnectionType.Main)
+			) {
+				return true;
+			}
+
+			return false;
+		},
+		isMappingEnabled(): boolean {
+			if (this.readOnly) return false;
+
+			// Mapping is only enabled in mapping mode for config nodes and if node to map is selected
+			if (this.isActiveNodeConfig) return this.isMappingMode && this.mappedNode !== null;
+
+			return true;
+		},
 		isExecutingPrevious(): boolean {
 			if (!this.workflowRunning) {
 				return false;
 			}
 			const triggeredNode = this.workflowsStore.executedNode;
 			const executingNode = this.workflowsStore.executingNode;
+
 			if (
 				this.activeNode &&
 				triggeredNode === this.activeNode.name &&
-				this.activeNode.name !== executingNode
+				!this.workflowsStore.isNodeExecuting(this.activeNode.name)
 			) {
 				return true;
 			}
 
-			if (executingNode || triggeredNode) {
+			if (executingNode.length || triggeredNode) {
 				return !!this.parentNodes.find(
-					(node) => node.name === executingNode || node.name === triggeredNode,
+					(node) => this.workflowsStore.isNodeExecuting(node.name) || node.name === triggeredNode,
 				);
 			}
 			return false;
@@ -231,7 +311,31 @@ export default defineComponent({
 		activeNode(): INodeUi | null {
 			return this.ndvStore.activeNode;
 		},
+
+		rootNode(): string {
+			const workflow = this.currentWorkflow;
+			const rootNodes = workflow.getChildNodes(this.activeNode.name, 'ALL_NON_MAIN');
+
+			return rootNodes[0];
+		},
+		rootNodesParents(): string[] {
+			const workflow = this.currentWorkflow;
+			const parentNodes = [...workflow.getParentNodes(this.rootNode, 'main')].reverse();
+
+			return parentNodes;
+		},
 		currentNode(): INodeUi | null {
+			if (this.isActiveNodeConfig) {
+				// if we're mapping node we want to show the output of the mapped node
+				if (this.mappedNode) {
+					return this.workflowsStore.getNodeByName(this.mappedNode);
+				}
+
+				// in debugging mode data does get set manually and is only for debugging
+				// so we want to force the node to be the active node to make sure we show the correct data
+				return this.activeNode;
+			}
+
 			return this.workflowsStore.getNodeByName(this.currentNodeName);
 		},
 		connectedCurrentNodeOutputs(): number[] | undefined {
@@ -272,13 +376,21 @@ export default defineComponent({
 		},
 	},
 	methods: {
+		onInputModeChange(val: MappingMode) {
+			this.inputMode = val;
+		},
+		onMappedNodeSelected(val: string) {
+			this.mappedNode = val;
+
+			this.onRunIndexChange(0);
+			this.onUnlinkRun();
+		},
 		getMultipleNodesText(nodeName?: string): string {
 			if (
 				!nodeName ||
 				!this.isMultiInputNode ||
 				!this.activeNode ||
-				this.activeNodeType === null ||
-				this.activeNodeType.inputNames === undefined
+				this.activeNodeType?.inputNames === undefined
 			)
 				return '';
 
@@ -292,10 +404,7 @@ export default defineComponent({
 
 			// Match connected input indexes to their names specified by active node
 			const connectedInputs = connectedInputIndexes.map(
-				(inputIndex) =>
-					this.activeNodeType &&
-					this.activeNodeType.inputNames &&
-					this.activeNodeType.inputNames[inputIndex],
+				(inputIndex) => this.activeNodeType?.inputNames?.[inputIndex],
 			);
 
 			if (connectedInputs.length === 0) return '';
@@ -347,6 +456,16 @@ export default defineComponent({
 		},
 	},
 	watch: {
+		inputMode: {
+			handler(val) {
+				this.onRunIndexChange(-1);
+				if (val === 'mapping') {
+					this.onUnlinkRun();
+					this.mappedNode = this.rootNodesParents[0];
+				}
+			},
+			immediate: true,
+		},
 		showDraggableHint(curr: boolean, prev: boolean) {
 			if (curr && !prev) {
 				setTimeout(() => {
@@ -371,15 +490,22 @@ export default defineComponent({
 </script>
 
 <style lang="scss" module>
+.mappedNode {
+	width: max-content;
+	padding: 0 var(--spacing-s) var(--spacing-s);
+}
 .titleSection {
 	display: flex;
 	max-width: 300px;
+	align-items: center;
 
 	> * {
 		margin-right: var(--spacing-2xs);
 	}
 }
-
+.inputModeTab {
+	margin-left: auto;
+}
 .noOutputData {
 	max-width: 180px;
 

packages/editor-ui/src/components/Logo.vue

@@ -1,18 +1,24 @@
 <template>
-	<img :src="basePath + 'n8n-logo-expanded.svg'" :class="$style.img" alt="n8n.io" />
+	<img :src="logoPath" :class="$style.img" alt="n8n.io" />
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
-import { useRootStore } from '@/stores/n8nRoot.store';
+import { useRootStore, useSettingsStore } from '@/stores';
 
 export default defineComponent({
 	computed: {
-		...mapStores(useRootStore),
+		...mapStores(useRootStore, useSettingsStore),
 		basePath(): string {
 			return this.rootStore.baseUrl;
 		},
+		logoPath(): string {
+			return (
+				this.basePath +
+				(this.settingsStore.settings.isBetaRelease ? 'n8n-beta-logo.svg' : 'n8n-logo-expanded.svg')
+			);
+		},
 	},
 });
 </script>

packages/editor-ui/src/components/MainSidebar.vue

@@ -18,11 +18,7 @@
 		<n8n-menu :items="mainMenuItems" :collapsed="isCollapsed" @select="handleSelect">
 			<template #header>
 				<div :class="$style.logo">
-					<img
-						:src="basePath + (isCollapsed ? 'n8n-logo-collapsed.svg' : 'n8n-logo-expanded.svg')"
-						:class="$style.icon"
-						alt="n8n"
-					/>
+					<img :src="logoPath" :class="$style.icon" alt="n8n" />
 				</div>
 			</template>
 
@@ -159,8 +155,16 @@ export default defineComponent({
 			useCloudPlanStore,
 			useSourceControlStore,
 		),
+		logoPath(): string {
+			if (this.isCollapsed) return this.basePath + 'n8n-logo-collapsed.svg';
+
+			return (
+				this.basePath +
+				(this.settingsStore.settings.isBetaRelease ? 'n8n-beta-logo.svg' : 'n8n-logo-expanded.svg')
+			);
+		},
 		hasVersionUpdates(): boolean {
-			return this.versionsStore.hasVersionUpdates;
+			return !this.settingsStore.settings.isBetaRelease && this.versionsStore.hasVersionUpdates;
 		},
 		nextVersions(): IVersion[] {
 			return this.versionsStore.nextVersions;

packages/editor-ui/src/components/Modals.vue

@@ -15,6 +15,10 @@
 			<AboutModal />
 		</ModalRoot>
 
+		<ModalRoot :name="CHAT_EMBED_MODAL_KEY">
+			<ChatEmbedModal />
+		</ModalRoot>
+
 		<ModalRoot :name="CREDENTIAL_SELECT_MODAL_KEY">
 			<CredentialsSelectModal />
 		</ModalRoot>
@@ -43,6 +47,10 @@
 			</template>
 		</ModalRoot>
 
+		<ModalRoot :name="WORKFLOW_LM_CHAT_MODAL_KEY">
+			<WorkflowLMChat />
+		</ModalRoot>
+
 		<ModalRoot :name="WORKFLOW_SETTINGS_MODAL_KEY">
 			<WorkflowSettings />
 		</ModalRoot>
@@ -138,6 +146,7 @@
 import { defineComponent } from 'vue';
 import {
 	ABOUT_MODAL_KEY,
+	CHAT_EMBED_MODAL_KEY,
 	CHANGE_PASSWORD_MODAL_KEY,
 	COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY,
 	COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
@@ -153,6 +162,7 @@ import {
 	VALUE_SURVEY_MODAL_KEY,
 	VERSIONS_MODAL_KEY,
 	WORKFLOW_ACTIVE_MODAL_KEY,
+	WORKFLOW_LM_CHAT_MODAL_KEY,
 	WORKFLOW_SETTINGS_MODAL_KEY,
 	WORKFLOW_SHARE_MODAL_KEY,
 	IMPORT_CURL_MODAL_KEY,
@@ -165,6 +175,7 @@ import {
 } from '@/constants';
 
 import AboutModal from './AboutModal.vue';
+import ChatEmbedModal from './ChatEmbedModal.vue';
 import CommunityPackageManageConfirmModal from './CommunityPackageManageConfirmModal.vue';
 import CommunityPackageInstallModal from './CommunityPackageInstallModal.vue';
 import ChangePasswordModal from './ChangePasswordModal.vue';
@@ -179,6 +190,7 @@ import PersonalizationModal from './PersonalizationModal.vue';
 import TagsManager from './TagsManager/TagsManager.vue';
 import UpdatesPanel from './UpdatesPanel.vue';
 import ValueSurvey from './ValueSurvey.vue';
+import WorkflowLMChat from './WorkflowLMChat.vue';
 import WorkflowSettings from './WorkflowSettings.vue';
 import DeleteUserModal from './DeleteUserModal.vue';
 import ActivationModal from './ActivationModal.vue';
@@ -196,6 +208,7 @@ export default defineComponent({
 	components: {
 		AboutModal,
 		ActivationModal,
+		ChatEmbedModal,
 		CommunityPackageInstallModal,
 		CommunityPackageManageConfirmModal,
 		ContactPromptModal,
@@ -211,6 +224,7 @@ export default defineComponent({
 		TagsManager,
 		UpdatesPanel,
 		ValueSurvey,
+		WorkflowLMChat,
 		WorkflowSettings,
 		WorkflowShareModal,
 		ImportCurlModal,
@@ -222,6 +236,7 @@ export default defineComponent({
 		MfaSetupModal,
 	},
 	data: () => ({
+		CHAT_EMBED_MODAL_KEY,
 		COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY,
 		COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
 		CONTACT_PROMPT_MODAL_KEY,
@@ -236,6 +251,7 @@ export default defineComponent({
 		INVITE_USER_MODAL_KEY,
 		TAGS_MANAGER_MODAL_KEY,
 		VERSIONS_MODAL_KEY,
+		WORKFLOW_LM_CHAT_MODAL_KEY,
 		WORKFLOW_SETTINGS_MODAL_KEY,
 		WORKFLOW_SHARE_MODAL_KEY,
 		VALUE_SURVEY_MODAL_KEY,

packages/editor-ui/src/components/NDVDraggablePanels.vue

@@ -48,6 +48,7 @@ import PanelDragButton from './PanelDragButton.vue';
 import { LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH, MAIN_NODE_PANEL_WIDTH } from '@/constants';
 import { debounceHelper } from '@/mixins/debounce';
 import { useNDVStore } from '@/stores/ndv.store';
+import { ndvEventBus } from '@/event-bus';
 
 const SIDE_MARGIN = 24;
 const SIDE_PANELS_MARGIN = 80;
@@ -118,9 +119,12 @@ export default defineComponent({
 		setTimeout(() => {
 			this.initialized = true;
 		}, 0);
+
+		ndvEventBus.on('setPositionByName', this.setPositionByName);
 	},
 	beforeUnmount() {
 		window.removeEventListener('resize', this.setTotalWidth);
+		ndvEventBus.off('setPositionByName', this.setPositionByName);
 	},
 	computed: {
 		...mapStores(useNDVStore),
@@ -287,7 +291,7 @@ export default defineComponent({
 					panelType: this.currentNodePaneType,
 					dimensions: {
 						relativeLeft: 1 - this.mainPanelDimensions.relativeWidth - this.maximumRightPosition,
-						relativeRight: this.maximumRightPosition as number,
+						relativeRight: this.maximumRightPosition,
 					},
 				});
 				return;
@@ -301,6 +305,15 @@ export default defineComponent({
 				},
 			});
 		},
+		setPositionByName(position: 'minLeft' | 'maxRight' | 'initial') {
+			const positionByName: Record<string, number> = {
+				minLeft: this.minimumLeftPosition,
+				maxRight: this.maximumRightPosition,
+				initial: this.getInitialLeftPosition(this.mainPanelDimensions.relativeWidth),
+			};
+
+			this.setPositions(positionByName[position]);
+		},
 		pxToRelativeWidth(px: number) {
 			return px / this.windowWidth;
 		},

packages/editor-ui/src/components/Node.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
-		:class="{ 'node-wrapper': true, 'node-wrapper--trigger': isTriggerNode }"
-		:style="nodePosition"
+		:class="nodeWrapperClass"
+		:style="nodeWrapperStyles"
 		:id="nodeId"
 		data-test-id="canvas-node"
 		:ref="data.name"
@@ -96,6 +96,7 @@
 					:nodeType="nodeType"
 					:size="40"
 					:shrink="false"
+					:colorDefault="iconColorDefault"
 					:disabled="this.data.disabled"
 				/>
 			</div>
@@ -138,7 +139,7 @@
 					v-touch:tap="executeNode"
 					class="option"
 					:title="$locale.baseText('node.executeNode')"
-					v-if="!workflowRunning"
+					v-if="!workflowRunning && !isConfigNode"
 					data-test-id="execute-node-button"
 				>
 					<font-awesome-icon class="execute-icon" icon="play-circle" />
@@ -172,8 +173,9 @@ import { mapStores } from 'pinia';
 import {
 	CUSTOM_API_CALL_KEY,
 	LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG,
-	WAIT_TIME_UNLIMITED,
 	MANUAL_TRIGGER_NODE_TYPE,
+	NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS,
+	WAIT_TIME_UNLIMITED,
 } from '@/constants';
 import { externalHooks } from '@/mixins/externalHooks';
 import { nodeBase } from '@/mixins/nodeBase';
@@ -182,7 +184,7 @@ import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { pinData } from '@/mixins/pinData';
 
 import type { IExecutionsSummary, INodeTypeDescription, ITaskData } from 'n8n-workflow';
-import { NodeHelpers } from 'n8n-workflow';
+import { NodeConnectionType, NodeHelpers } from 'n8n-workflow';
 
 import NodeIcon from '@/components/NodeIcon.vue';
 import TitledList from '@/components/TitledList.vue';
@@ -226,6 +228,12 @@ export default defineComponent({
 		isScheduledGroup(): boolean {
 			return this.nodeType?.group.includes('schedule') === true;
 		},
+		iconColorDefault(): string | undefined {
+			if (this.isConfigNode) {
+				return 'var(--color-text-base)';
+			}
+			return undefined;
+		},
 		nodeRunData(): ITaskData[] {
 			return this.workflowsStore.getWorkflowResultDataByNodeName(this.data?.name || '') || [];
 		},
@@ -271,7 +279,7 @@ export default defineComponent({
 			return !!(this.nodeType && this.nodeType.polling);
 		},
 		isExecuting(): boolean {
-			return this.workflowsStore.executingNode === this.data.name;
+			return this.workflowsStore.isNodeExecuting(this.data.name);
 		},
 		isSingleActiveTriggerNode(): boolean {
 			const nodes = this.workflowsStore.workflowTriggerNodes.filter((node: INodeUi) => {
@@ -284,6 +292,20 @@ export default defineComponent({
 		isManualTypeNode(): boolean {
 			return this.data.type === MANUAL_TRIGGER_NODE_TYPE;
 		},
+		isConfigNode(): boolean {
+			return this.nodeTypesStore.isConfigNode(
+				this.getCurrentWorkflow(),
+				this.data,
+				this.data?.type ?? '',
+			);
+		},
+		isConfigurableNode(): boolean {
+			return this.nodeTypesStore.isConfigurableNode(
+				this.getCurrentWorkflow(),
+				this.data,
+				this.data?.type ?? '',
+			);
+		},
 		isTriggerNode(): boolean {
 			return this.nodeTypesStore.isTriggerNode(this.data?.type || '');
 		},
@@ -303,6 +325,54 @@ export default defineComponent({
 		sameTypeNodes(): INodeUi[] {
 			return this.workflowsStore.allNodes.filter((node: INodeUi) => node.type === this.data.type);
 		},
+		nodeWrapperClass(): object {
+			const classes = {
+				'node-wrapper': true,
+				'node-wrapper--trigger': this.isTriggerNode,
+				'node-wrapper--configurable': this.isConfigurableNode,
+				'node-wrapper--config': this.isConfigNode,
+			};
+
+			if (this.outputs.length) {
+				const outputTypes = NodeHelpers.getConnectionTypes(this.outputs);
+				const otherOutputs = outputTypes.filter(
+					(outputName) => outputName !== NodeConnectionType.Main,
+				);
+				if (otherOutputs.length) {
+					otherOutputs.forEach((outputName) => {
+						classes[`node-wrapper--connection-type-${outputName}`] = true;
+					});
+				}
+			}
+
+			return classes;
+		},
+		nodeWrapperStyles(): object {
+			const styles: {
+				[key: string]: string | number;
+			} = {
+				left: this.position[0] + 'px',
+				top: this.position[1] + 'px',
+			};
+
+			const nonMainInputs = this.inputs.filter((input) => input !== NodeConnectionType.Main);
+			if (nonMainInputs.length) {
+				const requiredNonMainInputs = this.inputs.filter(
+					(input) => typeof input !== 'string' && input.required,
+				);
+
+				let spacerCount = 0;
+				if (NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS) {
+					const requiredNonMainInputsCount = requiredNonMainInputs.length;
+					const optionalNonMainInputsCount = nonMainInputs.length - requiredNonMainInputsCount;
+					spacerCount = requiredNonMainInputsCount > 0 && optionalNonMainInputsCount > 0 ? 1 : 0;
+				}
+
+				styles['--configurable-node-input-count'] = nonMainInputs.length + spacerCount;
+			}
+
+			return styles;
+		},
 		nodeClass(): object {
 			return {
 				'node-box': true,
@@ -347,22 +417,7 @@ export default defineComponent({
 			return this.node ? this.node.position : [0, 0];
 		},
 		showDisabledLinethrough(): boolean {
-			return !!(
-				this.data.disabled &&
-				this.nodeType &&
-				this.nodeType.inputs.length === 1 &&
-				this.nodeType.outputs.length === 1
-			);
-		},
-		nodePosition(): object {
-			const returnStyles: {
-				[key: string]: string;
-			} = {
-				left: this.position[0] + 'px',
-				top: this.position[1] + 'px',
-			};
-
-			return returnStyles;
+			return !!(this.data.disabled && this.inputs.length === 1 && this.outputs.length === 1);
 		},
 		shortNodeType(): string {
 			return this.$locale.shortNodeType(this.data.type);
@@ -380,7 +435,7 @@ export default defineComponent({
 		waiting(): string | undefined {
 			const workflowExecution = this.workflowsStore.getWorkflowExecution as IExecutionsSummary;
 
-			if (workflowExecution && workflowExecution.waitTill) {
+			if (workflowExecution?.waitTill) {
 				const lastNodeExecuted = get(workflowExecution, 'data.resultData.lastNodeExecuted');
 				if (this.name === lastNodeExecuted) {
 					const waitDate = new Date(workflowExecution.waitTill);
@@ -404,27 +459,35 @@ export default defineComponent({
 			return this.uiStore.isActionActive('workflowRunning');
 		},
 		nodeStyle(): object {
+			const returnStyles: {
+				[key: string]: string;
+			} = {};
+
 			let borderColor = getStyleTokenValue('--color-foreground-xdark');
 
+			if (this.isConfigurableNode || this.isConfigNode) {
+				borderColor = getStyleTokenValue('--color-foreground-dark');
+			}
+
 			if (this.data.disabled) {
 				borderColor = getStyleTokenValue('--color-foreground-base');
 			} else if (!this.isExecuting) {
 				if (this.hasIssues) {
 					borderColor = getStyleTokenValue('--color-danger');
+					returnStyles['border-width'] = '2px';
+					returnStyles['border-style'] = 'solid';
 				} else if (this.waiting || this.showPinnedDataInfo) {
 					borderColor = getStyleTokenValue('--color-secondary');
 				} else if (this.nodeExecutionStatus === 'unknown') {
 					borderColor = getStyleTokenValue('--color-foreground-xdark');
 				} else if (this.workflowDataItems) {
+					returnStyles['border-width'] = '2px';
+					returnStyles['border-style'] = 'solid';
 					borderColor = getStyleTokenValue('--color-success');
 				}
 			}
 
-			const returnStyles: {
-				[key: string]: string;
-			} = {
-				'border-color': borderColor,
-			};
+			returnStyles['border-color'] = borderColor;
 
 			return returnStyles;
 		},
@@ -435,7 +498,7 @@ export default defineComponent({
 			);
 		},
 		shiftOutputCount(): boolean {
-			return !!(this.nodeType && this.nodeType.outputs.length > 2);
+			return !!(this.nodeType && this.outputs.length > 2);
 		},
 		shouldShowTriggerTooltip(): boolean {
 			return (
@@ -619,7 +682,7 @@ export default defineComponent({
 			this.pinDataDiscoveryTooltipVisible = false;
 		},
 		touchStart() {
-			if (this.isTouchDevice === true && this.isMacOs === false && this.isTouchActive === false) {
+			if (this.isTouchDevice === true && !this.isMacOs && !this.isTouchActive) {
 				this.isTouchActive = true;
 				setTimeout(() => {
 					this.isTouchActive = false;
@@ -632,19 +695,26 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .node-wrapper {
+	--node-width: 100px;
+	--node-height: 100px;
+
+	--configurable-node-min-input-count: 4;
+	--configurable-node-input-width: 65px;
+
 	position: absolute;
-	width: 100px;
-	height: 100px;
+	width: var(--node-width);
+	height: var(--node-height);
 
 	.node-description {
 		position: absolute;
-		top: 100px;
-		left: -50px;
+		top: var(--node-height);
+		left: calc(var(--node-width) / 2 * -1);
 		line-height: 1.5;
 		text-align: center;
 		cursor: default;
 		padding: 8px;
-		width: 200px;
+		width: 100%;
+		min-width: calc(var(--node-width) * 2);
 		pointer-events: none; // prevent container from being draggable
 
 		.node-name > p {
@@ -680,9 +750,9 @@ export default defineComponent({
 			height: 100%;
 			border: 2px solid var(--color-foreground-xdark);
 			border-radius: var(--border-radius-large);
-			background-color: var(--color-background-xlight);
+			background-color: $node-background-default;
 			&.executing {
-				background-color: var(--color-primary-tint-3) !important;
+				background-color: $node-background-executing !important;
 
 				.node-executing-info {
 					display: inline-block;
@@ -763,10 +833,9 @@ export default defineComponent({
 			position: absolute;
 			top: -25px;
 			left: -10px;
-			width: 120px;
+			width: calc(var(--node-width) + 20px);
 			height: 26px;
 			font-size: 0.9em;
-			text-align: left;
 			z-index: 10;
 			color: #aaa;
 			text-align: center;
@@ -789,6 +858,17 @@ export default defineComponent({
 					font-size: 1.2em;
 				}
 			}
+
+			&:after {
+				content: '';
+				display: block;
+				position: absolute;
+				left: 0;
+				right: 0;
+				top: -1rem;
+				bottom: -1rem;
+				z-index: -1;
+			}
 		}
 
 		&.is-touch-device .node-options {
@@ -800,9 +880,121 @@ export default defineComponent({
 			}
 		}
 	}
+
+	&--config {
+		--configurable-node-input-width: 55px;
+		--node-width: 75px;
+		--node-height: 75px;
+
+		& [class*='node-wrapper--connection-type'] {
+			--configurable-node-options: -10px;
+		}
+		.node-default {
+			.node-options {
+				background: color-mix(in srgb, var(--color-canvas-background) 80%, transparent);
+				height: 25px;
+			}
+
+			.node-icon {
+				scale: 0.75;
+			}
+		}
+
+		.node-default {
+			.node-box {
+				border: 2px solid var(--color-foreground-xdark);
+				//background-color: $node-background-type-other;
+				border-radius: 50px;
+
+				&.executing {
+					background-color: $node-background-executing-other !important;
+				}
+
+				.node-executing-info {
+					font-size: 2.85em;
+				}
+			}
+		}
+
+		@each $node-type in $supplemental-node-types {
+			&.node-wrapper--connection-type-#{$node-type} {
+				.node-default .node-box {
+					background: var(--node-type-#{$node-type}-background);
+				}
+
+				.node-description {
+					.node-subtitle {
+						color: var(--node-type-#{$node-type}-color);
+					}
+				}
+			}
+		}
+
+		.node-info-icon {
+			bottom: 4px !important;
+			right: 50% !important;
+			transform: translateX(50%) scale(0.75);
+		}
+
+		&.node-wrapper--configurable {
+			--configurable-node-icon-offset: 20px;
+
+			.node-info-icon {
+				bottom: 1px !important;
+				right: 1px !important;
+			}
+		}
+	}
+
+	&--configurable {
+		--node-width: var(
+			--configurable-node-width,
+			calc(
+				max(var(--configurable-node-input-count, 5), var(--configurable-node-min-input-count)) *
+					var(--configurable-node-input-width)
+			)
+		);
+		--configurable-node-icon-offset: 40px;
+		--configurable-node-icon-size: 30px;
+		--configurable-node-options: -10px;
+
+		.node-description {
+			top: calc(50%);
+			transform: translateY(-50%);
+			left: calc(
+				var(--configurable-node-icon-offset) + var(--configurable-node-icon-size) + var(--spacing-s)
+			);
+			text-align: left;
+			overflow: auto;
+			white-space: normal;
+			min-width: unset;
+			max-width: calc(
+				var(--node-width) - var(--configurable-node-icon-offset) - var(
+						--configurable-node-icon-size
+					) - 2 * var(--spacing-s)
+			);
+		}
+
+		.node-default {
+			.node-icon {
+				left: var(--configurable-node-icon-offset);
+			}
+
+			.node-options {
+				left: var(--configurable-node-options, 65px);
+				height: 25px;
+			}
+
+			.node-executing-info {
+				left: -67px;
+			}
+		}
+	}
+
 	&--trigger .node-default .node-box {
 		border-radius: 32px 8px 8px 32px;
 	}
+
 	.trigger-icon {
 		position: absolute;
 		right: 100%;
@@ -819,6 +1011,8 @@ export default defineComponent({
 }
 
 .select-background {
+	--node--selected--box-shadow-radius: 8px;
+
 	display: block;
 	background-color: hsla(
 		var(--color-foreground-base-h),
@@ -829,14 +1023,25 @@ export default defineComponent({
 	border-radius: var(--border-radius-xlarge);
 	overflow: hidden;
 	position: absolute;
-	left: -8px !important;
-	top: -8px !important;
-	height: 116px;
-	width: 116px !important;
+	left: calc(var(--node--selected--box-shadow-radius) * -1) !important;
+	top: calc(var(--node--selected--box-shadow-radius) * -1) !important;
+	height: calc(100% + 2 * var(--node--selected--box-shadow-radius));
+	width: calc(100% + 2 * var(--node--selected--box-shadow-radius)) !important;
 
 	.node-wrapper--trigger & {
 		border-radius: 36px 8px 8px 36px;
 	}
+
+	.node-wrapper--config & {
+		--node--selected--box-shadow-radius: 4px;
+		border-radius: 60px;
+		background-color: hsla(
+			var(--color-foreground-base-h),
+			60%,
+			var(--color-foreground-base-l),
+			80%
+		);
+	}
 }
 
 .disabled-linethrough {
@@ -938,6 +1143,7 @@ export default defineComponent({
 	path:not(.jtk-connector-outline) {
 		stroke: var(--color-success-light);
 	}
+	path[jtk-overlay-id='reverse-arrow'],
 	path[jtk-overlay-id='endpoint-arrow'],
 	path[jtk-overlay-id='midpoint-arrow'] {
 		fill: var(--color-success-light);
@@ -1082,8 +1288,94 @@ export default defineComponent({
 	}
 }
 
+.diamond-output-endpoint {
+	--diamond-output-endpoint--transition-duration: 0.15s;
+
+	transition: transform var(--diamond-output-endpoint--transition-duration) ease;
+	transform: rotate(45deg);
+	z-index: 10;
+}
+
+.add-input-endpoint {
+	--add-input-endpoint--transition-duration: 0.15s;
+
+	&:not(.jtk-endpoint-connected) {
+		cursor: pointer;
+	}
+
+	&.add-input-endpoint-multiple {
+		z-index: 100;
+		cursor: pointer;
+	}
+
+	&.jtk-endpoint-connected {
+		z-index: 10;
+	}
+
+	.add-input-endpoint-default {
+		transition: transform var(--add-input-endpoint--transition-duration) ease;
+	}
+
+	.add-input-endpoint-diamond {
+		transition: fill var(--add-input-endpoint--transition-duration) ease;
+		fill: var(--svg-color, var(--color-primary));
+	}
+
+	.add-input-endpoint-line {
+		transition: fill var(--add-input-endpoint--transition-duration) ease;
+		fill: var(--svg-color, var(--color-primary));
+	}
+
+	.add-input-endpoint-plus-rectangle {
+		transition:
+			fill var(--add-input-endpoint--transition-duration) ease,
+			stroke var(--add-input-endpoint--transition-duration) ease;
+		fill: var(--color-foreground-xlight);
+		stroke: var(--svg-color, var(--color-primary));
+	}
+
+	.add-input-endpoint-plus-icon {
+		stroke: none;
+		transition: fill var(--add-input-endpoint--transition-duration) ease;
+		fill: var(--svg-color, var(--color-primary));
+	}
+
+	.add-input-endpoint-connected-rectangle {
+		transition:
+			fill var(--add-input-endpoint--transition-duration) ease,
+			stroke var(--add-input-endpoint--transition-duration) ease;
+		fill: var(--color-foreground-xdark);
+		stroke: var(--color-foreground-xdark);
+	}
+
+	&.rect-input-endpoint-hover {
+		.add-input-endpoint-plus-rectangle {
+			stroke: var(--svg-color, var(--color-primary));
+		}
+
+		.add-input-endpoint-plus-icon {
+			fill: var(--svg-color, var(--color-primary));
+		}
+	}
+
+	&.jtk-endpoint-connected:not(.add-input-endpoint-multiple) {
+		.add-input-endpoint-unconnected {
+			display: none;
+		}
+
+		&.rect-input-endpoint-hover {
+			.add-input-endpoint-connected-rectangle {
+				fill: var(--svg-color, var(--color-primary));
+				stroke: var(--svg-color, var(--color-primary));
+			}
+		}
+	}
+}
+
 .node-input-endpoint-label,
 .node-output-endpoint-label {
+	--node-endpoint-label--transition-duration: 0.15s;
+
 	background-color: hsla(
 		var(--color-canvas-background-h),
 		var(--color-canvas-background-s),
@@ -1094,11 +1386,25 @@ export default defineComponent({
 	font-size: 0.7em;
 	padding: 2px;
 	white-space: nowrap;
+	transition: color var(--node-endpoint-label--transition-duration) ease;
+
+	@each $node-type in $supplemental-node-types {
+		&.node-connection-type-#{$node-type} {
+			color: var(--node-type-supplemental-label-color);
+		}
+	}
 }
 
 .node-output-endpoint-label {
 	margin-left: calc(var(--endpoint-size-small) + var(--spacing-2xs));
+
+	&--data {
+		text-align: center;
+		margin-top: calc(var(--spacing-l) * -1);
+		margin-left: 0;
+	}
 }
+
 .node-input-endpoint-label {
 	text-align: right;
 	margin-left: -25px;
@@ -1106,7 +1412,14 @@ export default defineComponent({
 	&--moved {
 		margin-left: -40px;
 	}
+
+	&--data {
+		text-align: center;
+		margin-top: calc(var(--spacing-5xs) * -1);
+		margin-left: 0;
+	}
 }
+
 .hover-message.jtk-overlay {
 	--hover-message-width: 110px;
 	font-weight: var(--font-weight-bold);

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

@@ -12,7 +12,8 @@
 		:data-test-id="dataTestId"
 	>
 		<template #icon>
-			<node-icon :nodeType="nodeType" />
+			<div v-if="isSubNode" :class="$style.subNodeBackground"></div>
+			<node-icon :class="$style.nodeIcon" :nodeType="nodeType" />
 		</template>
 
 		<template #tooltip v-if="isCommunityNode">
@@ -50,6 +51,7 @@ import NodeIcon from '@/components/NodeIcon.vue';
 
 import { useActions } from '../composables/useActions';
 import { useI18n, useTelemetry } from '@/composables';
+import { NodeHelpers, NodeConnectionType } from 'n8n-workflow';
 
 export interface Props {
 	nodeType: SimplifiedNodeType;
@@ -75,7 +77,7 @@ const description = computed<string>(() => {
 	return i18n.headerText({
 		key: `headers.${shortNodeType.value}.description`,
 		fallback: props.nodeType.description,
-	}) as string;
+	});
 });
 const showActionArrow = computed(() => hasActions.value);
 const dataTestId = computed(() =>
@@ -109,9 +111,20 @@ const displayName = computed<any>(() => {
 	});
 });
 
+const isSubNode = computed<boolean>(() => {
+	if (!props.nodeType.outputs || typeof props.nodeType.outputs === 'string') {
+		return false;
+	}
+	const outputTypes = NodeHelpers.getConnectionTypes(props.nodeType.outputs);
+	return outputTypes
+		? outputTypes.filter((output) => output !== NodeConnectionType.Main).length > 0
+		: false;
+});
+
 const isTrigger = computed<boolean>(() => {
 	return props.nodeType.group.includes('trigger') && !hasActions.value;
 });
+
 function onDragStart(event: DragEvent): void {
 	/**
 	 * Workaround for firefox, that doesn't attach the pageX and pageY coordinates to "ondrag" event.
@@ -170,6 +183,19 @@ function onCommunityNodeTooltipClick(event: MouseEvent) {
 	user-select: none;
 }
 
+.nodeIcon {
+	z-index: 2;
+}
+
+.subNodeBackground {
+	background-color: var(--node-type-supplemental-background);
+	border-radius: 50%;
+	height: 40px;
+	position: absolute;
+	transform: translate(-7px, -7px);
+	width: 40px;
+	z-index: 1;
+}
 .communityNodeIcon {
 	vertical-align: top;
 }

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

@@ -7,7 +7,13 @@
 		:showActionArrow="true"
 	>
 		<template #icon>
-			<n8n-node-icon type="icon" :name="item.icon" :circle="false" :showTooltip="false" />
+			<n8n-node-icon
+				type="icon"
+				:name="item.icon"
+				:circle="false"
+				:showTooltip="false"
+				v-bind="item.iconProps"
+			/>
 		</template>
 	</n8n-node-creator-node>
 </template>

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

@@ -2,13 +2,20 @@
 import { camelCase } from 'lodash-es';
 import { computed } from 'vue';
 import type { INodeCreateElement, NodeFilterType } from '@/Interface';
-import { TRIGGER_NODE_CREATOR_VIEW, HTTP_REQUEST_NODE_TYPE, WEBHOOK_NODE_TYPE } from '@/constants';
+import {
+	TRIGGER_NODE_CREATOR_VIEW,
+	HTTP_REQUEST_NODE_TYPE,
+	WEBHOOK_NODE_TYPE,
+	REGULAR_NODE_CREATOR_VIEW,
+	AI_NODE_CREATOR_VIEW,
+	AI_OTHERS_NODE_CREATOR_VIEW,
+} from '@/constants';
 
 import type { BaseTextKey } from '@/plugins/i18n';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
 
-import { TriggerView, RegularView } from '../viewsData';
+import { TriggerView, RegularView, AIView, AINodesView } from '../viewsData';
 import { transformNodeType } from '../utils';
 import { useViewStacks } from '../composables/useViewStacks';
 import { useActions } from '../composables/useActions';
@@ -48,14 +55,22 @@ function selectNodeType(nodeTypes: string[]) {
 
 function onSelected(item: INodeCreateElement) {
 	if (item.type === 'subcategory') {
-		const title = i18n.baseText(
-			`nodeCreator.subcategoryNames.${camelCase(item.properties.title)}` as BaseTextKey,
-		);
+		const subcategoryKey = camelCase(item.properties.title);
+		const title = i18n.baseText(`nodeCreator.subcategoryNames.${subcategoryKey}` as BaseTextKey);
 
 		pushViewStack({
 			subcategory: item.key,
 			title,
 			mode: 'nodes',
+			...(item.properties.icon
+				? {
+						nodeIcon: {
+							icon: item.properties.icon,
+							iconType: 'icon',
+						},
+				  }
+				: {}),
+			...(item.properties.panelClass ? { panelClass: item.properties.panelClass } : {}),
 			rootView: activeViewStack.value.rootView,
 			forceIncludeNodes: item.properties.forceIncludeNodes,
 			baseFilter: baseSubcategoriesFilter,
@@ -99,11 +114,26 @@ function onSelected(item: INodeCreateElement) {
 	}
 
 	if (item.type === 'view') {
-		const view = item.key === TRIGGER_NODE_CREATOR_VIEW ? TriggerView() : RegularView();
+		const views = {
+			[TRIGGER_NODE_CREATOR_VIEW]: TriggerView,
+			[REGULAR_NODE_CREATOR_VIEW]: RegularView,
+			[AI_NODE_CREATOR_VIEW]: AIView,
+			[AI_OTHERS_NODE_CREATOR_VIEW]: AINodesView,
+		};
+
+		const itemKey = item.key as keyof typeof views;
+		const matchedView = views[itemKey];
+
+		if (!matchedView) {
+			console.warn(`No view found for ${itemKey}`);
+			return;
+		}
+		const view = matchedView(mergedNodes);
 
 		pushViewStack({
 			title: view.title,
 			subtitle: view?.subtitle ?? '',
+			info: view?.info ?? '',
 			items: view.items as INodeCreateElement[],
 			hasSearch: true,
 			rootView: view.value as NodeFilterType,
@@ -162,7 +192,7 @@ function onKeySelect(activeItemId: string) {
 	const item = mergedItems.find((i) => i.uuid === activeItemId);
 	if (!item) return;
 
-	onSelected(item as INodeCreateElement);
+	onSelected(item);
 }
 
 registerKeyHook('MainViewArrowRight', {

packages/editor-ui/src/components/Node/NodeCreator/Panel/NodesListPanel.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, watch } from 'vue';
 import type { INodeCreateElement } from '@/Interface';
-import { TRIGGER_NODE_CREATOR_VIEW } from '@/constants';
+import {
+	AI_OTHERS_NODE_CREATOR_VIEW,
+	AI_NODE_CREATOR_VIEW,
+	REGULAR_NODE_CREATOR_VIEW,
+	TRIGGER_NODE_CREATOR_VIEW,
+} from '@/constants';
 
 import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
 
-import { TriggerView, RegularView } from '../viewsData';
+import { TriggerView, RegularView, AIView, AINodesView } from '../viewsData';
 import { useViewStacks } from '../composables/useViewStacks';
 import { useKeyboardNavigation } from '../composables/useKeyboardNavigation';
 import SearchBar from './SearchBar.vue';
@@ -59,12 +64,27 @@ onUnmounted(() => {
 watch(
 	() => nodeCreatorView.value,
 	(selectedView) => {
-		const view = selectedView === TRIGGER_NODE_CREATOR_VIEW ? TriggerView() : RegularView();
+		const views = {
+			[TRIGGER_NODE_CREATOR_VIEW]: TriggerView,
+			[REGULAR_NODE_CREATOR_VIEW]: RegularView,
+			[AI_NODE_CREATOR_VIEW]: AIView,
+			[AI_OTHERS_NODE_CREATOR_VIEW]: AINodesView,
+		};
+
+		const itemKey = selectedView;
+		const matchedView = views[itemKey];
+
+		if (!matchedView) {
+			console.warn(`No view found for ${itemKey}`);
+			return;
+		}
+		const view = matchedView(mergedNodes);
 
 		pushViewStack({
 			title: view.title,
 			subtitle: view?.subtitle ?? '',
 			items: view.items as INodeCreateElement[],
+			info: view.info,
 			hasSearch: true,
 			mode: 'nodes',
 			rootView: selectedView,
@@ -86,13 +106,25 @@ function onBackButton() {
 		:name="`panel-slide-${activeViewStack.transitionDirection}`"
 		@afterLeave="onTransitionEnd"
 	>
-		<aside :class="$style.nodesListPanel" @keydown.capture.stop :key="`${activeViewStack.uuid}`">
+		<aside
+			:class="[$style.nodesListPanel, activeViewStack.panelClass]"
+			@keydown.capture.stop
+			:key="`${activeViewStack.uuid}`"
+		>
 			<header
-				:class="{ [$style.header]: true, [$style.hasBg]: !activeViewStack.subtitle }"
+				:class="{
+					[$style.header]: true,
+					[$style.hasBg]: !activeViewStack.subtitle,
+					'nodes-list-panel-header': true,
+				}"
 				data-test-id="nodes-list-header"
 			>
 				<div :class="$style.top">
-					<button :class="$style.backButton" @click="onBackButton" v-if="viewStacks.length > 1">
+					<button
+						:class="$style.backButton"
+						@click="onBackButton"
+						v-if="viewStacks.length > 1 && !activeViewStack.preventBack"
+					>
 						<font-awesome-icon :class="$style.backButtonIcon" icon="arrow-left" size="2x" />
 					</button>
 					<n8n-node-icon
@@ -104,7 +136,7 @@ function onBackButton() {
 						:color="activeViewStack.nodeIcon.color"
 						:circle="false"
 						:showTooltip="false"
-						:size="16"
+						:size="20"
 					/>
 					<p :class="$style.title" v-text="activeViewStack.title" v-if="activeViewStack.title" />
 				</div>
@@ -126,6 +158,12 @@ function onBackButton() {
 				@update:modelValue="onSearch"
 			/>
 			<div :class="$style.renderedItems">
+				<n8n-notice
+					v-if="activeViewStack.info && !activeViewStack.search"
+					:class="$style.info"
+					:content="activeViewStack.info"
+					theme="info"
+				/>
 				<!-- Actions mode -->
 				<ActionsRenderer v-if="isActionsMode && activeViewStack.subcategory" v-bind="$attrs" />
 
@@ -160,6 +198,9 @@ function onBackButton() {
 	// for the slide-out panel effect
 	z-index: 1;
 }
+.info {
+	margin: var(--spacing-2xs) var(--spacing-s);
+}
 .backButton {
 	background: transparent;
 	border: none;
@@ -173,7 +214,7 @@ function onBackButton() {
 	padding: 0;
 }
 .nodeIcon {
-	--node-icon-size: 16px;
+	--node-icon-size: 20px;
 	margin-right: var(--spacing-s);
 }
 .renderedItems {
@@ -254,3 +295,13 @@ function onBackButton() {
 	margin-left: calc(var(--spacing-xl) + var(--spacing-4xs));
 }
 </style>
+
+<style lang="scss">
+@each $node-type in $supplemental-node-types {
+	.nodes-list-panel-#{$node-type} .nodes-list-panel-header {
+		.n8n-node-icon svg {
+			color: var(--node-type-#{$node-type}-color);
+		}
+	}
+}
+</style>

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

@@ -36,7 +36,7 @@ const activeItemId = computed(() => useKeyboardNavigation()?.activeItemId);
 // Lazy render large items lists to prevent the browser from freezing
 // when loading many items.
 function renderItems() {
-	if (props.elements.length <= LAZY_LOAD_THRESHOLD || props.lazyRender === false) {
+	if (props.elements.length <= LAZY_LOAD_THRESHOLD || !props.lazyRender) {
 		renderedItems.value = props.elements;
 		return;
 	}
@@ -197,19 +197,21 @@ watch(
 	}
 }
 .view {
-	margin-top: var(--spacing-s);
-	padding-top: var(--spacing-xs);
 	position: relative;
 
-	&::after {
-		content: '';
-		position: absolute;
-		left: var(--spacing-s);
-		right: var(--spacing-s);
-		top: 0;
-		margin: auto;
-		bottom: 0;
-		border-top: 1px solid var(--color-foreground-base);
+	&:last-child {
+		margin-top: var(--spacing-s);
+		padding-top: var(--spacing-xs);
+		&:after {
+			content: '';
+			position: absolute;
+			left: var(--spacing-s);
+			right: var(--spacing-s);
+			top: 0;
+			margin: auto;
+			bottom: 0;
+			border-top: 1px solid var(--color-foreground-base);
+		}
 	}
 }
 </style>

packages/editor-ui/src/components/Node/NodeCreator/composables/useActionsGeneration.ts

@@ -56,6 +56,7 @@ function getNodeTypeBase(nodeTypeDescription: INodeTypeDescription, label?: stri
 			categories: [category],
 		},
 		iconUrl: nodeTypeDescription.iconUrl,
+		outputs: nodeTypeDescription.outputs,
 		icon: nodeTypeDescription.icon,
 		defaults: nodeTypeDescription.defaults,
 	};
@@ -225,7 +226,7 @@ export function useActionsGenerator() {
 	}
 
 	function getSimplifiedNodeType(node: INodeTypeDescription): SimplifiedNodeType {
-		const { displayName, defaults, description, name, group, icon, iconUrl, codex } = node;
+		const { displayName, defaults, description, name, group, icon, iconUrl, outputs, codex } = node;
 
 		return {
 			displayName,
@@ -235,6 +236,7 @@ export function useActionsGenerator() {
 			group,
 			icon,
 			iconUrl,
+			outputs,
 			codex,
 		};
 	}

packages/editor-ui/src/components/Node/NodeCreator/composables/useViewStacks.ts

@@ -1,8 +1,17 @@
-import { computed, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 import { defineStore } from 'pinia';
 import { v4 as uuid } from 'uuid';
-import type { INodeCreateElement, NodeFilterType, SimplifiedNodeType } from '@/Interface';
-import { DEFAULT_SUBCATEGORY, TRIGGER_NODE_CREATOR_VIEW } from '@/constants';
+import type {
+	NodeConnectionType,
+	INodeCreateElement,
+	NodeFilterType,
+	SimplifiedNodeType,
+} from '@/Interface';
+import {
+	AI_OTHERS_NODE_CREATOR_VIEW,
+	DEFAULT_SUBCATEGORY,
+	TRIGGER_NODE_CREATOR_VIEW,
+} from '@/constants';
 
 import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
 
@@ -13,6 +22,11 @@ import {
 	sortNodeCreateElements,
 	searchNodes,
 } from '../utils';
+import { useI18n } from '@/composables';
+
+import type { INodeInputFilter } from 'n8n-workflow';
+import { useNodeTypesStore } from '@/stores';
+import { AINodesView, type NodeViewItem } from '@/components/Node/NodeCreator/viewsData';
 
 interface ViewStack {
 	uuid?: string;
@@ -20,6 +34,7 @@ interface ViewStack {
 	subtitle?: string;
 	search?: string;
 	subcategory?: string;
+	info?: string;
 	nodeIcon?: {
 		iconType?: string;
 		icon?: string;
@@ -30,6 +45,7 @@ interface ViewStack {
 	activeIndex?: number;
 	transitionDirection?: 'in' | 'out';
 	hasSearch?: boolean;
+	preventBack?: boolean;
 	items?: INodeCreateElement[];
 	baselineItems?: INodeCreateElement[];
 	searchItems?: SimplifiedNodeType[];
@@ -37,6 +53,7 @@ interface ViewStack {
 	mode?: 'actions' | 'nodes';
 	baseFilter?: (item: INodeCreateElement) => boolean;
 	itemsMapper?: (item: INodeCreateElement) => INodeCreateElement;
+	panelClass?: string;
 }
 
 export const useViewStacks = defineStore('nodeCreatorViewStacks', () => {
@@ -78,7 +95,7 @@ export const useViewStacks = defineStore('nodeCreatorViewStacks', () => {
 
 	const searchBaseItems = computed<INodeCreateElement[]>(() => {
 		const stack = viewStacks.value[viewStacks.value.length - 1];
-		if (!stack || !stack.searchItems) return [];
+		if (!stack?.searchItems) return [];
 
 		return stack.searchItems.map((item) => transformNodeType(item, stack.subcategory));
 	});
@@ -86,7 +103,7 @@ export const useViewStacks = defineStore('nodeCreatorViewStacks', () => {
 	// Generate a delta between the global search results(all nodes) and the stack search results
 	const globalSearchItemsDiff = computed<INodeCreateElement[]>(() => {
 		const stack = viewStacks.value[viewStacks.value.length - 1];
-		if (!stack || !stack.search) return [];
+		if (!stack?.search) return [];
 
 		const allNodes = nodeCreatorStore.mergedNodes.map((item) => transformNodeType(item));
 		const globalSearchResult = extendItemsWithUUID(searchNodes(stack.search || '', allNodes));
@@ -96,13 +113,75 @@ export const useViewStacks = defineStore('nodeCreatorViewStacks', () => {
 		});
 	});
 
+	async function gotoCompatibleConnectionView(
+		connectionType: NodeConnectionType,
+		isOutput?: boolean,
+		filter?: INodeInputFilter,
+	) {
+		const i18n = useI18n();
+
+		let nodesByConnectionType: { [key: string]: string[] };
+		let relatedAIView: NodeViewItem | { properties: { title: string; icon: string } } | undefined;
+
+		if (isOutput === true) {
+			nodesByConnectionType = useNodeTypesStore().visibleNodeTypesByInputConnectionTypeNames;
+			relatedAIView = {
+				properties: {
+					title: i18n.baseText('nodeCreator.aiPanel.aiNodes'),
+					icon: 'robot',
+				},
+			};
+		} else {
+			nodesByConnectionType = useNodeTypesStore().visibleNodeTypesByOutputConnectionTypeNames;
+
+			relatedAIView = AINodesView([]).items.find(
+				(item) => item.properties.connectionType === connectionType,
+			);
+		}
+
+		await nextTick();
+		pushViewStack({
+			title: relatedAIView?.properties.title,
+			rootView: AI_OTHERS_NODE_CREATOR_VIEW,
+			mode: 'nodes',
+			items: nodeCreatorStore.allNodeCreatorNodes,
+			nodeIcon: {
+				iconType: 'icon',
+				icon: relatedAIView?.properties.icon,
+				color: relatedAIView?.properties.iconProps?.color,
+			},
+			panelClass: relatedAIView?.properties.panelClass,
+			baseFilter: (i: INodeCreateElement) => {
+				const displayNode = nodesByConnectionType[connectionType].includes(i.key);
+
+				// TODO: Filtering works currently fine for displaying compatible node when dropping
+				//       input connections. However, it does not work for output connections.
+				//       For that reason does it currently display nodes that are maybe not compatible
+				//       but then errors once it got selected by the user.
+				if (displayNode && filter?.nodes?.length) {
+					return filter.nodes.includes(i.key);
+				}
+
+				return displayNode;
+			},
+			itemsMapper(item) {
+				return {
+					...item,
+					subcategory: connectionType,
+				};
+			},
+			preventBack: true,
+		});
+	}
+
 	function setStackBaselineItems() {
 		const stack = viewStacks.value[viewStacks.value.length - 1];
 		if (!stack || !activeViewStack.value.uuid) return;
 
-		const subcategorizedItems = subcategorizeItems(nodeCreatorStore.mergedNodes);
 		let stackItems =
-			stack?.items ?? subcategorizedItems[stack?.subcategory ?? DEFAULT_SUBCATEGORY] ?? [];
+			stack?.items ??
+			subcategorizeItems(nodeCreatorStore.mergedNodes)[stack?.subcategory ?? DEFAULT_SUBCATEGORY] ??
+			[];
 
 		// Ensure that the nodes specified in `stack.forceIncludeNodes` are always included,
 		// regardless of whether the subcategory is matched
@@ -183,6 +262,7 @@ export const useViewStacks = defineStore('nodeCreatorViewStacks', () => {
 		activeViewStack,
 		activeViewStackMode,
 		globalSearchItemsDiff,
+		gotoCompatibleConnectionView,
 		resetViewStacks,
 		updateCurrentViewStack,
 		pushViewStack,

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

@@ -5,7 +5,7 @@ import type {
 	SimplifiedNodeType,
 	INodeCreateElement,
 } from '@/Interface';
-import { CORE_NODES_CATEGORY, DEFAULT_SUBCATEGORY } from '@/constants';
+import { AI_SUBCATEGORY, CORE_NODES_CATEGORY, DEFAULT_SUBCATEGORY } from '@/constants';
 import { v4 as uuidv4 } from 'uuid';
 import { sublimeSearch } from '@/utils';
 
@@ -31,12 +31,16 @@ export function transformNodeType(
 }
 
 export function subcategorizeItems(items: SimplifiedNodeType[]) {
+	const WHITE_LISTED_SUBCATEGORIES = [CORE_NODES_CATEGORY, AI_SUBCATEGORY];
 	return items.reduce((acc: SubcategorizedNodeTypes, item) => {
-		// Only Core Nodes subcategories are valid, others are uncategorized
-		const isCoreNodesCategory = item.codex?.categories?.includes(CORE_NODES_CATEGORY);
-		const subcategories = isCoreNodesCategory
-			? item?.codex?.subcategories?.[CORE_NODES_CATEGORY] ?? []
-			: [DEFAULT_SUBCATEGORY];
+		// Only some subcategories are allowed
+		let subcategories: string[] = [DEFAULT_SUBCATEGORY];
+
+		WHITE_LISTED_SUBCATEGORIES.forEach((category) => {
+			if (item.codex?.categories?.includes(category)) {
+				subcategories = item.codex?.subcategories?.[category] ?? [];
+			}
+		});
 
 		subcategories.forEach((subcategory: string) => {
 			if (!acc[subcategory]) {

packages/editor-ui/src/components/Node/NodeCreator/viewsData.ts

@@ -13,13 +13,216 @@ import {
 	TRIGGER_NODE_CREATOR_VIEW,
 	EMAIL_IMAP_NODE_TYPE,
 	DEFAULT_SUBCATEGORY,
+	AI_NODE_CREATOR_VIEW,
+	AI_CATEGORY_AGENTS,
+	AI_CATEGORY_CHAINS,
+	AI_CATEGORY_DOCUMENT_LOADERS,
+	AI_CATEGORY_LANGUAGE_MODELS,
+	AI_CATEGORY_MEMORY,
+	AI_CATEGORY_OUTPUTPARSER,
+	AI_CATEGORY_RETRIEVERS,
+	AI_CATEGORY_TEXT_SPLITTERS,
+	AI_CATEGORY_TOOLS,
+	AI_CATEGORY_VECTOR_STORES,
+	AI_SUBCATEGORY,
+	AI_CATEGORY_EMBEDDING,
+	AI_OTHERS_NODE_CREATOR_VIEW,
+	AI_UNCATEGORIZED_CATEGORY,
 } from '@/constants';
 import { useI18n } from '@/composables';
+import { useNodeTypesStore } from '@/stores';
+import type { SimplifiedNodeType } from '@/Interface';
+import type { INodeTypeDescription } from 'n8n-workflow';
+import { NodeConnectionType } from 'n8n-workflow';
 
-export function TriggerView() {
+export interface NodeViewItem {
+	key: string;
+	type: string;
+	properties: {
+		name?: string;
+		title: string;
+		icon: string;
+		iconProps?: {
+			color?: string;
+		};
+		connectionType?: NodeConnectionType;
+		panelClass?: string;
+		group?: string[];
+		description?: string;
+		forceIncludeNodes?: string[];
+	};
+	category?: string | string[];
+}
+
+interface NodeView {
+	value: string;
+	title: string;
+	info?: string;
+	subtitle?: string;
+	items: NodeViewItem[];
+}
+
+function getAiNodesBySubcategory(nodes: INodeTypeDescription[], subcategory: string) {
+	return nodes
+		.filter((node) => node.codex?.subcategories?.[AI_SUBCATEGORY]?.includes(subcategory))
+		.map((node) => ({
+			key: node.name,
+			type: 'node',
+			properties: {
+				group: [],
+				name: node.name,
+				displayName: node.displayName,
+				title: node.displayName,
+				description: node.description,
+				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+				icon: node.icon!,
+			},
+		}))
+		.sort((a, b) => a.properties.displayName.localeCompare(b.properties.displayName));
+}
+
+export function AIView(_nodes: SimplifiedNodeType[]): NodeView {
 	const i18n = useI18n();
+	const nodeTypesStore = useNodeTypesStore();
+
+	const chainNodes = getAiNodesBySubcategory(nodeTypesStore.allLatestNodeTypes, AI_CATEGORY_CHAINS);
+	const agentNodes = getAiNodesBySubcategory(nodeTypesStore.allLatestNodeTypes, AI_CATEGORY_AGENTS);
 
 	return {
+		value: AI_NODE_CREATOR_VIEW,
+		title: i18n.baseText('nodeCreator.aiPanel.aiNodes'),
+		subtitle: i18n.baseText('nodeCreator.aiPanel.selectAiNode'),
+		info: i18n.baseText('nodeCreator.aiPanel.infoBox'),
+		items: [
+			...chainNodes,
+			...agentNodes,
+			{
+				key: AI_OTHERS_NODE_CREATOR_VIEW,
+				type: 'view',
+				properties: {
+					title: i18n.baseText('nodeCreator.aiPanel.aiOtherNodes'),
+					icon: 'robot',
+					description: i18n.baseText('nodeCreator.aiPanel.aiOtherNodesDescription'),
+				},
+			},
+		],
+	};
+}
+export function AINodesView(_nodes: SimplifiedNodeType[]): NodeView {
+	const i18n = useI18n();
+
+	function getAISubcategoryProperties(nodeConnectionType: NodeConnectionType) {
+		return {
+			connectionType: nodeConnectionType,
+			iconProps: {
+				color: `var(--node-type-${nodeConnectionType}-color)`,
+			},
+			panelClass: `nodes-list-panel-${nodeConnectionType}`,
+		};
+	}
+
+	return {
+		value: AI_OTHERS_NODE_CREATOR_VIEW,
+		title: i18n.baseText('nodeCreator.aiPanel.aiOtherNodes'),
+		subtitle: i18n.baseText('nodeCreator.aiPanel.selectAiNode'),
+		items: [
+			{
+				key: AI_CATEGORY_DOCUMENT_LOADERS,
+				type: 'subcategory',
+				properties: {
+					title: AI_CATEGORY_DOCUMENT_LOADERS,
+					icon: 'file-import',
+					...getAISubcategoryProperties(NodeConnectionType.AiDocument),
+				},
+			},
+			{
+				key: AI_CATEGORY_LANGUAGE_MODELS,
+				type: 'subcategory',
+				properties: {
+					title: AI_CATEGORY_LANGUAGE_MODELS,
+					icon: 'language',
+					...getAISubcategoryProperties(NodeConnectionType.AiLanguageModel),
+				},
+			},
+			{
+				key: AI_CATEGORY_MEMORY,
+				type: 'subcategory',
+				properties: {
+					title: AI_CATEGORY_MEMORY,
+					icon: 'brain',
+					...getAISubcategoryProperties(NodeConnectionType.AiMemory),
+				},
+			},
+			{
+				key: AI_CATEGORY_OUTPUTPARSER,
+				type: 'subcategory',
+				properties: {
+					title: AI_CATEGORY_OUTPUTPARSER,
+					icon: 'list',
+					...getAISubcategoryProperties(NodeConnectionType.AiOutputParser),
+				},
+			},
+			{
+				key: AI_CATEGORY_RETRIEVERS,
+				type: 'subcategory',
+				properties: {
+					title: AI_CATEGORY_RETRIEVERS,
+					icon: 'search',
+					...getAISubcategoryProperties(NodeConnectionType.AiRetriever),
+				},
+			},
+			{
+				key: AI_CATEGORY_TEXT_SPLITTERS,
+				type: 'subcategory',
+				properties: {
+					title: AI_CATEGORY_TEXT_SPLITTERS,
+					icon: 'grip-lines-vertical',
+					...getAISubcategoryProperties(NodeConnectionType.AiTextSplitter),
+				},
+			},
+			{
+				key: AI_CATEGORY_TOOLS,
+				type: 'subcategory',
+				properties: {
+					title: AI_CATEGORY_TOOLS,
+					icon: 'tools',
+					...getAISubcategoryProperties(NodeConnectionType.AiTool),
+				},
+			},
+			{
+				key: AI_CATEGORY_EMBEDDING,
+				type: 'subcategory',
+				properties: {
+					title: AI_CATEGORY_EMBEDDING,
+					icon: 'vector-square',
+					...getAISubcategoryProperties(NodeConnectionType.AiEmbedding),
+				},
+			},
+			{
+				key: AI_CATEGORY_VECTOR_STORES,
+				type: 'subcategory',
+				properties: {
+					title: AI_CATEGORY_VECTOR_STORES,
+					icon: 'project-diagram',
+					...getAISubcategoryProperties(NodeConnectionType.AiVectorStore),
+				},
+			},
+			{
+				key: AI_UNCATEGORIZED_CATEGORY,
+				type: 'subcategory',
+				properties: {
+					title: AI_UNCATEGORIZED_CATEGORY,
+					icon: 'code',
+				},
+			},
+		],
+	};
+}
+
+export function TriggerView(nodes: SimplifiedNodeType[]) {
+	const i18n = useI18n();
+
+	const view: NodeView = {
 		value: TRIGGER_NODE_CREATOR_VIEW,
 		title: i18n.baseText('nodeCreator.triggerHelperPanel.selectATrigger'),
 		subtitle: i18n.baseText('nodeCreator.triggerHelperPanel.selectATriggerDescription'),
@@ -96,12 +299,26 @@ export function TriggerView() {
 			},
 		],
 	};
+
+	const hasAINodes = (nodes ?? []).some((node) => node.codex?.categories?.includes(AI_SUBCATEGORY));
+	if (hasAINodes)
+		view.items.push({
+			key: AI_NODE_CREATOR_VIEW,
+			type: 'view',
+			properties: {
+				title: i18n.baseText('nodeCreator.aiPanel.langchainAiNodes'),
+				icon: 'robot',
+				description: i18n.baseText('nodeCreator.aiPanel.nodesForAi'),
+			},
+		});
+
+	return view;
 }
 
-export function RegularView() {
+export function RegularView(nodes: SimplifiedNodeType[]) {
 	const i18n = useI18n();
 
-	return {
+	const view: NodeView = {
 		value: REGULAR_NODE_CREATOR_VIEW,
 		title: i18n.baseText('nodeCreator.triggerHelperPanel.whatHappensNext'),
 		items: [
@@ -149,15 +366,30 @@ export function RegularView() {
 					icon: 'file-alt',
 				},
 			},
-			{
-				key: TRIGGER_NODE_CREATOR_VIEW,
-				type: 'view',
-				properties: {
-					title: i18n.baseText('nodeCreator.triggerHelperPanel.addAnotherTrigger'),
-					icon: 'bolt',
-					description: i18n.baseText('nodeCreator.triggerHelperPanel.addAnotherTriggerDescription'),
-				},
-			},
 		],
 	};
+
+	const hasAINodes = (nodes ?? []).some((node) => node.codex?.categories?.includes(AI_SUBCATEGORY));
+	if (hasAINodes)
+		view.items.push({
+			key: AI_NODE_CREATOR_VIEW,
+			type: 'view',
+			properties: {
+				title: i18n.baseText('nodeCreator.aiPanel.langchainAiNodes'),
+				icon: 'robot',
+				description: i18n.baseText('nodeCreator.aiPanel.nodesForAi'),
+			},
+		});
+
+	view.items.push({
+		key: TRIGGER_NODE_CREATOR_VIEW,
+		type: 'view',
+		properties: {
+			title: i18n.baseText('nodeCreator.triggerHelperPanel.addAnotherTrigger'),
+			icon: 'bolt',
+			description: i18n.baseText('nodeCreator.triggerHelperPanel.addAnotherTriggerDescription'),
+		},
+	});
+
+	return view;
 }

packages/editor-ui/src/components/NodeDetailsView.vue

@@ -134,7 +134,7 @@ import type {
 	IRunExecutionData,
 	Workflow,
 } from 'n8n-workflow';
-import { jsonParse } from 'n8n-workflow';
+import { jsonParse, NodeHelpers, NodeConnectionType } from 'n8n-workflow';
 import type { IExecutionResponse, INodeUi, IUpdateInformation, TargetItem } from '@/Interface';
 
 import { externalHooks } from '@/mixins/externalHooks';
@@ -299,7 +299,7 @@ export default defineComponent({
 				return null;
 			}
 			const executionData: IRunExecutionData | undefined = this.workflowExecution.data;
-			if (executionData && executionData.resultData) {
+			if (executionData?.resultData) {
 				return executionData.resultData.runData;
 			}
 			return null;
@@ -329,18 +329,27 @@ export default defineComponent({
 			return Math.min(this.runOutputIndex, this.maxOutputRun);
 		},
 		maxInputRun(): number {
-			if (this.inputNode === null) {
+			if (this.inputNode === null && this.activeNode === null) {
 				return 0;
 			}
 
+			const workflowNode = this.workflow.getNode(this.activeNode.name);
+			const outputs = NodeHelpers.getNodeOutputs(this.workflow, workflowNode, this.activeNodeType);
+
+			let node = this.inputNode;
+
 			const runData: IRunData | null = this.workflowRunData;
 
-			if (runData === null || !runData.hasOwnProperty(this.inputNode.name)) {
+			if (outputs.filter((output) => output !== NodeConnectionType.Main).length) {
+				node = this.activeNode;
+			}
+
+			if (!node || !runData || !runData.hasOwnProperty(node.name)) {
 				return 0;
 			}
 
-			if (runData[this.inputNode.name].length) {
-				return runData[this.inputNode.name].length - 1;
+			if (runData[node.name].length) {
+				return runData[node.name].length - 1;
 			}
 
 			return 0;
@@ -539,7 +548,7 @@ export default defineComponent({
 					node_type: this.activeNode.type,
 					workflow_id: this.workflowsStore.workflowId,
 					session_id: this.sessionId,
-					pane: 'main',
+					pane: NodeConnectionType.Main,
 					type: 'i-wish-this-node-would',
 				});
 			}
@@ -607,6 +616,19 @@ export default defineComponent({
 				return;
 			}
 
+			if (
+				typeof this.activeNodeType.outputs === 'string' ||
+				typeof this.activeNodeType.inputs === 'string'
+			) {
+				// TODO: We should keep track of if it actually changed and only do if required
+				// Whenever a node with custom inputs and outputs gets closed redraw it in case
+				// they changed
+				const nodeName = this.activeNode.name;
+				setTimeout(() => {
+					this.$emit('redrawNode', nodeName);
+				}, 1);
+			}
+
 			if (this.outputPanelEditMode.enabled) {
 				const shouldPinDataBeforeClosing = await this.confirm(
 					'',

packages/editor-ui/src/components/NodeExecuteButton.vue

@@ -83,10 +83,9 @@ export default defineComponent({
 		},
 		nodeRunning(): boolean {
 			const triggeredNode = this.workflowsStore.executedNode;
-			const executingNode = this.workflowsStore.executingNode;
 			return (
 				this.workflowRunning &&
-				(executingNode === this.node.name || triggeredNode === this.node.name)
+				(this.workflowsStore.isNodeExecuting(this.node.name) || triggeredNode === this.node.name)
 			);
 		},
 		workflowRunning(): boolean {
@@ -224,7 +223,10 @@ export default defineComponent({
 					this.$telemetry.track('User clicked execute node button', telemetryPayload);
 					await this.$externalHooks().run('nodeExecuteButton.onClick', telemetryPayload);
 
-					await this.runWorkflow(this.nodeName, 'RunData.ExecuteNodeButton');
+					await this.runWorkflow({
+						destinationNode: this.nodeName,
+						source: 'RunData.ExecuteNodeButton',
+					});
 					this.$emit('execute');
 				}
 			}

packages/editor-ui/src/components/NodeIcon.vue

@@ -42,6 +42,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		colorDefault: {
+			type: String,
+			required: false,
+		},
 		showTooltip: {
 			type: Boolean,
 			default: false,
@@ -67,6 +71,9 @@ export default defineComponent({
 			if (nodeType && nodeType.defaults && nodeType.defaults.color) {
 				return nodeType.defaults.color.toString();
 			}
+			if (this.colorDefault) {
+				return this.colorDefault;
+			}
 			return '';
 		},
 		iconSource(): NodeIconSource {

packages/editor-ui/src/components/NodeSettings.vue

@@ -168,7 +168,7 @@ import type {
 	INodeProperties,
 	NodeParameterValue,
 } from 'n8n-workflow';
-import { NodeHelpers, deepCopy } from 'n8n-workflow';
+import { NodeHelpers, NodeConnectionType, deepCopy } from 'n8n-workflow';
 import type {
 	INodeUi,
 	INodeUpdatePropertiesInformation,
@@ -233,6 +233,13 @@ export default defineComponent({
 			return this.readOnly || this.hasForeignCredential;
 		},
 		isExecutable(): boolean {
+			if (
+				this.nodeType &&
+				!this.isTriggerNode &&
+				!this.nodeType.inputs.includes(NodeConnectionType.Main)
+			) {
+				return false;
+			}
 			return this.executable || this.hasForeignCredential;
 		},
 		nodeTypeName(): string {

packages/editor-ui/src/components/NodeSettingsTabs.vue

@@ -20,6 +20,7 @@ import type { INodeUi, ITab } from '@/Interface';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import type { INodeTypeDescription } from 'n8n-workflow';
+import { NodeConnectionType } from 'n8n-workflow';
 
 import { isCommunityPackageName } from '@/utils';
 
@@ -130,7 +131,7 @@ export default defineComponent({
 					node_type: this.activeNode.type,
 					workflow_id: this.workflowsStore.workflowId,
 					session_id: this.sessionId,
-					pane: 'main',
+					pane: NodeConnectionType.Main,
 					type: 'docs',
 				});
 			}

packages/editor-ui/src/components/OutputPanel.vue

@@ -18,10 +18,18 @@
 		@tableMounted="$emit('tableMounted', $event)"
 		@itemHover="$emit('itemHover', $event)"
 		ref="runData"
+		:data-output-type="outputMode"
 	>
 		<template #header>
 			<div :class="$style.titleSection">
-				<span :class="$style.title">
+				<template v-if="hasAiMetadata">
+					<n8n-radio-buttons
+						:options="outputTypes"
+						v-model="outputMode"
+						@update:modelValue="onUpdateOutputMode"
+					/>
+				</template>
+				<span :class="$style.title" v-else>
 					{{ $locale.baseText(outputPanelEditMode.enabled ? 'ndv.output.edit' : 'ndv.output') }}
 				</span>
 				<RunInfo
@@ -78,6 +86,9 @@
 			</n8n-text>
 		</template>
 
+		<template #content v-if="outputMode === 'logs'">
+			<run-data-ai :node="node" />
+		</template>
 		<template #recovered-artificial-output-data>
 			<div :class="$style.recoveredOutputData">
 				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
@@ -107,13 +118,29 @@ import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import RunDataAi from './RunDataAi/RunDataAi.vue';
+import { ndvEventBus } from '@/event-bus';
 
 type RunDataRef = InstanceType<typeof RunData>;
 
+const OUTPUT_TYPE = {
+	REGULAR: 'regular',
+	LOGS: 'logs',
+};
+
 export default defineComponent({
 	name: 'OutputPanel',
 	mixins: [pinData],
-	components: { RunData, RunInfo },
+	components: { RunData, RunInfo, RunDataAi },
+	data() {
+		return {
+			outputMode: 'regular',
+			outputTypes: [
+				{ label: this.$locale.baseText('ndv.output.outType.regular'), value: OUTPUT_TYPE.REGULAR },
+				{ label: this.$locale.baseText('ndv.output.outType.logs'), value: OUTPUT_TYPE.LOGS },
+			],
+		};
+	},
 	props: {
 		runIndex: {
 			type: Number,
@@ -153,6 +180,18 @@ export default defineComponent({
 		isTriggerNode(): boolean {
 			return this.nodeTypesStore.isTriggerNode(this.node.type);
 		},
+		hasAiMetadata(): boolean {
+			if (this.node) {
+				const resultData = this.workflowsStore.getWorkflowResultDataByNodeName(this.node.name);
+
+				if (!resultData || !Array.isArray(resultData)) {
+					return false;
+				}
+
+				return !!resultData[resultData.length - 1!].metadata;
+			}
+			return false;
+		},
 		isPollingTypeNode(): boolean {
 			return !!(this.nodeType && this.nodeType.polling);
 		},
@@ -160,8 +199,7 @@ export default defineComponent({
 			return !!(this.nodeType && this.nodeType.group.includes('schedule'));
 		},
 		isNodeRunning(): boolean {
-			const executingNode = this.workflowsStore.executingNode;
-			return this.node && executingNode === this.node.name;
+			return this.node && this.workflowsStore.isNodeExecuting(this.node.name);
 		},
 		workflowRunning(): boolean {
 			return this.uiStore.isActionActive('workflowRunning');
@@ -174,7 +212,7 @@ export default defineComponent({
 				return null;
 			}
 			const executionData: IRunExecutionData | undefined = this.workflowExecution.data;
-			if (!executionData || !executionData.resultData || !executionData.resultData.runData) {
+			if (!executionData?.resultData?.runData) {
 				return null;
 			}
 			return executionData.resultData.runData;
@@ -274,11 +312,28 @@ export default defineComponent({
 		onRunIndexChange(run: number) {
 			this.$emit('runChange', run);
 		},
+		onUpdateOutputMode(outputMode: (typeof OUTPUT_TYPE)[string]) {
+			if (outputMode === OUTPUT_TYPE.LOGS) {
+				ndvEventBus.emit('setPositionByName', 'minLeft');
+			} else {
+				ndvEventBus.emit('setPositionByName', 'initial');
+			}
+		},
 	},
 });
 </script>
 
 <style lang="scss" module>
+// The items count and displayModes are rendered in the RunData component
+// this is a workaround to hide it in the output panel(for ai type) to not add unnecessary one-time props
+:global([data-output-type='logs'] [class*='itemsCount']),
+:global([data-output-type='logs'] [class*='displayModes']) {
+	display: none;
+}
+.outputTypeSelect {
+	margin-bottom: var(--spacing-4xs);
+	width: fit-content;
+}
 .titleSection {
 	display: flex;
 

packages/editor-ui/src/components/ParameterInput.vue

@@ -401,10 +401,10 @@ import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { hasExpressionMapping, isValueExpression, isResourceLocatorValue } from '@/utils';
 
 import {
-	CODE_NODE_TYPE,
 	CUSTOM_API_CALL_KEY,
 	EXECUTE_WORKFLOW_NODE_TYPE,
 	HTML_NODE_TYPE,
+	NODES_USING_CODE_NODE_EDITOR,
 } from '@/constants';
 
 import type { PropType } from 'vue';
@@ -1052,7 +1052,7 @@ export default defineComponent({
 			this.$emit('focus');
 		},
 		isCodeNode(node: INodeUi): boolean {
-			return node.type === CODE_NODE_TYPE;
+			return NODES_USING_CODE_NODE_EDITOR.includes(node.type);
 		},
 		isHtmlNode(node: INodeUi): boolean {
 			return node.type === HTML_NODE_TYPE;

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

@@ -39,6 +39,15 @@
 				@action="onNoticeAction"
 			/>
 
+			<n8n-button
+				v-else-if="parameter.type === 'button'"
+				class="parameter-item"
+				block
+				@click="onButtonAction(parameter)"
+			>
+				{{ $locale.nodeText().inputLabelDisplayName(parameter, path) }}
+			</n8n-button>
+
 			<div
 				v-else-if="['collection', 'fixedCollection'].includes(parameter.type)"
 				class="multi-parameter"
@@ -151,6 +160,7 @@ import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { isAuthRelatedParameter, getNodeAuthFields, getMainAuthField } from '@/utils';
 import { KEEP_AUTH_IN_NDV_FOR_NODES } from '@/constants';
+import { nodeViewEventBus } from '@/event-bus';
 
 const FixedCollectionParameter = defineAsyncComponent(
 	async () => import('./FixedCollectionParameter.vue'),
@@ -263,9 +273,9 @@ export default defineComponent({
 			);
 
 			// Get names of all fields that credentials rendering depends on (using displayOptions > show)
-			if (nodeType && nodeType.credentials) {
+			if (nodeType?.credentials) {
 				for (const cred of nodeType.credentials) {
-					if (cred.displayOptions && cred.displayOptions.show) {
+					if (cred.displayOptions?.show) {
 						Object.keys(cred.displayOptions.show).forEach((fieldName) =>
 							dependencies.add(fieldName),
 						);
@@ -309,7 +319,7 @@ export default defineComponent({
 		},
 
 		mustHideDuringCustomApiCall(parameter: INodeProperties, nodeValues: INodeParameters): boolean {
-			if (parameter && parameter.displayOptions && parameter.displayOptions.hide) return true;
+			if (parameter?.displayOptions?.hide) return true;
 
 			const MUST_REMAIN_VISIBLE = [
 				'authentication',
@@ -396,7 +406,7 @@ export default defineComponent({
 				}
 			} while (resolveKeys.length !== 0);
 
-			if (parameterGotResolved === true) {
+			if (parameterGotResolved) {
 				if (this.path) {
 					rawValues = deepCopy(this.nodeValues);
 					set(rawValues, this.path, nodeValues);
@@ -416,6 +426,16 @@ export default defineComponent({
 				this.$emit('activate');
 			}
 		},
+		onButtonAction(parameter: INodeProperties) {
+			const action: string | undefined = parameter.typeOptions?.action;
+
+			switch (action) {
+				case 'openChat':
+					this.ndvStore.setActiveNodeName(null);
+					nodeViewEventBus.emit('openChat');
+					break;
+			}
+		},
 		isNodeAuthField(name: string): boolean {
 			return this.nodeAuthFields.find((field) => field.name === name) !== undefined;
 		},

packages/editor-ui/src/components/RunData.vue

@@ -156,6 +156,7 @@
 					{{ $locale.baseText(linkedRuns ? 'runData.unlinking.hint' : 'runData.linking.hint') }}
 				</template>
 				<n8n-icon-button
+					class="linkRun"
 					:icon="linkedRuns ? 'unlink' : 'link'"
 					text
 					type="tertiary"
@@ -166,6 +167,7 @@
 
 			<slot name="run-info"></slot>
 		</div>
+		<slot name="before-data" />
 
 		<div
 			v-if="maxOutputIndex > 0 && branches.length > 1"
@@ -247,6 +249,7 @@
 						})
 					}}
 				</n8n-text>
+				<slot name="content" v-else-if="$slots['content']"></slot>
 				<NodeErrorView
 					v-else
 					:error="workflowRunData[node.name][runIndex].error"
@@ -292,6 +295,9 @@
 				/>
 			</div>
 
+			<!-- V-else slot named content which only renders if $slots.content is passed and hasNodeRun -->
+			<slot name="content" v-else-if="hasNodeRun && $slots['content']"></slot>
+
 			<div
 				v-else-if="
 					hasNodeRun &&
@@ -491,6 +497,7 @@ import type { PropType } from 'vue';
 import { mapStores } from 'pinia';
 import { saveAs } from 'file-saver';
 import type {
+	ConnectionTypes,
 	IBinaryData,
 	IBinaryKeyData,
 	IDataObject,
@@ -499,6 +506,7 @@ import type {
 	IRunData,
 	IRunExecutionData,
 } from 'n8n-workflow';
+import { NodeHelpers, NodeConnectionType } from 'n8n-workflow';
 
 import type {
 	IExecutionResponse,
@@ -613,6 +621,7 @@ export default defineComponent({
 	},
 	data() {
 		return {
+			connectionType: NodeConnectionType.Main,
 			binaryDataPreviewActive: false,
 			dataSize: 0,
 			showData: false,
@@ -678,10 +687,32 @@ export default defineComponent({
 			return this.displayMode === 'schema';
 		},
 		isTriggerNode(): boolean {
+			if (this.node === null) {
+				return false;
+			}
 			return this.nodeTypesStore.isTriggerNode(this.node.type);
 		},
 		canPinData(): boolean {
+			// Only "main" inputs can pin data
+
+			if (this.node === null) {
+				return false;
+			}
+
+			const workflow = this.workflowsStore.getCurrentWorkflow();
+			const workflowNode = workflow.getNode(this.node.name);
+			const inputs = NodeHelpers.getNodeInputs(workflow, workflowNode!, this.nodeType!);
+
+			const nonMainInputs = !!inputs.find((input) => {
+				if (typeof input === 'string') {
+					return input !== NodeConnectionType.Main;
+				}
+
+				return input.type !== NodeConnectionType.Main;
+			});
+
 			return (
+				!nonMainInputs &&
 				!this.isPaneTypeInput &&
 				this.isPinDataNodeType &&
 				!(this.binaryData && this.binaryData.length > 0)
@@ -698,7 +729,7 @@ export default defineComponent({
 			}
 
 			const schemaView = { label: this.$locale.baseText('runData.schema'), value: 'schema' };
-			if (this.isPaneTypeInput) {
+			if (this.isPaneTypeInput && !isEmpty(this.jsonData)) {
 				defaults.unshift(schemaView);
 			} else {
 				defaults.push(schemaView);
@@ -732,13 +763,7 @@ export default defineComponent({
 			return Boolean(this.subworkflowExecutionError);
 		},
 		hasRunError(): boolean {
-			return Boolean(
-				this.node &&
-					this.workflowRunData &&
-					this.workflowRunData[this.node.name] &&
-					this.workflowRunData[this.node.name][this.runIndex] &&
-					this.workflowRunData[this.node.name][this.runIndex].error,
-			);
+			return Boolean(this.node && this.workflowRunData?.[this.node.name]?.[this.runIndex]?.error);
 		},
 		workflowExecution(): IExecutionResponse | null {
 			return this.workflowsStore.getWorkflowExecution;
@@ -748,7 +773,7 @@ export default defineComponent({
 				return null;
 			}
 			const executionData: IRunExecutionData | undefined = this.workflowExecution.data;
-			if (executionData && executionData.resultData) {
+			if (executionData?.resultData) {
 				return executionData.resultData.runData;
 			}
 			return null;
@@ -760,7 +785,7 @@ export default defineComponent({
 			return (this.dataSize / 1024 / 1000).toLocaleString();
 		},
 		maxOutputIndex(): number {
-			if (this.node === null) {
+			if (this.node === null || this.runIndex === undefined) {
 				return 0;
 			}
 
@@ -776,7 +801,7 @@ export default defineComponent({
 
 			if (runData[this.node.name][this.runIndex]) {
 				const taskData = runData[this.node.name][this.runIndex].data;
-				if (taskData && taskData.main) {
+				if (taskData?.main) {
 					return taskData.main.length - 1;
 				}
 			}
@@ -807,7 +832,13 @@ export default defineComponent({
 			let inputData: INodeExecutionData[] = [];
 
 			if (this.node) {
-				inputData = this.getNodeInputData(this.node, this.runIndex, this.currentOutputIndex);
+				inputData = this.getNodeInputData(
+					this.node,
+					this.runIndex,
+					this.currentOutputIndex,
+					this.paneType,
+					this.connectionType,
+				);
 			}
 
 			if (inputData.length === 0 || !Array.isArray(inputData)) {
@@ -858,12 +889,8 @@ export default defineComponent({
 			return binaryData.filter((data) => Boolean(data && Object.keys(data).length));
 		},
 		currentOutputIndex(): number {
-			if (
-				this.overrideOutputs &&
-				this.overrideOutputs.length &&
-				!this.overrideOutputs.includes(this.outputIndex)
-			) {
-				return this.overrideOutputs[0] as number;
+			if (this.overrideOutputs?.length && !this.overrideOutputs.includes(this.outputIndex)) {
+				return this.overrideOutputs[0];
 			}
 
 			return this.outputIndex;
@@ -1216,7 +1243,11 @@ export default defineComponent({
 			const itemsLabel = itemsCount > 0 ? ` (${itemsCount} ${items})` : '';
 			return option + this.$locale.baseText('ndv.output.of') + (this.maxRunIndex + 1) + itemsLabel;
 		},
-		getDataCount(runIndex: number, outputIndex: number) {
+		getDataCount(
+			runIndex: number,
+			outputIndex: number,
+			connectionType: ConnectionTypes = NodeConnectionType.Main,
+		) {
 			if (this.pinData) {
 				return this.pinData.length;
 			}
@@ -1246,7 +1277,11 @@ export default defineComponent({
 				return 0;
 			}
 
-			const inputData = this.getMainInputData(runData[this.node.name][runIndex].data!, outputIndex);
+			const inputData = this.getInputData(
+				runData[this.node.name][runIndex].data!,
+				outputIndex,
+				connectionType,
+			);
 
 			return inputData.length;
 		},
@@ -1255,6 +1290,14 @@ export default defineComponent({
 			this.outputIndex = 0;
 			this.refreshDataSize();
 			this.closeBinaryDataDisplay();
+			let outputTypes: ConnectionTypes[] = [];
+			if (this.nodeType !== null && this.node !== null) {
+				const workflow = this.workflowsStore.getCurrentWorkflow();
+				const workflowNode = workflow.getNode(this.node.name);
+				const outputs = NodeHelpers.getNodeOutputs(workflow, workflowNode, this.nodeType);
+				outputTypes = NodeHelpers.getConnectionTypes(outputs);
+			}
+			this.connectionType = outputTypes.length === 0 ? NodeConnectionType.Main : outputTypes[0];
 			if (this.binaryData.length > 0) {
 				this.ndvStore.setPanelDisplayMode({
 					pane: this.paneType as 'input' | 'output',
@@ -1297,7 +1340,13 @@ export default defineComponent({
 			}
 		},
 		async downloadJsonData() {
-			const inputData = this.getNodeInputData(this.node, this.runIndex, this.currentOutputIndex);
+			const inputData = this.getNodeInputData(
+				this.node,
+				this.runIndex,
+				this.currentOutputIndex,
+				this.paneType,
+				this.connectionType,
+			);
 
 			const fileName = this.node!.name.replace(/[^\w\d]/g, '_');
 			const blob = new Blob([JSON.stringify(inputData, null, 2)], { type: 'application/json' });
@@ -1321,7 +1370,7 @@ export default defineComponent({
 			}
 
 			const nodeType = this.nodeType;
-			if (!nodeType || !nodeType.outputNames || nodeType.outputNames.length <= outputIndex) {
+			if (!nodeType?.outputNames || nodeType.outputNames.length <= outputIndex) {
 				return outputIndex + 1;
 			}
 
@@ -1332,7 +1381,13 @@ export default defineComponent({
 			this.showData = false;
 
 			// Check how much data there is to display
-			const inputData = this.getNodeInputData(this.node, this.runIndex, this.currentOutputIndex);
+			const inputData = this.getNodeInputData(
+				this.node,
+				this.runIndex,
+				this.currentOutputIndex,
+				this.paneType,
+				this.connectionType,
+			);
 
 			const offset = this.pageSize * (this.currentPage - 1);
 			const jsonItems = inputData.slice(offset, offset + this.pageSize).map((item) => item.json);
@@ -1468,6 +1523,7 @@ export default defineComponent({
 
 .dataContainer {
 	position: relative;
+	overflow-y: auto;
 	height: 100%;
 
 	&:hover {
@@ -1517,7 +1573,7 @@ export default defineComponent({
 	align-items: center;
 	bottom: 0;
 	padding: 5px;
-	overflow: auto;
+	overflow-y: hidden;
 }
 
 .pageSizeSelector {

packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue

@@ -0,0 +1,267 @@
+<template>
+	<div :class="$style.block">
+		<header :class="$style.blockHeader" @click="onBlockHeaderClick">
+			<button :class="$style.blockToggle">
+				<font-awesome-icon :icon="isExpanded ? 'angle-down' : 'angle-up'" size="lg" />
+			</button>
+			<p :class="$style.blockTitle">{{ capitalize(runData.inOut) }}</p>
+			<!-- @click.stop to prevent event from bubbling to blockHeader and toggling expanded state when clicking on rawSwitch -->
+			<el-switch
+				v-if="contentParsed"
+				@click.stop
+				:class="$style.rawSwitch"
+				active-text="RAW JSON"
+				v-model="isShowRaw"
+			/>
+		</header>
+		<main
+			:class="{
+				[$style.blockContent]: true,
+				[$style.blockContentExpanded]: isExpanded,
+			}"
+		>
+			<div
+				:key="index"
+				v-for="({ parsedContent, raw }, index) in parsedRun"
+				:class="$style.contentText"
+				:data-content-type="parsedContent?.type"
+			>
+				<template v-if="parsedContent && !isShowRaw">
+					<template v-if="parsedContent.type === 'json'">
+						<vue-markdown
+							:source="jsonToMarkdown(parsedContent.data as JsonMarkdown)"
+							:class="$style.markdown"
+						/>
+					</template>
+					<template v-if="parsedContent.type === 'markdown'">
+						<vue-markdown :source="parsedContent.data" :class="$style.markdown" />
+					</template>
+					<p
+						:class="$style.runText"
+						v-if="parsedContent.type === 'text'"
+						v-text="parsedContent.data"
+					/>
+				</template>
+				<!-- We weren't able to parse text or raw switch -->
+				<template v-else>
+					<div :class="$style.rawContent">
+						<n8n-icon-button
+							size="small"
+							:class="$style.copyToClipboard"
+							type="secondary"
+							@click="copyToClipboard(raw)"
+							:title="$locale.baseText('nodeErrorView.copyToClipboard')"
+							icon="copy"
+						/>
+						<vue-markdown :source="jsonToMarkdown(raw as JsonMarkdown)" :class="$style.markdown" />
+					</div>
+				</template>
+			</div>
+		</main>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { IAiDataContent } from '@/Interface';
+import { capitalize } from 'lodash-es';
+import { ref, onMounted } from 'vue';
+import type { ParsedAiContent } from './useAiContentParsers';
+import { useAiContentParsers } from './useAiContentParsers';
+import VueMarkdown from 'vue-markdown-render';
+import { useCopyToClipboard, useI18n, useToast } from '@/composables';
+import { NodeConnectionType, type IDataObject } from 'n8n-workflow';
+
+const props = defineProps<{
+	runData: IAiDataContent;
+}>();
+
+const i18n = useI18n();
+const contentParsers = useAiContentParsers();
+// eslint-disable-next-line @typescript-eslint/no-use-before-define
+const isExpanded = ref(getInitialExpandedState());
+const isShowRaw = ref(false);
+const contentParsed = ref(false);
+const parsedRun = ref(undefined as ParsedAiContent | undefined);
+
+function getInitialExpandedState() {
+	const collapsedTypes = {
+		input: [NodeConnectionType.AiDocument, NodeConnectionType.AiTextSplitter],
+		output: [
+			NodeConnectionType.AiDocument,
+			NodeConnectionType.AiEmbedding,
+			NodeConnectionType.AiTextSplitter,
+			NodeConnectionType.AiVectorStore,
+		],
+	};
+
+	return !collapsedTypes[props.runData.inOut].includes(props.runData.type);
+}
+
+function parseAiRunData(run: IAiDataContent) {
+	if (!run.data) {
+		return;
+	}
+	const parsedData = contentParsers.parseAiRunData(run.data, run.type);
+
+	return parsedData;
+}
+
+function isMarkdown(content: JsonMarkdown): boolean {
+	if (typeof content !== 'string') return false;
+	const markdownPatterns = [
+		/^# .+/gm, // headers
+		/\*{1,2}.+\*{1,2}/g, // emphasis and strong
+		/\[.+\]\(.+\)/g, // links
+		/```[\s\S]+```/g, // code blocks
+	];
+
+	return markdownPatterns.some((pattern) => pattern.test(content));
+}
+
+function formatToJsonMarkdown(data: string): string {
+	return '```json\n' + data + '\n```';
+}
+
+type JsonMarkdown = string | object | Array<string | object>;
+
+function jsonToMarkdown(data: JsonMarkdown): string {
+	if (isMarkdown(data)) return data as string;
+
+	if (Array.isArray(data) && data.length && typeof data[0] !== 'number') {
+		const markdownArray = data.map((item: JsonMarkdown) => jsonToMarkdown(item));
+
+		return markdownArray.join('\n\n').trim();
+	}
+
+	if (typeof data === 'string') {
+		return formatToJsonMarkdown(data);
+	}
+
+	return formatToJsonMarkdown(JSON.stringify(data, null, 2));
+}
+
+function setContentParsed(content: ParsedAiContent): void {
+	contentParsed.value = !!content.find((item) => {
+		if (item.parsedContent?.parsed === true) {
+			return true;
+		}
+		return false;
+	});
+}
+
+function onBlockHeaderClick() {
+	isExpanded.value = !isExpanded.value;
+}
+
+function copyToClipboard(content: IDataObject | IDataObject[]) {
+	const copyToClipboardFn = useCopyToClipboard();
+	const { showMessage } = useToast();
+
+	try {
+		copyToClipboardFn(JSON.stringify(content, undefined, 2));
+		showMessage({
+			title: i18n.baseText('generic.copiedToClipboard'),
+			type: 'success',
+		});
+	} catch (err) {}
+}
+
+onMounted(() => {
+	parsedRun.value = parseAiRunData(props.runData);
+	if (parsedRun.value) {
+		setContentParsed(parsedRun.value);
+	}
+});
+</script>
+
+<style lang="scss" module>
+.copyToClipboard {
+	position: absolute;
+	right: var(--spacing-s);
+	top: var(--spacing-s);
+}
+.rawContent {
+	position: relative;
+}
+.markdown {
+	& {
+		white-space: pre-wrap;
+
+		h1 {
+			font-size: var(--font-size-xl);
+			line-height: var(--font-line-height-xloose);
+		}
+
+		h2 {
+			font-size: var(--font-size-l);
+			line-height: var(--font-line-height-loose);
+		}
+
+		h3 {
+			font-size: var(--font-size-m);
+			line-height: var(--font-line-height-regular);
+		}
+
+		pre {
+			background-color: var(--color-foreground-light);
+			border-radius: var(--border-radius-base);
+			line-height: var(--font-line-height-xloose);
+			padding: var(--spacing-s);
+			font-size: var(--font-size-s);
+			white-space: pre-wrap;
+		}
+	}
+}
+.contentText {
+	padding-top: var(--spacing-s);
+	font-size: var(--font-size-xs);
+	// max-height: 100%;
+}
+.block {
+	border: 1px solid var(--color-foreground-base);
+	background: var(--color-background-xlight);
+	padding: var(--spacing-xs);
+	border-radius: 4px;
+	margin-bottom: var(--spacing-2xs);
+}
+.blockContent {
+	height: 0;
+	overflow: hidden;
+
+	&.blockContentExpanded {
+		height: auto;
+	}
+}
+.runText {
+	line-height: var(--font-line-height-regular);
+	white-space: pre-line;
+}
+.rawSwitch {
+	margin-left: auto;
+
+	& * {
+		font-size: var(--font-size-2xs);
+	}
+}
+.blockHeader {
+	display: flex;
+	gap: var(--spacing-xs);
+	cursor: pointer;
+	/* This hack is needed to make the whole surface of header clickable  */
+	margin: calc(-1 * var(--spacing-xs));
+	padding: var(--spacing-xs);
+
+	& * {
+		user-select: none;
+	}
+}
+.blockTitle {
+	font-size: var(--font-size-2xs);
+	color: var(--color-text-dark);
+}
+.blockToggle {
+	border: none;
+	background: none;
+	padding: 0;
+}
+</style>

packages/editor-ui/src/components/RunDataAi/RunDataAi.vue

@@ -0,0 +1,360 @@
+<template>
+	<div v-if="aiData" :class="$style.container">
+		<div :class="{ [$style.tree]: true, [$style.slim]: slim }">
+			<el-tree
+				:data="executionTree"
+				:props="{ label: 'node' }"
+				default-expand-all
+				:indent="12"
+				@node-click="onItemClick"
+				:expand-on-click-node="false"
+			>
+				<template #default="{ node, data }">
+					<div
+						:class="{
+							[$style.treeNode]: true,
+							[$style.isSelected]: isTreeNodeSelected(data),
+						}"
+						:data-tree-depth="data.depth"
+						:style="{ '--item-depth': data.depth }"
+					>
+						<button
+							:class="$style.treeToggle"
+							v-if="data.children.length"
+							@click="toggleTreeItem(node)"
+						>
+							<font-awesome-icon :icon="node.expanded ? 'angle-down' : 'angle-up'" />
+						</button>
+						<n8n-tooltip :disabled="!slim" placement="right">
+							<template #content>
+								{{ node.label }}
+							</template>
+							<span :class="$style.leafLabel">
+								<node-icon :node-type="getNodeType(data.node)!" :size="17" />
+								<span v-text="node.label" v-if="!slim" />
+							</span>
+						</n8n-tooltip>
+					</div>
+				</template>
+			</el-tree>
+		</div>
+		<div :class="$style.runData">
+			<div v-if="selectedRun.length === 0" :class="$style.empty">
+				<n8n-text size="large">
+					{{
+						$locale.baseText('ndv.output.ai.empty', {
+							interpolate: {
+								node: props.node.name,
+							},
+						})
+					}}
+				</n8n-text>
+			</div>
+			<div v-for="(data, index) in selectedRun" :key="`${data.node}__${data.runIndex}__index`">
+				<RunDataAiContent :inputData="data" :contentIndex="index" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+import { computed, ref, watch } from 'vue';
+import type { ITaskSubRunMetadata, ITaskDataConnections } from 'n8n-workflow';
+import { NodeConnectionType } from 'n8n-workflow';
+import type { IAiData, IAiDataContent, INodeUi } from '@/Interface';
+import { useNodeTypesStore, useWorkflowsStore } from '@/stores';
+import NodeIcon from '@/components/NodeIcon.vue';
+import RunDataAiContent from './RunDataAiContent.vue';
+import { ElTree } from 'element-plus';
+
+interface AIResult {
+	node: string;
+	runIndex: number;
+	data: IAiDataContent | undefined;
+}
+interface TreeNode {
+	node: string;
+	id: string;
+	children: TreeNode[];
+	depth: number;
+	startTime: number;
+	runIndex: number;
+}
+export interface Props {
+	node: INodeUi;
+	runIndex: number;
+	hideTitle?: boolean;
+	slim?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), { runIndex: 0 });
+const workflowsStore = useWorkflowsStore();
+const nodeTypesStore = useNodeTypesStore();
+const selectedRun: Ref<IAiData[]> = ref([]);
+
+function isTreeNodeSelected(node: TreeNode) {
+	return selectedRun.value.some((run) => run.node === node.node && run.runIndex === node.runIndex);
+}
+
+function getReferencedData(
+	reference: ITaskSubRunMetadata,
+	withInput: boolean,
+	withOutput: boolean,
+): IAiDataContent[] {
+	const resultData = workflowsStore.getWorkflowResultDataByNodeName(reference.node);
+
+	if (!resultData?.[reference.runIndex]) {
+		return [];
+	}
+
+	const taskData = resultData[reference.runIndex];
+
+	if (!taskData) {
+		return [];
+	}
+
+	const returnData: IAiDataContent[] = [];
+
+	function addFunction(data: ITaskDataConnections | undefined, inOut: 'input' | 'output') {
+		if (!data) {
+			return;
+		}
+
+		Object.keys(data).map((type) => {
+			returnData.push({
+				data: data[type][0],
+				inOut,
+				type: type as NodeConnectionType,
+				metadata: {
+					executionTime: taskData.executionTime,
+					startTime: taskData.startTime,
+				},
+			});
+		});
+	}
+
+	if (withInput) {
+		addFunction(taskData.inputOverride, 'input');
+	}
+	if (withOutput) {
+		addFunction(taskData.data, 'output');
+	}
+
+	return returnData;
+}
+
+function toggleTreeItem(node: { expanded: boolean }) {
+	node.expanded = !node.expanded;
+}
+
+function onItemClick(data: TreeNode) {
+	const matchingRun = aiData.value?.find(
+		(run) => run.node === data.node && run.runIndex === data.runIndex,
+	);
+	if (!matchingRun) {
+		selectedRun.value = [];
+
+		return;
+	}
+	selectedRun.value = [
+		{
+			node: data.node,
+			runIndex: data.runIndex,
+			data: getReferencedData(
+				{
+					node: data.node,
+					runIndex: data.runIndex,
+				},
+				true,
+				true,
+			),
+		},
+	];
+}
+
+function getNodeType(nodeName: string) {
+	const node = workflowsStore.getNodeByName(nodeName);
+	if (!node) {
+		return null;
+	}
+	const nodeType = nodeTypesStore.getNodeType(node?.type);
+
+	return nodeType;
+}
+
+function selectFirst() {
+	if (executionTree.value.length && executionTree.value[0].children.length) {
+		onItemClick(executionTree.value[0].children[0]);
+	}
+}
+
+const createNode = (
+	nodeName: string,
+	currentDepth: number,
+	r?: AIResult,
+	children: TreeNode[] = [],
+): TreeNode => ({
+	node: nodeName,
+	id: nodeName,
+	depth: currentDepth,
+	startTime: r?.data?.metadata?.startTime ?? 0,
+	runIndex: r?.runIndex ?? 0,
+	children,
+});
+
+function getTreeNodeData(nodeName: string, currentDepth: number): TreeNode[] {
+	const { connectionsByDestinationNode } = workflowsStore.getCurrentWorkflow();
+	const connections = connectionsByDestinationNode[nodeName];
+	// eslint-disable-next-line @typescript-eslint/no-use-before-define
+	const resultData = aiData.value?.filter((data) => data.node === nodeName) ?? [];
+
+	if (!connections) {
+		return resultData.map((d) => createNode(nodeName, currentDepth, d));
+	}
+
+	const nonMainConnectionsKeys = Object.keys(connections).filter(
+		(key) => key !== NodeConnectionType.Main,
+	);
+	const children = nonMainConnectionsKeys.flatMap((key) =>
+		connections[key][0].flatMap((node) => getTreeNodeData(node.node, currentDepth + 1)),
+	);
+
+	if (resultData.length) {
+		return resultData.map((r) => createNode(nodeName, currentDepth, r, children));
+	}
+
+	children.sort((a, b) => a.startTime - b.startTime);
+
+	return [createNode(nodeName, currentDepth, undefined, children)];
+}
+
+const aiData = computed<AIResult[] | undefined>(() => {
+	const resultData = workflowsStore.getWorkflowResultDataByNodeName(props.node.name);
+
+	if (!resultData || !Array.isArray(resultData)) {
+		return;
+	}
+
+	const subRun = resultData[props.runIndex].metadata?.subRun;
+	if (!Array.isArray(subRun)) {
+		return;
+	}
+	// Extend the subRun with the data and sort by adding execution time + startTime and comparing them
+	const subRunWithData = subRun.flatMap((run) =>
+		getReferencedData(run, false, true).map((data) => ({ ...run, data })),
+	);
+
+	subRunWithData.sort((a, b) => {
+		const aTime = a.data?.metadata?.startTime || 0;
+		const bTime = b.data?.metadata?.startTime || 0;
+		return aTime - bTime;
+	});
+
+	return subRunWithData;
+});
+
+const executionTree = computed<TreeNode[]>(() => {
+	const rootNode = props.node;
+
+	const tree = getTreeNodeData(rootNode.name, 0);
+	return tree || [];
+});
+
+watch(() => props.runIndex, selectFirst, { immediate: true });
+</script>
+
+<style lang="scss" module>
+.treeToggle {
+	border: none;
+	background-color: transparent;
+	padding: 0 var(--spacing-3xs);
+	margin: 0 calc(-1 * var(--spacing-3xs));
+	cursor: pointer;
+}
+.leafLabel {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3xs);
+}
+.empty {
+	padding: var(--spacing-l);
+}
+.title {
+	font-size: var(--font-size-s);
+	margin-bottom: var(--spacing-xs);
+}
+.tree {
+	flex-shrink: 0;
+	min-width: 12.8rem;
+	height: 100%;
+	border-right: 1px solid var(--color-foreground-base);
+	padding-right: var(--spacing-xs);
+	padding-left: var(--spacing-2xs);
+	&.slim {
+		min-width: auto;
+	}
+}
+.runData {
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+}
+.container {
+	height: 100%;
+	padding: 0 var(--spacing-xs);
+	display: flex;
+
+	:global(.el-tree > .el-tree-node) {
+		position: relative;
+		&:after {
+			content: '';
+			position: absolute;
+			top: 2rem;
+			bottom: 1.2rem;
+			left: 0.75rem;
+			width: 0.125rem;
+			background-color: var(--color-foreground-base);
+		}
+	}
+	:global(.el-tree-node__expand-icon) {
+		display: none;
+	}
+	:global(.el-tree) {
+		margin-left: calc(-1 * var(--spacing-xs));
+	}
+	:global(.el-tree-node__content) {
+		margin-left: var(--spacing-xs);
+	}
+}
+.isSelected {
+	background-color: var(--color-foreground-base);
+}
+.treeNode {
+	display: inline-flex;
+	border-radius: var(--border-radius-base);
+	align-items: center;
+	gap: var(--spacing-3xs);
+	padding: var(--spacing-4xs) var(--spacing-3xs);
+	font-size: var(--font-size-xs);
+	color: var(--color-text-dark);
+	margin-bottom: var(--spacing-3xs);
+	cursor: pointer;
+
+	&:hover {
+		background-color: var(--color-foreground-base);
+	}
+	&[data-tree-depth='0'] {
+		margin-left: calc(-1 * var(--spacing-2xs));
+	}
+
+	&:after {
+		content: '';
+		position: absolute;
+		margin: auto;
+		background-color: var(--color-foreground-base);
+		height: 0.125rem;
+		left: 0.75rem;
+		width: calc(var(--item-depth) * 0.625rem);
+	}
+}
+</style>

packages/editor-ui/src/components/RunDataAi/RunDataAiContent.vue

@@ -0,0 +1,199 @@
+<template>
+	<div :class="$style.container">
+		<header :class="$style.header">
+			<node-icon
+				v-if="runMeta?.node"
+				:class="$style.nodeIcon"
+				:node-type="runMeta.node"
+				:size="20"
+			/>
+			<div :class="$style.headerWrap">
+				<p :class="$style.title">
+					{{ inputData.node }}
+				</p>
+				<ul :class="$style.meta">
+					<li v-if="runMeta?.startTimeMs">{{ runMeta?.executionTimeMs }}ms</li>
+					<li v-if="runMeta?.startTimeMs">
+						<n8n-tooltip>
+							<template #content>
+								{{ new Date(runMeta?.startTimeMs).toLocaleString() }}
+							</template>
+							{{
+								$locale.baseText('runData.aiContentBlock.startedAt', {
+									interpolate: {
+										startTime: new Date(runMeta?.startTimeMs).toLocaleTimeString(),
+									},
+								})
+							}}
+						</n8n-tooltip>
+					</li>
+					<li v-if="(consumedTokensSum?.totalTokens ?? 0) > 0">
+						{{
+							$locale.baseText('runData.aiContentBlock.tokens', {
+								interpolate: {
+									count: consumedTokensSum?.totalTokens.toString()!,
+								},
+							})
+						}}
+						<n8n-info-tip type="tooltip" theme="info-light" tooltipPlacement="right">
+							<div>
+								<n8n-text :bold="true" size="small">
+									{{ $locale.baseText('runData.aiContentBlock.tokens.prompt') }}
+									{{
+										$locale.baseText('runData.aiContentBlock.tokens', {
+											interpolate: {
+												count: consumedTokensSum?.promptTokens.toString()!,
+											},
+										})
+									}}
+								</n8n-text>
+								<br />
+								<n8n-text :bold="true" size="small">
+									{{ $locale.baseText('runData.aiContentBlock.tokens.completion') }}
+									{{
+										$locale.baseText('runData.aiContentBlock.tokens', {
+											interpolate: {
+												count: consumedTokensSum?.completionTokens.toString()!,
+											},
+										})
+									}}
+								</n8n-text>
+							</div>
+						</n8n-info-tip>
+					</li>
+				</ul>
+			</div>
+		</header>
+
+		<main :class="$style.content" v-for="(run, index) in props.inputData.data" :key="index">
+			<AiRunContentBlock :runData="run" />
+		</main>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { IAiData, IAiDataContent } from '@/Interface';
+import { useNodeTypesStore, useWorkflowsStore } from '@/stores';
+import type {
+	IDataObject,
+	INodeExecutionData,
+	INodeTypeDescription,
+	NodeConnectionType,
+} from 'n8n-workflow';
+import { computed } from 'vue';
+import NodeIcon from '@/components/NodeIcon.vue';
+import AiRunContentBlock from './AiRunContentBlock.vue';
+
+interface RunMeta {
+	startTimeMs: number;
+	executionTimeMs: number;
+	node: INodeTypeDescription | null;
+	type: 'input' | 'output';
+	connectionType: NodeConnectionType;
+}
+const props = defineProps<{
+	inputData: IAiData;
+	contentIndex: number;
+}>();
+
+const nodeTypesStore = useNodeTypesStore();
+const workflowsStore = useWorkflowsStore();
+
+type TokenUsageData = {
+	completionTokens: number;
+	promptTokens: number;
+	totalTokens: number;
+};
+const consumedTokensSum = computed(() => {
+	// eslint-disable-next-line @typescript-eslint/no-use-before-define
+	const consumedTokensSum1 = outputRun.value?.data?.reduce(
+		(acc: TokenUsageData, curr: INodeExecutionData) => {
+			const response = curr.json?.response as IDataObject;
+			const tokenUsageData = (response?.llmOutput as IDataObject)?.tokenUsage as TokenUsageData;
+
+			if (!tokenUsageData) return acc;
+
+			return {
+				completionTokens: acc.completionTokens + tokenUsageData.completionTokens,
+				promptTokens: acc.promptTokens + tokenUsageData.promptTokens,
+				totalTokens: acc.totalTokens + tokenUsageData.totalTokens,
+			};
+		},
+		{
+			completionTokens: 0,
+			promptTokens: 0,
+			totalTokens: 0,
+		},
+	);
+
+	return consumedTokensSum1;
+});
+
+function extractRunMeta(run: IAiDataContent) {
+	const uiNode = workflowsStore.getNodeByName(props.inputData.node);
+	const nodeType = nodeTypesStore.getNodeType(uiNode?.type ?? '');
+
+	const runMeta: RunMeta = {
+		startTimeMs: run.metadata.startTime,
+		executionTimeMs: run.metadata.executionTime,
+		node: nodeType,
+		type: run.inOut,
+		connectionType: run.type,
+	};
+
+	return runMeta;
+}
+
+const outputRun = computed(() => {
+	return props.inputData.data.find((r) => r.inOut === 'output');
+});
+
+const runMeta = computed(() => {
+	if (outputRun.value === undefined) {
+		return;
+	}
+	return extractRunMeta(outputRun.value);
+});
+</script>
+
+<style type="scss" module>
+.container {
+	padding: 0 var(--spacing-s) var(--spacing-s);
+}
+.nodeIcon {
+	margin-top: calc(var(--spacing-3xs) * -1);
+}
+.header {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3xs);
+	margin-bottom: var(--spacing-s);
+}
+.headerWrap {
+	display: flex;
+	flex-direction: column;
+}
+.title {
+	display: flex;
+	align-items: center;
+	font-size: var(--font-size-s);
+	gap: var(--spacing-3xs);
+	color: var(--color-text-dark);
+}
+.meta {
+	list-style: none;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	font-size: var(--font-size-xs);
+
+	& > li:not(:last-child) {
+		border-right: 1px solid var(--color-text-base);
+		padding-right: var(--spacing-3xs);
+	}
+
+	& > li:not(:first-child) {
+		padding-left: var(--spacing-3xs);
+	}
+}
+</style>

packages/editor-ui/src/components/RunDataAi/useAiContentParsers.ts

@@ -0,0 +1,201 @@
+import type { IDataObject, INodeExecutionData } from 'n8n-workflow';
+import { isObjectEmpty, NodeConnectionType } from 'n8n-workflow';
+
+interface MemoryMessage {
+	lc: number;
+	type: string;
+	id: string[];
+	kwargs: {
+		content: string;
+		additional_kwargs: Record<string, unknown>;
+	};
+}
+interface LmGeneration {
+	text: string;
+	message: MemoryMessage;
+}
+
+type ExcludedKeys = NodeConnectionType.Main | NodeConnectionType.AiChain;
+type AllowedEndpointType = Exclude<NodeConnectionType, ExcludedKeys>;
+
+const fallbackParser = (execData: IDataObject) => ({
+	type: 'json' as 'json' | 'text' | 'markdown',
+	data: execData,
+	parsed: false,
+});
+
+const outputTypeParsers: {
+	[key in AllowedEndpointType]: (execData: IDataObject) => {
+		type: 'json' | 'text' | 'markdown';
+		data: unknown;
+		parsed: boolean;
+	};
+} = {
+	[NodeConnectionType.AiLanguageModel](execData: IDataObject) {
+		const response = (execData.response as IDataObject) ?? execData;
+		if (!response) throw new Error('No response from Language Model');
+
+		// Simple LLM output — single string message item
+		if (
+			Array.isArray(response?.messages) &&
+			response?.messages.length === 1 &&
+			typeof response?.messages[0] === 'string'
+		) {
+			return {
+				type: 'text',
+				data: response.messages[0],
+				parsed: true,
+			};
+		}
+		// Use the memory parser if the response is a memory-like(chat) object
+		if (response.messages && Array.isArray(response.messages)) {
+			return outputTypeParsers[NodeConnectionType.AiMemory](execData);
+		}
+		if (response.generations) {
+			const generations = response.generations as LmGeneration[];
+
+			const content = generations.map((generation) => {
+				if (generation?.text) return generation.text;
+
+				if (Array.isArray(generation)) {
+					return generation
+						.map((item: LmGeneration) => item.text ?? item)
+						.join('\n\n')
+						.trim();
+				}
+
+				return generation;
+			});
+
+			return {
+				type: 'json',
+				data: content,
+				parsed: true,
+			};
+		}
+
+		return {
+			type: 'json',
+			data: response,
+			parsed: true,
+		};
+	},
+	[NodeConnectionType.AiTool]: fallbackParser,
+	[NodeConnectionType.AiMemory](execData: IDataObject) {
+		const chatHistory =
+			execData.chatHistory ?? execData.messages ?? execData?.response?.chat_history;
+		if (Array.isArray(chatHistory)) {
+			const responseText = chatHistory
+				.map((content: MemoryMessage) => {
+					if (content.type === 'constructor' && content.id?.includes('schema') && content.kwargs) {
+						let message = content.kwargs.content;
+						if (Object.keys(content.kwargs.additional_kwargs).length) {
+							message += ` (${JSON.stringify(content.kwargs.additional_kwargs)})`;
+						}
+						if (content.id.includes('HumanMessage')) {
+							message = `**Human:** ${message.trim()}`;
+						} else if (content.id.includes('AIMessage')) {
+							message = `**AI:** ${message}`;
+						} else if (content.id.includes('SystemMessage')) {
+							message = `**System Message:** ${message}`;
+						}
+						if (execData.action && execData.action !== 'getMessages') {
+							message = `## Action: ${execData.action}\n\n${message}`;
+						}
+
+						return message;
+					}
+					return '';
+				})
+				.join('\n\n');
+
+			return {
+				type: 'markdown',
+				data: responseText,
+				parsed: true,
+			};
+		}
+
+		return fallbackParser(execData);
+	},
+	[NodeConnectionType.AiOutputParser]: fallbackParser,
+	[NodeConnectionType.AiRetriever]: fallbackParser,
+	[NodeConnectionType.AiVectorRetriever]: fallbackParser,
+	[NodeConnectionType.AiVectorStore](execData: IDataObject) {
+		if (execData.documents) {
+			return {
+				type: 'json',
+				data: execData.documents,
+				parsed: true,
+			};
+		}
+
+		return fallbackParser(execData);
+	},
+	[NodeConnectionType.AiEmbedding](execData: IDataObject) {
+		if (execData.documents) {
+			return {
+				type: 'json',
+				data: execData.documents,
+				parsed: true,
+			};
+		}
+
+		return fallbackParser(execData);
+	},
+	[NodeConnectionType.AiDocument](execData: IDataObject) {
+		if (execData.documents) {
+			return {
+				type: 'json',
+				data: execData.documents,
+				parsed: true,
+			};
+		}
+
+		return fallbackParser(execData);
+	},
+	[NodeConnectionType.AiTextSplitter](execData: IDataObject) {
+		const arrayData = Array.isArray(execData.response)
+			? execData.response
+			: [execData.textSplitter];
+		return {
+			type: 'text',
+			data: arrayData.join('\n\n'),
+			parsed: true,
+		};
+	},
+};
+export type ParsedAiContent = Array<{
+	raw: IDataObject | IDataObject[];
+	parsedContent: {
+		type: 'json' | 'text' | 'markdown';
+		data: unknown;
+		parsed: boolean;
+	} | null;
+}>;
+
+export const useAiContentParsers = () => {
+	const parseAiRunData = (
+		executionData: INodeExecutionData[],
+		endpointType: NodeConnectionType,
+	): ParsedAiContent => {
+		if ([NodeConnectionType.AiChain, NodeConnectionType.Main].includes(endpointType)) {
+			return executionData.map((data) => ({ raw: data.json, parsedContent: null }));
+		}
+
+		const contentJson = executionData.map((node) => {
+			const hasBinarData = !isObjectEmpty(node.binary);
+			return hasBinarData ? node.binary : node.json;
+		});
+
+		const parser = outputTypeParsers[endpointType as AllowedEndpointType];
+		if (!parser) return [{ raw: contentJson, parsedContent: null }];
+
+		const parsedOutput = contentJson.map((c) => ({ raw: c, parsedContent: parser(c) }));
+		return parsedOutput;
+	};
+
+	return {
+		parseAiRunData,
+	};
+};

packages/editor-ui/src/components/VariableSelector.vue

@@ -40,7 +40,7 @@ import type {
 	IWorkflowDataProxyAdditionalKeys,
 	Workflow,
 } from 'n8n-workflow';
-import { WorkflowDataProxy } from 'n8n-workflow';
+import { NodeConnectionType, WorkflowDataProxy } from 'n8n-workflow';
 
 import VariableSelectorItem from '@/components/VariableSelectorItem.vue';
 import type { INodeUi, IVariableItemSelected, IVariableSelectorOption } from '@/Interface';
@@ -69,6 +69,13 @@ export default defineComponent({
 	},
 	computed: {
 		...mapStores(useNDVStore, useRootStore, useWorkflowsStore),
+		activeNode(): INodeUi | null {
+			const activeNode = this.ndvStore.activeNode!;
+			if (!activeNode) {
+				return null;
+			}
+			return this.getParentMainInputNode(this.getCurrentWorkflow(), activeNode);
+		},
 		extendAll(): boolean {
 			if (this.variableFilter) {
 				return true;
@@ -290,7 +297,7 @@ export default defineComponent({
 		 * @param {string} filterText Filter text for parameters
 		 * @param {number} [itemIndex=0] The index of the item
 		 * @param {number} [runIndex=0] The index of the run
-		 * @param {string} [inputName='main'] The name of the input
+		 * @param {string} [inputName=NodeConnectionType.Main] The name of the input
 		 * @param {number} [outputIndex=0] The index of the output
 		 * @param {boolean} [useShort=false] Use short notation $json vs. $('NodeName').json
 		 */
@@ -300,7 +307,7 @@ export default defineComponent({
 			filterText: string,
 			itemIndex = 0,
 			runIndex = 0,
-			inputName = 'main',
+			inputName = NodeConnectionType.Main,
 			outputIndex = 0,
 			useShort = false,
 		): IVariableSelectorOption[] | null {
@@ -462,20 +469,18 @@ export default defineComponent({
 			filterText: string,
 		): IVariableSelectorOption[] | null {
 			const itemIndex = 0;
-			const inputName = 'main';
+			const inputName = NodeConnectionType.Main;
 			const runIndex = 0;
 			const returnData: IVariableSelectorOption[] = [];
 
-			const activeNode: INodeUi | null = this.ndvStore.activeNode;
-
-			if (activeNode === null) {
+			if (this.activeNode === null) {
 				return returnData;
 			}
 
 			const nodeConnection = this.workflow.getNodeConnectionIndexes(
-				activeNode.name,
+				this.activeNode.name,
 				parentNode[0],
-				'main',
+				inputName,
 			);
 			const connectionInputData = this.connectionInputData(
 				parentNode,
@@ -581,16 +586,15 @@ export default defineComponent({
 			return returnParameters;
 		},
 		getFilterResults(filterText: string, itemIndex: number): IVariableSelectorOption[] {
-			const inputName = 'main';
+			const inputName = NodeConnectionType.Main;
 
-			const activeNode: INodeUi | null = this.ndvStore.activeNode;
-
-			if (activeNode === null) {
+			if (this.activeNode === null) {
 				return [];
 			}
 
 			const executionData = this.workflowsStore.getWorkflowExecution;
-			let parentNode = this.workflow.getParentNodes(activeNode.name, inputName, 1);
+			let parentNode = this.workflow.getParentNodes(this.activeNode.name, inputName, 1);
+			console.log('parentNode', parentNode);
 			let runData = this.workflowsStore.getWorkflowRunData;
 
 			if (runData === null) {
@@ -614,7 +618,7 @@ export default defineComponent({
 					this.workflow,
 					runExecutionData,
 					parentNode,
-					activeNode.name,
+					this.activeNode.name,
 					filterText,
 				) as IVariableSelectorOption[];
 				if (tempOptions.length) {
@@ -630,17 +634,23 @@ export default defineComponent({
 			if (parentNode.length) {
 				// If the node has an input node add the input data
 
-				const activeInputParentNode = parentNode.find(
-					(node) => node === this.ndvStore.ndvInputNodeName,
-				)!;
+				let ndvInputNodeName = this.ndvStore.ndvInputNodeName;
+				if (!ndvInputNodeName) {
+					// If no input node is set use the first parent one
+					// this is imporant for config-nodes which do not have
+					// a main input
+					ndvInputNodeName = parentNode[0];
+				}
+
+				const activeInputParentNode = parentNode.find((node) => node === ndvInputNodeName)!;
 
 				// Check from which output to read the data.
 				// Depends on how the nodes are connected.
 				// (example "IF" node. If node is connected to "true" or to "false" output)
 				const nodeConnection = this.workflow.getNodeConnectionIndexes(
-					activeNode.name,
+					this.activeNode.name,
 					activeInputParentNode,
-					'main',
+					inputName,
 				);
 				const outputIndex = nodeConnection === undefined ? 0 : nodeConnection.sourceIndex;
 
@@ -650,7 +660,7 @@ export default defineComponent({
 					filterText,
 					itemIndex,
 					0,
-					'main',
+					inputName,
 					outputIndex,
 					true,
 				) as IVariableSelectorOption[];
@@ -731,7 +741,7 @@ export default defineComponent({
 				name: this.$locale.baseText('variableSelector.parameters'),
 				options: this.sortOptions(
 					this.getNodeParameters(
-						activeNode.name,
+						this.activeNode.name,
 						initialPath,
 						skipParameter,
 						filterText,
@@ -751,7 +761,7 @@ export default defineComponent({
 			// -----------------------------------------
 			const allNodesData: IVariableSelectorOption[] = [];
 			let nodeOptions: IVariableSelectorOption[];
-			const upstreamNodes = this.workflow.getParentNodes(activeNode.name, inputName);
+			const upstreamNodes = this.workflow.getParentNodes(this.activeNode.name, inputName);
 
 			const workflowNodes = Object.entries(this.workflow.nodes);
 
@@ -764,7 +774,7 @@ export default defineComponent({
 				// Add the parameters of all nodes
 				// TODO: Later have to make sure that no parameters can be referenced which have expression which use input-data (for nodes which are not parent nodes)
 
-				if (nodeName === activeNode.name) {
+				if (nodeName === this.activeNode.name) {
 					// Skip the current node as this one get added separately
 					continue;
 				}

packages/editor-ui/src/components/WorkflowLMChat.vue

@@ -0,0 +1,608 @@
+<template>
+	<Modal
+		:name="WORKFLOW_LM_CHAT_MODAL_KEY"
+		width="80%"
+		maxHeight="80%"
+		:title="
+			$locale.baseText('chat.window.title', {
+				interpolate: {
+					nodeName: connectedNode?.name || $locale.baseText('chat.window.noChatNode'),
+				},
+			})
+		"
+		:eventBus="modalBus"
+		:scrollable="false"
+		@keydown.stop
+	>
+		<template #content>
+			<div v-loading="isLoading" class="workflow-lm-chat" data-test-id="workflow-lm-chat-dialog">
+				<div class="messages ignore-key-press" ref="messagesContainer">
+					<div
+						v-for="message in messages"
+						:key="`${message.executionId}__${message.sender}`"
+						:class="['message', message.sender]"
+					>
+						<div :class="['content', message.sender]">
+							{{ message.text }}
+
+							<div class="message-options no-select-on-click">
+								<n8n-info-tip
+									type="tooltip"
+									theme="info-light"
+									tooltipPlacement="right"
+									v-if="message.sender === 'bot'"
+								>
+									<div v-if="message.executionId">
+										<n8n-text :bold="true" size="small">
+											<span @click.stop="displayExecution(message.executionId)">
+												{{ $locale.baseText('chat.window.chat.chatMessageOptions.executionId') }}:
+												<a href="#" class="link">{{ message.executionId }}</a>
+											</span>
+										</n8n-text>
+									</div>
+								</n8n-info-tip>
+
+								<div
+									@click="repostMessage(message)"
+									class="option"
+									:title="$locale.baseText('chat.window.chat.chatMessageOptions.repostMessage')"
+									data-test-id="repost-message-button"
+									v-if="message.sender === 'user'"
+								>
+									<font-awesome-icon icon="redo" />
+								</div>
+								<div
+									@click="reuseMessage(message)"
+									class="option"
+									:title="$locale.baseText('chat.window.chat.chatMessageOptions.reuseMessage')"
+									data-test-id="reuse-message-button"
+									v-if="message.sender === 'user'"
+								>
+									<font-awesome-icon icon="copy" />
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="logs-wrapper">
+					<n8n-text class="logs-title" tag="p" size="large">{{
+						$locale.baseText('chat.window.logs')
+					}}</n8n-text>
+					<div class="logs">
+						<run-data-ai v-if="node" :node="node" hide-title slim :key="messages.length" />
+						<div v-else class="no-node-connected">
+							<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
+								$locale.baseText('chat.window.noExecution')
+							}}</n8n-text>
+						</div>
+					</div>
+				</div>
+			</div>
+		</template>
+		<template #footer>
+			<div class="workflow-lm-chat-footer">
+				<n8n-input
+					v-model="currentMessage"
+					class="message-input"
+					type="textarea"
+					ref="inputField"
+					:placeholder="$locale.baseText('chat.window.chat.placeholder')"
+					@keydown.stop="updated"
+				/>
+				<n8n-button
+					@click.stop="sendChatMessage(currentMessage)"
+					class="send-button"
+					:loading="isLoading"
+					:label="$locale.baseText('chat.window.chat.sendButtonText')"
+					size="large"
+					icon="comment"
+					type="primary"
+					data-test-id="workflow-chat-button"
+				/>
+
+				<n8n-info-tip class="mt-s">
+					{{ $locale.baseText('chatEmbed.infoTip.description') }}
+					<a @click="openChatEmbedModal">
+						{{ $locale.baseText('chatEmbed.infoTip.link') }}
+					</a>
+				</n8n-info-tip>
+			</div>
+		</template>
+	</Modal>
+</template>
+
+<script lang="ts">
+import { defineAsyncComponent, defineComponent } from 'vue';
+import { mapStores } from 'pinia';
+
+import { useToast } from '@/composables';
+import Modal from '@/components/Modal.vue';
+import {
+	AI_CATEGORY_AGENTS,
+	AI_CATEGORY_CHAINS,
+	AI_CODE_NODE_TYPE,
+	AI_SUBCATEGORY,
+	CHAT_EMBED_MODAL_KEY,
+	MANUAL_CHAT_TRIGGER_NODE_TYPE,
+	VIEWS,
+	WORKFLOW_LM_CHAT_MODAL_KEY,
+} from '@/constants';
+
+import { workflowRun } from '@/mixins/workflowRun';
+import { get, last } from 'lodash-es';
+
+import { useUIStore, useWorkflowsStore } from '@/stores';
+import { createEventBus } from 'n8n-design-system/utils';
+import {
+	type INode,
+	type INodeType,
+	type ITaskData,
+	NodeHelpers,
+	NodeConnectionType,
+} from 'n8n-workflow';
+import type { INodeUi } from '@/Interface';
+
+const RunDataAi = defineAsyncComponent(async () => import('@/components/RunDataAi/RunDataAi.vue'));
+
+interface ChatMessage {
+	text: string;
+	sender: 'bot' | 'user';
+	executionId?: string;
+}
+
+// TODO: Add proper type
+interface LangChainMessage {
+	id: string[];
+	kwargs: {
+		content: string;
+	};
+}
+
+// TODO:
+// - display additional information like execution time, tokens used, ...
+// - display errors better
+export default defineComponent({
+	name: 'WorkflowLMChat',
+	mixins: [workflowRun],
+	components: {
+		Modal,
+		RunDataAi,
+	},
+	setup(props) {
+		return {
+			...useToast(),
+			// eslint-disable-next-line @typescript-eslint/no-misused-promises
+			...workflowRun.setup?.(props),
+		};
+	},
+	data() {
+		return {
+			connectedNode: null as INodeUi | null,
+			currentMessage: '',
+			messages: [] as ChatMessage[],
+			modalBus: createEventBus(),
+			node: null as INodeUi | null,
+			WORKFLOW_LM_CHAT_MODAL_KEY,
+		};
+	},
+
+	computed: {
+		...mapStores(useWorkflowsStore, useUIStore),
+		isLoading(): boolean {
+			return this.uiStore.isActionActive('workflowRunning');
+		},
+	},
+	async mounted() {
+		this.setConnectedNode();
+		this.messages = this.getChatMessages();
+		this.setNode();
+	},
+	methods: {
+		displayExecution(executionId: string) {
+			const workflow = this.getCurrentWorkflow();
+			const route = this.$router.resolve({
+				name: VIEWS.EXECUTION_PREVIEW,
+				params: { name: workflow.id, executionId },
+			});
+			window.open(route.href, '_blank');
+		},
+		repostMessage(message: ChatMessage) {
+			void this.sendChatMessage(message.text);
+		},
+		reuseMessage(message: ChatMessage) {
+			this.currentMessage = message.text;
+			const inputField = this.$refs.inputField as HTMLInputElement;
+			inputField.focus();
+		},
+		updated(event: KeyboardEvent) {
+			if (event.key === 'Enter' && !event.shiftKey && this.currentMessage) {
+				void this.sendChatMessage(this.currentMessage);
+				event.stopPropagation();
+				event.preventDefault();
+			}
+		},
+		async sendChatMessage(message: string) {
+			this.messages.push({
+				text: message,
+				sender: 'user',
+			} as ChatMessage);
+
+			this.currentMessage = '';
+
+			await this.startWorkflowWithMessage(message);
+
+			// Scroll to bottom
+			const containerRef = this.$refs.messagesContainer as HTMLElement | undefined;
+			if (containerRef) {
+				// Wait till message got added else it will not scroll correctly
+				await this.$nextTick();
+				containerRef.scrollTo({
+					top: containerRef.scrollHeight,
+					behavior: 'smooth',
+				});
+			}
+		},
+
+		setConnectedNode() {
+			const workflow = this.getCurrentWorkflow();
+			const triggerNode = workflow.queryNodes(
+				(nodeType: INodeType) => nodeType.description.name === MANUAL_CHAT_TRIGGER_NODE_TYPE,
+			);
+
+			if (!triggerNode.length) {
+				this.showError(
+					new Error('Chat Trigger Node could not be found!'),
+					'Trigger Node not found',
+				);
+				return;
+			}
+			const chatNode = this.workflowsStore.getNodes().find((node: INodeUi): boolean => {
+				const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
+				if (!nodeType) return false;
+
+				const isAgent =
+					nodeType.codex?.subcategories?.[AI_SUBCATEGORY]?.includes(AI_CATEGORY_AGENTS);
+				const isChain =
+					nodeType.codex?.subcategories?.[AI_SUBCATEGORY]?.includes(AI_CATEGORY_CHAINS);
+
+				let isCustomChainOrAgent = false;
+				if (nodeType.name === AI_CODE_NODE_TYPE) {
+					const inputs = NodeHelpers.getNodeInputs(workflow, node, nodeType);
+					const inputTypes = NodeHelpers.getConnectionTypes(inputs);
+
+					const outputs = NodeHelpers.getNodeOutputs(workflow, node, nodeType);
+					const outputTypes = NodeHelpers.getConnectionTypes(outputs);
+
+					if (
+						inputTypes.includes(NodeConnectionType.AiLanguageModel) &&
+						inputTypes.includes(NodeConnectionType.Main) &&
+						outputTypes.includes(NodeConnectionType.Main)
+					) {
+						isCustomChainOrAgent = true;
+					}
+				}
+
+				if (!isAgent && !isChain && !isCustomChainOrAgent) return false;
+
+				const parentNodes = workflow.getParentNodes(node.name);
+				const isChatChild = parentNodes.some(
+					(parentNodeName) => parentNodeName === triggerNode[0].name,
+				);
+
+				return Boolean(isChatChild && (isAgent || isChain || isCustomChainOrAgent));
+			});
+
+			if (!chatNode) {
+				this.showError(
+					new Error('Chat viable node(Agent or Chain) could not be found!'),
+					'Chat node not found',
+				);
+				return;
+			}
+
+			this.connectedNode = chatNode;
+		},
+		getChatMessages(): ChatMessage[] {
+			if (!this.connectedNode) return [];
+
+			const workflow = this.getCurrentWorkflow();
+			const connectedMemoryInputs =
+				workflow.connectionsByDestinationNode[this.connectedNode.name]?.memory;
+			if (!connectedMemoryInputs) return [];
+
+			const memoryConnection = (connectedMemoryInputs ?? []).find((i) => i.length > 0)?.[0];
+
+			if (!memoryConnection) return [];
+
+			const nodeResultData = this.workflowsStore?.getWorkflowResultDataByNodeName(
+				memoryConnection.node,
+			);
+
+			const memoryOutputData = nodeResultData
+				?.map(
+					(
+						data,
+					): {
+						action: string;
+						chatHistory?: unknown[];
+						response?: {
+							chat_history?: unknown[];
+						};
+					} => get(data, 'data.memory.0.0.json')!,
+				)
+				?.find((data) =>
+					['chatHistory', 'loadMemoryVariables'].includes(data?.action) ? data : undefined,
+				);
+
+			let chatHistory: LangChainMessage[];
+			if (memoryOutputData?.chatHistory) {
+				chatHistory = memoryOutputData?.chatHistory as LangChainMessage[];
+			} else if (memoryOutputData?.response) {
+				chatHistory = memoryOutputData?.response.chat_history as LangChainMessage[];
+			} else {
+				return [];
+			}
+
+			return chatHistory.map((message) => {
+				return {
+					text: message.kwargs.content,
+					sender: last(message.id) === 'HumanMessage' ? 'user' : 'bot',
+				};
+			});
+		},
+
+		setNode(): void {
+			const triggerNode = this.getTriggerNode();
+			if (!triggerNode) {
+				return;
+			}
+
+			const workflow = this.getCurrentWorkflow();
+			const childNodes = workflow.getChildNodes(triggerNode.name);
+
+			for (const childNode of childNodes) {
+				// Look for the first connected node with metadata
+				// TODO: Allow later users to change that in the UI
+				const resultData = this.workflowsStore.getWorkflowResultDataByNodeName(childNode);
+
+				if (!resultData && !Array.isArray(resultData)) {
+					continue;
+				}
+
+				if (resultData[resultData.length - 1].metadata) {
+					this.node = this.workflowsStore.getNodeByName(childNode);
+					break;
+				}
+			}
+		},
+
+		getTriggerNode(): INode | null {
+			const workflow = this.getCurrentWorkflow();
+			const triggerNode = workflow.queryNodes(
+				(nodeType: INodeType) => nodeType.description.name === MANUAL_CHAT_TRIGGER_NODE_TYPE,
+			);
+
+			if (!triggerNode.length) {
+				return null;
+			}
+
+			return triggerNode[0];
+		},
+		async startWorkflowWithMessage(message: string): Promise<void> {
+			const triggerNode = this.getTriggerNode();
+
+			if (!triggerNode) {
+				this.showError(
+					new Error('Chat Trigger Node could not be found!'),
+					'Trigger Node not found',
+				);
+				return;
+			}
+
+			const nodeData: ITaskData = {
+				startTime: new Date().getTime(),
+				executionTime: 0,
+				executionStatus: 'success',
+				data: {
+					main: [
+						[
+							{
+								json: {
+									input: message,
+								},
+							},
+						],
+					],
+				},
+				source: [null],
+			};
+
+			const response = await this.runWorkflow({
+				triggerNode: triggerNode.name,
+				nodeData,
+				source: 'RunData.ManualChatMessage',
+			});
+
+			if (!response) {
+				this.showError(
+					new Error('It was not possible to start workflow!'),
+					'Workflow could not be started',
+				);
+				return;
+			}
+
+			this.waitForExecution(response.executionId);
+		},
+		waitForExecution(executionId?: string) {
+			const that = this;
+			const waitInterval = setInterval(() => {
+				if (!that.isLoading) {
+					clearInterval(waitInterval);
+
+					const lastNodeExecuted =
+						this.workflowsStore.getWorkflowExecution?.data?.resultData.lastNodeExecuted;
+
+					const nodeResponseDataArray = get(
+						this.workflowsStore.getWorkflowExecution?.data?.resultData.runData,
+						`[${lastNodeExecuted}]`,
+					) as ITaskData[];
+
+					const nodeResponseData = nodeResponseDataArray[nodeResponseDataArray.length - 1];
+
+					let responseMessage: string;
+
+					if (get(nodeResponseData, ['error'])) {
+						responseMessage = '[ERROR: ' + get(nodeResponseData, ['error', 'message']) + ']';
+					} else {
+						const responseData = get(nodeResponseData, 'data.main[0][0].json');
+						if (responseData) {
+							const responseObj = responseData as object & { output?: string };
+							if (responseObj.output !== undefined) {
+								responseMessage = responseObj.output;
+							} else if (Object.keys(responseObj).length === 0) {
+								responseMessage = '<NO RESPONSE FOUND>';
+							} else {
+								responseMessage = JSON.stringify(responseObj, null, 2);
+							}
+						} else {
+							responseMessage = '<NO RESPONSE FOUND>';
+						}
+					}
+
+					this.messages.push({
+						text: responseMessage,
+						sender: 'bot',
+						executionId,
+					} as ChatMessage);
+
+					void this.$nextTick(() => {
+						that.setNode();
+					});
+				}
+			}, 500);
+		},
+		closeDialog() {
+			this.modalBus.emit('close');
+			void this.$externalHooks().run('workflowSettings.dialogVisibleChanged', {
+				dialogVisible: false,
+			});
+		},
+		openChatEmbedModal() {
+			this.uiStore.openModal(CHAT_EMBED_MODAL_KEY);
+		},
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.no-node-connected {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.workflow-lm-chat {
+	color: $custom-font-black;
+	font-size: var(--font-size-s);
+	display: flex;
+	height: 100%;
+	min-height: 400px;
+
+	.logs-wrapper {
+		border: 1px solid #e0e0e0;
+		border-radius: 4px;
+		height: 100%;
+		overflow-y: auto;
+		width: 100%;
+		padding: var(--spacing-xs) 0;
+
+		.logs-title {
+			margin: 0 var(--spacing-s) var(--spacing-s);
+		}
+	}
+	.messages {
+		background-color: var(--color-background-base);
+		border: 1px solid #e0e0e0;
+		border-radius: 4px;
+		height: 100%;
+		width: 100%;
+		overflow: hidden auto;
+		padding-top: 1.5em;
+		margin-right: 1em;
+
+		.message {
+			float: left;
+			position: relative;
+			width: 100%;
+
+			.content {
+				border-radius: 10px;
+				line-height: 1.5;
+				margin: 0.5em 1em;
+				max-width: 75%;
+				padding: 1em;
+				white-space: pre-wrap;
+				overflow-x: auto;
+
+				&.bot {
+					background-color: #e0d0d0;
+					float: left;
+
+					.message-options {
+						left: 1.5em;
+					}
+				}
+
+				&.user {
+					background-color: #d0e0d0;
+					float: right;
+					text-align: right;
+
+					.message-options {
+						right: 1.5em;
+						text-align: right;
+					}
+				}
+
+				.message-options {
+					color: #aaa;
+					display: none;
+					font-size: 0.9em;
+					height: 26px;
+					position: absolute;
+					text-align: left;
+					top: -1.2em;
+					width: 120px;
+					z-index: 10;
+
+					.option {
+						cursor: pointer;
+						display: inline-block;
+						width: 28px;
+					}
+
+					.link {
+						text-decoration: underline;
+					}
+				}
+
+				&:hover {
+					.message-options {
+						display: initial;
+					}
+				}
+			}
+		}
+	}
+}
+
+.workflow-lm-chat-footer {
+	.message-input {
+		width: calc(100% - 8em);
+	}
+	.send-button {
+		float: right;
+	}
+}
+</style>

packages/editor-ui/src/components/__tests__/RunData.test.ts

@@ -13,6 +13,11 @@ const renderComponent = createComponentRenderer(RunData, {
 			name: 'Test Node',
 		},
 	},
+	data() {
+		return {
+			canPinData: true,
+		};
+	},
 	global: {
 		mocks: {
 			$route: {

packages/editor-ui/src/composables/useDataSchema.ts

@@ -1,5 +1,10 @@
-import type { Optional, Primitives, Schema, INodeUi, INodeExecutionData } from '@/Interface';
-import type { ITaskDataConnections, type IDataObject } from 'n8n-workflow';
+import type { Optional, Primitives, Schema, INodeUi } from '@/Interface';
+import {
+	type ITaskDataConnections,
+	type IDataObject,
+	type INodeExecutionData,
+	NodeConnectionType,
+} from 'n8n-workflow';
 import { merge } from 'lodash-es';
 import { generatePath } from '@/utils/mappingUtils';
 import { isObj } from '@/utils/typeGuards';
@@ -64,7 +69,7 @@ export function useDataSchema() {
 		outputIndex: number,
 	): INodeExecutionData[] {
 		if (
-			!connectionsData?.hasOwnProperty('main') ||
+			!connectionsData?.hasOwnProperty(NodeConnectionType.Main) ||
 			connectionsData.main === undefined ||
 			connectionsData.main.length < outputIndex ||
 			connectionsData.main[outputIndex] === null

packages/editor-ui/src/composables/useTitleChange.ts

@@ -1,6 +1,12 @@
 import type { WorkflowTitleStatus } from '@/Interface';
-
+import { useSettingsStore } from '@/stores';
 export function useTitleChange() {
+	const prependBeta = (title: string) => {
+		const settingsStore = useSettingsStore();
+
+		return settingsStore.settings.isBetaRelease ? `[BETA] ${title}` : title;
+	};
+
 	const titleSet = (workflow: string, status: WorkflowTitleStatus) => {
 		let icon = '⚠️';
 		if (status === 'EXECUTING') {
@@ -9,11 +15,11 @@ export function useTitleChange() {
 			icon = '▶️';
 		}
 
-		window.document.title = `n8n - ${icon} ${workflow}`;
+		window.document.title = prependBeta(`n8n - ${icon} ${workflow}`);
 	};
 
 	const titleReset = () => {
-		window.document.title = 'n8n - Workflow Automation';
+		window.document.title = prependBeta('n8n - Workflow Automation');
 	};
 
 	return {

packages/editor-ui/src/constants.ts

@@ -1,4 +1,5 @@
 import type { NodeCreatorOpenSource } from './Interface';
+import { NodeConnectionType } from 'n8n-workflow';
 
 export const MAX_WORKFLOW_SIZE = 16777216; // Workflow size limit in bytes
 export const MAX_WORKFLOW_PINNED_DATA_SIZE = 12582912; // Workflow pinned data size limit in bytes
@@ -26,6 +27,7 @@ export const MAX_TAG_NAME_LENGTH = 24;
 
 // modals
 export const ABOUT_MODAL_KEY = 'about';
+export const CHAT_EMBED_MODAL_KEY = 'chatEmbed';
 export const CHANGE_PASSWORD_MODAL_KEY = 'changePassword';
 export const CREDENTIAL_EDIT_MODAL_KEY = 'editCredential';
 export const CREDENTIAL_SELECT_MODAL_KEY = 'selectCredential';
@@ -35,6 +37,7 @@ export const DUPLICATE_MODAL_KEY = 'duplicate';
 export const TAGS_MANAGER_MODAL_KEY = 'tagsManager';
 export const VERSIONS_MODAL_KEY = 'versions';
 export const WORKFLOW_SETTINGS_MODAL_KEY = 'settings';
+export const WORKFLOW_LM_CHAT_MODAL_KEY = 'lmChat';
 export const WORKFLOW_SHARE_MODAL_KEY = 'workflowShare';
 export const PERSONALIZATION_MODAL_KEY = 'personalization';
 export const CONTACT_PROMPT_MODAL_KEY = 'contactPrompt';
@@ -86,10 +89,14 @@ export const CUSTOM_NODES_DOCS_URL = `https://${DOCS_DOMAIN}/integrations/creati
 export const EXPRESSIONS_DOCS_URL = `https://${DOCS_DOMAIN}/code-examples/expressions/`;
 export const N8N_PRICING_PAGE_URL = 'https://n8n.io/pricing';
 
+export const NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS = false;
+export const NODE_MIN_INPUT_ITEMS_COUNT = 4;
+
 // node types
 export const BAMBOO_HR_NODE_TYPE = 'n8n-nodes-base.bambooHr';
 export const CALENDLY_TRIGGER_NODE_TYPE = 'n8n-nodes-base.calendlyTrigger';
 export const CODE_NODE_TYPE = 'n8n-nodes-base.code';
+export const AI_CODE_NODE_TYPE = '@n8n/n8n-nodes-langchain.code';
 export const CRON_NODE_TYPE = 'n8n-nodes-base.cron';
 export const CLEARBIT_NODE_TYPE = 'n8n-nodes-base.clearbit';
 export const FILTER_NODE_TYPE = 'n8n-nodes-base.filter';
@@ -112,6 +119,7 @@ export const JIRA_NODE_TYPE = 'n8n-nodes-base.jira';
 export const JIRA_TRIGGER_NODE_TYPE = 'n8n-nodes-base.jiraTrigger';
 export const MICROSOFT_EXCEL_NODE_TYPE = 'n8n-nodes-base.microsoftExcel';
 export const MANUAL_TRIGGER_NODE_TYPE = 'n8n-nodes-base.manualTrigger';
+export const MANUAL_CHAT_TRIGGER_NODE_TYPE = '@n8n/n8n-nodes-langchain.manualChatTrigger';
 export const MICROSOFT_TEAMS_NODE_TYPE = 'n8n-nodes-base.microsoftTeams';
 export const N8N_NODE_TYPE = 'n8n-nodes-base.n8n';
 export const NO_OP_NODE_TYPE = 'n8n-nodes-base.noOp';
@@ -153,8 +161,11 @@ export const NON_ACTIVATABLE_TRIGGER_NODE_TYPES = [
 	ERROR_TRIGGER_NODE_TYPE,
 	MANUAL_TRIGGER_NODE_TYPE,
 	EXECUTE_WORKFLOW_TRIGGER_NODE_TYPE,
+	MANUAL_CHAT_TRIGGER_NODE_TYPE,
 ];
 
+export const NODES_USING_CODE_NODE_EDITOR = [CODE_NODE_TYPE];
+
 export const PIN_DATA_NODE_TYPES_DENYLIST = [SPLIT_IN_BATCHES_NODE_TYPE];
 
 // Node creator
@@ -164,6 +175,7 @@ export const NODE_CREATOR_OPEN_SOURCES: Record<
 > = {
 	NO_TRIGGER_EXECUTION_TOOLTIP: 'no_trigger_execution_tooltip',
 	PLUS_ENDPOINT: 'plus_endpoint',
+	ADD_INPUT_ENDPOINT: 'add_input_endpoint',
 	TRIGGER_PLACEHOLDER_BUTTON: 'trigger_placeholder_button',
 	ADD_NODE_BUTTON: 'add_node_button',
 	TAB: 'tab',
@@ -174,17 +186,39 @@ export const NODE_CREATOR_OPEN_SOURCES: Record<
 export const CORE_NODES_CATEGORY = 'Core Nodes';
 export const CUSTOM_NODES_CATEGORY = 'Custom Nodes';
 export const DEFAULT_SUBCATEGORY = '*';
+export const AI_OTHERS_NODE_CREATOR_VIEW = 'AI Other';
+export const AI_NODE_CREATOR_VIEW = 'AI';
 export const REGULAR_NODE_CREATOR_VIEW = 'Regular';
 export const TRIGGER_NODE_CREATOR_VIEW = 'Trigger';
-export const UNCATEGORIZED_CATEGORY = 'Miscellaneous';
 export const OTHER_TRIGGER_NODES_SUBCATEGORY = 'Other Trigger Nodes';
 export const TRANSFORM_DATA_SUBCATEGORY = 'Data Transformation';
 export const FILES_SUBCATEGORY = 'Files';
 export const FLOWS_CONTROL_SUBCATEGORY = 'Flow';
+export const AI_SUBCATEGORY = 'AI';
 export const HELPERS_SUBCATEGORY = 'Helpers';
+export const AI_CATEGORY_AGENTS = 'Agents';
+export const AI_CATEGORY_CHAINS = 'Chains';
+export const AI_CATEGORY_LANGUAGE_MODELS = 'Language Models';
+export const AI_CATEGORY_MEMORY = 'Memory';
+export const AI_CATEGORY_OUTPUTPARSER = 'Output Parsers';
+export const AI_CATEGORY_TOOLS = 'Tools';
+export const AI_CATEGORY_VECTOR_STORES = 'Vector Stores';
+export const AI_CATEGORY_RETRIEVERS = 'Retrievers';
+export const AI_CATEGORY_EMBEDDING = 'Embeddings';
+export const AI_CATEGORY_DOCUMENT_LOADERS = 'Document Loaders';
+export const AI_CATEGORY_TEXT_SPLITTERS = 'Text Splitters';
+export const AI_UNCATEGORIZED_CATEGORY = 'Miscellaneous';
 
 export const REQUEST_NODE_FORM_URL = 'https://n8n-community.typeform.com/to/K1fBVTZ3';
 
+// Node Connection Types
+export const NODE_CONNECTION_TYPE_ALLOW_MULTIPLE: NodeConnectionType[] = [
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+	NodeConnectionType.AiTool,
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+	NodeConnectionType.Main,
+];
+
 // General
 export const INSTANCE_ID_HEADER = 'n8n-instance-id';
 export const WAIT_TIME_UNLIMITED = '3000-01-01T00:00:00.000Z';

packages/editor-ui/src/event-bus/index.ts

@@ -4,3 +4,4 @@ export * from './link-actions';
 export * from './html-editor';
 export * from './node-view';
 export * from './mfa';
+export * from './ndv';

packages/editor-ui/src/event-bus/mfa.ts

@@ -1,3 +1,3 @@
-import { createEventBus } from 'n8n-design-system';
+import { createEventBus } from 'n8n-design-system/utils';
 
 export const mfaEventBus = createEventBus();

packages/editor-ui/src/event-bus/ndv.ts

@@ -0,0 +1,3 @@
+import { createEventBus } from 'n8n-design-system/utils';
+
+export const ndvEventBus = createEventBus();

packages/editor-ui/src/event-bus/source-control.ts

@@ -1,3 +1,3 @@
-import { createEventBus } from 'n8n-design-system';
+import { createEventBus } from 'n8n-design-system/utils';
 
 export const sourceControlEventBus = createEventBus();

packages/editor-ui/src/main.ts

@@ -23,6 +23,7 @@ import { FontAwesomePlugin } from './plugins/icons';
 import { runExternalHook } from '@/utils';
 import { createPinia, PiniaVuePlugin } from 'pinia';
 import { useWebhooksStore } from '@/stores';
+import { JsPlumbPlugin } from '@/plugins/jsplumb';
 
 const pinia = createPinia();
 
@@ -34,6 +35,7 @@ app.use(I18nPlugin);
 app.use(FontAwesomePlugin);
 app.use(GlobalComponentsPlugin);
 app.use(GlobalDirectivesPlugin);
+app.use(JsPlumbPlugin);
 app.use(pinia);
 app.use(router);
 app.use(i18nInstance);

packages/editor-ui/src/mixins/nodeBase.ts

@@ -4,9 +4,20 @@ import { mapStores } from 'pinia';
 
 import type { INodeUi } from '@/Interface';
 import { deviceSupportHelpers } from '@/mixins/deviceSupportHelpers';
-import { NO_OP_NODE_TYPE } from '@/constants';
+import {
+	NO_OP_NODE_TYPE,
+	NODE_CONNECTION_TYPE_ALLOW_MULTIPLE,
+	NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS,
+	NODE_MIN_INPUT_ITEMS_COUNT,
+} from '@/constants';
 
-import type { INodeTypeDescription } from 'n8n-workflow';
+import { NodeHelpers, NodeConnectionType } from 'n8n-workflow';
+import type {
+	ConnectionTypes,
+	INodeInputConfiguration,
+	INodeTypeDescription,
+	INodeOutputConfiguration,
+} from 'n8n-workflow';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
@@ -15,6 +26,33 @@ import type { Endpoint, EndpointOptions } from '@jsplumb/core';
 import * as NodeViewUtils from '@/utils/nodeViewUtils';
 import { useHistoryStore } from '@/stores/history.store';
 import { useCanvasStore } from '@/stores/canvas.store';
+import type { EndpointSpec } from '@jsplumb/common';
+
+const createAddInputEndpointSpec = (
+	connectionName: NodeConnectionType,
+	color: string,
+): EndpointSpec => {
+	const multiple = NODE_CONNECTION_TYPE_ALLOW_MULTIPLE.includes(connectionName);
+
+	return {
+		type: 'N8nAddInput',
+		options: {
+			width: 24,
+			height: 72,
+			color,
+			multiple,
+		},
+	};
+};
+
+const createDiamondOutputEndpointSpec = (): EndpointSpec => ({
+	type: 'Rectangle',
+	options: {
+		height: 10,
+		width: 10,
+		cssClass: 'diamond-output-endpoint',
+	},
+});
 
 export const nodeBase = defineComponent({
 	mixins: [deviceSupportHelpers],
@@ -29,6 +67,12 @@ export const nodeBase = defineComponent({
 			}
 		}
 	},
+	data() {
+		return {
+			inputs: [] as Array<ConnectionTypes | INodeInputConfiguration>,
+			outputs: [] as Array<ConnectionTypes | INodeOutputConfiguration>,
+		};
+	},
 	computed: {
 		...mapStores(useNodeTypesStore, useUIStore, useCanvasStore, useWorkflowsStore, useHistoryStore),
 		data(): INodeUi | null {
@@ -72,59 +116,151 @@ export const nodeBase = defineComponent({
 		},
 		__addInputEndpoints(node: INodeUi, nodeTypeData: INodeTypeDescription) {
 			// Add Inputs
-			let index;
-			const indexData: {
+			const rootTypeIndexData: {
+				[key: string]: number;
+			} = {};
+			const typeIndexData: {
 				[key: string]: number;
 			} = {};
 
-			nodeTypeData.inputs.forEach((inputName: string, i: number) => {
-				// Increment the index for inputs with current name
-				if (indexData.hasOwnProperty(inputName)) {
-					indexData[inputName]++;
-				} else {
-					indexData[inputName] = 0;
+			const workflow = this.workflowsStore.getCurrentWorkflow();
+			const inputs: Array<ConnectionTypes | INodeInputConfiguration> =
+				NodeHelpers.getNodeInputs(workflow, this.data!, nodeTypeData) || [];
+			this.inputs = inputs;
+
+			const sortedInputs = [...inputs];
+			sortedInputs.sort((a, b) => {
+				if (typeof a === 'string') {
+					return 1;
+				} else if (typeof b === 'string') {
+					return -1;
 				}
-				index = indexData[inputName];
+
+				if (a.required && !b.required) {
+					return -1;
+				} else if (!a.required && b.required) {
+					return 1;
+				}
+
+				return 0;
+			});
+
+			sortedInputs.forEach((value, i) => {
+				let inputConfiguration: INodeInputConfiguration;
+				if (typeof value === 'string') {
+					inputConfiguration = {
+						type: value,
+					};
+				} else {
+					inputConfiguration = value;
+				}
+
+				const inputName: ConnectionTypes = inputConfiguration.type;
+
+				const rootCategoryInputName =
+					inputName === NodeConnectionType.Main ? NodeConnectionType.Main : 'other';
+
+				// Increment the index for inputs with current name
+				if (rootTypeIndexData.hasOwnProperty(rootCategoryInputName)) {
+					rootTypeIndexData[rootCategoryInputName]++;
+				} else {
+					rootTypeIndexData[rootCategoryInputName] = 0;
+				}
+
+				if (typeIndexData.hasOwnProperty(inputName)) {
+					typeIndexData[inputName]++;
+				} else {
+					typeIndexData[inputName] = 0;
+				}
+
+				const rootTypeIndex = rootTypeIndexData[rootCategoryInputName];
+				const typeIndex = typeIndexData[inputName];
+
+				const inputsOfSameRootType = inputs.filter((inputData) => {
+					const thisInputName: string = typeof inputData === 'string' ? inputData : inputData.type;
+					return inputName === NodeConnectionType.Main
+						? thisInputName === NodeConnectionType.Main
+						: thisInputName !== NodeConnectionType.Main;
+				});
+
+				const nonMainInputs = inputsOfSameRootType.filter((inputData) => {
+					return inputData !== NodeConnectionType.Main;
+				});
+				const requiredNonMainInputs = nonMainInputs.filter((inputData) => {
+					return typeof inputData !== 'string' && inputData.required;
+				});
+				const optionalNonMainInputs = nonMainInputs.filter((inputData) => {
+					return typeof inputData !== 'string' && !inputData.required;
+				});
+				const spacerIndexes = this.getSpacerIndexes(
+					requiredNonMainInputs.length,
+					optionalNonMainInputs.length,
+				);
 
 				// Get the position of the anchor depending on how many it has
-				const anchorPosition =
-					NodeViewUtils.ANCHOR_POSITIONS.input[nodeTypeData.inputs.length][index];
+				const anchorPosition = NodeViewUtils.getAnchorPosition(
+					inputName,
+					'input',
+					inputsOfSameRootType.length,
+					spacerIndexes,
+				)[rootTypeIndex];
+
+				const scope = NodeViewUtils.getEndpointScope(inputName as NodeConnectionType);
 
 				const newEndpointData: EndpointOptions = {
-					uuid: NodeViewUtils.getInputEndpointUUID(this.nodeId, index),
+					uuid: NodeViewUtils.getInputEndpointUUID(this.nodeId, inputName, typeIndex),
 					anchor: anchorPosition,
-					maxConnections: -1,
+					// We potentially want to change that in the future to allow people to dynamically
+					// activate and deactivate connected nodes
+					maxConnections: inputConfiguration.maxConnections ?? -1,
 					endpoint: 'Rectangle',
-					paintStyle: NodeViewUtils.getInputEndpointStyle(nodeTypeData, '--color-foreground-xdark'),
-					hoverPaintStyle: NodeViewUtils.getInputEndpointStyle(nodeTypeData, '--color-primary'),
-					source: false,
-					target: !this.isReadOnly && nodeTypeData.inputs.length > 1, // only enabled for nodes with multiple inputs.. otherwise attachment handled by connectionDrag event in NodeView,
+					paintStyle: NodeViewUtils.getInputEndpointStyle(
+						nodeTypeData,
+						'--color-foreground-xdark',
+						inputName,
+					),
+					hoverPaintStyle: NodeViewUtils.getInputEndpointStyle(
+						nodeTypeData,
+						'--color-primary',
+						inputName,
+					),
+					scope: NodeViewUtils.getScope(scope),
+					source: inputName !== NodeConnectionType.Main,
+					target: !this.isReadOnly && inputs.length > 1, // only enabled for nodes with multiple inputs.. otherwise attachment handled by connectionDrag event in NodeView,
 					parameters: {
+						connection: 'target',
 						nodeId: this.nodeId,
 						type: inputName,
-						index,
+						index: typeIndex,
 					},
 					enabled: !this.isReadOnly, // enabled in default case to allow dragging
 					cssClass: 'rect-input-endpoint',
 					dragAllowedWhenFull: true,
-					hoverClass: 'dropHover',
+					hoverClass: 'rect-input-endpoint-hover',
+					...this.__getInputConnectionStyle(inputName, nodeTypeData),
 				};
 
 				const endpoint = this.instance?.addEndpoint(
 					this.$refs[this.data.name] as Element,
 					newEndpointData,
-				);
-				this.__addEndpointTestingData(endpoint, 'input', index);
-				if (nodeTypeData.inputNames) {
+				) as Endpoint;
+				this.__addEndpointTestingData(endpoint, 'input', typeIndex);
+				if (inputConfiguration.displayName || nodeTypeData.inputNames?.[i]) {
 					// Apply input names if they got set
-					endpoint.addOverlay(NodeViewUtils.getInputNameOverlay(nodeTypeData.inputNames[index]));
+					endpoint.addOverlay(
+						NodeViewUtils.getInputNameOverlay(
+							inputConfiguration.displayName || nodeTypeData.inputNames[i],
+							inputName,
+							inputConfiguration.required,
+						),
+					);
 				}
 				if (!Array.isArray(endpoint)) {
 					endpoint.__meta = {
 						nodeName: node.name,
 						nodeId: this.nodeId,
-						index: i,
-						totalEndpoints: nodeTypeData.inputs.length,
+						index: typeIndex,
+						totalEndpoints: inputsOfSameRootType.length,
 					};
 				}
 
@@ -134,71 +270,166 @@ export const nodeBase = defineComponent({
 				//       different to the regular one (have different ids). So that seems to make
 				//       problems when hiding the input-name.
 
-				// if (index === 0 && inputName === 'main') {
+				// if (index === 0 && inputName === NodeConnectionType.Main) {
 				// 	// Make the first main-input the default one to connect to when connection gets dropped on node
 				// 	this.instance.makeTarget(this.nodeId, newEndpointData);
 				// }
 			});
-			if (nodeTypeData.inputs.length === 0) {
+			if (sortedInputs.length === 0) {
 				this.instance.manage(this.$refs[this.data.name] as Element);
 			}
 		},
+		getSpacerIndexes(
+			leftGroupItemsCount: number,
+			rightGroupItemsCount: number,
+			insertSpacerBetweenGroups = NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS,
+			minItemsCount = NODE_MIN_INPUT_ITEMS_COUNT,
+		): number[] {
+			const spacerIndexes = [];
+
+			if (leftGroupItemsCount > 0 && rightGroupItemsCount > 0) {
+				if (insertSpacerBetweenGroups) {
+					spacerIndexes.push(leftGroupItemsCount);
+				} else if (leftGroupItemsCount + rightGroupItemsCount < minItemsCount) {
+					for (
+						let spacerIndex = leftGroupItemsCount;
+						spacerIndex < minItemsCount - rightGroupItemsCount;
+						spacerIndex++
+					) {
+						spacerIndexes.push(spacerIndex);
+					}
+				}
+			} else {
+				if (
+					leftGroupItemsCount > 0 &&
+					leftGroupItemsCount < minItemsCount &&
+					rightGroupItemsCount === 0
+				) {
+					for (
+						let spacerIndex = 0;
+						spacerIndex < minItemsCount - leftGroupItemsCount;
+						spacerIndex++
+					) {
+						spacerIndexes.push(spacerIndex + leftGroupItemsCount);
+					}
+				} else if (
+					leftGroupItemsCount === 0 &&
+					rightGroupItemsCount > 0 &&
+					rightGroupItemsCount < minItemsCount
+				) {
+					for (
+						let spacerIndex = 0;
+						spacerIndex < minItemsCount - rightGroupItemsCount;
+						spacerIndex++
+					) {
+						spacerIndexes.push(spacerIndex);
+					}
+				}
+			}
+
+			return spacerIndexes;
+		},
 		__addOutputEndpoints(node: INodeUi, nodeTypeData: INodeTypeDescription) {
-			let index;
-			const indexData: {
+			const rootTypeIndexData: {
+				[key: string]: number;
+			} = {};
+			const typeIndexData: {
 				[key: string]: number;
 			} = {};
 
-			nodeTypeData.outputs.forEach((inputName: string, i: number) => {
-				// Increment the index for outputs with current name
-				if (indexData.hasOwnProperty(inputName)) {
-					indexData[inputName]++;
+			const workflow = this.workflowsStore.getCurrentWorkflow();
+			const outputs = NodeHelpers.getNodeOutputs(workflow, this.data, nodeTypeData) || [];
+			this.outputs = outputs;
+
+			// TODO: There are still a lot of references of "main" in NodesView and
+			//       other locations. So assume there will be more problems
+
+			outputs.forEach((value, i) => {
+				let outputConfiguration: INodeOutputConfiguration;
+				if (typeof value === 'string') {
+					outputConfiguration = {
+						type: value,
+					};
 				} else {
-					indexData[inputName] = 0;
+					outputConfiguration = value;
 				}
-				index = indexData[inputName];
+
+				const outputName: ConnectionTypes = outputConfiguration.type;
+
+				const rootCategoryOutputName =
+					outputName === NodeConnectionType.Main ? NodeConnectionType.Main : 'other';
+
+				// Increment the index for outputs with current name
+				if (rootTypeIndexData.hasOwnProperty(rootCategoryOutputName)) {
+					rootTypeIndexData[rootCategoryOutputName]++;
+				} else {
+					rootTypeIndexData[rootCategoryOutputName] = 0;
+				}
+
+				if (typeIndexData.hasOwnProperty(outputName)) {
+					typeIndexData[outputName]++;
+				} else {
+					typeIndexData[outputName] = 0;
+				}
+
+				const rootTypeIndex = rootTypeIndexData[rootCategoryOutputName];
+				const typeIndex = typeIndexData[outputName];
+
+				const outputsOfSameRootType = outputs.filter((outputData) => {
+					const thisOutputName: string =
+						typeof outputData === 'string' ? outputData : outputData.type;
+					return outputName === NodeConnectionType.Main
+						? thisOutputName === NodeConnectionType.Main
+						: thisOutputName !== NodeConnectionType.Main;
+				});
 
 				// Get the position of the anchor depending on how many it has
-				const anchorPosition =
-					NodeViewUtils.ANCHOR_POSITIONS.output[nodeTypeData.outputs.length][index];
+				const anchorPosition = NodeViewUtils.getAnchorPosition(
+					outputName,
+					'output',
+					outputsOfSameRootType.length,
+				)[rootTypeIndex];
+
+				const scope = NodeViewUtils.getEndpointScope(outputName as NodeConnectionType);
 
 				const newEndpointData: EndpointOptions = {
-					uuid: NodeViewUtils.getOutputEndpointUUID(this.nodeId, index),
+					uuid: NodeViewUtils.getOutputEndpointUUID(this.nodeId, outputName, typeIndex),
 					anchor: anchorPosition,
 					maxConnections: -1,
 					endpoint: {
 						type: 'Dot',
 						options: {
-							radius: nodeTypeData && nodeTypeData.outputs.length > 2 ? 7 : 9,
+							radius: nodeTypeData && outputsOfSameRootType.length > 2 ? 7 : 9,
 						},
 					},
-					paintStyle: NodeViewUtils.getOutputEndpointStyle(
-						nodeTypeData,
-						'--color-foreground-xdark',
-					),
 					hoverPaintStyle: NodeViewUtils.getOutputEndpointStyle(nodeTypeData, '--color-primary'),
+					scope,
 					source: true,
-					target: false,
+					target: outputName !== NodeConnectionType.Main,
 					enabled: !this.isReadOnly,
 					parameters: {
+						connection: 'source',
 						nodeId: this.nodeId,
-						type: inputName,
-						index,
+						type: outputName,
+						index: typeIndex,
 					},
 					hoverClass: 'dot-output-endpoint-hover',
 					connectionsDirected: true,
-					cssClass: 'dot-output-endpoint',
 					dragAllowedWhenFull: false,
+					...this.__getOutputConnectionStyle(outputName, nodeTypeData),
 				};
 
 				const endpoint = this.instance.addEndpoint(
 					this.$refs[this.data.name] as Element,
 					newEndpointData,
 				);
-				this.__addEndpointTestingData(endpoint, 'output', index);
-				if (nodeTypeData.outputNames) {
+				this.__addEndpointTestingData(endpoint, 'output', typeIndex);
+				if (outputConfiguration.displayName || nodeTypeData.outputNames?.[i]) {
 					// Apply output names if they got set
-					const overlaySpec = NodeViewUtils.getOutputNameOverlay(nodeTypeData.outputNames[index]);
+					const overlaySpec = NodeViewUtils.getOutputNameOverlay(
+						outputConfiguration.displayName || nodeTypeData.outputNames[i],
+						outputName,
+					);
 					endpoint.addOverlay(overlaySpec);
 				}
 
@@ -206,14 +437,14 @@ export const nodeBase = defineComponent({
 					endpoint.__meta = {
 						nodeName: node.name,
 						nodeId: this.nodeId,
-						index: i,
-						totalEndpoints: nodeTypeData.outputs.length,
+						index: typeIndex,
+						totalEndpoints: outputsOfSameRootType.length,
 					};
 				}
 
-				if (!this.isReadOnly) {
+				if (!this.isReadOnly && outputName === NodeConnectionType.Main) {
 					const plusEndpointData: EndpointOptions = {
-						uuid: NodeViewUtils.getOutputEndpointUUID(this.nodeId, index),
+						uuid: NodeViewUtils.getOutputEndpointUUID(this.nodeId, outputName, typeIndex),
 						anchor: anchorPosition,
 						maxConnections: -1,
 						endpoint: {
@@ -221,8 +452,8 @@ export const nodeBase = defineComponent({
 							options: {
 								dimensions: 24,
 								connectedEndpoint: endpoint,
-								showOutputLabel: nodeTypeData.outputs.length === 1,
-								size: nodeTypeData.outputs.length >= 3 ? 'small' : 'medium',
+								showOutputLabel: outputs.length === 1,
+								size: outputs.length >= 3 ? 'small' : 'medium',
 								hoverMessage: this.$locale.baseText('nodeBase.clickToAddNodeOrDragToConnect'),
 							},
 						},
@@ -236,9 +467,10 @@ export const nodeBase = defineComponent({
 							outlineStroke: 'none',
 						},
 						parameters: {
+							connection: 'source',
 							nodeId: this.nodeId,
-							type: inputName,
-							index,
+							type: outputName,
+							index: typeIndex,
 						},
 						cssClass: 'plus-draggable-endpoint',
 						dragAllowedWhenFull: false,
@@ -247,14 +479,14 @@ export const nodeBase = defineComponent({
 						this.$refs[this.data.name] as Element,
 						plusEndpointData,
 					);
-					this.__addEndpointTestingData(plusEndpoint, 'plus', index);
+					this.__addEndpointTestingData(plusEndpoint, 'plus', typeIndex);
 
 					if (!Array.isArray(plusEndpoint)) {
 						plusEndpoint.__meta = {
 							nodeName: node.name,
 							nodeId: this.nodeId,
-							index: i,
-							totalEndpoints: nodeTypeData.outputs.length,
+							index: typeIndex,
+							totalEndpoints: outputsOfSameRootType.length,
 						};
 					}
 				}
@@ -267,6 +499,74 @@ export const nodeBase = defineComponent({
 			this.__addInputEndpoints(node, nodeTypeData);
 			this.__addOutputEndpoints(node, nodeTypeData);
 		},
+		__getEndpointColor(connectionType: ConnectionTypes) {
+			return `--node-type-${connectionType}-color`;
+		},
+		__getInputConnectionStyle(
+			connectionType: ConnectionTypes,
+			nodeTypeData: INodeTypeDescription,
+		): EndpointOptions {
+			if (connectionType === NodeConnectionType.Main) {
+				return {
+					paintStyle: NodeViewUtils.getInputEndpointStyle(
+						nodeTypeData,
+						this.__getEndpointColor(NodeConnectionType.Main),
+						connectionType,
+					),
+				};
+			}
+
+			if (!Object.values(NodeConnectionType).includes(connectionType as NodeConnectionType)) {
+				return {};
+			}
+
+			const createSupplementalConnectionType = (
+				connectionName: ConnectionTypes,
+			): EndpointOptions => ({
+				endpoint: createAddInputEndpointSpec(
+					connectionName as NodeConnectionType,
+					this.__getEndpointColor(connectionName),
+				),
+			});
+
+			return createSupplementalConnectionType(connectionType);
+		},
+		__getOutputConnectionStyle(
+			connectionType: ConnectionTypes,
+			nodeTypeData: INodeTypeDescription,
+		): EndpointOptions {
+			const type = 'output';
+
+			const createSupplementalConnectionType = (
+				connectionName: ConnectionTypes,
+			): EndpointOptions => ({
+				endpoint: createDiamondOutputEndpointSpec(),
+				paintStyle: NodeViewUtils.getOutputEndpointStyle(
+					nodeTypeData,
+					this.__getEndpointColor(connectionName),
+				),
+				hoverPaintStyle: NodeViewUtils.getOutputEndpointStyle(
+					nodeTypeData,
+					this.__getEndpointColor(connectionName),
+				),
+			});
+
+			if (connectionType === NodeConnectionType.Main) {
+				return {
+					paintStyle: NodeViewUtils.getOutputEndpointStyle(
+						nodeTypeData,
+						this.__getEndpointColor(NodeConnectionType.Main),
+					),
+					cssClass: `dot-${type}-endpoint`,
+				};
+			}
+
+			if (!Object.values(NodeConnectionType).includes(connectionType as NodeConnectionType)) {
+				return {};
+			}
+
+			return createSupplementalConnectionType(connectionType);
+		},
 		touchEnd(e: MouseEvent) {
 			if (this.isTouchDevice) {
 				if (this.uiStore.isActionActive('dragActive')) {

packages/editor-ui/src/mixins/nodeHelpers.ts

@@ -3,6 +3,7 @@ import { useHistoryStore } from '@/stores/history.store';
 import { PLACEHOLDER_FILLED_AT_EXECUTION_TIME, CUSTOM_API_CALL_KEY } from '@/constants';
 
 import type {
+	ConnectionTypes,
 	IBinaryKeyData,
 	ICredentialType,
 	INodeCredentialDescription,
@@ -18,14 +19,17 @@ import type {
 	INode,
 	INodePropertyOptions,
 	IDataObject,
+	Workflow,
+	INodeInputConfiguration,
 } from 'n8n-workflow';
-import { NodeHelpers } from 'n8n-workflow';
+import { NodeHelpers, ExpressionEvaluatorProxy, NodeConnectionType } from 'n8n-workflow';
 
 import type {
 	ICredentialsResponse,
 	INodeUi,
 	INodeUpdatePropertiesInformation,
 	IUser,
+	NodePanelType,
 } from '@/Interface';
 
 import { get } from 'lodash-es';
@@ -84,6 +88,24 @@ export const nodeHelpers = defineComponent({
 			return NodeHelpers.displayParameterPath(nodeValues, parameter, path, node);
 		},
 
+		// Updates all the issues on all the nodes
+		refreshNodeIssues(): void {
+			const nodes = this.workflowsStore.allNodes;
+			let nodeType: INodeTypeDescription | null;
+			let foundNodeIssues: INodeIssues | null;
+
+			nodes.forEach((node) => {
+				if (node.disabled === true) {
+					return;
+				}
+				nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
+				foundNodeIssues = this.getNodeIssues(nodeType, node);
+				if (foundNodeIssues !== null) {
+					node.issues = foundNodeIssues;
+				}
+			});
+		},
+
 		// Returns all the issues of the node
 		getNodeIssues(
 			nodeType: INodeTypeDescription | null,
@@ -124,6 +146,14 @@ export const nodeHelpers = defineComponent({
 						NodeHelpers.mergeIssues(nodeIssues, nodeCredentialIssues);
 					}
 				}
+
+				const workflow = this.workflowsStore.getCurrentWorkflow();
+				const nodeInputIssues = this.getNodeInputIssues(workflow, node, nodeType);
+				if (nodeIssues === null) {
+					nodeIssues = nodeInputIssues;
+				} else {
+					NodeHelpers.mergeIssues(nodeIssues, nodeInputIssues);
+				}
 			}
 
 			if (this.hasNodeExecutionIssues(node) && !ignoreIssues.includes('execution')) {
@@ -168,6 +198,25 @@ export const nodeHelpers = defineComponent({
 			};
 		},
 
+		updateNodesInputIssues() {
+			const nodes = this.workflowsStore.allNodes;
+			const workflow = this.workflowsStore.getCurrentWorkflow();
+
+			for (const node of nodes) {
+				const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
+				if (!nodeType) {
+					return;
+				}
+				const nodeInputIssues = this.getNodeInputIssues(workflow, node, nodeType);
+
+				this.workflowsStore.setNodeIssue({
+					node: node.name,
+					type: 'input',
+					value: nodeInputIssues?.input ? nodeInputIssues.input : null,
+				});
+			}
+		},
+
 		// Updates the execution issues.
 		updateNodesExecutionIssues() {
 			const nodes = this.workflowsStore.allNodes;
@@ -242,6 +291,45 @@ export const nodeHelpers = defineComponent({
 			});
 		},
 
+		// Returns all the input-issues of the node
+		getNodeInputIssues(
+			workflow: Workflow,
+			node: INodeUi,
+			nodeType?: INodeTypeDescription,
+		): INodeIssues | null {
+			const foundIssues: INodeIssueObjectProperty = {};
+
+			const workflowNode = workflow.getNode(node.name);
+			let inputs: Array<ConnectionTypes | INodeInputConfiguration> = [];
+			if (nodeType && workflowNode) {
+				inputs = NodeHelpers.getNodeInputs(workflow, workflowNode, nodeType);
+			}
+
+			inputs.forEach((input) => {
+				if (typeof input === 'string' || input.required !== true) {
+					return;
+				}
+
+				const parentNodes = workflow.getParentNodes(node.name, input.type, 1);
+
+				if (parentNodes.length === 0) {
+					foundIssues[input.type] = [
+						this.$locale.baseText('nodeIssues.input.missing', {
+							interpolate: { inputName: input.displayName || input.type },
+						}),
+					];
+				}
+			});
+
+			if (Object.keys(foundIssues).length) {
+				return {
+					input: foundIssues,
+				};
+			}
+
+			return null;
+		},
+
 		// Returns all the credential-issues of the node
 		getNodeCredentialIssues(node: INodeUi, nodeType?: INodeTypeDescription): INodeIssues | null {
 			if (node.disabled) {
@@ -414,14 +502,20 @@ export const nodeHelpers = defineComponent({
 			}
 		},
 
-		getNodeInputData(node: INodeUi | null, runIndex = 0, outputIndex = 0): INodeExecutionData[] {
+		getNodeInputData(
+			node: INodeUi | null,
+			runIndex = 0,
+			outputIndex = 0,
+			paneType: NodePanelType = 'output',
+			connectionType: ConnectionTypes = NodeConnectionType.Main,
+		): INodeExecutionData[] {
 			if (node === null) {
 				return [];
 			}
-
 			if (this.workflowsStore.getWorkflowExecution === null) {
 				return [];
 			}
+
 			const executionData = this.workflowsStore.getWorkflowExecution.data;
 			if (!executionData?.resultData) {
 				// unknown status
@@ -429,31 +523,39 @@ export const nodeHelpers = defineComponent({
 			}
 			const runData = executionData.resultData.runData;
 
-			if (
-				!runData?.[node.name]?.[runIndex].data ||
-				runData[node.name][runIndex].data === undefined
-			) {
+			const taskData = get(runData, `[${node.name}][${runIndex}]`);
+			if (!taskData) {
 				return [];
 			}
 
-			return this.getMainInputData(runData[node.name][runIndex].data!, outputIndex);
+			let data: ITaskDataConnections | undefined = taskData.data!;
+			if (paneType === 'input' && taskData.inputOverride) {
+				data = taskData.inputOverride!;
+			}
+
+			if (!data) {
+				return [];
+			}
+
+			return this.getInputData(data, outputIndex, connectionType);
 		},
 
 		// Returns the data of the main input
-		getMainInputData(
+		getInputData(
 			connectionsData: ITaskDataConnections,
 			outputIndex: number,
+			connectionType: ConnectionTypes = NodeConnectionType.Main,
 		): INodeExecutionData[] {
 			if (
 				!connectionsData ||
-				!connectionsData.hasOwnProperty('main') ||
-				connectionsData.main === undefined ||
-				connectionsData.main.length < outputIndex ||
-				connectionsData.main[outputIndex] === null
+				!connectionsData.hasOwnProperty(connectionType) ||
+				connectionsData[connectionType] === undefined ||
+				connectionsData[connectionType].length < outputIndex ||
+				connectionsData[connectionType][outputIndex] === null
 			) {
 				return [];
 			}
-			return connectionsData.main[outputIndex] as INodeExecutionData[];
+			return connectionsData[connectionType][outputIndex] as INodeExecutionData[];
 		},
 
 		// Returns all the binary data of all the entries
@@ -462,6 +564,7 @@ export const nodeHelpers = defineComponent({
 			node: string | null,
 			runIndex: number,
 			outputIndex: number,
+			connectionType: ConnectionTypes = NodeConnectionType.Main,
 		): IBinaryKeyData[] {
 			if (node === null) {
 				return [];
@@ -473,7 +576,11 @@ export const nodeHelpers = defineComponent({
 				return [];
 			}
 
-			const inputData = this.getMainInputData(runData[node][runIndex].data!, outputIndex);
+			const inputData = this.getInputData(
+				runData[node][runIndex].data!,
+				outputIndex,
+				connectionType,
+			);
 
 			const returnData: IBinaryKeyData[] = [];
 			for (let i = 0; i < inputData.length; i++) {
@@ -509,6 +616,7 @@ export const nodeHelpers = defineComponent({
 				this.workflowsStore.clearNodeExecutionData(node.name);
 				this.updateNodeParameterIssues(node);
 				this.updateNodeCredentialIssues(node);
+				this.updateNodesInputIssues();
 				if (trackHistory) {
 					this.historyStore.pushCommandToUndo(
 						new EnableNodeToggleCommand(node.name, oldState === true, node.disabled === true),
@@ -531,6 +639,9 @@ export const nodeHelpers = defineComponent({
 
 			if (nodeType !== null && nodeType.subtitle !== undefined) {
 				try {
+					ExpressionEvaluatorProxy.setEvaluator(
+						useSettingsStore().settings.expressions?.evaluator ?? 'tmpl',
+					);
 					return workflow.expression.getSimpleParameterValue(
 						data as INode,
 						nodeType.subtitle,

packages/editor-ui/src/mixins/pushConnection.ts

@@ -494,7 +494,7 @@ export const pushConnection = defineComponent({
 					runDataExecuted.data.resultData.runData = this.workflowsStore.getWorkflowRunData;
 				}
 
-				this.workflowsStore.executingNode = null;
+				this.workflowsStore.executingNode.length = 0;
 				this.workflowsStore.setWorkflowExecutionData(runDataExecuted as IExecutionResponse);
 				this.uiStore.removeActiveAction('workflowRunning');
 
@@ -543,10 +543,11 @@ export const pushConnection = defineComponent({
 				// A node finished to execute. Add its data
 				const pushData = receivedData.data;
 				this.workflowsStore.addNodeExecutionData(pushData);
+				this.workflowsStore.removeExecutingNode(pushData.nodeName);
 			} else if (receivedData.type === 'nodeExecuteBefore') {
 				// A node started to be executed. Set it as executing.
 				const pushData = receivedData.data;
-				this.workflowsStore.executingNode = pushData.nodeName;
+				this.workflowsStore.addExecutingNode(pushData.nodeName);
 			} else if (receivedData.type === 'testWebhookDeleted') {
 				// A test-webhook was deleted
 				const pushData = receivedData.data;

packages/editor-ui/src/mixins/workflowHelpers.ts

@@ -30,7 +30,7 @@ import type {
 	INodeProperties,
 	IWorkflowSettings,
 } from 'n8n-workflow';
-import { NodeHelpers } from 'n8n-workflow';
+import { NodeConnectionType, ExpressionEvaluatorProxy, NodeHelpers } from 'n8n-workflow';
 
 import type {
 	INodeTypesMaxCount,
@@ -62,9 +62,45 @@ import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useWorkflowsEEStore } from '@/stores/workflows.ee.store';
 import { useEnvironmentsStore } from '@/stores/environments.ee.store';
 import { useUsersStore } from '@/stores/users.store';
+import { useSettingsStore } from '@/stores/settings.store';
 import { getWorkflowPermissions } from '@/permissions';
 import type { IPermissions } from '@/permissions';
 
+export function getParentMainInputNode(workflow: Workflow, node: INode): INode {
+	const nodeType = useNodeTypesStore().getNodeType(node.type);
+	if (nodeType) {
+		const outputs = NodeHelpers.getNodeOutputs(workflow, node, nodeType);
+
+		if (!!outputs.find((output) => output !== NodeConnectionType.Main)) {
+			// Get the first node which is connected to a non-main output
+			const nonMainNodesConnected = outputs?.reduce((acc, outputName) => {
+				const parentNodes = workflow.getChildNodes(node.name, outputName);
+				if (parentNodes.length > 0) {
+					acc.push(...parentNodes);
+				}
+				return acc;
+			}, [] as string[]);
+
+			if (nonMainNodesConnected.length) {
+				const returnNode = workflow.getNode(nonMainNodesConnected[0]);
+				if (returnNode === null) {
+					// This should theoretically never happen as the node is connected
+					// but who knows and it makes TS happy
+					throw new Error(
+						`The node "${nonMainNodesConnected[0]}" which is a connection of "${node.name}" could not be found!`,
+					);
+				}
+
+				// The chain of non-main nodes is potentially not finished yet so
+				// keep on going
+				return getParentMainInputNode(workflow, returnNode);
+			}
+		}
+	}
+
+	return node;
+}
+
 export function resolveParameter(
 	parameter: NodeParameterValue | INodeParameters | NodeParameterValue[] | INodeParameters[],
 	opts: {
@@ -77,10 +113,16 @@ export function resolveParameter(
 ): IDataObject | null {
 	let itemIndex = opts?.targetItem?.itemIndex || 0;
 
-	const inputName = 'main';
-	const activeNode = useNDVStore().activeNode;
+	const inputName = NodeConnectionType.Main;
+	let activeNode = useNDVStore().activeNode;
 
 	const workflow = getCurrentWorkflow();
+
+	// Should actually just do that for incoming data and not things like parameters
+	if (activeNode) {
+		activeNode = getParentMainInputNode(workflow, activeNode);
+	}
+
 	const workflowRunData = useWorkflowsStore().getWorkflowRunData;
 	let parentNode = workflow.getParentNodes(activeNode!.name, inputName, 1);
 	const executionData = useWorkflowsStore().getWorkflowExecution;
@@ -162,6 +204,10 @@ export function resolveParameter(
 	}
 	const _executeData = executeData(parentNode, activeNode!.name, inputName, runIndexCurrent);
 
+	ExpressionEvaluatorProxy.setEvaluator(
+		useSettingsStore().settings.expressions?.evaluator ?? 'tmpl',
+	);
+
 	return workflow.expression.getParameterValue(
 		parameter,
 		runExecutionData,
@@ -222,6 +268,34 @@ function getCurrentWorkflow(copyData?: boolean): Workflow {
 	return useWorkflowsStore().getCurrentWorkflow(copyData);
 }
 
+function getConnectedNodes(
+	direction: 'upstream' | 'downstream',
+	workflow: Workflow,
+	nodeName: string,
+): string[] {
+	let checkNodes: string[];
+	if (direction === 'downstream') {
+		checkNodes = workflow.getChildNodes(nodeName);
+	} else if (direction === 'upstream') {
+		checkNodes = workflow.getParentNodes(nodeName);
+	} else {
+		throw new Error(`The direction "${direction}" is not supported!`);
+	}
+
+	// Find also all nodes which are connected to the child nodes via a non-main input
+	let connectedNodes: string[] = [];
+	checkNodes.forEach((checkNode) => {
+		connectedNodes = [
+			...connectedNodes,
+			checkNode,
+			...workflow.getParentNodes(checkNode, 'ALL_NON_MAIN'),
+		];
+	});
+
+	// Remove duplicates
+	return [...new Set(connectedNodes)];
+}
+
 function getNodes(): INodeUi[] {
 	return useWorkflowsStore().getNodes();
 }
@@ -356,11 +430,33 @@ export function executeData(
 					[inputName]: workflowRunData[currentNode][runIndex].source,
 				};
 			} else {
+				const workflow = getCurrentWorkflow();
+
+				let previousNodeOutput: number | undefined;
+				// As the node can be connected through either of the outputs find the correct one
+				// and set it to make pairedItem work on not executed nodes
+				if (workflow.connectionsByDestinationNode[currentNode]?.main) {
+					mainConnections: for (const mainConnections of workflow.connectionsByDestinationNode[
+						currentNode
+					].main) {
+						for (const connection of mainConnections) {
+							if (
+								connection.type === NodeConnectionType.Main &&
+								connection.node === parentNodeName
+							) {
+								previousNodeOutput = connection.index;
+								break mainConnections;
+							}
+						}
+					}
+				}
+
 				// The current node did not get executed in UI yet so build data manually
 				executeData.source = {
 					[inputName]: [
 						{
 							previousNode: parentNodeName,
+							previousNodeOutput,
 						},
 					],
 				};
@@ -399,7 +495,9 @@ export const workflowHelpers = defineComponent({
 		resolveParameter,
 		resolveRequiredParameters,
 		getCurrentWorkflow,
+		getConnectedNodes,
 		getNodes,
+		getParentMainInputNode,
 		getWorkflow,
 		getNodeTypes,
 		connectionInputData,

packages/editor-ui/src/mixins/workflowRun.ts

@@ -2,8 +2,8 @@ import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
 import type { IExecutionPushResponse, IExecutionResponse, IStartRunData } from '@/Interface';
 
-import type { IRunData, IRunExecutionData, IWorkflowBase } from 'n8n-workflow';
-import { NodeHelpers, TelemetryHelpers } from 'n8n-workflow';
+import type { IRunData, IRunExecutionData, ITaskData, IWorkflowBase } from 'n8n-workflow';
+import { NodeHelpers, NodeConnectionType, TelemetryHelpers } from 'n8n-workflow';
 
 import { externalHooks } from '@/mixins/externalHooks';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
@@ -28,7 +28,7 @@ export const workflowRun = defineComponent({
 	methods: {
 		// Starts to executes a workflow on server.
 		async runWorkflowApi(runData: IStartRunData): Promise<IExecutionPushResponse> {
-			if (this.rootStore.pushConnectionActive === false) {
+			if (!this.rootStore.pushConnectionActive) {
 				// Do not start if the connection to server is not active
 				// because then it can not receive the data as it executes.
 				throw new Error(this.$locale.baseText('workflowRun.noActiveConnectionToTheServer'));
@@ -57,9 +57,12 @@ export const workflowRun = defineComponent({
 
 			return response;
 		},
+
 		async runWorkflow(
-			nodeName?: string,
-			source?: string,
+			options:
+				| { destinationNode: string; source?: string }
+				| { triggerNode: string; nodeData: ITaskData; source?: string }
+				| { source?: string },
 		): Promise<IExecutionPushResponse | undefined> {
 			const workflow = this.getCurrentWorkflow();
 
@@ -74,9 +77,9 @@ export const workflowRun = defineComponent({
 			try {
 				// Check first if the workflow has any issues before execute it
 				const issuesExist = this.workflowsStore.nodesIssuesExist;
-				if (issuesExist === true) {
+				if (issuesExist) {
 					// If issues exist get all of the issues of all nodes
-					const workflowIssues = this.checkReadyForExecution(workflow, nodeName);
+					const workflowIssues = this.checkReadyForExecution(workflow, options.destinationNode);
 					if (workflowIssues !== null) {
 						const errorMessages = [];
 						let nodeIssues: string[];
@@ -115,13 +118,17 @@ export const workflowRun = defineComponent({
 							duration: 0,
 						});
 						this.titleSet(workflow.name as string, 'ERROR');
-						void this.$externalHooks().run('workflowRun.runError', { errorMessages, nodeName });
+						void this.$externalHooks().run('workflowRun.runError', {
+							errorMessages,
+							nodeName: options.destinationNode,
+						});
 
 						await this.getWorkflowDataToSave().then((workflowData) => {
 							this.$telemetry.track('Workflow execution preflight failed', {
 								workflow_id: workflow.id,
 								workflow_name: workflow.name,
-								execution_type: nodeName ? 'node' : 'workflow',
+								execution_type:
+									options.destinationNode || options.triggerNode ? 'node' : 'workflow',
 								node_graph_string: JSON.stringify(
 									TelemetryHelpers.generateNodesGraph(
 										workflowData as IWorkflowBase,
@@ -138,8 +145,12 @@ export const workflowRun = defineComponent({
 
 				// Get the direct parents of the node
 				let directParentNodes: string[] = [];
-				if (nodeName !== undefined) {
-					directParentNodes = workflow.getParentNodes(nodeName, 'main', 1);
+				if (options.destinationNode !== undefined) {
+					directParentNodes = workflow.getParentNodes(
+						options.destinationNode,
+						NodeConnectionType.Main,
+						1,
+					);
 				}
 
 				const runData = this.workflowsStore.getWorkflowRunData;
@@ -155,7 +166,7 @@ export const workflowRun = defineComponent({
 					for (const directParentNode of directParentNodes) {
 						// Go over the parents of that node so that we can get a start
 						// node for each of the branches
-						const parentNodes = workflow.getParentNodes(directParentNode, 'main');
+						const parentNodes = workflow.getParentNodes(directParentNode, NodeConnectionType.Main);
 
 						// Add also the enabled direct parent to be checked
 						if (workflow.nodes[directParentNode].disabled) continue;
@@ -181,8 +192,22 @@ export const workflowRun = defineComponent({
 					}
 				}
 
-				if (startNodes.length === 0 && nodeName !== undefined) {
-					startNodes.push(nodeName);
+				let executedNode: string | undefined;
+				if (
+					startNodes.length === 0 &&
+					'destinationNode' in options &&
+					options.destinationNode !== undefined
+				) {
+					executedNode = options.destinationNode;
+					startNodes.push(options.destinationNode);
+				} else if ('triggerNode' in options && 'nodeData' in options) {
+					startNodes.push(
+						...workflow.getChildNodes(options.triggerNode, NodeConnectionType.Main, 1),
+					);
+					newRunData = {
+						[options.triggerNode]: [options.nodeData],
+					};
+					executedNode = options.triggerNode;
 				}
 
 				if (this.workflowsStore.isNewWorkflow) {
@@ -197,8 +222,8 @@ export const workflowRun = defineComponent({
 					pinData: workflowData.pinData,
 					startNodes,
 				};
-				if (nodeName) {
-					startRunData.destinationNode = nodeName;
+				if ('destinationNode' in options) {
+					startRunData.destinationNode = options.destinationNode;
 				}
 
 				// Init the execution data to represent the start of the execution
@@ -211,7 +236,7 @@ export const workflowRun = defineComponent({
 					startedAt: new Date(),
 					stoppedAt: undefined,
 					workflowId: workflow.id,
-					executedNode: nodeName,
+					executedNode,
 					data: {
 						resultData: {
 							runData: newRunData || {},
@@ -234,7 +259,10 @@ export const workflowRun = defineComponent({
 
 				const runWorkflowApiResponse = await this.runWorkflowApi(startRunData);
 
-				await this.$externalHooks().run('workflowRun.runWorkflow', { nodeName, source });
+				await this.$externalHooks().run('workflowRun.runWorkflow', {
+					nodeName: options.destinationNode,
+					source: options.source,
+				});
 
 				return runWorkflowApiResponse;
 			} catch (error) {

packages/editor-ui/src/n8n-theme-variables.scss

@@ -65,6 +65,13 @@ $tag-text-color: var(--color-text-dark);
 $tag-close-background-color: var(--color-text-light);
 $tag-close-background-hover-color: var(--color-text-dark);
 
+// nodes
+$node-background-default: var(--color-background-xlight);
+$node-background-executing: var(--color-primary-tint-3);
+$node-background-executing-other: #ede9ff;
+// TODO: Define that differently
+$node-background-type-other: #ede9ff;
+
 // Node creator
 $node-creator-width: 385px;
 $node-creator-text-color: var(--color-text-dark);
@@ -109,3 +116,7 @@ $version-card-box-shadow-color: hsla(
 	var(--color-background-dark-l),
 	0.07
 );
+
+// supplemental node types
+$supplemental-node-types: ai_chain ai_document ai_embedding ai_languageModel ai_memory
+	ai_outputParser ai_tool ai_retriever ai_textSplitter ai_vectorRetriever ai_vectorStore;

packages/editor-ui/src/n8n-theme.scss

@@ -1,3 +1,181 @@
+:root {
+	--node-type-background-l: 95%;
+	--node-type-main-color-h: var(--color-foreground-xdark-h);
+	--node-type-main-color-s: var(--color-foreground-xdark-s);
+	--node-type-main-color-l: var(--color-foreground-xdark-l);
+	--node-type-main-color: hsl(
+		var(--node-type-main-color-h),
+		var(--node-type-main-color-s),
+		var(--node-type-main-color-l)
+	);
+	--node-type-supplemental-label-color-h: 235;
+	--node-type-supplemental-label-color-s: 28%;
+	--node-type-supplemental-label-color-l: 40%;
+	--node-type-supplemental-label-color: hsl(
+		var(--node-type-supplemental-label-color-h),
+		var(--node-type-supplemental-label-color-s),
+		var(--node-type-supplemental-label-color-l)
+	);
+	--node-type-supplemental-color-h: 235;
+	--node-type-supplemental-color-s: 28%;
+	--node-type-supplemental-color-l: 60%;
+	--node-type-supplemental-icon: var(--color-foreground-dark);
+	--node-type-supplemental-color: hsl(
+		var(--node-type-supplemental-color-h),
+		var(--node-type-supplemental-color-s),
+		var(--node-type-supplemental-color-l)
+	);
+	--node-type-supplemental-background: hsl(
+		var(--node-type-supplemental-color-h),
+		var(--node-type-supplemental-color-s),
+		var(--node-type-background-l)
+	);
+	--node-type-supplemental-connector-color: var(--color-foreground-dark);
+	--node-type-ai_chain-color-h: var(--node-type-supplemental-color-h);
+	--node-type-ai_chain-color-s: var(--node-type-supplemental-color-s);
+	--node-type-ai_chain-color-l: var(--node-type-supplemental-color-l);
+	--node-type-ai_chain-color: hsl(
+		var(--node-type-ai_chain-color-h),
+		var(--node-type-ai_chain-color-s),
+		var(--node-type-ai_chain-color-l)
+	);
+	--node-type-chain-background: hsl(
+		var(--node-type-ai_chain-color-h),
+		var(--node-type-ai_chain-color-s),
+		var(--node-type-background-l)
+	);
+	--node-type-ai_document-color-h: var(--node-type-supplemental-color-h);
+	--node-type-ai_document-color-s: var(--node-type-supplemental-color-s);
+	--node-type-ai_document-color-l: var(--node-type-supplemental-color-l);
+	--node-type-ai_document-color: hsl(
+		var(--node-type-ai_document-color-h),
+		var(--node-type-ai_document-color-s),
+		var(--node-type-ai_document-color-l)
+	);
+	--node-type-ai_document-background: hsl(
+		var(--node-type-ai_document-color-h),
+		var(--node-type-ai_document-color-s),
+		var(--node-type-background-l)
+	);
+	--node-type-ai_embedding-color-h: var(--node-type-supplemental-color-h);
+	--node-type-ai_embedding-color-s: var(--node-type-supplemental-color-s);
+	--node-type-ai_embedding-color-l: var(--node-type-supplemental-color-l);
+	--node-type-ai_embedding-color: hsl(
+		var(--node-type-ai_embedding-color-h),
+		var(--node-type-ai_embedding-color-s),
+		var(--node-type-ai_embedding-color-l)
+	);
+	--node-type-ai_embedding-background: hsl(
+		var(--node-type-ai_embedding-color-h),
+		var(--node-type-ai_embedding-color-s),
+		var(--node-type-background-l)
+	);
+	--node-type-ai_languageModel-color-h: var(--node-type-supplemental-color-h);
+	--node-type-ai_languageModel-color-s: var(--node-type-supplemental-color-s);
+	--node-type-ai_languageModel-color-l: var(--node-type-supplemental-color-l);
+	--node-type-ai_languageModel-color: hsl(
+		var(--node-type-ai_languageModel-color-h),
+		var(--node-type-ai_languageModel-color-s),
+		var(--node-type-ai_languageModel-color-l)
+	);
+	--node-type-ai_languageModel-background: hsl(
+		var(--node-type-ai_languageModel-color-h),
+		var(--node-type-ai_languageModel-color-s),
+		var(--node-type-background-l)
+	);
+	--node-type-ai_memory-color-h: var(--node-type-supplemental-color-h);
+	--node-type-ai_memory-color-s: var(--node-type-supplemental-color-s);
+	--node-type-ai_memory-color-l: var(--node-type-supplemental-color-l);
+	--node-type-ai_memory-color: hsl(
+		var(--node-type-ai_memory-color-h),
+		var(--node-type-ai_memory-color-s),
+		var(--node-type-ai_memory-color-l)
+	);
+	--node-type-ai_memory-background: hsl(
+		var(--node-type-ai_memory-color-h),
+		var(--node-type-ai_memory-color-s),
+		var(--node-type-background-l)
+	);
+	--node-type-ai_outputParser-color-h: var(--node-type-supplemental-color-h);
+	--node-type-ai_outputParser-color-s: var(--node-type-supplemental-color-s);
+	--node-type-ai_outputParser-color-l: var(--node-type-supplemental-color-l);
+	--node-type-ai_outputParser-color: hsl(
+		var(--node-type-ai_outputParser-color-h),
+		var(--node-type-ai_outputParser-color-s),
+		var(--node-type-ai_outputParser-color-l)
+	);
+	--node-type-ai_outputParser-background: hsl(
+		var(--node-type-ai_outputParser-color-h),
+		var(--node-type-ai_outputParser-color-s),
+		var(--node-type-background-l)
+	);
+	--node-type-ai_tool-color-h: var(--node-type-supplemental-color-h);
+	--node-type-ai_tool-color-s: var(--node-type-supplemental-color-s);
+	--node-type-ai_tool-color-l: var(--node-type-supplemental-color-l);
+	--node-type-ai_tool-color: hsl(
+		var(--node-type-ai_tool-color-h),
+		var(--node-type-ai_tool-color-s),
+		var(--node-type-ai_tool-color-l)
+	);
+	--node-type-ai_tool-background: hsl(
+		var(--node-type-ai_tool-color-h),
+		var(--node-type-ai_tool-color-s),
+		var(--node-type-background-l)
+	);
+	--node-type-ai_retriever-color-h: var(--node-type-supplemental-color-h);
+	--node-type-ai_retriever-color-s: var(--node-type-supplemental-color-s);
+	--node-type-ai_retriever-color-l: var(--node-type-supplemental-color-l);
+	--node-type-ai_retriever-color: hsl(
+		var(--node-type-ai_retriever-color-h),
+		var(--node-type-ai_retriever-color-s),
+		var(--node-type-ai_retriever-color-l)
+	);
+	--node-type-ai_retriever-background: hsl(
+		var(--node-type-ai_retriever-color-h),
+		var(--node-type-ai_retriever-color-s),
+		var(--node-type-background-l)
+	);
+	--node-type-ai_textSplitter-color-h: var(--node-type-supplemental-color-h);
+	--node-type-ai_textSplitter-color-s: var(--node-type-supplemental-color-s);
+	--node-type-ai_textSplitter-color-l: var(--node-type-supplemental-color-l);
+	--node-type-ai_textSplitter-color: hsl(
+		var(--node-type-ai_textSplitter-color-h),
+		var(--node-type-ai_textSplitter-color-s),
+		var(--node-type-ai_textSplitter-color-l)
+	);
+	--node-type-ai_textSplitter-background: hsl(
+		var(--node-type-ai_textSplitter-color-h),
+		var(--node-type-ai_textSplitter-color-s),
+		var(--node-type-background-l)
+	);
+	--node-type-ai_vectorRetriever-color-h: var(--node-type-supplemental-color-h);
+	--node-type-ai_vectorRetriever-color-s: var(--node-type-supplemental-color-s);
+	--node-type-ai_vectorRetriever-color-l: var(--node-type-supplemental-color-l);
+	--node-type-ai_vectorRetriever-color: hsl(
+		var(--node-type-ai_vectorRetriever-color-h),
+		var(--node-type-ai_vectorRetriever-color-s),
+		var(--node-type-ai_vectorRetriever-color-l)
+	);
+	--node-type-ai_vectorRetriever-background: hsl(
+		var(--node-type-ai_vectorRetriever-color-h),
+		var(--node-type-ai_vectorRetriever-color-s),
+		var(--node-type-background-l)
+	);
+	--node-type-ai_vectorStore-color-h: var(--node-type-supplemental-color-h);
+	--node-type-ai_vectorStore-color-s: var(--node-type-supplemental-color-s);
+	--node-type-ai_vectorStore-color-l: var(--node-type-supplemental-color-l);
+	--node-type-ai_vectorStore-color: hsl(
+		var(--node-type-ai_vectorStore-color-h),
+		var(--node-type-ai_vectorStore-color-s),
+		var(--node-type-ai_vectorStore-color-l)
+	);
+	--node-type-ai_vectorStore-background: hsl(
+		var(--node-type-ai_vectorStore-color-h),
+		var(--node-type-ai_vectorStore-color-s),
+		var(--node-type-background-l)
+	);
+}
+
 .clickable {
 	cursor: pointer !important;
 }

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -131,6 +131,31 @@
 	"binaryDataDisplay.backToOverviewPage": "Back to overview page",
 	"binaryDataDisplay.noDataFoundToDisplay": "No data found to display",
 	"binaryDataDisplay.yourBrowserDoesNotSupport": "Your browser does not support the video element. Kindly update it to latest version.",
+	"chat.window.title": "Chat Window ({nodeName})",
+	"chat.window.logs": "Log (for last message)",
+	"chat.window.noChatNode": "No Chat Node",
+	"chat.window.noExecution": "Nothing got executed yet",
+	"chat.window.chat.placeholder": "Type in message",
+	"chat.window.chat.sendButtonText": "Send",
+	"chat.window.chat.chatMessageOptions.reuseMessage": "Reuse Message",
+	"chat.window.chat.chatMessageOptions.repostMessage": "Repost Message",
+	"chat.window.chat.chatMessageOptions.executionId": "Execution ID",
+	"chatEmbed.infoTip.description": "Add chat to external applications using the n8n chat package.",
+	"chatEmbed.infoTip.link": "More info",
+	"chatEmbed.title": "Embed Chat in your website",
+	"chatEmbed.close": "Close",
+	"chatEmbed.install": "First, install the n8n chat package:",
+	"chatEmbed.paste.cdn": "Paste the following code anywhere in the {code} tag of your HTML file.",
+	"chatEmbed.paste.cdn.file": "<body>",
+	"chatEmbed.paste.vue": "Next, paste the following code in your {code} file.",
+	"chatEmbed.paste.vue.file": "App.vue",
+	"chatEmbed.paste.react": "Next, paste the following code in your {code} file.",
+	"chatEmbed.paste.react.file": "App.ts",
+	"chatEmbed.paste.other": "Next, paste the following code in your {code} file.",
+	"chatEmbed.paste.other.file": "main.ts",
+	"chatEmbed.packageInfo.description": "The n8n Chat widget can be easily customized to fit your needs.",
+	"chatEmbed.packageInfo.link": "Read the full documentation",
+	"chatEmbed.url": "https://www.npmjs.com/package/{'@'}n8n/chat",
 	"codeEdit.edit": "Edit",
 	"codeNodeEditor.askAi": "✨ Ask AI",
 	"codeNodeEditor.completer.$()": "Output data of the {nodeName} node",
@@ -711,7 +736,10 @@
 	"ndv.input": "Input",
 	"ndv.input.nodeDistance": "({count} node back) | ({count} nodes back)",
 	"ndv.input.noNodesFound": "No nodes found",
+	"ndv.input.mapping": "Mapping",
+	"ndv.input.debugging": "Debugging",
 	"ndv.input.parentNodes": "Parent nodes",
+	"ndv.input.previousNode": "Previous node",
 	"ndv.input.tooMuchData.title": "Input data is huge",
 	"ndv.input.noOutputDataInBranch": "No input data in this branch",
 	"ndv.input.noOutputDataInNode": "Node did not output any data. n8n stops executing the workflow when a node has no output data.",
@@ -726,6 +754,9 @@
 	"ndv.input.disabled": "The '{nodeName}' node is disabled and won’t execute.",
 	"ndv.input.disabled.cta": "Enable it",
 	"ndv.output": "Output",
+	"ndv.output.ai.empty": "👈 This is {node}’s AI Logs. Click on a node to see the input it received and data it outputted.",
+	"ndv.output.outType.logs": "Logs",
+	"ndv.output.outType.regular": "Output",
 	"ndv.output.edit": "Edit Output",
 	"ndv.output.all": "all",
 	"ndv.output.branch": "Branch",
@@ -813,6 +844,18 @@
 	"nodeCreator.subcategoryDescriptions.flow": "IF, Switch, Wait, Compare and Merge data, etc.",
 	"nodeCreator.subcategoryDescriptions.helpers": "HTTP Requests (API Calls), date and time, scrape HTML, RSS, SSH, etc.",
 	"nodeCreator.subcategoryDescriptions.otherTriggerNodes": "Runs the flow on workflow errors, file changes, etc.",
+	"nodeCreator.subcategoryDescriptions.agents": "Autonomous entities that interact and make decisions.",
+	"nodeCreator.subcategoryDescriptions.chains": "Structured assemblies for specific tasks.",
+	"nodeCreator.subcategoryDescriptions.documentLoaders": "Handles loading of documents for processing.",
+	"nodeCreator.subcategoryDescriptions.embeddings": "Transforms text into vector representations.",
+	"nodeCreator.subcategoryDescriptions.languageModels": "AI models that understand and generate language.",
+	"nodeCreator.subcategoryDescriptions.memory": "Manages storage and retrieval of information during execution.",
+	"nodeCreator.subcategoryDescriptions.outputParsers": "Ensures the output adheres to a defined format.",
+	"nodeCreator.subcategoryDescriptions.retrievers": "Fetches relevant information from a source.",
+	"nodeCreator.subcategoryDescriptions.textSplitters": "Breaks down text into smaller parts.",
+	"nodeCreator.subcategoryDescriptions.tools": "Utility components providing various functionalities.",
+	"nodeCreator.subcategoryDescriptions.vectorStores": "Handles storage and retrieval of vector representations.",
+	"nodeCreator.subcategoryDescriptions.miscellaneous": "Other AI related nodes.",
 	"nodeCreator.subcategoryNames.appTriggerNodes": "On app event",
 	"nodeCreator.subcategoryNames.appRegularNodes": "Action in an app",
 	"nodeCreator.subcategoryNames.dataTransformation": "Data transformation",
@@ -820,6 +863,18 @@
 	"nodeCreator.subcategoryNames.flow": "Flow",
 	"nodeCreator.subcategoryNames.helpers": "Helpers",
 	"nodeCreator.subcategoryNames.otherTriggerNodes": "Other ways...",
+	"nodeCreator.subcategoryNames.agents": "Agents",
+	"nodeCreator.subcategoryNames.chains": "Chains",
+	"nodeCreator.subcategoryNames.documentLoaders": "Document Loaders",
+	"nodeCreator.subcategoryNames.embeddings": "Embeddings",
+	"nodeCreator.subcategoryNames.languageModels": "Language Models",
+	"nodeCreator.subcategoryNames.memory": "Memory",
+	"nodeCreator.subcategoryNames.outputParsers": "Output Parsers",
+	"nodeCreator.subcategoryNames.retrievers": "Retrievers",
+	"nodeCreator.subcategoryNames.textSplitters": "Text Splitters",
+	"nodeCreator.subcategoryNames.tools": "Tools",
+	"nodeCreator.subcategoryNames.vectorStores": "Vector Stores",
+	"nodeCreator.subcategoryNames.miscellaneous": "Miscellaneous",
 	"nodeCreator.triggerHelperPanel.addAnotherTrigger": "Add another trigger",
 	"nodeCreator.triggerHelperPanel.addAnotherTriggerDescription": "Triggers start your workflow. Workflows can have multiple triggers.",
 	"nodeCreator.triggerHelperPanel.title": "When should this workflow run?",
@@ -834,6 +889,27 @@
 	"nodeCreator.triggerHelperPanel.selectATriggerDescription": "A trigger is a step that starts your workflow",
 	"nodeCreator.triggerHelperPanel.workflowTriggerDisplayName": "When called by another workflow",
 	"nodeCreator.triggerHelperPanel.workflowTriggerDescription": "Runs the flow when called by the Execute Workflow node from a different workflow",
+	"nodeCreator.aiPanel.aiNodes": "AI Nodes",
+	"nodeCreator.aiPanel.aiOtherNodes": "Other AI Nodes",
+	"nodeCreator.aiPanel.aiOtherNodesDescription": "Embeddings, Vector Stores, LLMs and other AI nodes",
+	"nodeCreator.aiPanel.selectAiNode": "Select an Al Node to add to your workflow",
+	"nodeCreator.aiPanel.nodesForAi": "Build autonomous agents, summarize or interrogate documents, etc.",
+	"nodeCreator.aiPanel.langchainAiNodes": "Advanced AI",
+	"nodeCreator.aiPanel.title": "When should this workflow run?",
+	"nodeCreator.aiPanel.infoBox": "Check out our <a href=\"/collections/8\" target=\"_blank\">templates</a> for workflow examples and inspiration.",
+	"nodeCreator.aiPanel.scheduleTriggerDisplayName": "On a schedule",
+	"nodeCreator.aiPanel.scheduleTriggerDescription": "Runs the flow every day, hour, or custom interval",
+	"nodeCreator.aiPanel.webhookTriggerDisplayName": "On webhook call",
+	"nodeCreator.aiPanel.webhookTriggerDescription": "Runs the flow when another app sends a webhook",
+	"nodeCreator.aiPanel.manualTriggerDisplayName": "Manually",
+	"nodeCreator.aiPanel.manualTriggerDescription": "Runs the flow on clicking a button in n8n",
+	"nodeCreator.aiPanel.whatHappensNext": "What happens next?",
+	"nodeCreator.aiPanel.selectATrigger": "Select an AI Component",
+	"nodeCreator.aiPanel.selectATriggerDescription": "A trigger is a step that starts your workflow",
+	"nodeCreator.aiPanel.workflowTriggerDisplayName": "When called by another workflow",
+	"nodeCreator.aiPanel.workflowTriggerDescription": "Runs the flow when called by the Execute Workflow node from a different workflow",
+	"nodeCreator.nodeItem.triggerIconTitle": "Trigger Node",
+	"nodeCreator.nodeItem.aiIconTitle": "LangChain AI Node",
 	"nodeCredentials.createNew": "Create New Credential",
 	"nodeCredentials.credentialFor": "Credential for {credentialType}",
 	"nodeCredentials.credentialsLabel": "Credential to connect with",
@@ -935,6 +1011,8 @@
 	"nodeView.showError.openWorkflow.title": "Problem opening workflow",
 	"nodeView.showError.stopExecution.title": "Problem stopping execution",
 	"nodeView.showError.stopWaitingForWebhook.title": "Problem deleting test webhook",
+	"nodeView.showError.nodeNodeCompatible.title": "Connection not possible",
+	"nodeView.showError.nodeNodeCompatible.message": "The node \"{sourceNodeName}\" can't be connected to the node \"{targetNodeName}\" because they are not compatible.",
 	"nodeView.showMessage.addNodeButton.message": "'{nodeTypeName}' is an unknown node type",
 	"nodeView.showMessage.addNodeButton.title": "Could not insert node",
 	"nodeView.showMessage.keyDown.title": "Workflow created",
@@ -1196,6 +1274,10 @@
 	"runData.editor.save": "Save",
 	"runData.editor.cancel": "Cancel",
 	"runData.editor.copyDataInfo": "You can copy data from previous executions and paste it above.",
+	"runData.aiContentBlock.startedAt": "Started at {startTime}",
+	"runData.aiContentBlock.tokens": "{count} Tokens",
+	"runData.aiContentBlock.tokens.prompt": "Prompt:",
+	"runData.aiContentBlock.tokens.completion": "Completion:",
 	"saveButton.save": "@:_reusableBaseText.save",
 	"saveButton.saved": "Saved",
 	"saveButton.saving": "Saving",
@@ -1616,6 +1698,7 @@
 	"nodeIssues.credentials.doNotExist.hint": "You can create credentials with the exact name and then they get auto-selected on refresh..",
 	"nodeIssues.credentials.notIdentified": "Credentials with name {name} exist for {type}.",
 	"nodeIssues.credentials.notIdentified.hint": "Credentials are not clearly identified. Please select the correct credentials.",
+	"nodeIssues.input.missing": "No node connected to required input \"{inputName}\"",
 	"ndv.trigger.moreInfo": "More info",
 	"ndv.trigger.copiedTestUrl": "Test URL copied to clipboard",
 	"ndv.trigger.webhookBasedNode.executionsHelp.inactive": "<b>While building your workflow</b>, click the 'listen' button, then go to {service} and make an event happen. This will trigger an execution, which will show up in this editor.<br /> <br /> <b>Once you're happy with your workflow</b>, <a data-key=\"activate\">activate</a> it. Then every time there's a matching event in {service}, the workflow will execute. These executions will show up in the <a data-key=\"executions\">executions list</a>, but not in the editor.",

packages/editor-ui/src/plugins/icons/index.ts

@@ -13,10 +13,12 @@ import {
 	faArrowDown,
 	faAt,
 	faBan,
+	faBars,
 	faBolt,
 	faBook,
 	faBoxOpen,
 	faBug,
+	faBrain,
 	faCalculator,
 	faCalendar,
 	faChartBar,
@@ -31,6 +33,8 @@ import {
 	faCodeBranch,
 	faCog,
 	faCogs,
+	faComment,
+	faComments,
 	faClipboardList,
 	faClock,
 	faClone,
@@ -39,6 +43,7 @@ import {
 	faCopy,
 	faCube,
 	faCut,
+	faDatabase,
 	faDotCircle,
 	faEdit,
 	faEllipsisH,
@@ -67,7 +72,9 @@ import {
 	faGift,
 	faGlobe,
 	faGraduationCap,
+	faGripLinesVertical,
 	faGripVertical,
+	faHandScissors,
 	faHandPointLeft,
 	faHashtag,
 	faHdd,
@@ -78,6 +85,7 @@ import {
 	faInfo,
 	faInfoCircle,
 	faKey,
+	faLanguage,
 	faLink,
 	faList,
 	faLightbulb,
@@ -98,6 +106,7 @@ import {
 	faQuestion,
 	faQuestionCircle,
 	faRedo,
+	faRobot,
 	faRss,
 	faSave,
 	faSatelliteDish,
@@ -105,6 +114,7 @@ import {
 	faSearchMinus,
 	faSearchPlus,
 	faServer,
+	faScrewdriver,
 	faSignInAlt,
 	faSignOutAlt,
 	faSlidersH,
@@ -128,12 +138,17 @@ import {
 	faUserCircle,
 	faUserFriends,
 	faUsers,
+	faVectorSquare,
 	faVideo,
 	faTree,
 	faStickyNote as faSolidStickyNote,
 	faUserLock,
 	faGem,
 	faDownload,
+	faRemoveFormat,
+	faTools,
+	faProjectDiagram,
+	faStream,
 } from '@fortawesome/free-solid-svg-icons';
 import { faVariable, faXmark, faVault } from './custom';
 import { faStickyNote } from '@fortawesome/free-regular-svg-icons';
@@ -156,10 +171,12 @@ export const FontAwesomePlugin: Plugin<{}> = {
 		addIcon(faArrowDown);
 		addIcon(faAt);
 		addIcon(faBan);
+		addIcon(faBars);
 		addIcon(faBolt);
 		addIcon(faBook);
 		addIcon(faBoxOpen);
 		addIcon(faBug);
+		addIcon(faBrain);
 		addIcon(faCalculator);
 		addIcon(faCalendar);
 		addIcon(faChartBar);
@@ -174,6 +191,8 @@ export const FontAwesomePlugin: Plugin<{}> = {
 		addIcon(faCodeBranch);
 		addIcon(faCog);
 		addIcon(faCogs);
+		addIcon(faComment);
+		addIcon(faComments);
 		addIcon(faClipboardList);
 		addIcon(faClock);
 		addIcon(faClone);
@@ -182,7 +201,9 @@ export const FontAwesomePlugin: Plugin<{}> = {
 		addIcon(faCopy);
 		addIcon(faCube);
 		addIcon(faCut);
+		addIcon(faDatabase);
 		addIcon(faDotCircle);
+		addIcon(faGripLinesVertical);
 		addIcon(faGripVertical);
 		addIcon(faEdit);
 		addIcon(faEllipsisH);
@@ -211,6 +232,7 @@ export const FontAwesomePlugin: Plugin<{}> = {
 		addIcon(faGlobe);
 		addIcon(faGlobeAmericas);
 		addIcon(faGraduationCap);
+		addIcon(faHandScissors);
 		addIcon(faHandPointLeft);
 		addIcon(faHashtag);
 		addIcon(faHdd);
@@ -221,6 +243,7 @@ export const FontAwesomePlugin: Plugin<{}> = {
 		addIcon(faInfo);
 		addIcon(faInfoCircle);
 		addIcon(faKey);
+		addIcon(faLanguage);
 		addIcon(faLink);
 		addIcon(faList);
 		addIcon(faLightbulb);
@@ -238,9 +261,12 @@ export const FontAwesomePlugin: Plugin<{}> = {
 		addIcon(faPlus);
 		addIcon(faPlusCircle);
 		addIcon(faPlusSquare);
+		addIcon(faProjectDiagram);
 		addIcon(faQuestion);
 		addIcon(faQuestionCircle);
 		addIcon(faRedo);
+		addIcon(faRemoveFormat);
+		addIcon(faRobot);
 		addIcon(faRss);
 		addIcon(faSave);
 		addIcon(faSatelliteDish);
@@ -248,6 +274,7 @@ export const FontAwesomePlugin: Plugin<{}> = {
 		addIcon(faSearchMinus);
 		addIcon(faSearchPlus);
 		addIcon(faServer);
+		addIcon(faScrewdriver);
 		addIcon(faSignInAlt);
 		addIcon(faSignOutAlt);
 		addIcon(faSlidersH);
@@ -255,6 +282,7 @@ export const FontAwesomePlugin: Plugin<{}> = {
 		addIcon(faSolidStickyNote);
 		addIcon(faStickyNote as IconDefinition);
 		addIcon(faStop);
+		addIcon(faStream);
 		addIcon(faSun);
 		addIcon(faSync);
 		addIcon(faSyncAlt);
@@ -266,6 +294,7 @@ export const FontAwesomePlugin: Plugin<{}> = {
 		addIcon(faTimes);
 		addIcon(faTimesCircle);
 		addIcon(faToolbox);
+		addIcon(faTools);
 		addIcon(faTrash);
 		addIcon(faUndo);
 		addIcon(faUnlink);
@@ -275,6 +304,7 @@ export const FontAwesomePlugin: Plugin<{}> = {
 		addIcon(faUsers);
 		addIcon(faVariable);
 		addIcon(faVault);
+		addIcon(faVectorSquare);
 		addIcon(faVideo);
 		addIcon(faTree);
 		addIcon(faUserLock);

packages/editor-ui/src/plugins/jsplumb/N8nAddInputEndpointRenderer.ts

@@ -0,0 +1,80 @@
+import { registerEndpointRenderer, svg } from '@jsplumb/browser-ui';
+import { N8nAddInputEndpoint } from './N8nAddInputEndpointType';
+
+export const register = () => {
+	registerEndpointRenderer<N8nAddInputEndpoint>(N8nAddInputEndpoint.type, {
+		makeNode: (endpointInstance: N8nAddInputEndpoint) => {
+			const xOffset = 1;
+			const lineYOffset = -2;
+			const width = endpointInstance.params.width;
+			const height = endpointInstance.params.height;
+			const unconnectedDiamondSize = width / 2;
+			const unconnectedDiamondWidth = unconnectedDiamondSize * Math.sqrt(2);
+			const unconnectedPlusStroke = 2;
+			const unconnectedPlusSize = width - 2 * unconnectedPlusStroke;
+
+			const sizeDifference = (unconnectedPlusSize - unconnectedDiamondWidth) / 2;
+
+			const container = svg.node('g', {
+				style: `--svg-color: var(${endpointInstance.params.color})`,
+				width,
+				height,
+			});
+
+			const unconnectedGroup = svg.node('g', { class: 'add-input-endpoint-unconnected' });
+			const unconnectedLine = svg.node('rect', {
+				x: xOffset / 2 + unconnectedDiamondWidth / 2 + sizeDifference,
+				y: unconnectedDiamondWidth + lineYOffset,
+				width: 2,
+				height: height - unconnectedDiamondWidth - unconnectedPlusSize,
+				'stroke-width': 0,
+				class: 'add-input-endpoint-line',
+			});
+			const unconnectedPlusGroup = svg.node('g', {
+				transform: `translate(${xOffset / 2}, ${height - unconnectedPlusSize + lineYOffset})`,
+			});
+			const plusRectangle = svg.node('rect', {
+				x: 1,
+				y: 1,
+				rx: 3,
+				'stroke-width': unconnectedPlusStroke,
+				fillOpacity: 0,
+				height: unconnectedPlusSize,
+				width: unconnectedPlusSize,
+				class: 'add-input-endpoint-plus-rectangle',
+			});
+			const plusIcon = svg.node('path', {
+				transform: `scale(${width / 24})`,
+				d: 'm15.40655,9.89837l-3.30491,0l0,-3.30491c0,-0.40555 -0.32889,-0.73443 -0.73443,-0.73443l-0.73443,0c-0.40554,0 -0.73442,0.32888 -0.73442,0.73443l0,3.30491l-3.30491,0c-0.40555,0 -0.73443,0.32888 -0.73443,0.73442l0,0.73443c0,0.40554 0.32888,0.73443 0.73443,0.73443l3.30491,0l0,3.30491c0,0.40554 0.32888,0.73442 0.73442,0.73442l0.73443,0c0.40554,0 0.73443,-0.32888 0.73443,-0.73442l0,-3.30491l3.30491,0c0.40554,0 0.73442,-0.32889 0.73442,-0.73443l0,-0.73443c0,-0.40554 -0.32888,-0.73442 -0.73442,-0.73442z',
+				class: 'add-input-endpoint-plus-icon',
+			});
+
+			unconnectedPlusGroup.appendChild(plusRectangle);
+			unconnectedPlusGroup.appendChild(plusIcon);
+			unconnectedGroup.appendChild(unconnectedLine);
+			unconnectedGroup.appendChild(unconnectedPlusGroup);
+
+			const defaultGroup = svg.node('g', { class: 'add-input-endpoint-default' });
+			const defaultDiamond = svg.node('rect', {
+				x: xOffset + sizeDifference + unconnectedPlusStroke,
+				y: 0,
+				'stroke-width': 0,
+				width: unconnectedDiamondSize,
+				height: unconnectedDiamondSize,
+				transform: `translate(${unconnectedDiamondWidth / 2}, 0) rotate(45)`,
+				class: 'add-input-endpoint-diamond',
+			});
+
+			defaultGroup.appendChild(defaultDiamond);
+
+			container.appendChild(unconnectedGroup);
+			container.appendChild(defaultGroup);
+
+			endpointInstance.setupOverlays();
+			endpointInstance.setVisible(false);
+
+			return container;
+		},
+		updateNode: (endpointInstance: N8nAddInputEndpoint) => {},
+	});
+};

packages/editor-ui/src/plugins/jsplumb/N8nAddInputEndpointType.ts

@@ -0,0 +1,79 @@
+import type { EndpointHandler, Endpoint } from '@jsplumb/core';
+import { EndpointRepresentation } from '@jsplumb/core';
+import type { AnchorPlacement, EndpointRepresentationParams } from '@jsplumb/common';
+import { EVENT_ENDPOINT_CLICK } from '@jsplumb/browser-ui';
+
+export type ComputedN8nAddInputEndpoint = [number, number, number, number, number];
+interface N8nAddInputEndpointParams extends EndpointRepresentationParams {
+	endpoint: Endpoint;
+	width: number;
+	height: number;
+	color: string;
+	multiple: boolean;
+}
+export const N8nAddInputEndpointType = 'N8nAddInput';
+export const EVENT_ADD_INPUT_ENDPOINT_CLICK = 'eventAddInputEndpointClick';
+export class N8nAddInputEndpoint extends EndpointRepresentation<ComputedN8nAddInputEndpoint> {
+	params: N8nAddInputEndpointParams;
+
+	constructor(endpoint: Endpoint, params: N8nAddInputEndpointParams) {
+		super(endpoint, params);
+
+		this.params = params;
+		this.params.width = params.width || 18;
+		this.params.height = params.height || 48;
+		this.params.color = params.color || '--color-foreground-xdark';
+		this.params.multiple = params.multiple || false;
+
+		this.unbindEvents();
+		this.bindEvents();
+	}
+
+	static type = N8nAddInputEndpointType;
+	type = N8nAddInputEndpoint.type;
+
+	setupOverlays() {
+		this.endpoint.instance.setSuspendDrawing(true);
+		this.endpoint.instance.setSuspendDrawing(false);
+	}
+	bindEvents() {
+		this.instance.bind(EVENT_ENDPOINT_CLICK, this.fireClickEvent);
+	}
+	unbindEvents() {
+		this.instance.unbind(EVENT_ENDPOINT_CLICK, this.fireClickEvent);
+	}
+	fireClickEvent = (endpoint: Endpoint) => {
+		if (endpoint === this.endpoint) {
+			this.instance.fire(EVENT_ADD_INPUT_ENDPOINT_CLICK, this.endpoint);
+		}
+	};
+}
+
+export const N8nAddInputEndpointHandler: EndpointHandler<
+	N8nAddInputEndpoint,
+	ComputedN8nAddInputEndpoint
+> = {
+	type: N8nAddInputEndpoint.type,
+	cls: N8nAddInputEndpoint,
+	compute: (ep: N8nAddInputEndpoint, anchorPoint: AnchorPlacement): ComputedN8nAddInputEndpoint => {
+		const x = anchorPoint.curX - ep.params.width / 2;
+		const y = anchorPoint.curY - ep.params.width / 2;
+		const w = ep.params.width;
+		const h = ep.params.height;
+
+		ep.x = x;
+		ep.y = y;
+		ep.w = w;
+		ep.h = h;
+
+		ep.addClass('add-input-endpoint');
+		if (ep.params.multiple) {
+			ep.addClass('add-input-endpoint-multiple');
+		}
+		return [x, y, w, h, ep.params.width];
+	},
+
+	getParams: (ep: N8nAddInputEndpoint): N8nAddInputEndpointParams => {
+		return ep.params;
+	},
+};

packages/editor-ui/src/plugins/jsplumb/index.ts

@@ -0,0 +1,19 @@
+import type { Plugin } from 'vue';
+import { N8nPlusEndpointHandler } from '@/plugins/jsplumb/N8nPlusEndpointType';
+import * as N8nPlusEndpointRenderer from '@/plugins/jsplumb/N8nPlusEndpointRenderer';
+import { N8nConnector } from '@/plugins/connectors/N8nCustomConnector';
+import * as N8nAddInputEndpointRenderer from '@/plugins/jsplumb/N8nAddInputEndpointRenderer';
+import { N8nAddInputEndpointHandler } from '@/plugins/jsplumb/N8nAddInputEndpointType';
+import { Connectors, EndpointFactory } from '@jsplumb/core';
+
+export const JsPlumbPlugin: Plugin<{}> = {
+	install: () => {
+		Connectors.register(N8nConnector.type, N8nConnector);
+
+		N8nPlusEndpointRenderer.register();
+		EndpointFactory.registerHandler(N8nPlusEndpointHandler);
+
+		N8nAddInputEndpointRenderer.register();
+		EndpointFactory.registerHandler(N8nAddInputEndpointHandler);
+	},
+};

packages/editor-ui/src/stores/canvas.store.ts

@@ -18,11 +18,7 @@ import type {
 	DragStopEventParams,
 } from '@jsplumb/browser-ui';
 import { newInstance } from '@jsplumb/browser-ui';
-import { N8nPlusEndpointHandler } from '@/plugins/endpoints/N8nPlusEndpointType';
-import * as N8nPlusEndpointRenderer from '@/plugins/endpoints/N8nPlusEndpointRenderer';
-import { N8nConnector } from '@/plugins/connectors/N8nCustomConnector';
 import type { Connection } from '@jsplumb/core';
-import { EndpointFactory, Connectors } from '@jsplumb/core';
 import { MoveNodeCommand } from '@/models/history';
 import {
 	DEFAULT_PLACEHOLDER_TRIGGER_BUTTON,
@@ -67,10 +63,6 @@ export const useCanvasStore = defineStore('canvas', () => {
 		}
 	});
 
-	Connectors.register(N8nConnector.type, N8nConnector);
-	N8nPlusEndpointRenderer.register();
-	EndpointFactory.registerHandler(N8nPlusEndpointHandler);
-
 	const setRecenteredCanvasAddButtonPosition = (offset?: XYPosition) => {
 		const position = getMidCanvasPosition(nodeViewScale.value, offset || [0, 0]);
 

packages/editor-ui/src/stores/ndv.store.ts

@@ -8,6 +8,7 @@ import type {
 	XYPosition,
 } from '@/Interface';
 import type { INodeIssues, IRunData } from 'n8n-workflow';
+import { NodeConnectionType } from 'n8n-workflow';
 import { defineStore } from 'pinia';
 import { v4 as uuid } from 'uuid';
 import { useWorkflowsStore } from './workflows.store';
@@ -124,7 +125,7 @@ export const useNDVStore = defineStore(STORES.NDV, {
 				return false;
 			}
 			const workflow = useWorkflowsStore().getCurrentWorkflow();
-			const parentNodes = workflow.getParentNodes(this.activeNode.name, 'main', 1);
+			const parentNodes = workflow.getParentNodes(this.activeNode.name, NodeConnectionType.Main, 1);
 			return parentNodes.includes(inputNodeName);
 		},
 		hoveringItemNumber(): number {
@@ -139,6 +140,9 @@ export const useNDVStore = defineStore(STORES.NDV, {
 		},
 	},
 	actions: {
+		setActiveNodeName(nodeName: string | null): void {
+			this.activeNodeName = nodeName;
+		},
 		setInputNodeName(nodeName: string | undefined): void {
 			this.input = {
 				...this.input,

packages/editor-ui/src/stores/nodeCreator.store.ts

@@ -7,7 +7,8 @@ import type {
 	ActionsRecord,
 } from '@/Interface';
 
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
+import { transformNodeType } from '@/components/Node/NodeCreator/utils';
 
 export const useNodeCreatorStore = defineStore(STORES.NODE_CREATOR, () => {
 	const selectedView = ref<NodeFilterType>(TRIGGER_NODE_CREATOR_VIEW);
@@ -17,6 +18,10 @@ export const useNodeCreatorStore = defineStore(STORES.NODE_CREATOR, () => {
 	const showScrim = ref(false);
 	const openSource = ref<NodeCreatorOpenSource>('');
 
+	const allNodeCreatorNodes = computed(() =>
+		Object.values(mergedNodes.value).map((i) => transformNodeType(i)),
+	);
+
 	function setMergeNodes(nodes: SimplifiedNodeType[]) {
 		mergedNodes.value = nodes;
 	}
@@ -48,5 +53,6 @@ export const useNodeCreatorStore = defineStore(STORES.NODE_CREATOR, () => {
 		setOpenSource,
 		setActions,
 		setMergeNodes,
+		allNodeCreatorNodes,
 	};
 });

packages/editor-ui/src/stores/nodeTypes.store.ts

@@ -16,17 +16,22 @@ import { addHeaders, addNodeTranslation } from '@/plugins/i18n';
 import { omit } from '@/utils';
 import type {
 	ILoadOptions,
+	INode,
 	INodeCredentials,
 	INodeListSearchResult,
+	INodeOutputConfiguration,
 	INodeParameters,
 	INodePropertyOptions,
 	INodeTypeDescription,
 	INodeTypeNameVersion,
 	ResourceMapperFields,
+	Workflow,
+	ConnectionTypes,
 } from 'n8n-workflow';
 import { defineStore } from 'pinia';
 import { useCredentialsStore } from './credentials.store';
 import { useRootStore } from './n8nRoot.store';
+import { NodeHelpers, NodeConnectionType } from 'n8n-workflow';
 
 function getNodeVersions(nodeType: INodeTypeDescription) {
 	return Array.isArray(nodeType.version) ? nodeType.version : [nodeType.version];
@@ -73,6 +78,34 @@ export const useNodeTypesStore = defineStore(STORES.NODE_TYPES, {
 				return nodeType || null;
 			};
 		},
+		isConfigNode() {
+			return (workflow: Workflow, node: INode, nodeTypeName: string): boolean => {
+				const nodeType = this.getNodeType(nodeTypeName);
+				if (!nodeType) {
+					return false;
+				}
+				const outputs = NodeHelpers.getNodeOutputs(workflow, node, nodeType);
+				const outputTypes = NodeHelpers.getConnectionTypes(outputs);
+
+				return outputTypes
+					? outputTypes.filter((output) => output !== NodeConnectionType.Main).length > 0
+					: false;
+			};
+		},
+		isConfigurableNode() {
+			return (workflow: Workflow, node: INode, nodeTypeName: string): boolean => {
+				const nodeType = this.getNodeType(nodeTypeName);
+				if (nodeType === null) {
+					return false;
+				}
+				const inputs = NodeHelpers.getNodeInputs(workflow, node, nodeType);
+				const inputTypes = NodeHelpers.getConnectionTypes(inputs);
+
+				return inputTypes
+					? inputTypes.filter((input) => input !== NodeConnectionType.Main).length > 0
+					: false;
+			};
+		},
 		isTriggerNode() {
 			return (nodeTypeName: string) => {
 				const nodeType = this.getNodeType(nodeTypeName);
@@ -96,6 +129,48 @@ export const useNodeTypesStore = defineStore(STORES.NODE_TYPES, {
 				return acc;
 			}, []);
 		},
+		visibleNodeTypesByOutputConnectionTypeNames(): { [key: string]: string[] } {
+			const nodesByOutputType = this.visibleNodeTypes.reduce(
+				(acc, node) => {
+					const outputTypes = node.outputs;
+					if (Array.isArray(outputTypes)) {
+						outputTypes.forEach((value: ConnectionTypes | INodeOutputConfiguration) => {
+							const outputType = typeof value === 'string' ? value : value.type;
+							if (!acc[outputType]) {
+								acc[outputType] = [];
+							}
+							acc[outputType].push(node.name);
+						});
+					}
+
+					return acc;
+				},
+				{} as { [key: string]: string[] },
+			);
+
+			return nodesByOutputType;
+		},
+		visibleNodeTypesByInputConnectionTypeNames(): { [key: string]: string[] } {
+			const nodesByOutputType = this.visibleNodeTypes.reduce(
+				(acc, node) => {
+					const inputTypes = node.inputs;
+					if (Array.isArray(inputTypes)) {
+						inputTypes.forEach((value: ConnectionTypes | INodeOutputConfiguration) => {
+							const outputType = typeof value === 'string' ? value : value.type;
+							if (!acc[outputType]) {
+								acc[outputType] = [];
+							}
+							acc[outputType].push(node.name);
+						});
+					}
+
+					return acc;
+				},
+				{} as { [key: string]: string[] },
+			);
+
+			return nodesByOutputType;
+		},
 	},
 	actions: {
 		setNodeTypes(newNodeTypes: INodeTypeDescription[] = []): void {

packages/editor-ui/src/stores/segment.store.ts

@@ -57,7 +57,11 @@ export const useSegment = defineStore('segment', () => {
 			const nodeRunData = runData.data.resultData.runData[nodeName];
 			const node = workflowsStore.getNodeByName(nodeName);
 			const nodeTypeName = node ? node.type : 'unknown';
-			if (nodeRunData[0].data && nodeRunData[0].data.main.some((out) => out && out?.length > 1)) {
+			if (
+				nodeRunData[0].data &&
+				nodeRunData[0].data.main &&
+				nodeRunData[0].data.main.some((out) => out && out?.length > 1)
+			) {
 				multipleOutputNodes.add(nodeTypeName);
 			}
 			if (node && !node.disabled) {

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

@@ -5,6 +5,7 @@ import {
 } from '@/api/workflow-webhooks';
 import {
 	ABOUT_MODAL_KEY,
+	CHAT_EMBED_MODAL_KEY,
 	CHANGE_PASSWORD_MODAL_KEY,
 	COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY,
 	COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
@@ -27,6 +28,7 @@ import {
 	VERSIONS_MODAL_KEY,
 	VIEWS,
 	WORKFLOW_ACTIVE_MODAL_KEY,
+	WORKFLOW_LM_CHAT_MODAL_KEY,
 	WORKFLOW_SETTINGS_MODAL_KEY,
 	WORKFLOW_SHARE_MODAL_KEY,
 	EXTERNAL_SECRETS_PROVIDER_MODAL_KEY,
@@ -69,6 +71,9 @@ export const useUIStore = defineStore(STORES.UI, {
 			[ABOUT_MODAL_KEY]: {
 				open: false,
 			},
+			[CHAT_EMBED_MODAL_KEY]: {
+				open: false,
+			},
 			[CHANGE_PASSWORD_MODAL_KEY]: {
 				open: false,
 			},
@@ -103,6 +108,9 @@ export const useUIStore = defineStore(STORES.UI, {
 			[VERSIONS_MODAL_KEY]: {
 				open: false,
 			},
+			[WORKFLOW_LM_CHAT_MODAL_KEY]: {
+				open: false,
+			},
 			[WORKFLOW_SETTINGS_MODAL_KEY]: {
 				open: false,
 			},

packages/editor-ui/src/stores/workflows.store.ts

@@ -125,7 +125,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 		workflowsById: {},
 		subWorkflowExecutionError: null,
 		activeExecutionId: null,
-		executingNode: null,
+		executingNode: [],
 		executionWaitingForWebhook: false,
 		nodeMetadata: {},
 		isInDebugMode: false,
@@ -262,6 +262,9 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			return (nodeName: string) =>
 				this.nodeMetadata[nodeName] === undefined || this.nodeMetadata[nodeName].pristine;
 		},
+		isNodeExecuting(): (nodeName: string) => boolean {
+			return (nodeName: string) => this.executingNode.includes(nodeName);
+		},
 		// Executions getters
 		getExecutionDataById(): (id: string) => IExecutionsSummary | undefined {
 			return (id: string): IExecutionsSummary | undefined =>
@@ -434,10 +437,18 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			this.setWorkflowTagIds([]);
 
 			this.activeExecutionId = null;
-			this.executingNode = null;
+			this.executingNode.length = 0;
 			this.executionWaitingForWebhook = false;
 		},
 
+		addExecutingNode(nodeName: string): void {
+			this.executingNode.push(nodeName);
+		},
+
+		removeExecutingNode(nodeName: string): void {
+			this.executingNode = this.executingNode.filter((name) => name !== nodeName);
+		},
+
 		setWorkflowId(id: string): void {
 			this.workflow.id = id === 'new' ? PLACEHOLDER_EMPTY_WORKFLOW_ID : id;
 		},

packages/editor-ui/src/utils/htmlUtils.ts

@@ -33,7 +33,9 @@ export function sanitizeHtml(dirtyHtml: string) {
 	return sanitizedHtml;
 }
 
-export function getStyleTokenValue(name: string): string {
+export function getStyleTokenValue(name: string, cssVariable = false): string {
+	if (cssVariable) return `var(${name})`;
+
 	const style = getComputedStyle(document.body);
 	return style.getPropertyValue(name);
 }

packages/editor-ui/src/utils/nodeTypesUtils.ts

@@ -1,20 +1,5 @@
-import type { INodeCredentialDescription } from 'n8n-workflow';
-import { MAIN_AUTH_FIELD_NAME } from '@/constants';
-import { useWorkflowsStore } from '@/stores/workflows.store';
-import { useNodeTypesStore } from '@/stores/nodeTypes.store';
-import {
-	CORE_NODES_CATEGORY,
-	NON_ACTIVATABLE_TRIGGER_NODE_TYPES,
-	TEMPLATES_NODES_FILTER,
-	MAPPING_PARAMS,
-} from '@/constants';
-import type {
-	INodeUi,
-	ITemplatesNode,
-	NodeAuthenticationOption,
-	INodeUpdatePropertiesInformation,
-} from '@/Interface';
 import type {
+	INodeCredentialDescription,
 	IDataObject,
 	INodeExecutionData,
 	INodeProperties,
@@ -24,6 +9,21 @@ import type {
 	INodePropertyCollection,
 	ResourceMapperField,
 } from 'n8n-workflow';
+import {
+	MAIN_AUTH_FIELD_NAME,
+	CORE_NODES_CATEGORY,
+	NON_ACTIVATABLE_TRIGGER_NODE_TYPES,
+	TEMPLATES_NODES_FILTER,
+	MAPPING_PARAMS,
+} from '@/constants';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import type {
+	INodeUi,
+	ITemplatesNode,
+	NodeAuthenticationOption,
+	INodeUpdatePropertiesInformation,
+} from '@/Interface';
 import { isResourceLocatorValue, isJsonKeyObject } from '@/utils';
 import { useCredentialsStore } from '@/stores/credentials.store';
 import { i18n as locale } from '@/plugins/i18n';
@@ -35,7 +35,7 @@ import { i18n as locale } from '@/plugins/i18n';
 
 const CRED_KEYWORDS_TO_FILTER = ['API', 'OAuth1', 'OAuth2'];
 const NODE_KEYWORDS_TO_FILTER = ['Trigger'];
-const COMMUNITY_PACKAGE_NAME_REGEX = /(@\w+\/)?n8n-nodes-(?!base\b)\b\w+/g;
+const COMMUNITY_PACKAGE_NAME_REGEX = /^(?!@n8n\/)(@\w+\/)?n8n-nodes-(?!base\b)\b\w+/g;
 const RESOURCE_MAPPER_FIELD_NAME_REGEX = /value\[\"(.+)\"\]/;
 
 export function getAppNameFromCredType(name: string) {
@@ -123,7 +123,7 @@ export const isRequiredCredential = (
 	nodeType: INodeTypeDescription | null,
 	credential: INodeCredentialDescription,
 ): boolean => {
-	if (!credential.displayOptions || !credential.displayOptions.show) {
+	if (!credential.displayOptions?.show) {
 		return true;
 	}
 	const mainAuthField = getMainAuthField(nodeType);
@@ -164,7 +164,7 @@ const findAlternativeAuthField = (
 ): INodeProperties | null => {
 	const dependentAuthFieldValues: { [fieldName: string]: string[] } = {};
 	nodeType.credentials?.forEach((cred) => {
-		if (cred.displayOptions && cred.displayOptions.show) {
+		if (cred.displayOptions?.show) {
 			for (const fieldName in cred.displayOptions.show) {
 				dependentAuthFieldValues[fieldName] = (dependentAuthFieldValues[fieldName] || []).concat(
 					(cred.displayOptions.show[fieldName] || []).map((val) => (val ? val.toString() : '')),
@@ -292,11 +292,7 @@ export const isAuthRelatedParameter = (
 ): boolean => {
 	let isRelated = false;
 	authFields.forEach((prop) => {
-		if (
-			prop.displayOptions &&
-			prop.displayOptions.show &&
-			parameter.name in prop.displayOptions.show
-		) {
+		if (prop.displayOptions?.show && parameter.name in prop.displayOptions.show) {
 			isRelated = true;
 			return;
 		}
@@ -309,9 +305,9 @@ export const getNodeAuthFields = (
 	nodeVersion?: number,
 ): INodeProperties[] => {
 	const authFields: INodeProperties[] = [];
-	if (nodeType && nodeType.credentials && nodeType.credentials.length > 0) {
+	if (nodeType?.credentials && nodeType.credentials.length > 0) {
 		nodeType.credentials.forEach((cred) => {
-			if (cred.displayOptions && cred.displayOptions.show) {
+			if (cred.displayOptions?.show) {
 				Object.keys(cred.displayOptions.show).forEach((option) => {
 					const nodeFieldsForName = nodeType.properties.filter((prop) => prop.name === option);
 					if (nodeFieldsForName) {
@@ -346,12 +342,7 @@ export const getCredentialsRelatedFields = (
 	credentialType: INodeCredentialDescription | null,
 ): INodeProperties[] => {
 	let fields: INodeProperties[] = [];
-	if (
-		nodeType &&
-		credentialType &&
-		credentialType.displayOptions &&
-		credentialType.displayOptions.show
-	) {
+	if (nodeType && credentialType?.displayOptions?.show) {
 		Object.keys(credentialType.displayOptions.show).forEach((option) => {
 			fields = fields.concat(nodeType.properties.filter((prop) => prop.name === option));
 		});
@@ -385,7 +376,7 @@ export const isNodeParameterRequired = (
 	nodeType: INodeTypeDescription,
 	parameter: INodeProperties,
 ): boolean => {
-	if (!parameter.displayOptions || !parameter.displayOptions.show) {
+	if (!parameter.displayOptions?.show) {
 		return true;
 	}
 	// If parameter itself contains 'none'?

packages/editor-ui/src/utils/nodeViewUtils.ts

@@ -1,12 +1,12 @@
 import { getStyleTokenValue } from '@/utils/htmlUtils';
-import { isNumber } from '@/utils';
+import { isNumber, closestNumberDivisibleBy } from '@/utils';
 import { NODE_OUTPUT_DEFAULT_KEY, STICKY_NODE_TYPE } from '@/constants';
 import type { EndpointStyle, IBounds, INodeUi, XYPosition } from '@/Interface';
 import type { ArrayAnchorSpec, ConnectorSpec, OverlaySpec, PaintStyle } from '@jsplumb/common';
 import type { Endpoint, Connection } from '@jsplumb/core';
 import { N8nConnector } from '@/plugins/connectors/N8nCustomConnector';
-import { closestNumberDivisibleBy } from '@/utils';
 import type {
+	ConnectionTypes,
 	IConnection,
 	INode,
 	ITaskData,
@@ -14,6 +14,7 @@ import type {
 	NodeInputConnections,
 	INodeTypeDescription,
 } from 'n8n-workflow';
+import { NodeConnectionType } from 'n8n-workflow';
 import { EVENT_CONNECTION_MOUSEOUT, EVENT_CONNECTION_MOUSEOVER } from '@jsplumb/browser-ui';
 import { useUIStore } from '@/stores';
 
@@ -74,12 +75,11 @@ export const CONNECTOR_FLOWCHART_TYPE: ConnectorSpec = {
 		loopbackMinimum: LOOPBACK_MINIMUM, // minimum length before flowchart loops around
 		getEndpointOffset(endpoint: Endpoint) {
 			const indexOffset = 10; // stub offset between different endpoints of same node
-			const index = endpoint && endpoint.__meta ? endpoint.__meta.index : 0;
-			const totalEndpoints = endpoint && endpoint.__meta ? endpoint.__meta.totalEndpoints : 0;
+			const index = endpoint?.__meta ? endpoint.__meta.index : 0;
+			const totalEndpoints = endpoint?.__meta ? endpoint.__meta.totalEndpoints : 0;
 
 			const outputOverlay = getOverlay(endpoint, OVERLAY_OUTPUT_NAME_LABEL);
-			const labelOffset =
-				outputOverlay && outputOverlay.label && outputOverlay.label.length > 1 ? 10 : 0;
+			const labelOffset = outputOverlay?.label && outputOverlay.label.length > 1 ? 10 : 0;
 			const outputsOffset = totalEndpoints > 3 ? 24 : 0; // avoid intersecting plus
 
 			return index * indexOffset + labelOffset + outputsOffset;
@@ -88,7 +88,7 @@ export const CONNECTOR_FLOWCHART_TYPE: ConnectorSpec = {
 };
 
 export const CONNECTOR_PAINT_STYLE_DEFAULT: PaintStyle = {
-	stroke: getStyleTokenValue('--color-foreground-dark'),
+	stroke: getStyleTokenValue('--color-foreground-dark', true),
 	strokeWidth: 2,
 	outlineWidth: 12,
 	outlineStroke: 'transparent',
@@ -96,12 +96,57 @@ export const CONNECTOR_PAINT_STYLE_DEFAULT: PaintStyle = {
 
 export const CONNECTOR_PAINT_STYLE_PULL: PaintStyle = {
 	...CONNECTOR_PAINT_STYLE_DEFAULT,
-	stroke: getStyleTokenValue('--color-foreground-xdark'),
+	stroke: getStyleTokenValue('--color-foreground-xdark', true),
 };
 
 export const CONNECTOR_PAINT_STYLE_PRIMARY = {
 	...CONNECTOR_PAINT_STYLE_DEFAULT,
-	stroke: getStyleTokenValue('--color-primary'),
+	stroke: getStyleTokenValue('--color-primary', true),
+};
+
+export const CONNECTOR_PAINT_STYLE_DATA: PaintStyle = {
+	...CONNECTOR_PAINT_STYLE_DEFAULT,
+	...{
+		dashstyle: '5 3',
+	},
+	stroke: getStyleTokenValue('--color-foreground-dark', true),
+};
+
+export const getConnectorColor = (type: ConnectionTypes): string => {
+	if (type === NodeConnectionType.Main) {
+		return '--node-type-main-color';
+	}
+
+	return '--node-type-supplemental-connector-color';
+};
+
+export const getConnectorPaintStylePull = (connection: Connection): PaintStyle => {
+	const connectorColor = getConnectorColor(connection.parameters.type as ConnectionTypes);
+	const additionalStyles: PaintStyle = {};
+	if (connection.parameters.type !== NodeConnectionType.Main) {
+		additionalStyles.dashstyle = '5 3';
+	}
+	return {
+		...CONNECTOR_PAINT_STYLE_PULL,
+		...(connectorColor ? { stroke: getStyleTokenValue(connectorColor, true) } : {}),
+		...additionalStyles,
+	};
+};
+
+export const getConnectorPaintStyleDefault = (connection: Connection): PaintStyle => {
+	const connectorColor = getConnectorColor(connection.parameters.type as ConnectionTypes);
+	return {
+		...CONNECTOR_PAINT_STYLE_DEFAULT,
+		...(connectorColor ? { stroke: getStyleTokenValue(connectorColor, true) } : {}),
+	};
+};
+
+export const getConnectorPaintStyleData = (connection: Connection): PaintStyle => {
+	const connectorColor = getConnectorColor(connection.parameters.type as ConnectionTypes);
+	return {
+		...CONNECTOR_PAINT_STYLE_DATA,
+		...(connectorColor ? { stroke: getStyleTokenValue(connectorColor, true) } : {}),
+	};
 };
 
 export const CONNECTOR_ARROW_OVERLAYS: OverlaySpec[] = [
@@ -129,69 +174,135 @@ export const CONNECTOR_ARROW_OVERLAYS: OverlaySpec[] = [
 	},
 ];
 
-export const ANCHOR_POSITIONS: {
-	[key: string]: {
-		[key: number]: ArrayAnchorSpec[];
-	};
-} = {
-	input: {
-		1: [[0.01, 0.5, -1, 0]],
-		2: [
-			[0.01, 0.3, -1, 0],
-			[0.01, 0.7, -1, 0],
-		],
-		3: [
-			[0.01, 0.25, -1, 0],
-			[0.01, 0.5, -1, 0],
-			[0.01, 0.75, -1, 0],
-		],
-		4: [
-			[0.01, 0.2, -1, 0],
-			[0.01, 0.4, -1, 0],
-			[0.01, 0.6, -1, 0],
-			[0.01, 0.8, -1, 0],
-		],
-	},
-	output: {
-		1: [[0.99, 0.5, 1, 0]],
-		2: [
-			[0.99, 0.3, 1, 0],
-			[0.99, 0.7, 1, 0],
-		],
-		3: [
-			[0.99, 0.25, 1, 0],
-			[0.99, 0.5, 1, 0],
-			[0.99, 0.75, 1, 0],
-		],
-		4: [
-			[0.99, 0.2, 1, 0],
-			[0.99, 0.4, 1, 0],
-			[0.99, 0.6, 1, 0],
-			[0.99, 0.8, 1, 0],
-		],
-	},
+export const getAnchorPosition = (
+	connectionType: ConnectionTypes,
+	type: 'input' | 'output',
+	amount: number,
+	spacerIndexes: number[] = [],
+): ArrayAnchorSpec[] => {
+	if (connectionType === NodeConnectionType.Main) {
+		const positions = {
+			input: {
+				1: [[0.01, 0.5, -1, 0]],
+				2: [
+					[0.01, 0.3, -1, 0],
+					[0.01, 0.7, -1, 0],
+				],
+				3: [
+					[0.01, 0.25, -1, 0],
+					[0.01, 0.5, -1, 0],
+					[0.01, 0.75, -1, 0],
+				],
+				4: [
+					[0.01, 0.2, -1, 0],
+					[0.01, 0.4, -1, 0],
+					[0.01, 0.6, -1, 0],
+					[0.01, 0.8, -1, 0],
+				],
+			},
+			output: {
+				1: [[0.99, 0.5, 1, 0]],
+				2: [
+					[0.99, 0.3, 1, 0],
+					[0.99, 0.7, 1, 0],
+				],
+				3: [
+					[0.99, 0.25, 1, 0],
+					[0.99, 0.5, 1, 0],
+					[0.99, 0.75, 1, 0],
+				],
+				4: [
+					[0.99, 0.2, 1, 0],
+					[0.99, 0.4, 1, 0],
+					[0.99, 0.6, 1, 0],
+					[0.99, 0.8, 1, 0],
+				],
+			},
+		};
+
+		return positions[type][amount] as ArrayAnchorSpec[];
+	}
+
+	const y = type === 'input' ? 0.99 : 0.01;
+	const oy = type === 'input' ? 1 : -1;
+	const ox = 0;
+
+	const spacedAmount = amount + spacerIndexes.length;
+	const returnPositions: ArrayAnchorSpec[] = [];
+	for (let i = 0; i < spacedAmount; i++) {
+		const stepSize = 1 / (spacedAmount + 1);
+		let x = stepSize * i;
+		x += stepSize;
+
+		if (spacerIndexes.includes(i)) {
+			continue;
+		}
+
+		returnPositions.push([x, y, ox, oy]);
+	}
+
+	return returnPositions;
+};
+
+export const getScope = (type?: string) => {
+	if (!type || type === NodeConnectionType.Main) {
+		return undefined;
+	}
+	return type;
+};
+
+export const getEndpointScope = (endpointType: ConnectionTypes): string | undefined => {
+	if (Object.values(NodeConnectionType).includes(endpointType)) {
+		return getScope(endpointType);
+	}
+
+	return undefined;
 };
 
 export const getInputEndpointStyle = (
 	nodeTypeData: INodeTypeDescription,
 	color: string,
-): EndpointStyle => ({
-	width: 8,
-	height: nodeTypeData && nodeTypeData.outputs.length > 2 ? 18 : 20,
-	fill: getStyleTokenValue(color),
-	stroke: getStyleTokenValue(color),
-	lineWidth: 0,
-});
+	connectionType: ConnectionTypes = NodeConnectionType.Main,
+): EndpointStyle => {
+	let width = 8;
+	let height = nodeTypeData && nodeTypeData.outputs.length > 2 ? 18 : 20;
 
-export const getInputNameOverlay = (labelText: string): OverlaySpec => ({
+	if (connectionType !== NodeConnectionType.Main) {
+		const temp = width;
+		width = height;
+		height = temp;
+	}
+
+	return {
+		width,
+		height,
+		fill: getStyleTokenValue(color),
+		stroke: getStyleTokenValue(color),
+		lineWidth: 0,
+	};
+};
+
+export const getInputNameOverlay = (
+	labelText: string,
+	inputName: string,
+	required?: boolean,
+): OverlaySpec => ({
 	type: 'Custom',
 	options: {
 		id: OVERLAY_INPUT_NAME_LABEL,
 		visible: true,
+		location: [-1, -1],
 		create: (component: Endpoint) => {
 			const label = document.createElement('div');
 			label.innerHTML = labelText;
+			if (required) {
+				label.innerHTML += ' <strong style="color: var(--color-primary)">*</strong>';
+			}
 			label.classList.add('node-input-endpoint-label');
+			if (inputName !== NodeConnectionType.Main) {
+				label.classList.add('node-input-endpoint-label--data');
+				label.classList.add(`node-connection-type-${inputName}`);
+			}
 			return label;
 		},
 	},
@@ -202,11 +313,11 @@ export const getOutputEndpointStyle = (
 	color: string,
 ): PaintStyle => ({
 	strokeWidth: nodeTypeData && nodeTypeData.outputs.length > 2 ? 7 : 9,
-	fill: getStyleTokenValue(color),
+	fill: getStyleTokenValue(color, true),
 	outlineStroke: 'none',
 });
 
-export const getOutputNameOverlay = (labelText: string): OverlaySpec => ({
+export const getOutputNameOverlay = (labelText: string, outputName: string): OverlaySpec => ({
 	type: 'Custom',
 	options: {
 		id: OVERLAY_OUTPUT_NAME_LABEL,
@@ -215,6 +326,10 @@ export const getOutputNameOverlay = (labelText: string): OverlaySpec => ({
 			const label = document.createElement('div');
 			label.innerHTML = labelText;
 			label.classList.add('node-output-endpoint-label');
+			if (outputName !== NodeConnectionType.Main) {
+				label.classList.add('node-output-endpoint-label--data');
+				label.classList.add(`node-connection-type-${getScope(outputName)}`);
+			}
 			return label;
 		},
 	},
@@ -297,7 +412,7 @@ export const hideOverlay = (item: Connection | Endpoint, overlayId: string) => {
 };
 
 export const showOrHideMidpointArrow = (connection: Connection) => {
-	if (!connection || !connection.endpoints || connection.endpoints.length !== 2) {
+	if (!connection?.endpoints || connection.endpoints.length !== 2) {
 		return;
 	}
 	const hasItemsLabel = !!getOverlay(connection, OVERLAY_RUN_ITEMS_ID);
@@ -318,6 +433,7 @@ export const showOrHideMidpointArrow = (connection: Connection) => {
 
 	const arrow = getOverlay(connection, OVERLAY_MIDPOINT_ARROW_ID);
 	const isArrowVisible =
+		connection.parameters.type === NodeConnectionType.Main &&
 		isBackwards &&
 		isTooLong &&
 		!isActionsOverlayHovered &&
@@ -370,7 +486,7 @@ export const showOrHideItemsLabel = (connection: Connection) => {
 	const isHidden = diffX < MIN_X_TO_SHOW_OUTPUT_LABEL && diffY < MIN_Y_TO_SHOW_OUTPUT_LABEL;
 
 	overlay.setVisible(!isHidden);
-	const innerElement = overlay.canvas && overlay.canvas.querySelector('span');
+	const innerElement = overlay.canvas?.querySelector('span');
 	if (innerElement) {
 		if (diffY === 0 || isLoopingBackwards(connection)) {
 			innerElement.classList.add('floating');
@@ -428,30 +544,20 @@ export const getNewNodePosition = (
 			}
 		}
 
-		if (conflictFound === true) {
+		if (conflictFound) {
 			targetPosition[0] += movePosition[0];
 			targetPosition[1] += movePosition[1];
 		}
-	} while (conflictFound === true);
+	} while (conflictFound);
 
 	return targetPosition;
 };
 
 export const getMousePosition = (e: MouseEvent | TouchEvent): XYPosition => {
 	// @ts-ignore
-	const x =
-		e.pageX !== undefined
-			? e.pageX
-			: e.touches && e.touches[0] && e.touches[0].pageX
-			? e.touches[0].pageX
-			: 0;
+	const x = e.pageX !== undefined ? e.pageX : e.touches?.[0]?.pageX ? e.touches[0].pageX : 0;
 	// @ts-ignore
-	const y =
-		e.pageY !== undefined
-			? e.pageY
-			: e.touches && e.touches[0] && e.touches[0].pageY
-			? e.touches[0].pageY
-			: 0;
+	const y = e.pageY !== undefined ? e.pageY : e.touches?.[0]?.pageY ? e.touches[0].pageY : 0;
 
 	return [x, y];
 };
@@ -527,7 +633,11 @@ export const showConnectionActions = (connection: Connection) => {
 	});
 };
 
-export const getOutputSummary = (data: ITaskData[], nodeConnections: NodeInputConnections) => {
+export const getOutputSummary = (
+	data: ITaskData[],
+	nodeConnections: NodeInputConnections,
+	connectionType: ConnectionTypes,
+) => {
 	const outputMap: {
 		[sourceOutputIndex: string]: {
 			[targetNodeName: string]: {
@@ -541,11 +651,11 @@ export const getOutputSummary = (data: ITaskData[], nodeConnections: NodeInputCo
 	} = {};
 
 	data.forEach((run: ITaskData) => {
-		if (!run.data || !run.data.main) {
+		if (!run.data?.[connectionType]) {
 			return;
 		}
 
-		run.data.main.forEach((output: INodeExecutionData[] | null, i: number) => {
+		run.data[connectionType].forEach((output: INodeExecutionData[] | null, i: number) => {
 			const sourceOutputIndex = i;
 
 			// executionData that was recovered by recoverEvents in the CLI will have an isArtificialRecoveredEventItem property
@@ -614,7 +724,7 @@ export const resetConnection = (connection: Connection) => {
 	connection.removeOverlay(OVERLAY_RUN_ITEMS_ID);
 	connection.removeClass('success');
 	showOrHideMidpointArrow(connection);
-	connection.setPaintStyle(CONNECTOR_PAINT_STYLE_DEFAULT);
+	connection.setPaintStyle(getConnectorPaintStyleDefault(connection));
 };
 
 export const recoveredConnection = (connection: Connection) => {
@@ -640,25 +750,27 @@ export const addConnectionOutputSuccess = (
 		connection.removeOverlay(OVERLAY_RUN_ITEMS_ID);
 	}
 
-	const overlay = connection.addOverlay({
-		type: 'Custom',
-		options: {
-			id: OVERLAY_RUN_ITEMS_ID,
-			create() {
-				const container = document.createElement('div');
-				const span = document.createElement('span');
+	if (connection.parameters.type === NodeConnectionType.Main) {
+		const overlay = connection.addOverlay({
+			type: 'Custom',
+			options: {
+				id: OVERLAY_RUN_ITEMS_ID,
+				create() {
+					const container = document.createElement('div');
+					const span = document.createElement('span');
 
-				container.classList.add('connection-run-items-label');
-				span.classList.add('floating');
-				span.innerHTML = getRunItemsLabel(output);
-				container.appendChild(span);
-				return container;
+					container.classList.add('connection-run-items-label');
+					span.classList.add('floating');
+					span.innerHTML = getRunItemsLabel(output);
+					container.appendChild(span);
+					return container;
+				},
+				location: 0.5,
 			},
-			location: 0.5,
-		},
-	});
+		});
+		overlay.setVisible(true);
+	}
 
-	overlay.setVisible(true);
 	showOrHideItemsLabel(connection);
 	showOrHideMidpointArrow(connection);
 
@@ -735,7 +847,7 @@ export const showPullConnectionState = (connection: Connection) => {
 	if (connection?.connector) {
 		const connector = connection.connector as N8nConnector;
 		connector.resetTargetEndpoint();
-		connection.setPaintStyle(CONNECTOR_PAINT_STYLE_PULL);
+		connection.setPaintStyle(getConnectorPaintStylePull(connection));
 		showOverlay(connection, OVERLAY_DROP_NODE_ID);
 	}
 };
@@ -744,7 +856,7 @@ export const resetConnectionAfterPull = (connection: Connection) => {
 	if (connection?.connector) {
 		const connector = connection.connector as N8nConnector;
 		connector.resetTargetEndpoint();
-		connection.setPaintStyle(CONNECTOR_PAINT_STYLE_DEFAULT);
+		connection.setPaintStyle(getConnectorPaintStyleDefault(connection));
 	}
 };
 
@@ -755,6 +867,23 @@ export const resetInputLabelPosition = (targetEndpoint: Connection | Endpoint) =
 	}
 };
 
+export const hideOutputNameLabel = (sourceEndpoint: Connection | Endpoint) => {
+	hideOverlay(sourceEndpoint, OVERLAY_OUTPUT_NAME_LABEL);
+};
+
+export const showOutputNameLabel = (
+	sourceEndpoint: Connection | Endpoint,
+	connection: Connection,
+) => {
+	const outputNameOverlay = getOverlay(sourceEndpoint, OVERLAY_OUTPUT_NAME_LABEL);
+	if (outputNameOverlay) {
+		outputNameOverlay.setVisible(true);
+		(connection.endpoints || []).forEach((endpoint) => {
+			connection.instance.repaint(endpoint.element);
+		});
+	}
+};
+
 export const moveBackInputLabelPosition = (targetEndpoint: Endpoint) => {
 	const inputNameOverlay = getOverlay(targetEndpoint, OVERLAY_INPUT_NAME_LABEL);
 	if (inputNameOverlay) {
@@ -788,16 +917,12 @@ export const addConnectionActionsOverlay = (
 			id: OVERLAY_CONNECTION_ACTIONS_ID,
 			create: (component: Connection) => {
 				const div = document.createElement('div');
-				const addButton = document.createElement('button');
 				const deleteButton = document.createElement('button');
 
 				div.classList.add(OVERLAY_CONNECTION_ACTIONS_ID);
 				addConnectionTestData(component.source, component.target, div);
-				addButton.classList.add('add');
-				deleteButton.classList.add('delete');
-				addButton.innerHTML = getIcon('plus');
+
 				deleteButton.innerHTML = getIcon('trash');
-				addButton.addEventListener('click', () => onAdd());
 				deleteButton.addEventListener('click', () => onDelete());
 				// We have to manually trigger connection mouse events because the overlay
 				// is not part of the connection element
@@ -807,7 +932,18 @@ export const addConnectionActionsOverlay = (
 				div.addEventListener('mouseover', () =>
 					connection.instance.fire(EVENT_CONNECTION_MOUSEOVER, component),
 				);
-				div.appendChild(addButton);
+
+				if (connection.parameters.type === NodeConnectionType.Main) {
+					const addButton = document.createElement('button');
+					addButton.classList.add('add');
+					addButton.innerHTML = getIcon('plus');
+					addButton.addEventListener('click', () => onAdd());
+					div.appendChild(addButton);
+					deleteButton.classList.add('delete');
+				} else {
+					deleteButton.classList.add('delete-single');
+				}
+
 				div.appendChild(deleteButton);
 				return div;
 			},
@@ -817,12 +953,20 @@ export const addConnectionActionsOverlay = (
 	overlay.setVisible(false);
 };
 
-export const getOutputEndpointUUID = (nodeId: string, outputIndex: number) => {
-	return `${nodeId}${OUTPUT_UUID_KEY}${outputIndex}`;
+export const getOutputEndpointUUID = (
+	nodeId: string,
+	connectionType: ConnectionTypes,
+	outputIndex: number,
+) => {
+	return `${nodeId}${OUTPUT_UUID_KEY}${getScope(connectionType) || ''}${outputIndex}`;
 };
 
-export const getInputEndpointUUID = (nodeId: string, inputIndex: number) => {
-	return `${nodeId}${INPUT_UUID_KEY}${inputIndex}`;
+export const getInputEndpointUUID = (
+	nodeId: string,
+	connectionType: ConnectionTypes,
+	inputIndex: number,
+) => {
+	return `${nodeId}${INPUT_UUID_KEY}${getScope(connectionType) || ''}${inputIndex}`;
 };
 
 export const getFixedNodesList = (workflowNodes: INode[]) => {

packages/workflow/src/Expression.ts

@@ -105,6 +105,7 @@ export class Expression {
 	 * @param {(IRunExecutionData | null)} runExecutionData
 	 * @param {boolean} [returnObjectAsString=false]
 	 */
+	// TODO: Clean that up at some point and move all the options into an options object
 	resolveSimpleParameterValue(
 		parameterValue: NodeParameterValue,
 		siblingParameters: INodeParameters,
@@ -119,6 +120,7 @@ export class Expression {
 		executeData?: IExecuteData,
 		returnObjectAsString = false,
 		selfData = {},
+		contextNodeName?: string,
 	): NodeParameterValue | INodeParameters | NodeParameterValue[] | INodeParameters[] {
 		// Check if it is an expression
 		if (typeof parameterValue !== 'string' || parameterValue.charAt(0) !== '=') {
@@ -147,6 +149,7 @@ export class Expression {
 			executeData,
 			-1,
 			selfData,
+			contextNodeName,
 		);
 		const data = dataProxy.getDataProxy();
 
@@ -476,6 +479,7 @@ export class Expression {
 	 * @param {(IRunExecutionData | null)} runExecutionData
 	 * @param {boolean} [returnObjectAsString=false]
 	 */
+	// TODO: Clean that up at some point and move all the options into an options object
 	getParameterValue(
 		parameterValue: NodeParameterValueType | INodeParameterResourceLocator,
 		runExecutionData: IRunExecutionData | null,
@@ -489,6 +493,7 @@ export class Expression {
 		executeData?: IExecuteData,
 		returnObjectAsString = false,
 		selfData = {},
+		contextNodeName?: string,
 	): NodeParameterValueType {
 		// Helper function which returns true when the parameter is a complex one or array
 		const isComplexParameter = (value: NodeParameterValueType) => {
@@ -514,6 +519,7 @@ export class Expression {
 					executeData,
 					returnObjectAsString,
 					selfData,
+					contextNodeName,
 				);
 			}
 
@@ -531,6 +537,7 @@ export class Expression {
 				executeData,
 				returnObjectAsString,
 				selfData,
+				contextNodeName,
 			);
 		};
 
@@ -550,6 +557,7 @@ export class Expression {
 				executeData,
 				returnObjectAsString,
 				selfData,
+				contextNodeName,
 			);
 		}
 

packages/workflow/src/Interfaces.ts

@@ -565,6 +565,7 @@ export interface IN8nRequestOperationPaginationOffset extends IN8nRequestOperati
 }
 
 export interface IGetNodeParameterOptions {
+	contextNode?: INode;
 	// extract value from regex, works only when parameter type is resourceLocator
 	extractValue?: boolean;
 	// get raw value of parameter with unresolved expressions
@@ -760,17 +761,37 @@ type BaseExecutionFunctions = FunctionsBaseWithRequiredKeys<'getMode'> & {
 	getInputSourceData(inputIndex?: number, inputName?: string): ISourceData;
 };
 
+// TODO: Create later own type only for Config-Nodes
 export type IExecuteFunctions = ExecuteFunctions.GetNodeParameterFn &
 	BaseExecutionFunctions & {
 		executeWorkflow(
 			workflowInfo: IExecuteWorkflowInfo,
 			inputData?: INodeExecutionData[],
 		): Promise<any>;
+		getInputConnectionData(
+			inputName: ConnectionTypes,
+			itemIndex: number,
+			inputIndex?: number,
+			nodeNameOverride?: string,
+		): Promise<unknown>;
 		getInputData(inputIndex?: number, inputName?: string): INodeExecutionData[];
+		getNodeOutputs(): INodeOutputConfiguration[];
 		putExecutionToWait(waitTill: Date): Promise<void>;
 		sendMessageToUI(message: any): void;
 		sendResponse(response: IExecuteResponsePromiseData): void;
 
+		// TODO: Make this one then only available in the new config one
+		addInputData(
+			connectionType: ConnectionTypes,
+			data: INodeExecutionData[][] | ExecutionError,
+			runIndex?: number,
+		): { index: number };
+		addOutputData(
+			connectionType: ConnectionTypes,
+			currentNodeRunIndex: number,
+			data: INodeExecutionData[][] | ExecutionError,
+		): void;
+
 		nodeHelpers: NodeHelperFunctions;
 		helpers: RequestHelperFunctions &
 			BaseHelperFunctions &
@@ -1009,6 +1030,7 @@ export interface INodeParameters {
 
 export type NodePropertyTypes =
 	| 'boolean'
+	| 'button'
 	| 'collection'
 	| 'color'
 	| 'dateTime'
@@ -1049,6 +1071,7 @@ export interface ILoadOptions {
 }
 
 export interface INodePropertyTypeOptions {
+	action?: string; // Supported by: button
 	alwaysOpenEditWindow?: boolean; // Supported by: json
 	codeAutocomplete?: CodeAutocompleteTypes; // Supported by: string
 	editor?: EditorType; // Supported by: string
@@ -1256,8 +1279,14 @@ export namespace MultiPartFormData {
 	>;
 }
 
+export interface SupplyData {
+	metadata?: IDataObject;
+	response: unknown;
+}
+
 export interface INodeType {
 	description: INodeTypeDescription;
+	supplyData?(this: IExecuteFunctions): Promise<SupplyData>;
 	execute?(
 		this: IExecuteFunctions,
 	): Promise<INodeExecutionData[][] | NodeExecutionWithMetadata[][] | null>;
@@ -1324,7 +1353,7 @@ export interface INodeCredentialDescription {
 	testedBy?: ICredentialTestRequest | string; // Name of a function inside `loadOptions.credentialTest`
 }
 
-export type INodeIssueTypes = 'credentials' | 'execution' | 'parameters' | 'typeUnknown';
+export type INodeIssueTypes = 'credentials' | 'execution' | 'input' | 'parameters' | 'typeUnknown';
 
 export interface INodeIssueObjectProperty {
 	[key: string]: string[];
@@ -1339,6 +1368,7 @@ export interface INodeIssueData {
 export interface INodeIssues {
 	execution?: boolean;
 	credentials?: INodeIssueObjectProperty;
+	input?: INodeIssueObjectProperty;
 	parameters?: INodeIssueObjectProperty;
 	typeUnknown?: boolean;
 	[key: string]: undefined | boolean | INodeIssueObjectProperty;
@@ -1466,15 +1496,77 @@ export interface IPostReceiveSort extends IPostReceiveBase {
 	};
 }
 
+export type ConnectionTypes =
+	| 'ai_chain'
+	| 'ai_document'
+	| 'ai_embedding'
+	| 'ai_languageModel'
+	| 'ai_memory'
+	| 'ai_outputParser'
+	| 'ai_retriever'
+	| 'ai_textSplitter'
+	| 'ai_tool'
+	| 'ai_vectorRetriever'
+	| 'ai_vectorStore'
+	| 'main';
+
+export const enum NodeConnectionType {
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	AiChain = 'ai_chain',
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	AiDocument = 'ai_document',
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	AiEmbedding = 'ai_embedding',
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	AiLanguageModel = 'ai_languageModel',
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	AiMemory = 'ai_memory',
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	AiOutputParser = 'ai_outputParser',
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	AiRetriever = 'ai_retriever',
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	AiTextSplitter = 'ai_textSplitter',
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	AiTool = 'ai_tool',
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	AiVectorRetriever = 'ai_vectorRetriever',
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	AiVectorStore = 'ai_vectorStore',
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	Main = 'main',
+}
+
+export interface INodeInputFilter {
+	// TODO: Later add more filter options like categories, subcatogries,
+	//       regex, allow to exclude certain nodes, ... ?
+	//       Potentially change totally after alpha/beta. Is not a breaking change after all.
+	nodes: string[]; // Allowed nodes
+}
+
+export interface INodeInputConfiguration {
+	displayName?: string;
+	maxConnections?: number;
+	required?: boolean;
+	filter?: INodeInputFilter;
+	type: ConnectionTypes;
+}
+
+export interface INodeOutputConfiguration {
+	displayName?: string;
+	required?: boolean;
+	type: ConnectionTypes;
+}
+
 export interface INodeTypeDescription extends INodeTypeBaseDescription {
 	version: number | number[];
 	defaults: INodeParameters;
 	eventTriggerDescription?: string;
 	activationMessage?: string;
-	inputs: string[];
+	inputs: Array<ConnectionTypes | INodeInputConfiguration> | string;
 	requiredInputs?: string | number[] | number; // Ony available with executionOrder => "v1"
 	inputNames?: string[];
-	outputs: string[];
+	outputs: Array<ConnectionTypes | INodeInputConfiguration> | string;
 	outputNames?: string[];
 	properties: INodeProperties[];
 	credentials?: INodeCredentialDescription[];
@@ -1655,6 +1747,10 @@ export interface IRunExecutionData {
 	executionData?: {
 		contextData: IExecuteContextData;
 		nodeExecutionStack: IExecuteData[];
+		metadata: {
+			// node-name: metadata by runIndex
+			[key: string]: ITaskMetadata[];
+		};
 		waitingExecution: IWaitingForExecution;
 		waitingExecutionSource: IWaitingForExecutionSource | null;
 	};
@@ -1666,14 +1762,25 @@ export interface IRunData {
 	[key: string]: ITaskData[];
 }
 
+export interface ITaskSubRunMetadata {
+	node: string;
+	runIndex: number;
+}
+
+export interface ITaskMetadata {
+	subRun?: ITaskSubRunMetadata[];
+}
+
 // The data that gets returned when a node runs
 export interface ITaskData {
 	startTime: number;
 	executionTime: number;
 	executionStatus?: ExecutionStatus;
 	data?: ITaskDataConnections;
+	inputOverride?: ITaskDataConnections;
 	error?: ExecutionError;
 	source: Array<ISourceData | null>; // Is an array as nodes have multiple inputs
+	metadata?: ITaskMetadata;
 }
 
 export interface ISourceData {
@@ -1769,7 +1876,7 @@ export interface IWorkflowExecuteAdditionalData {
 	restApiUrl: string;
 	instanceBaseUrl: string;
 	setExecutionStatus?: (status: ExecutionStatus) => void;
-	sendMessageToUI?: (source: string, message: any) => void;
+	sendDataToUI?: (type: string, data: IDataObject | IDataObject[]) => void;
 	timezone: string;
 	webhookBaseUrl: string;
 	webhookWaitingBaseUrl: string;
@@ -2138,6 +2245,7 @@ export interface IN8nUISettings {
 	urlBaseWebhook: string;
 	urlBaseEditor: string;
 	versionCli: string;
+	isBetaRelease: boolean;
 	n8nMetadata?: {
 		userId?: string;
 		[key: string]: string | number | undefined;

packages/workflow/src/NodeHelpers.ts

@@ -36,6 +36,10 @@ import type {
 	INodePropertyOptions,
 	ResourceMapperValue,
 	ValidationResult,
+	ConnectionTypes,
+	INodeTypeDescription,
+	INodeOutputConfiguration,
+	INodeInputConfiguration,
 	GenericValue,
 } from './Interfaces';
 import { isResourceMapperValue, isValidResourceLocatorParameterValue } from './type-guards';
@@ -1005,6 +1009,65 @@ export function getNodeWebhookUrl(
 	return `${baseUrl}/${getNodeWebhookPath(workflowId, node, path, isFullPath)}`;
 }
 
+export function getConnectionTypes(
+	connections: Array<ConnectionTypes | INodeInputConfiguration | INodeOutputConfiguration>,
+): ConnectionTypes[] {
+	return connections
+		.map((connection) => {
+			if (typeof connection === 'string') {
+				return connection;
+			}
+			return connection.type;
+		})
+		.filter((connection) => connection !== undefined);
+}
+
+export function getNodeInputs(
+	workflow: Workflow,
+	node: INode,
+	nodeTypeData: INodeTypeDescription,
+): Array<ConnectionTypes | INodeInputConfiguration> {
+	if (Array.isArray(nodeTypeData.inputs)) {
+		return nodeTypeData.inputs;
+	}
+
+	// Calculate the outputs dynamically
+	try {
+		return (workflow.expression.getSimpleParameterValue(
+			node,
+			nodeTypeData.inputs,
+			'internal',
+			'',
+			{},
+		) || []) as ConnectionTypes[];
+	} catch (e) {
+		throw new Error(`Could not calculate inputs dynamically for node "${node.name}"`);
+	}
+}
+
+export function getNodeOutputs(
+	workflow: Workflow,
+	node: INode,
+	nodeTypeData: INodeTypeDescription,
+): Array<ConnectionTypes | INodeOutputConfiguration> {
+	if (Array.isArray(nodeTypeData.outputs)) {
+		return nodeTypeData.outputs;
+	}
+
+	// Calculate the outputs dynamically
+	try {
+		return (workflow.expression.getSimpleParameterValue(
+			node,
+			nodeTypeData.outputs,
+			'internal',
+			'',
+			{},
+		) || []) as ConnectionTypes[];
+	} catch (e) {
+		throw new Error(`Could not calculate outputs dynamically for node "${node.name}"`);
+	}
+}
+
 /**
  * Returns all the parameter-issues of the node
  *
@@ -1049,7 +1112,7 @@ export function nodeIssuesToString(issues: INodeIssues, node?: INode): string[]
 		nodeIssues.push('Execution Error.');
 	}
 
-	const objectProperties = ['parameters', 'credentials'];
+	const objectProperties = ['parameters', 'credentials', 'input'];
 
 	let issueText: string;
 	let parameterName: string;

packages/workflow/src/Workflow.ts

@@ -41,6 +41,7 @@ import type {
 	IRun,
 	IRunNodeResponse,
 	NodeParameterValueType,
+	ConnectionTypes,
 } from './Interfaces';
 import { Node } from './Interfaces';
 import type { IDeferredPromise } from './DeferredPromise';
@@ -557,11 +558,11 @@ export class Workflow {
 	/**
 	 * Finds the highest parent nodes of the node with the given name
 	 *
-	 * @param {string} [type='main']
+	 * @param {ConnectionTypes} [type='main']
 	 */
 	getHighestNode(
 		nodeName: string,
-		type = 'main',
+		type: ConnectionTypes = 'main',
 		nodeConnectionIndex?: number,
 		checkedNodes?: string[],
 	): string[] {
@@ -639,17 +640,25 @@ export class Workflow {
 	 * @param {string} [type='main']
 	 * @param {*} [depth=-1]
 	 */
-	getChildNodes(nodeName: string, type = 'main', depth = -1): string[] {
+	getChildNodes(
+		nodeName: string,
+		type: ConnectionTypes | 'ALL' | 'ALL_NON_MAIN' = 'main',
+		depth = -1,
+	): string[] {
 		return this.getConnectedNodes(this.connectionsBySourceNode, nodeName, type, depth);
 	}
 
 	/**
 	 * Returns all the nodes before the given one
 	 *
-	 * @param {string} [type='main']
+	 * @param {ConnectionTypes} [type='main']
 	 * @param {*} [depth=-1]
 	 */
-	getParentNodes(nodeName: string, type = 'main', depth = -1): string[] {
+	getParentNodes(
+		nodeName: string,
+		type: ConnectionTypes | 'ALL' | 'ALL_NON_MAIN' = 'main',
+		depth = -1,
+	): string[] {
 		return this.getConnectedNodes(this.connectionsByDestinationNode, nodeName, type, depth);
 	}
 
@@ -657,15 +666,15 @@ export class Workflow {
 	 * Gets all the nodes which are connected nodes starting from
 	 * the given one
 	 *
-	 * @param {string} [type='main']
+	 * @param {ConnectionTypes} [type='main']
 	 * @param {*} [depth=-1]
 	 */
 	getConnectedNodes(
 		connections: IConnections,
 		nodeName: string,
-		type = 'main',
+		connectionType: ConnectionTypes | 'ALL' | 'ALL_NON_MAIN' = 'main',
 		depth = -1,
-		checkedNodes?: string[],
+		checkedNodesIncoming?: string[],
 	): string[] {
 		depth = depth === -1 ? -1 : depth;
 		const newDepth = depth === -1 ? depth : depth - 1;
@@ -679,57 +688,71 @@ export class Workflow {
 			return [];
 		}
 
-		if (!connections[nodeName].hasOwnProperty(type)) {
-			// Node does not have incoming connections of given type
-			return [];
+		let types: ConnectionTypes[];
+		if (connectionType === 'ALL') {
+			types = Object.keys(connections[nodeName]) as ConnectionTypes[];
+		} else if (connectionType === 'ALL_NON_MAIN') {
+			types = Object.keys(connections[nodeName]).filter(
+				(type) => type !== 'main',
+			) as ConnectionTypes[];
+		} else {
+			types = [connectionType];
 		}
 
-		checkedNodes = checkedNodes || [];
-
-		if (checkedNodes.includes(nodeName)) {
-			// Node got checked already before
-			return [];
-		}
-
-		checkedNodes.push(nodeName);
-
-		const returnNodes: string[] = [];
 		let addNodes: string[];
 		let nodeIndex: number;
 		let i: number;
 		let parentNodeName: string;
-		connections[nodeName][type].forEach((connectionsByIndex) => {
-			connectionsByIndex.forEach((connection) => {
-				if (checkedNodes!.includes(connection.node)) {
-					// Node got checked already before
-					return;
-				}
+		const returnNodes: string[] = [];
 
-				returnNodes.unshift(connection.node);
+		types.forEach((type) => {
+			if (!connections[nodeName].hasOwnProperty(type)) {
+				// Node does not have incoming connections of given type
+				return;
+			}
 
-				addNodes = this.getConnectedNodes(
-					connections,
-					connection.node,
-					type,
-					newDepth,
-					checkedNodes,
-				);
+			const checkedNodes = checkedNodesIncoming ? [...checkedNodesIncoming] : [];
 
-				for (i = addNodes.length; i--; i > 0) {
-					// Because nodes can have multiple parents it is possible that
-					// parts of the tree is parent of both and to not add nodes
-					// twice check first if they already got added before.
-					parentNodeName = addNodes[i];
-					nodeIndex = returnNodes.indexOf(parentNodeName);
+			if (checkedNodes.includes(nodeName)) {
+				// Node got checked already before
+				return;
+			}
 
-					if (nodeIndex !== -1) {
-						// Node got found before so remove it from current location
-						// that node-order stays correct
-						returnNodes.splice(nodeIndex, 1);
+			checkedNodes.push(nodeName);
+
+			connections[nodeName][type].forEach((connectionsByIndex) => {
+				connectionsByIndex.forEach((connection) => {
+					if (checkedNodes.includes(connection.node)) {
+						// Node got checked already before
+						return;
 					}
 
-					returnNodes.unshift(parentNodeName);
-				}
+					returnNodes.unshift(connection.node);
+
+					addNodes = this.getConnectedNodes(
+						connections,
+						connection.node,
+						connectionType,
+						newDepth,
+						checkedNodes,
+					);
+
+					for (i = addNodes.length; i--; i > 0) {
+						// Because nodes can have multiple parents it is possible that
+						// parts of the tree is parent of both and to not add nodes
+						// twice check first if they already got added before.
+						parentNodeName = addNodes[i];
+						nodeIndex = returnNodes.indexOf(parentNodeName);
+
+						if (nodeIndex !== -1) {
+							// Node got found before so remove it from current location
+							// that node-order stays correct
+							returnNodes.splice(nodeIndex, 1);
+						}
+
+						returnNodes.unshift(parentNodeName);
+					}
+				});
 			});
 		});
 
@@ -755,7 +778,7 @@ export class Workflow {
 	searchNodesBFS(connections: IConnections, sourceNode: string, maxDepth = -1): IConnectedNode[] {
 		const returnConns: IConnectedNode[] = [];
 
-		const type = 'main';
+		const type: ConnectionTypes = 'main';
 		let queue: IConnectedNode[] = [];
 		queue.push({
 			name: sourceNode,
@@ -821,7 +844,7 @@ export class Workflow {
 	getNodeConnectionIndexes(
 		nodeName: string,
 		parentNodeName: string,
-		type = 'main',
+		type: ConnectionTypes = 'main',
 		depth = -1,
 		checkedNodes?: string[],
 	): INodeConnection | undefined {

packages/workflow/src/WorkflowDataProxy.ts

@@ -60,6 +60,8 @@ export class WorkflowDataProxy {
 
 	private activeNodeName: string;
 
+	private contextNodeName: string;
+
 	private connectionInputData: INodeExecutionData[];
 
 	private siblingParameters: INodeParameters;
@@ -76,6 +78,7 @@ export class WorkflowDataProxy {
 
 	private timezone: string;
 
+	// TODO: Clean that up at some point and move all the options into an options object
 	constructor(
 		workflow: Workflow,
 		runExecutionData: IRunExecutionData | null,
@@ -90,17 +93,19 @@ export class WorkflowDataProxy {
 		executeData?: IExecuteData,
 		defaultReturnRunIndex = -1,
 		selfData = {},
+		contextNodeName?: string,
 	) {
 		this.activeNodeName = activeNodeName;
+		this.contextNodeName = contextNodeName || activeNodeName;
 		this.workflow = workflow;
 
-		this.runExecutionData = isScriptingNode(activeNodeName, workflow)
+		this.runExecutionData = isScriptingNode(this.contextNodeName, workflow)
 			? runExecutionData !== null
 				? augmentObject(runExecutionData)
 				: null
 			: runExecutionData;
 
-		this.connectionInputData = isScriptingNode(activeNodeName, workflow)
+		this.connectionInputData = isScriptingNode(this.contextNodeName, workflow)
 			? augmentArray(connectionInputData)
 			: connectionInputData;
 
@@ -264,6 +269,9 @@ export class WorkflowDataProxy {
 						that.timezone,
 						that.additionalKeys,
 						that.executeData,
+						false,
+						{},
+						that.contextNodeName,
 					);
 				}
 
@@ -342,13 +350,13 @@ export class WorkflowDataProxy {
 			// (example "IF" node. If node is connected to "true" or to "false" output)
 			if (outputIndex === undefined) {
 				const nodeConnection = that.workflow.getNodeConnectionIndexes(
-					that.activeNodeName,
+					that.contextNodeName,
 					nodeName,
 					'main',
 				);
 
 				if (nodeConnection === undefined) {
-					throw new ExpressionError(`connect "${that.activeNodeName}" to "${nodeName}"`, {
+					throw new ExpressionError(`connect "${that.contextNodeName}" to "${nodeName}"`, {
 						runIndex: that.runIndex,
 						itemIndex: that.itemIndex,
 					});
@@ -890,7 +898,7 @@ export class WorkflowDataProxy {
 						message: 'Can’t get data',
 					},
 					nodeCause: nodeBeforeLast,
-					description: 'Could not resolve, proably no pairedItem exists',
+					description: 'Could not resolve, probably no pairedItem exists',
 					type: 'no pairing info',
 					moreInfoLink: true,
 				});
@@ -1022,7 +1030,7 @@ export class WorkflowDataProxy {
 
 									// Before resolving the pairedItem make sure that the requested node comes in the
 									// graph before the current one
-									const parentNodes = that.workflow.getParentNodes(that.activeNodeName);
+									const parentNodes = that.workflow.getParentNodes(that.contextNodeName);
 									if (!parentNodes.includes(nodeName)) {
 										throw createExpressionError('Invalid expression', {
 											messageTemplate: 'Invalid expression under ‘%%PARAMETER%%’',
@@ -1180,6 +1188,9 @@ export class WorkflowDataProxy {
 					that.timezone,
 					that.additionalKeys,
 					that.executeData,
+					false,
+					{},
+					that.contextNodeName,
 				);
 			},
 			$item: (itemIndex: number, runIndex?: number) => {
@@ -1197,6 +1208,7 @@ export class WorkflowDataProxy {
 					that.additionalKeys,
 					that.executeData,
 					defaultReturnRunIndex,
+					that.contextNodeName,
 				);
 				return dataProxy.getDataProxy();
 			},
@@ -1253,10 +1265,10 @@ export class WorkflowDataProxy {
 				if (name === 'isProxy') return true;
 
 				if (['$data', '$json'].includes(name as string)) {
-					return that.nodeDataGetter(that.activeNodeName, true)?.json;
+					return that.nodeDataGetter(that.contextNodeName, true)?.json;
 				}
 				if (name === '$binary') {
-					return that.nodeDataGetter(that.activeNodeName, true)?.binary;
+					return that.nodeDataGetter(that.contextNodeName, true)?.binary;
 				}
 
 				return Reflect.get(target, name, receiver);

pnpm-lock.yaml

@@ -787,7 +787,7 @@ importers:
     dependencies:
       '@codemirror/autocomplete':
         specifier: ^6.4.0
-        version: 6.4.0(@codemirror/language@6.2.1)(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.0.1)
+        version: 6.4.0(@codemirror/language@6.2.1)(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.1.0)
       '@codemirror/commands':
         specifier: ^6.1.0
         version: 6.1.2
@@ -799,7 +799,7 @@ importers:
         version: 6.0.1
       '@codemirror/lang-python':
         specifier: ^6.1.2
-        version: 6.1.2(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.0.1)
+        version: 6.1.2(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.1.0)
       '@codemirror/language':
         specifier: ^6.2.1
         version: 6.2.1
@@ -842,9 +842,12 @@ importers:
       '@jsplumb/util':
         specifier: ^5.13.2
         version: 5.13.2
+      '@lezer/common':
+        specifier: ^1.0.4
+        version: 1.1.0
       '@n8n/codemirror-lang-sql':
         specifier: ^1.0.2
-        version: 1.0.2(@codemirror/view@6.5.1)(@lezer/common@1.0.1)
+        version: 1.0.2(@codemirror/view@6.5.1)(@lezer/common@1.1.0)
       '@vueuse/components':
         specifier: ^10.2.0
         version: 10.2.0(vue@3.3.4)
@@ -859,7 +862,7 @@ importers:
         version: 1.0.0
       codemirror-lang-n8n-expression:
         specifier: ^0.2.0
-        version: 0.2.0(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.0.1)
+        version: 0.2.0(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.1.0)
       copy-to-clipboard:
         specifier: ^3.3.3
         version: 3.3.3
@@ -932,6 +935,9 @@ importers:
       vue-json-pretty:
         specifier: 2.2.4
         version: 2.2.4(vue@3.3.4)
+      vue-markdown-render:
+        specifier: ^2.0.1
+        version: 2.0.1
       vue-router:
         specifier: ^4.2.2
         version: 4.2.2(vue@3.3.4)
@@ -3534,7 +3540,7 @@ packages:
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
     dev: true
 
-  /@codemirror/autocomplete@6.4.0(@codemirror/language@6.2.1)(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.0.1):
+  /@codemirror/autocomplete@6.4.0(@codemirror/language@6.2.1)(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.1.0):
     resolution: {integrity: sha512-HLF2PnZAm1s4kGs30EiqKMgD7XsYaQ0XJnMR0rofEWQ5t5D60SfqpDIkIh1ze5tiEbyUWm8+VJ6W1/erVvBMIA==}
     peerDependencies:
       '@codemirror/language': ^6.0.0
@@ -3545,7 +3551,7 @@ packages:
       '@codemirror/language': 6.2.1
       '@codemirror/state': 6.1.4
       '@codemirror/view': 6.5.1
-      '@lezer/common': 1.0.1
+      '@lezer/common': 1.1.0
     dev: false
 
   /@codemirror/commands@6.1.2:
@@ -3554,13 +3560,13 @@ packages:
       '@codemirror/language': 6.2.1
       '@codemirror/state': 6.1.4
       '@codemirror/view': 6.5.1
-      '@lezer/common': 1.0.1
+      '@lezer/common': 1.1.0
     dev: false
 
-  /@codemirror/lang-css@6.0.1(@codemirror/view@6.5.1)(@lezer/common@1.0.1):
+  /@codemirror/lang-css@6.0.1(@codemirror/view@6.5.1)(@lezer/common@1.1.0):
     resolution: {integrity: sha512-rlLq1Dt0WJl+2epLQeAsfqIsx3lGu4HStHCJu95nGGuz2P2fNugbU3dQYafr2VRjM4eMC9HviI6jvS98CNtG5w==}
     dependencies:
-      '@codemirror/autocomplete': 6.4.0(@codemirror/language@6.2.1)(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.0.1)
+      '@codemirror/autocomplete': 6.4.0(@codemirror/language@6.2.1)(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.1.0)
       '@codemirror/language': 6.2.1
       '@codemirror/state': 6.1.4
       '@lezer/css': 1.1.1
@@ -3572,12 +3578,12 @@ packages:
   /@codemirror/lang-javascript@6.1.2:
     resolution: {integrity: sha512-OcwLfZXdQ1OHrLiIcKCn7MqZ7nx205CMKlhe+vL88pe2ymhT9+2P+QhwkYGxMICj8TDHyp8HFKVwpiisUT7iEQ==}
     dependencies:
-      '@codemirror/autocomplete': 6.4.0(@codemirror/language@6.2.1)(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.0.1)
+      '@codemirror/autocomplete': 6.4.0(@codemirror/language@6.2.1)(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.1.0)
       '@codemirror/language': 6.2.1
       '@codemirror/lint': 6.0.0
       '@codemirror/state': 6.1.4
       '@codemirror/view': 6.5.1
-      '@lezer/common': 1.0.1
+      '@lezer/common': 1.1.0
       '@lezer/javascript': 1.0.2
     dev: false
 
@@ -3588,10 +3594,10 @@ packages:
       '@lezer/json': 1.0.0
     dev: false
 
-  /@codemirror/lang-python@6.1.2(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.0.1):
+  /@codemirror/lang-python@6.1.2(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.1.0):
     resolution: {integrity: sha512-nbQfifLBZstpt6Oo4XxA2LOzlSp4b/7Bc5cmodG1R+Cs5PLLCTUvsMNWDnziiCfTOG/SW1rVzXq/GbIr6WXlcw==}
     dependencies:
-      '@codemirror/autocomplete': 6.4.0(@codemirror/language@6.2.1)(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.0.1)
+      '@codemirror/autocomplete': 6.4.0(@codemirror/language@6.2.1)(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.1.0)
       '@codemirror/language': 6.2.1
       '@lezer/python': 1.1.5
     transitivePeerDependencies:
@@ -3605,7 +3611,7 @@ packages:
     dependencies:
       '@codemirror/state': 6.1.4
       '@codemirror/view': 6.5.1
-      '@lezer/common': 1.0.1
+      '@lezer/common': 1.1.0
       '@lezer/highlight': 1.1.1
       '@lezer/lr': 1.2.3
       style-mod: 4.0.0
@@ -4513,8 +4519,8 @@ packages:
     resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==}
     dev: false
 
-  /@lezer/common@1.0.1:
-    resolution: {integrity: sha512-8TR5++Q/F//tpDsLd5zkrvEX5xxeemafEaek7mUp7Y+bI8cKQXdSqhzTOBaOogETcMOVr0pT3BBPXp13477ciw==}
+  /@lezer/common@1.1.0:
+    resolution: {integrity: sha512-XPIN3cYDXsoJI/oDWoR2tD++juVrhgIago9xyKhZ7IhGlzdDM9QgC8D8saKNCz5pindGcznFr2HBSsEQSWnSjw==}
     dev: false
 
   /@lezer/css@1.1.1:
@@ -4527,13 +4533,13 @@ packages:
   /@lezer/highlight@1.1.1:
     resolution: {integrity: sha512-duv9D23O9ghEDnnUDmxu+L8pJy4nYo4AbCOHIudUhscrLSazqeJeK1V50EU6ZufWF1zv0KJwu/frFRyZWXxHBQ==}
     dependencies:
-      '@lezer/common': 1.0.1
+      '@lezer/common': 1.1.0
     dev: false
 
   /@lezer/html@1.3.0:
     resolution: {integrity: sha512-jU/ah8DEoiECLTMouU/X/ujIg6k9WQMIOFMaCLebzaXfrguyGaR3DpTgmk0tbljiuIJ7hlmVJPcJcxGzmCd0Mg==}
     dependencies:
-      '@lezer/common': 1.0.1
+      '@lezer/common': 1.1.0
       '@lezer/highlight': 1.1.1
       '@lezer/lr': 1.2.3
     dev: false
@@ -4555,7 +4561,7 @@ packages:
   /@lezer/lr@1.2.3:
     resolution: {integrity: sha512-qpB7rBzH8f6Mzjv2AVZRahcm+2Cf7nbIH++uXbvVOL1yIRvVWQ3HAM/saeBLCyz/togB7LGo76qdJYL1uKQlqA==}
     dependencies:
-      '@lezer/common': 1.0.1
+      '@lezer/common': 1.1.0
     dev: false
 
   /@lezer/python@1.1.5:
@@ -4646,10 +4652,10 @@ packages:
     dev: false
     optional: true
 
-  /@n8n/codemirror-lang-sql@1.0.2(@codemirror/view@6.5.1)(@lezer/common@1.0.1):
+  /@n8n/codemirror-lang-sql@1.0.2(@codemirror/view@6.5.1)(@lezer/common@1.1.0):
     resolution: {integrity: sha512-sOf/KyewSu3Ikij0CkRtzJJDhRDZcwNCEYl8UdH4U/riL0/XZGcBD7MYofCCcKszanJZiEWRZ2KU1sRp234iMg==}
     dependencies:
-      '@codemirror/autocomplete': 6.4.0(@codemirror/language@6.2.1)(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.0.1)
+      '@codemirror/autocomplete': 6.4.0(@codemirror/language@6.2.1)(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.1.0)
       '@codemirror/language': 6.2.1
       '@codemirror/state': 6.1.4
       '@lezer/highlight': 1.1.1
@@ -10102,23 +10108,23 @@ packages:
   /codemirror-lang-html-n8n@1.0.0:
     resolution: {integrity: sha512-ofNP6VTDGJ5rue+kTCZlDZdF1PnE0sl2cAkfrsCAd5MlBgDmqTwuFJIkTI6KXOJXs0ucdTYH6QLhy9BSW7EaOQ==}
     dependencies:
-      '@codemirror/autocomplete': 6.4.0(@codemirror/language@6.2.1)(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.0.1)
-      '@codemirror/lang-css': 6.0.1(@codemirror/view@6.5.1)(@lezer/common@1.0.1)
+      '@codemirror/autocomplete': 6.4.0(@codemirror/language@6.2.1)(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.1.0)
+      '@codemirror/lang-css': 6.0.1(@codemirror/view@6.5.1)(@lezer/common@1.1.0)
       '@codemirror/lang-javascript': 6.1.2
       '@codemirror/language': 6.2.1
       '@codemirror/state': 6.1.4
       '@codemirror/view': 6.5.1
-      '@lezer/common': 1.0.1
+      '@lezer/common': 1.1.0
       '@lezer/css': 1.1.1
       '@lezer/highlight': 1.1.1
       '@lezer/html': 1.3.0
       '@lezer/lr': 1.2.3
     dev: false
 
-  /codemirror-lang-n8n-expression@0.2.0(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.0.1):
+  /codemirror-lang-n8n-expression@0.2.0(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.1.0):
     resolution: {integrity: sha512-kdlpzevdCpWcpbNcwES9YZy+rDFwWOdO6Z78SWxT6jMhCPmdHQmO+gJ39aXAXlUI7OGLfOBtg1/ONxPjRpEIYQ==}
     dependencies:
-      '@codemirror/autocomplete': 6.4.0(@codemirror/language@6.2.1)(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.0.1)
+      '@codemirror/autocomplete': 6.4.0(@codemirror/language@6.2.1)(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.1.0)
       '@codemirror/language': 6.2.1
       '@lezer/highlight': 1.1.1
       '@lezer/lr': 1.2.3
@@ -11346,6 +11352,10 @@ packages:
     resolution: {integrity: sha512-GHrMyVZQWvTIdDtpiEXdHZnFQKzeO09apj8Cbl4pKWy4i0Oprcq17usfDt5aO63swf0JOeMWjWQE/LzgSRuWpA==}
     dev: false
 
+  /entities@2.1.0:
+    resolution: {integrity: sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==}
+    dev: false
+
   /entities@2.2.0:
     resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
     dev: false
@@ -15614,6 +15624,12 @@ packages:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
     dev: true
 
+  /linkify-it@3.0.3:
+    resolution: {integrity: sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==}
+    dependencies:
+      uc.micro: 1.0.6
+    dev: false
+
   /linkify-it@4.0.0:
     resolution: {integrity: sha512-QAxkXyzT/TXgwGyY4rTgC95Ex6/lZ5/lYTV9nug6eJt93BCBQGOE47D/g2+/m5J1MrVLr2ot97OXkBZ9bBpR4A==}
     dependencies:
@@ -16116,6 +16132,17 @@ packages:
     resolution: {integrity: sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA==}
     dev: false
 
+  /markdown-it@12.3.2:
+    resolution: {integrity: sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+      entities: 2.1.0
+      linkify-it: 3.0.3
+      mdurl: 1.0.1
+      uc.micro: 1.0.6
+    dev: false
+
   /markdown-it@13.0.1:
     resolution: {integrity: sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==}
     hasBin: true
@@ -21861,6 +21888,13 @@ packages:
       vue: 3.3.4
     dev: false
 
+  /vue-markdown-render@2.0.1:
+    resolution: {integrity: sha512-/UBCu0OrZ9zzEDtiZVwlV/CQ+CgcwViServGis3TRXSVc6+6lJxcaOcD43vRoQzYfPa9r9WDt0Q7GyupOmpEWA==}
+    dependencies:
+      markdown-it: 12.3.2
+      vue: 3.3.4
+    dev: false
+
   /vue-router@4.2.2(vue@3.3.4):
     resolution: {integrity: sha512-cChBPPmAflgBGmy3tBsjeoe3f3VOSG6naKyY5pjtrqLGbNEXdzCigFUHgBvp9e3ysAtFtEx7OLqcSDh/1Cq2TQ==}
     peerDependencies: