@n8n/frontend-module-mcp 0.2.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@n8n/frontend-module-mcp",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
@@ -8,20 +8,20 @@
     "./mcp.module": "./src/mcp.module.ts"
   },
   "dependencies": {
-    "@n8n/api-types": "1.44.1",
-    "@n8n/composables": "1.34.1",
-    "@n8n/design-system": "2.43.1",
-    "@n8n/frontend-constants": "0.10.0",
-    "@n8n/frontend-module-sdk": "0.14.1",
-    "@n8n/i18n": "2.44.1",
-    "@n8n/permissions": "0.81.0",
-    "@n8n/rest-api-client": "2.44.1",
-    "@n8n/stores": "2.44.1",
-    "@n8n/telemetry": "1.12.1",
-    "@n8n/utils": "1.51.0",
+    "@n8n/api-types": "1.45.0",
+    "@n8n/composables": "1.35.0",
+    "@n8n/design-system": "2.44.0",
+    "@n8n/frontend-constants": "0.11.0",
+    "@n8n/frontend-module-sdk": "0.15.0",
+    "@n8n/i18n": "2.45.0",
+    "@n8n/permissions": "0.82.0",
+    "@n8n/rest-api-client": "2.45.0",
+    "@n8n/stores": "2.45.0",
+    "@n8n/telemetry": "1.13.0",
+    "@n8n/utils": "1.52.0",
     "element-plus": "2.4.3",
     "lodash": "4.18.1",
-    "n8n-workflow": "2.44.1",
+    "n8n-workflow": "2.45.0",
     "pinia": "^2.2.4",
     "reka-ui": "^2.5.0",
     "vue": "^3.5.13",

package/src/SettingsMCPAgentsView.vue

@@ -172,7 +172,7 @@ onMounted(async () => {
 				/>
 				<N8nTooltip :content="i18n.baseText('settings.mcp.refresh.tooltip')">
 					<N8nButton
-						variant="subtle"
+						variant="outline"
 						icon-only
 						data-test-id="mcp-agents-refresh-button"
 						size="small"

package/src/SettingsMCPWorkflowsView.vue

@@ -192,7 +192,7 @@ onMounted(async () => {
 				/>
 				<N8nTooltip :content="i18n.baseText('settings.mcp.refresh.tooltip')">
 					<N8nButton
-						variant="subtle"
+						variant="outline"
 						icon-only
 						data-test-id="mcp-workflows-refresh-button"
 						size="small"

package/src/components/ConnectionParameter.vue

@@ -72,7 +72,7 @@ const handleCopy = async (value: string) => {
 				>
 					<N8nButton
 						v-if="props.allowCopy && isSupported"
-						variant="subtle"
+						variant="outline"
 						icon-only
 						:icon="copied ? 'check' : 'copy'"
 						:class="$style['copy-button']"
@@ -171,18 +171,7 @@ const handleCopy = async (value: string) => {
 
 	button {
 		height: auto;
-		border: none;
 		border-radius: 0;
-		box-shadow: none;
-
-		&:hover {
-			border-color: inherit;
-			box-shadow: none;
-		}
-
-		&:active {
-			box-shadow: none;
-		}
 	}
 
 	button + button {
@@ -207,7 +196,6 @@ const handleCopy = async (value: string) => {
 }
 
 .copy-button {
-	border: none;
 	border-radius: 0;
 }
 </style>

package/src/components/MCPEmptyState.test.ts

@@ -0,0 +1,36 @@
+import userEvent from '@testing-library/user-event';
+import { createComponentRenderer } from '@n8n/frontend-test-utils';
+import MCPEmptyState from './MCPEmptyState.vue';
+
+const renderComponent = createComponentRenderer(MCPEmptyState);
+
+describe('MCPEmptyState', () => {
+	it('should render the design-system empty state with the MCP icon cards and both actions', () => {
+		const { getByTestId, container } = renderComponent();
+
+		const emptyState = getByTestId('mcp-empty-state-container');
+		expect(emptyState).toHaveClass('n8n-empty-state');
+		expect(emptyState).toHaveTextContent('Connect AI assistants to build and run workflows');
+		// The centre card carries the MCP mark; the side cards render the client brand marks.
+		expect(container.querySelector('[data-icon="mcp"]')).toBeInTheDocument();
+		expect(getByTestId('mcp-empty-state-learn-more')).toHaveAttribute('target', '_blank');
+		expect(getByTestId('enable-mcp-access-button')).toBeEnabled();
+	});
+
+	it('should emit turnOnMcp when the enable button is clicked', async () => {
+		const { getByTestId, emitted } = renderComponent();
+
+		await userEvent.click(getByTestId('enable-mcp-access-button'));
+
+		expect(emitted('turnOnMcp')).toHaveLength(1);
+	});
+
+	it.each([
+		['disabled', { disabled: true }],
+		['loading', { loading: true }],
+	])('should disable the enable button when %s', (_, props) => {
+		const { getByTestId } = renderComponent({ props });
+
+		expect(getByTestId('enable-mcp-access-button')).toBeDisabled();
+	});
+});

package/src/components/MCPEmptyState.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { N8nButton, N8nIcon, N8nTooltip } from '@n8n/design-system';
-import { MCP_DOCS_PAGE_URL } from '../mcp.constants';
+import { N8nButton, N8nEmptyState, N8nIcon, N8nTooltip } from '@n8n/design-system';
+import type { EmptyStateIconCards } from '@n8n/design-system';
 import { useI18n } from '@n8n/i18n';
-import McpEmptyStateCard from './McpEmptyStateCard.vue';
+
+import { MCP_CLIENT_LOGO_CYCLE } from '../mcp.clients.catalog';
+import { MCP_DOCS_PAGE_URL } from '../mcp.constants';
 
 type Props = {
 	disabled?: boolean;
@@ -24,52 +26,78 @@ const emit = defineEmits<{
 const i18n = useI18n();
 
 const buttonDisabled = computed(() => props.disabled || props.loading);
+
+// The MCP mark, flanked by side cards cycling through the client brand marks.
+const emptyStateIcon: EmptyStateIconCards = {
+	type: 'cards',
+	center: 'mcp',
+	sides: MCP_CLIENT_LOGO_CYCLE,
+};
 </script>
 
 <template>
-	<McpEmptyStateCard
-		surface
-		:class="$style.card"
+	<N8nEmptyState
+		:class="$style.emptyState"
 		data-test-id="mcp-empty-state-container"
-		:title="i18n.baseText('settings.mcp.actionBox.heading')"
+		:icon="emptyStateIcon"
+		:heading="i18n.baseText('settings.mcp.actionBox.heading')"
 		:description="i18n.baseText('settings.mcp.emptyState.description')"
 	>
-		<template #actions>
-			<N8nButton
-				variant="ghost"
-				size="medium"
-				:href="MCP_DOCS_PAGE_URL"
-				target="_blank"
-				data-test-id="mcp-empty-state-learn-more"
-			>
-				{{ i18n.baseText('generic.learnMore') }} <N8nIcon icon="arrow-up-right" size="small" />
-			</N8nButton>
-			<N8nTooltip :disabled="!buttonDisabled">
-				<template #content>
-					<span v-if="props.loading">{{ i18n.baseText('generic.loading') }}...</span>
-					<span v-else-if="props.managedByEnv">
-						{{ i18n.baseText('settings.mcp.managedByEnv.tooltip') }}
-					</span>
-					<span v-else>
-						{{ i18n.baseText('settings.mcp.toggle.disabled.tooltip') }}
-					</span>
-				</template>
+		<template #additionalContent>
+			<div :class="$style.actions">
 				<N8nButton
-					variant="solid"
+					variant="ghost"
 					size="medium"
-					:disabled="buttonDisabled"
-					data-test-id="enable-mcp-access-button"
-					@click="emit('turnOnMcp')"
+					:href="MCP_DOCS_PAGE_URL"
+					target="_blank"
+					data-test-id="mcp-empty-state-learn-more"
 				>
-					{{ i18n.baseText('settings.mcp.actionBox.button.label') }}
+					{{ i18n.baseText('generic.learnMore') }}
+					<N8nIcon icon="arrow-up-right" size="small" />
 				</N8nButton>
-			</N8nTooltip>
+				<N8nTooltip :disabled="!buttonDisabled">
+					<template #content>
+						<span v-if="props.loading">{{ i18n.baseText('generic.loading') }}...</span>
+						<span v-else-if="props.managedByEnv">
+							{{ i18n.baseText('settings.mcp.managedByEnv.tooltip') }}
+						</span>
+						<span v-else>
+							{{ i18n.baseText('settings.mcp.toggle.disabled.tooltip') }}
+						</span>
+					</template>
+					<N8nButton
+						variant="solid"
+						size="medium"
+						:disabled="buttonDisabled"
+						data-test-id="enable-mcp-access-button"
+						@click="emit('turnOnMcp')"
+					>
+						{{ i18n.baseText('settings.mcp.actionBox.button.label') }}
+					</N8nButton>
+				</N8nTooltip>
+			</div>
 		</template>
-	</McpEmptyStateCard>
+	</N8nEmptyState>
 </template>
 
 <style lang="scss" module>
-.card {
+@use '@n8n/design-system/css/mixins/motion';
+
+.emptyState {
 	margin-top: var(--spacing--xl);
+	/* The DS card is transparent by default; keep the page's surface so it reads as a panel. */
+	background: var(--background--surface);
+	/* Fixed white tiles so the dark brand marks stay visible on the dark theme, as in the client rows. */
+	--empty-state-icon-cards--tile-background: var(--color--neutral-white);
+	--empty-state-icon-cards--tile-color: var(--color--neutral-black);
+	/* Gentle entrance for the enable/disable swap (empty state ⇄ full page). */
+	@include motion.fade-in-up;
+}
+
+.actions {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--spacing--2xs);
 }
 </style>

package/src/components/McpAccessTokenTab.vue

@@ -130,7 +130,7 @@ onMounted(async () => {
 						:show-after="MCP_TOOLTIP_DELAY"
 					>
 						<N8nButton
-							variant="subtle"
+							variant="outline"
 							icon-only
 							icon="refresh-cw"
 							:disabled="keyRotating"

package/src/components/McpClientLogoCards.vue

@@ -1,134 +1,21 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue';
-import type { Component } from 'vue';
-import { N8nIcon } from '@n8n/design-system';
+import { N8nEmptyStateIconCards } from '@n8n/design-system';
 
-import ClaudeIcon from '../assets/client-icons/claude.svg?component';
-import CursorIcon from '../assets/client-icons/cursor.svg?component';
-import OpenAiIcon from '../assets/client-icons/openai.svg?component';
-import VsCodeIcon from '../assets/client-icons/vscode.svg?component';
-
-const CLIENT_ICONS: Component[] = [ClaudeIcon, CursorIcon, VsCodeIcon, OpenAiIcon];
-
-// Staggered fade/blur cycle through the known client logos on the side cards,
-// same animation as the secrets-providers empty state.
-const leftIconIndex = ref(0);
-const rightIconIndex = ref(2);
-const leftFading = ref(false);
-const rightFading = ref(false);
-let animationInterval: ReturnType<typeof setInterval> | null = null;
-
-function animateLeft() {
-	leftFading.value = true;
-	setTimeout(() => {
-		leftIconIndex.value = (leftIconIndex.value + 1) % CLIENT_ICONS.length;
-		leftFading.value = false;
-	}, 300);
-}
-
-function animateRight() {
-	rightFading.value = true;
-	setTimeout(() => {
-		rightIconIndex.value = (rightIconIndex.value + 1) % CLIENT_ICONS.length;
-		rightFading.value = false;
-	}, 300);
-}
-
-onMounted(() => {
-	animationInterval = setInterval(() => {
-		animateLeft();
-		setTimeout(() => {
-			animateRight();
-		}, 1500);
-	}, 3000);
-});
-
-onUnmounted(() => {
-	if (animationInterval) {
-		clearInterval(animationInterval);
-	}
-});
+import { MCP_CLIENT_LOGO_CYCLE } from '../mcp.clients.catalog';
 </script>
 
 <template>
-	<div :class="$style.iconCardContainer">
-		<div :class="$style.iconCard">
-			<component
-				:is="CLIENT_ICONS[leftIconIndex]"
-				:class="[$style.clientLogo, { [$style.fading]: leftFading }]"
-			/>
-		</div>
-		<div :class="$style.iconCard">
-			<N8nIcon icon="mcp" :class="$style.mcpIcon" />
-		</div>
-		<div :class="$style.iconCard">
-			<component
-				:is="CLIENT_ICONS[rightIconIndex]"
-				:class="[$style.clientLogo, { [$style.fading]: rightFading }]"
-			/>
-		</div>
-	</div>
+	<N8nEmptyStateIconCards
+		:class="$style.cards"
+		center-icon="mcp"
+		:side-icons="MCP_CLIENT_LOGO_CYCLE"
+	/>
 </template>
 
 <style lang="scss" module>
-.iconCardContainer {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.iconCard {
-	width: 2.5rem;
-	height: 2.5rem;
-	border: var(--border);
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	/* fixed white tile so dark brand marks stay visible on the dark theme */
-	background: var(--color--neutral-white);
-	box-shadow: var(--shadow--xs);
-	border-radius: var(--radius);
-	overflow: hidden;
-
-	&:nth-child(1) {
-		transform: rotate(-8deg);
-	}
-
-	&:nth-child(2) {
-		z-index: 1;
-		margin-top: -0.3rem;
-	}
-
-	&:nth-child(3) {
-		transform: rotate(8deg);
-	}
-}
-
-.clientLogo {
-	width: var(--spacing--lg);
-	height: var(--spacing--lg);
-	object-fit: contain;
-	opacity: 1;
-	filter: blur(0);
-	transition:
-		opacity 300ms ease-in-out,
-		filter 300ms ease-in-out;
-}
-
-.mcpIcon {
-	font-size: var(--spacing--lg);
-	/* the tile is always white, so the MCP glyph must stay dark in both themes */
-	color: var(--color--neutral-black);
-}
-
-.fading {
-	opacity: 0;
-	filter: blur(4px);
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.clientLogo {
-		transition: none;
-	}
+.cards {
+	/* Fixed white tiles so the dark brand marks stay visible on the dark theme, as in the client rows. */
+	--empty-state-icon-cards--tile-background: var(--color--neutral-white);
+	--empty-state-icon-cards--tile-color: var(--color--neutral-black);
 }
 </style>

package/src/components/McpConnectClientDialog.vue

@@ -424,7 +424,7 @@ const serverUrlDescription = computed(() =>
 	display: block;
 	padding-block: var(--spacing--5xs);
 	font-size: var(--font-size--3xs);
-	font-weight: var(--font-weight--bold);
+	font-weight: var(--font-weight--medium);
 	letter-spacing: 0.06em;
 	text-transform: uppercase;
 	color: var(--color--text--tint-1);

package/src/components/McpEmptyStateCard.vue

@@ -6,16 +6,14 @@ withDefaults(
 	defineProps<{
 		title: string;
 		description: string;
-		/** White surface instead of the page background (for the standalone disabled state). */
-		surface?: boolean;
 		dataTestId?: string;
 	}>(),
-	{ surface: false, dataTestId: undefined },
+	{ dataTestId: undefined },
 );
 </script>
 
 <template>
-	<div :class="[$style.card, surface && $style.surface]" :data-test-id="dataTestId">
+	<div :class="$style.card" :data-test-id="dataTestId">
 		<McpClientLogoCards :class="$style.cards" />
 		<div :class="$style.copy">
 			<N8nText bold size="large" color="text-dark">{{ title }}</N8nText>
@@ -28,6 +26,8 @@ withDefaults(
 </template>
 
 <style lang="scss" module>
+@use '@n8n/design-system/css/mixins/motion';
+
 .card {
 	display: flex;
 	flex-direction: column;
@@ -38,29 +38,7 @@ withDefaults(
 	border: var(--border-width) dashed var(--border-color);
 	border-radius: var(--radius--lg);
 	/* Gentle entrance, matching the prototype's empty states. */
-	animation: mcp-reveal-in var(--duration--snappy) var(--easing--ease-out);
-}
-
-.surface {
-	background: var(--background--surface);
-}
-
-@keyframes mcp-reveal-in {
-	from {
-		opacity: 0;
-		transform: translateY(var(--spacing--2xs));
-	}
-
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.card {
-		animation: none;
-	}
+	@include motion.fade-in-up;
 }
 
 .cards {

package/src/components/OAuthClientDetailsModal.vue

@@ -116,7 +116,7 @@ function onRevoke() {
 
 			<N8nDialogFooter>
 				<N8nButton
-					variant="subtle"
+					variant="outline"
 					data-test-id="mcp-client-details-close"
 					@click="emit('update:open', false)"
 				>

package/src/components/tabs/AgentsTable.vue

@@ -237,7 +237,7 @@ const projectLink = (agent: McpAgent) =>
 			>
 				<template #actions>
 					<N8nButton
-						variant="subtle"
+						variant="outline"
 						data-test-id="mcp-bulk-remove-agent-access-button"
 						:label="i18n.baseText('settings.mcp.agents.table.action.removeMCPAccess')"
 						@click="onBulkRemoveMcpAccess"

package/src/components/tabs/WorkflowsTable.vue

@@ -291,7 +291,7 @@ const onConnectClick = () => {
 			>
 				<template #actions>
 					<N8nButton
-						variant="subtle"
+						variant="outline"
 						data-test-id="mcp-bulk-remove-access-button"
 						:label="i18n.baseText('settings.mcp.workflows.table.action.removeMCPAccess')"
 						@click="onBulkRemoveMcpAccess"

package/src/mcp.clients.catalog.ts

@@ -1,4 +1,4 @@
-import type { Component } from 'vue';
+import { markRaw, type Component } from 'vue';
 
 import AntigravityIcon from './assets/client-icons/antigravity.svg?component';
 import ClaudeIcon from './assets/client-icons/claude.svg?component';
@@ -10,6 +10,20 @@ import MistralIcon from './assets/client-icons/mistral.svg?component';
 import OpenAiIcon from './assets/client-icons/openai.svg?component';
 import VsCodeIcon from './assets/client-icons/vscode.svg?component';
 
+/**
+ * Brand marks the decorative empty-state cards cycle through, interleaved so consecutive
+ * marks read clearly different (coral wordmark, blue ribbon, purple blossom, near-black
+ * cube, gradient spark, black blossom).
+ */
+export const MCP_CLIENT_LOGO_CYCLE: Component[] = [
+	ClaudeIcon,
+	VsCodeIcon,
+	CodexIcon,
+	CursorIcon,
+	GeminiIcon,
+	OpenAiIcon,
+].map((icon) => markRaw(icon));
+
 export type McpSetupCategory = 'cli' | 'web' | 'ide';
 
 export interface McpClientSetup {

package/src/mcp.constants.ts

@@ -9,6 +9,7 @@ export const MCP_SCOPE_GROUPS: Array<{ key: string; resources: readonly string[]
 	{ key: 'workflows', resources: ['workflow', 'tag'] },
 	{ key: 'executions', resources: ['execution'] },
 	{ key: 'agents', resources: ['agent'] },
+	{ key: 'skills', resources: ['skill'] },
 	{ key: 'credentials', resources: ['credential'] },
 	{ key: 'dataTables', resources: ['dataTable'] },
 	{ key: 'projectsAndFolders', resources: ['project'] },
@@ -21,6 +22,7 @@ export const MCP_SCOPE_RESOURCE_ICONS: Record<string, IconName> = {
 	workflow: 'workflow',
 	execution: 'history',
 	agent: 'robot',
+	skill: 'graduation-cap',
 	credential: 'key-round',
 	dataTable: 'table',
 	project: 'folder',

package/src/modals/MCPConnectAgentsModal.vue

@@ -91,7 +91,7 @@ function preventOutsideClose(event: Event) {
 		</div>
 		<N8nDialogFooter>
 			<N8nButton
-				variant="subtle"
+				variant="outline"
 				:label="i18n.baseText('generic.cancel')"
 				:disabled="isSaving"
 				data-test-id="mcp-connect-agents-cancel-button"

package/src/modals/MCPConnectWorkflowsModal.vue

@@ -82,7 +82,7 @@ function preventOutsideClose(event: Event) {
 		/>
 		<N8nDialogFooter>
 			<N8nButton
-				variant="subtle"
+				variant="outline"
 				:label="i18n.baseText('generic.cancel')"
 				:disabled="isSaving"
 				data-test-id="mcp-connect-workflows-cancel-button"