@n8n/frontend-module-mcp 0.3.4 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@n8n/frontend-module-mcp",
-  "version": "0.3.4",
+  "version": "1.0.0",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
@@ -8,20 +8,20 @@
     "./mcp.module": "./src/mcp.module.ts"
   },
   "dependencies": {
-    "@n8n/api-types": "1.45.3",
-    "@n8n/composables": "1.35.3",
-    "@n8n/design-system": "2.44.4",
-    "@n8n/frontend-constants": "0.11.0",
-    "@n8n/frontend-module-sdk": "0.15.4",
-    "@n8n/i18n": "2.45.3",
-    "@n8n/permissions": "0.82.0",
-    "@n8n/rest-api-client": "2.45.3",
-    "@n8n/stores": "2.45.3",
-    "@n8n/telemetry": "1.13.3",
-    "@n8n/utils": "1.52.0",
+    "@n8n/api-types": "2.0.0",
+    "@n8n/composables": "2.0.0",
+    "@n8n/design-system": "3.0.0",
+    "@n8n/frontend-constants": "1.0.0",
+    "@n8n/frontend-module-sdk": "1.0.0",
+    "@n8n/i18n": "3.0.0",
+    "@n8n/permissions": "1.0.0",
+    "@n8n/rest-api-client": "3.0.0",
+    "@n8n/stores": "3.0.0",
+    "@n8n/telemetry": "2.0.0",
+    "@n8n/utils": "2.0.0",
     "element-plus": "2.4.3",
     "lodash": "4.18.1",
-    "n8n-workflow": "2.45.1",
+    "n8n-workflow": "3.0.0",
     "pinia": "^2.2.4",
     "reka-ui": "^2.5.0",
     "vue": "^3.5.13",
@@ -35,8 +35,8 @@
     "@n8n/frontend-vite-config": "0.1.0",
     "@n8n/playwright-janitor": "0.1.0",
     "@n8n/stylelint-config": "0.0.1",
-    "@n8n/typescript-config": "1.12.0",
-    "@n8n/vitest-config": "1.24.0",
+    "@n8n/typescript-config": "2.0.0",
+    "@n8n/vitest-config": "2.0.0",
     "@pinia/testing": "^0.1.6",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.6.1",
@@ -49,7 +49,7 @@
     "stylelint": "^16.23.0",
     "typescript": "6.0.2",
     "unplugin-icons": "^23.0.1",
-    "vite": "^8.0.2",
+    "vite": "^8.1.6",
     "vite-svg-loader": "5.1.0",
     "vitest": "5.0.1",
     "vitest-mock-extended": "^3.1.0",

package/src/SettingsMCPView.vue

@@ -8,7 +8,9 @@ import type { OAuthClientResponseDto } from '@n8n/api-types';
 import {
 	N8nButton,
 	N8nDialog,
+	N8nDialogBody,
 	N8nDialogClose,
+	N8nDialogDescription,
 	N8nDialogFooter,
 	N8nNotice,
 	N8nSettingsLayout,
@@ -466,9 +468,13 @@ onBeforeUnmount(() => {
 			v-model:open="showDisableDialog"
 			size="small"
 			:header="i18n.baseText('settings.mcp.status.disableDialog.title')"
-			:description="i18n.baseText('settings.mcp.status.disableDialog.description')"
 			data-test-id="mcp-disable-dialog"
 		>
+			<N8nDialogBody>
+				<N8nDialogDescription>
+					{{ i18n.baseText('settings.mcp.status.disableDialog.description') }}
+				</N8nDialogDescription>
+			</N8nDialogBody>
 			<N8nDialogFooter>
 				<N8nDialogClose as-child>
 					<N8nButton variant="outline" :label="i18n.baseText('generic.cancel')" />

package/src/components/McpAllowedCallbackUrlsDialog.vue

@@ -6,6 +6,8 @@ import {
 	N8nAnimatedCollapsibleContent,
 	N8nButton,
 	N8nDialog,
+	N8nDialogBody,
+	N8nDialogDescription,
 	N8nDialogFooter,
 	N8nInput,
 	N8nRadioGroup,
@@ -92,10 +94,40 @@ const canSave = computed(() => {
 	return true;
 });
 
+const addUrlRow = ref<HTMLElement | null>(null);
+
 const addUrl = () => {
 	drafts.value.push(createDraft());
 };
 
+/** The dialog body that actually scrolls, if this node sits inside one. */
+function scrollParent(node: HTMLElement): HTMLElement | null {
+	let current = node.parentElement;
+	while (current) {
+		const { overflowY } = getComputedStyle(current);
+		if (overflowY === 'auto' || overflowY === 'scroll') return current;
+		current = current.parentElement;
+	}
+	return null;
+}
+
+// The new row grows in after the click. Once that motion ends, bring the add
+// button back if the list now runs past the dialog body. Reduced-motion users
+// get an instant jump; the row transitions already drop their motion too.
+function keepAddButtonInView() {
+	const row = addUrlRow.value;
+	if (!row) return;
+	const scroller = scrollParent(row);
+	if (!scroller || scroller.scrollHeight <= scroller.clientHeight) return;
+	const rowRect = row.getBoundingClientRect();
+	const scrollerRect = scroller.getBoundingClientRect();
+	if (rowRect.bottom <= scrollerRect.bottom) return;
+	const behavior = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+		? 'auto'
+		: 'smooth';
+	scroller.scrollTo({ top: scroller.scrollHeight - scroller.clientHeight, behavior });
+}
+
 const removeUrl = (id: number) => {
 	// The list never goes empty. Clearing the last row keeps its identity, so the
 	// input just empties instead of leaving and re-entering.
@@ -115,111 +147,118 @@ const onSave = () => emit('save', result.value);
 		:open="open"
 		size="medium"
 		:header="i18n.baseText('settings.mcp.callbackUrls.dialog.title')"
-		:description="i18n.baseText('settings.mcp.callbackUrls.dialog.description')"
 		data-test-id="mcp-callback-urls-dialog"
 		@update:open="emit('update:open', $event)"
 	>
-		<div :class="$style.body">
-			<N8nRadioGroup v-model="mode" orientation="vertical" :class="$style.modes">
-				<div
-					v-for="option in ['all', 'trusted'] as const"
-					:key="option"
-					:class="[$style['mode-card'], mode === option && $style['mode-card-active']]"
-					:data-test-id="`mcp-callback-urls-mode-${option}`"
-					@click="mode = option"
-				>
-					<N8nRadioGroupItem
-						:value="option"
-						:label="i18n.baseText(`settings.mcp.callbackUrls.mode.${option}.label`)"
-						:description="i18n.baseText(`settings.mcp.callbackUrls.mode.${option}.description`)"
-					/>
-				</div>
-			</N8nRadioGroup>
-
-			<!-- The URL list unfolds with the settings-surface blur motion (the same
+		<N8nDialogBody>
+			<N8nDialogDescription>
+				{{ i18n.baseText('settings.mcp.callbackUrls.dialog.description') }}
+			</N8nDialogDescription>
+			<div :class="$style.body">
+				<N8nRadioGroup v-model="mode" orientation="vertical" :class="$style.modes">
+					<div
+						v-for="option in ['all', 'trusted'] as const"
+						:key="option"
+						:class="[$style['mode-card'], mode === option && $style['mode-card-active']]"
+						:data-test-id="`mcp-callback-urls-mode-${option}`"
+						@click="mode = option"
+					>
+						<N8nRadioGroupItem
+							:value="option"
+							:label="i18n.baseText(`settings.mcp.callbackUrls.mode.${option}.label`)"
+							:description="i18n.baseText(`settings.mcp.callbackUrls.mode.${option}.description`)"
+						/>
+					</div>
+				</N8nRadioGroup>
+
+				<!-- The URL list unfolds with the settings-surface blur motion (the same
 			     N8nSettingsRow's expand region uses) so the dialog grows and shrinks
 			     with it instead of jumping between the two heights. -->
-			<CollapsibleRoot :open="mode === 'trusted'">
-				<N8nAnimatedCollapsibleContent
-					:class="$style['trusted-content']"
-					blur
-					data-test-id="mcp-callback-urls-trusted"
-				>
-					<div :class="$style.trusted">
-						<N8nText size="small" color="text-dark" bold :class="$style['trusted-label']">
-							{{ i18n.baseText('settings.mcp.callbackUrls.trusted.label') }}
-						</N8nText>
-						<!-- Rows grow in and shrink out with the same motion as the section, so
+				<CollapsibleRoot :open="mode === 'trusted'">
+					<N8nAnimatedCollapsibleContent
+						:class="$style['trusted-content']"
+						blur
+						data-test-id="mcp-callback-urls-trusted"
+					>
+						<div :class="$style.trusted">
+							<N8nText size="small" color="text-dark" bold :class="$style['trusted-label']">
+								{{ i18n.baseText('settings.mcp.callbackUrls.trusted.label') }}
+							</N8nText>
+							<!-- Rows grow in and shrink out with the same motion as the section, so
 						     adding or removing a URL never snaps the dialog to a new height. -->
-						<TransitionGroup
-							tag="div"
-							:class="$style['url-list']"
-							:enter-from-class="$style['slot-collapsed']"
-							:enter-active-class="$style['slot-animating']"
-							:leave-active-class="$style['slot-animating']"
-							:leave-to-class="$style['slot-collapsed']"
-						>
-							<div
-								v-for="draft in drafts"
-								:key="draft.id"
-								:class="$style.slot"
-								data-test-id="mcp-callback-url-row"
+							<TransitionGroup
+								tag="div"
+								:class="$style['url-list']"
+								:enter-from-class="$style['slot-collapsed']"
+								:enter-active-class="$style['slot-animating']"
+								:leave-active-class="$style['slot-animating']"
+								:leave-to-class="$style['slot-collapsed']"
+								@after-enter="keepAddButtonInView"
 							>
-								<div :class="$style['slot-clip']">
-									<div :class="$style['url-row']">
-										<N8nInput
-											v-model="draft.value"
-											type="text"
-											:placeholder="i18n.baseText('settings.mcp.callbackUrls.trusted.placeholder')"
-											data-test-id="mcp-callback-url-input"
-										/>
-										<N8nButton
-											v-if="drafts.length > 1 || draft.value.length > 0"
-											variant="ghost"
-											size="small"
-											icon-only
-											icon="x"
-											:aria-label="i18n.baseText('generic.delete')"
-											data-test-id="mcp-callback-url-remove"
-											@click="removeUrl(draft.id)"
-										/>
+								<div
+									v-for="draft in drafts"
+									:key="draft.id"
+									:class="$style.slot"
+									data-test-id="mcp-callback-url-row"
+								>
+									<div :class="$style['slot-clip']">
+										<div :class="$style['url-row']">
+											<N8nInput
+												v-model="draft.value"
+												type="text"
+												:placeholder="
+													i18n.baseText('settings.mcp.callbackUrls.trusted.placeholder')
+												"
+												data-test-id="mcp-callback-url-input"
+											/>
+											<N8nButton
+												v-if="drafts.length > 1 || draft.value.length > 0"
+												variant="ghost"
+												size="small"
+												icon-only
+												icon="x"
+												:aria-label="i18n.baseText('generic.delete')"
+												data-test-id="mcp-callback-url-remove"
+												@click="removeUrl(draft.id)"
+											/>
+										</div>
 									</div>
 								</div>
-							</div>
-						</TransitionGroup>
-						<Transition
-							:enter-from-class="$style['slot-collapsed']"
-							:enter-active-class="$style['slot-animating']"
-							:leave-active-class="$style['slot-animating']"
-							:leave-to-class="$style['slot-collapsed']"
-						>
-							<div v-if="validationError" :class="$style.slot">
-								<div :class="$style['slot-clip']">
-									<N8nText
-										size="small"
-										color="danger"
-										:class="$style.error"
-										data-test-id="mcp-callback-urls-error"
-									>
-										{{ validationError }}
-									</N8nText>
+							</TransitionGroup>
+							<Transition
+								:enter-from-class="$style['slot-collapsed']"
+								:enter-active-class="$style['slot-animating']"
+								:leave-active-class="$style['slot-animating']"
+								:leave-to-class="$style['slot-collapsed']"
+							>
+								<div v-if="validationError" :class="$style.slot">
+									<div :class="$style['slot-clip']">
+										<N8nText
+											size="small"
+											color="danger"
+											:class="$style.error"
+											data-test-id="mcp-callback-urls-error"
+										>
+											{{ validationError }}
+										</N8nText>
+									</div>
 								</div>
+							</Transition>
+							<div ref="addUrlRow">
+								<N8nButton
+									variant="outline"
+									size="small"
+									icon="plus"
+									:label="i18n.baseText('settings.mcp.callbackUrls.trusted.addUrl')"
+									data-test-id="mcp-callback-url-add"
+									@click="addUrl"
+								/>
 							</div>
-						</Transition>
-						<div>
-							<N8nButton
-								variant="outline"
-								size="small"
-								icon="plus"
-								:label="i18n.baseText('settings.mcp.callbackUrls.trusted.addUrl')"
-								data-test-id="mcp-callback-url-add"
-								@click="addUrl"
-							/>
 						</div>
-					</div>
-				</N8nAnimatedCollapsibleContent>
-			</CollapsibleRoot>
-		</div>
+					</N8nAnimatedCollapsibleContent>
+				</CollapsibleRoot>
+			</div>
+		</N8nDialogBody>
 
 		<N8nDialogFooter>
 			<N8nButton variant="outline" :label="i18n.baseText('generic.cancel')" @click="onCancel" />
@@ -249,7 +288,6 @@ $slot-easing: motion.$blur-motion-easing;
 .body {
 	display: flex;
 	flex-direction: column;
-	margin-block: var(--spacing--xs);
 }
 
 .modes {

package/src/components/McpConnectClientDialog.vue

@@ -5,6 +5,10 @@ import type { BaseTextKey } from '@n8n/i18n';
 import {
 	N8nButton,
 	N8nDialog,
+	N8nDialogBody,
+	N8nDialogDescription,
+	N8nDialogHeader,
+	N8nDialogTitle,
 	N8nDropdownMenu,
 	N8nIcon,
 	N8nSettingsRow,
@@ -155,20 +159,27 @@ const serverUrlDescription = computed(() =>
 	<N8nDialog
 		:open="mcpStore.connectPopoverOpen"
 		size="large"
-		:header="i18n.baseText('settings.mcp.connectDialog.title')"
-		:description="i18n.baseText('settings.mcp.connectDialog.description')"
 		data-test-id="mcp-connect-dialog"
 		@update:open="onOpenChange"
 	>
-		<div :class="$style.body">
-			<N8nTabs
-				:model-value="activeMethod"
-				:options="methodTabs"
-				:class="$style.tabs"
-				data-test-id="mcp-connect-method-tabs"
-				@update:model-value="activeMethod = $event"
-			/>
-
+		<N8nDialogHeader :class="$style.header">
+			<div :class="$style['header-main']">
+				<N8nDialogTitle>
+					{{ i18n.baseText('settings.mcp.connectDialog.title') }}
+				</N8nDialogTitle>
+				<N8nDialogDescription :class="$style.description">
+					{{ i18n.baseText('settings.mcp.connectDialog.description') }}
+				</N8nDialogDescription>
+				<N8nTabs
+					:model-value="activeMethod"
+					:options="methodTabs"
+					:class="$style.tabs"
+					data-test-id="mcp-connect-method-tabs"
+					@update:model-value="activeMethod = $event"
+				/>
+			</div>
+		</N8nDialogHeader>
+		<N8nDialogBody :class="$style.body">
 			<N8nSettingsRowGroup v-if="activeMethod === 'oauth'">
 				<N8nSettingsRow
 					:title="i18n.baseText('settings.mcp.connectDialog.yourClient.title')"
@@ -377,25 +388,40 @@ const serverUrlDescription = computed(() =>
 				</template>
 			</N8nSettingsRowGroup>
 
-			<div v-else :class="$style['token-setup']" data-test-id="mcp-connect-token-setup">
+			<div v-else data-test-id="mcp-connect-token-setup">
 				<McpAccessTokenTab :server-url="serverUrl" @copied="handleTokenTabCopy" />
 			</div>
-		</div>
+		</N8nDialogBody>
 	</N8nDialog>
 </template>
 
 <style lang="scss" module>
-/* Body-only scroll so the dialog header stays pinned and tall clients
-   (e.g. Claude Code's config block) never run off-screen. */
-.body {
-	max-height: calc(100dvh - 16rem);
-	/* Extra breathing room so the OAuth/API-key tabs don't crowd the description. */
-	margin-top: var(--spacing--md);
-	overflow-y: auto;
+.header {
+	border-bottom: var(--border);
+	padding-block-end: 0;
+}
+
+/* One column so the title, description, and tabs stack. The header row
+   otherwise lays its children out beside the close button. */
+.header-main {
+	display: flex;
+	flex: 1 1 auto;
+	flex-direction: column;
+	gap: var(--spacing--2xs);
+	min-width: 0;
+	width: 100%;
+}
+
+.description {
+	margin: 0;
 }
 
 .tabs {
-	margin-bottom: var(--spacing--sm);
+	margin-top: var(--spacing--2xs);
+}
+
+.body {
+	padding-block-start: var(--n8n-dialog-region--padding, var(--spacing--md));
 }
 
 .picker-trigger {
@@ -435,8 +461,4 @@ const serverUrlDescription = computed(() =>
 .copy-field {
 	width: 100%;
 }
-
-.token-setup {
-	margin-top: var(--spacing--2xs);
-}
 </style>

package/src/components/OAuthClientDetailsModal.vue

@@ -5,6 +5,7 @@ import type { OAuthClientResponseDto } from '@n8n/api-types';
 import {
 	N8nButton,
 	N8nDialog,
+	N8nDialogBody,
 	N8nDialogDescription,
 	N8nDialogFooter,
 	N8nDialogHeader,
@@ -62,8 +63,13 @@ function onRevoke() {
 </script>
 
 <template>
-	<N8nDialog :open="open" size="medium" @update:open="emit('update:open', $event)">
-		<div v-if="client" :class="$style.container" data-test-id="mcp-client-details-modal">
+	<N8nDialog
+		:open="open"
+		size="medium"
+		data-test-id="mcp-client-details-modal"
+		@update:open="emit('update:open', $event)"
+	>
+		<template v-if="client">
 			<N8nDialogHeader>
 				<N8nDialogTitle>
 					<span :class="$style.title">
@@ -77,42 +83,44 @@ function onRevoke() {
 				<N8nDialogDescription>{{ subtitle }}</N8nDialogDescription>
 			</N8nDialogHeader>
 
-			<div :class="$style.details">
-				<template v-if="ownerLabel">
+			<N8nDialogBody>
+				<div :class="$style.details">
+					<template v-if="ownerLabel">
+						<N8nText color="text-light" size="small">
+							{{ i18n.baseText('settings.mcp.oAuthClients.details.connectedBy') }}
+						</N8nText>
+						<N8nText color="text-dark" size="small" data-test-id="mcp-client-details-connected-by">
+							{{ ownerLabel }}
+						</N8nText>
+					</template>
+
 					<N8nText color="text-light" size="small">
-						{{ i18n.baseText('settings.mcp.oAuthClients.details.connectedBy') }}
+						{{ i18n.baseText('settings.mcp.oAuthClients.details.connectedOn') }}
 					</N8nText>
-					<N8nText color="text-dark" size="small" data-test-id="mcp-client-details-connected-by">
-						{{ ownerLabel }}
+					<N8nText color="text-dark" size="small" data-test-id="mcp-client-details-connected-on">
+						<N8nTimeAgo
+							:date="new Date(client.grantedAt).toISOString()"
+							capitalize
+							:locale="rootStore.defaultLocale"
+						/>
 					</N8nText>
-				</template>
-
-				<N8nText color="text-light" size="small">
-					{{ i18n.baseText('settings.mcp.oAuthClients.details.connectedOn') }}
-				</N8nText>
-				<N8nText color="text-dark" size="small" data-test-id="mcp-client-details-connected-on">
-					<N8nTimeAgo
-						:date="new Date(client.grantedAt).toISOString()"
-						capitalize
-						:locale="rootStore.defaultLocale"
-					/>
-				</N8nText>
-
-				<N8nText color="text-light" size="small">
-					{{ i18n.baseText('settings.mcp.oAuthClients.details.access') }}
-				</N8nText>
-				<div :class="$style.access" data-test-id="mcp-client-details-access">
-					<N8nText
-						v-for="scope in grantedScopes"
-						:key="scope"
-						color="text-dark"
-						size="small"
-						:data-test-id="`mcp-client-details-scope-${scope}`"
-					>
-						{{ scopeLabel(i18n, scope) }}
+
+					<N8nText color="text-light" size="small">
+						{{ i18n.baseText('settings.mcp.oAuthClients.details.access') }}
 					</N8nText>
+					<div :class="$style.access" data-test-id="mcp-client-details-access">
+						<N8nText
+							v-for="scope in grantedScopes"
+							:key="scope"
+							color="text-dark"
+							size="small"
+							:data-test-id="`mcp-client-details-scope-${scope}`"
+						>
+							{{ scopeLabel(i18n, scope) }}
+						</N8nText>
+					</div>
 				</div>
-			</div>
+			</N8nDialogBody>
 
 			<N8nDialogFooter>
 				<N8nButton
@@ -126,17 +134,11 @@ function onRevoke() {
 					{{ i18n.baseText('settings.mcp.oAuthClients.table.action.revokeAccess') }}
 				</N8nButton>
 			</N8nDialogFooter>
-		</div>
+		</template>
 	</N8nDialog>
 </template>
 
 <style lang="scss" module>
-.container {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing--sm);
-}
-
 .title {
 	display: inline-flex;
 	align-items: center;

package/src/mcp.module.ts

@@ -71,7 +71,8 @@ export const MCPModule = defineFrontendModule({
 	settingsPages: [
 		{
 			id: 'settings-mcp',
-			order: 200,
+			order: 10,
+			section: 'ai',
 			icon: 'mcp',
 			get label() {
 				return useI18n().baseText('settings.mcp');

package/src/modals/MCPConnectAgentsModal.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { useI18n } from '@n8n/i18n';
 import MCPAgentsSelect from '../components/MCPAgentsSelect.vue';
-import { N8nButton, N8nDialog, N8nDialogFooter, N8nNotice } from '@n8n/design-system';
+import {
+	N8nButton,
+	N8nDialog,
+	N8nDialogBody,
+	N8nDialogFooter,
+	N8nNotice,
+} from '@n8n/design-system';
 import { computed, ref, watch } from 'vue';
 import { useTelemetry } from '@n8n/composables/useTelemetry';
 import { TELEMETRY_EVENT } from '@n8n/telemetry';
@@ -59,10 +65,6 @@ function onConfirm() {
 		void save();
 	}
 }
-
-function preventOutsideClose(event: Event) {
-	event.preventDefault();
-}
 </script>
 
 <template>
@@ -70,25 +72,27 @@ function preventOutsideClose(event: Event) {
 		v-model:open="open"
 		size="xlarge"
 		:header="i18n.baseText('settings.mcp.connectAgents.modalTitle')"
+		:close-on-overlay-click="false"
 		data-test-id="mcp-connect-agents-dialog"
-		@interact-outside="preventOutsideClose"
 	>
-		<div :class="$style.content">
-			<N8nNotice
-				data-test-id="mcp-connect-agents-info-notice"
-				theme="info"
-				:content="i18n.baseText('settings.mcp.connectAgents.notice')"
-				:class="$style.notice"
-			/>
-			<MCPAgentsSelect
-				ref="selectRef"
-				v-model="selectedAgentIds"
-				:placeholder="i18n.baseText('settings.mcp.connectAgents.input.placeholder')"
-				:disabled="isSaving"
-				@ready="onSelectReady"
-				@confirm="onConfirm"
-			/>
-		</div>
+		<N8nDialogBody>
+			<div :class="$style.content">
+				<N8nNotice
+					data-test-id="mcp-connect-agents-info-notice"
+					theme="info"
+					:content="i18n.baseText('settings.mcp.connectAgents.notice')"
+					:class="$style.notice"
+				/>
+				<MCPAgentsSelect
+					ref="selectRef"
+					v-model="selectedAgentIds"
+					:placeholder="i18n.baseText('settings.mcp.connectAgents.input.placeholder')"
+					:disabled="isSaving"
+					@ready="onSelectReady"
+					@confirm="onConfirm"
+				/>
+			</div>
+		</N8nDialogBody>
 		<N8nDialogFooter>
 			<N8nButton
 				variant="outline"

package/src/modals/MCPConnectWorkflowsModal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from '@n8n/i18n';
 import MCPWorkflowsSelect from '../components/MCPWorkflowsSelect.vue';
-import { N8nButton, N8nDialog, N8nDialogFooter } from '@n8n/design-system';
+import { N8nButton, N8nDialog, N8nDialogBody, N8nDialogFooter } from '@n8n/design-system';
 import { computed, ref, watch } from 'vue';
 import { useTelemetry } from '@n8n/composables/useTelemetry';
 
@@ -58,10 +58,6 @@ function onConfirm() {
 		void save();
 	}
 }
-
-function preventOutsideClose(event: Event) {
-	event.preventDefault();
-}
 </script>
 
 <template>
@@ -69,17 +65,19 @@ function preventOutsideClose(event: Event) {
 		v-model:open="open"
 		size="xlarge"
 		:header="i18n.baseText('settings.mcp.connectWorkflows.modalTitle')"
+		:close-on-overlay-click="false"
 		data-test-id="mcp-connect-workflows-dialog"
-		@interact-outside="preventOutsideClose"
 	>
-		<MCPWorkflowsSelect
-			ref="selectRef"
-			v-model="selectedWorkflowIds"
-			:placeholder="i18n.baseText('settings.mcp.connectWorkflows.input.placeholder')"
-			:disabled="isSaving"
-			@ready="onSelectReady"
-			@confirm="onConfirm"
-		/>
+		<N8nDialogBody>
+			<MCPWorkflowsSelect
+				ref="selectRef"
+				v-model="selectedWorkflowIds"
+				:placeholder="i18n.baseText('settings.mcp.connectWorkflows.input.placeholder')"
+				:disabled="isSaving"
+				@ready="onSelectReady"
+				@confirm="onConfirm"
+			/>
+		</N8nDialogBody>
 		<N8nDialogFooter>
 			<N8nButton
 				variant="outline"