@n8n/frontend-module-mcp 0.1.0

package/src/components/McpConnectClientDialog.vue

@@ -0,0 +1,432 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useI18n } from '@n8n/i18n';
+import type { BaseTextKey } from '@n8n/i18n';
+import {
+	N8nButton,
+	N8nDialog,
+	N8nDropdownMenu,
+	N8nIcon,
+	N8nSettingsRow,
+	N8nSettingsRowGroup,
+	N8nTabs,
+	N8nText,
+} from '@n8n/design-system';
+import type { DropdownMenuItemProps, TabOptions } from '@n8n/design-system';
+import { useTelemetry } from '@n8n/composables/useTelemetry';
+import { useMCPStore } from '../mcp.store';
+import { getMcpClientCatalog } from '../mcp.clients.catalog';
+import type { McpClientSetup } from '../mcp.clients.catalog';
+import ConnectionParameter from './ConnectionParameter.vue';
+import McpConfigSnippet from './McpConfigSnippet.vue';
+import McpAccessTokenTab from './McpAccessTokenTab.vue';
+
+const i18n = useI18n();
+const telemetry = useTelemetry();
+const mcpStore = useMCPStore();
+
+// Prefer the backend's dedicated MCP server URL (falls back to the editor URL in
+// the store), so every copied command/config and the token tab target the endpoint
+// the instance actually exposes.
+const serverUrl = computed(() => mcpStore.serverUrl);
+const catalog = computed(() => getMcpClientCatalog(serverUrl.value));
+const clientsById = computed(
+	() =>
+		new Map<string, McpClientSetup>(
+			catalog.value.flatMap((group) => group.clients.map((client) => [client.id, client])),
+		),
+);
+
+type ConnectMethod = 'oauth' | 'apiKey';
+const activeMethod = ref<ConnectMethod>('oauth');
+const methodTabs = computed<Array<TabOptions<ConnectMethod>>>(() => [
+	{ label: i18n.baseText('settings.mcp.connectDialog.method.oauth'), value: 'oauth' },
+	{ label: i18n.baseText('settings.mcp.connectDialog.method.apiKey'), value: 'apiKey' },
+]);
+
+const activeClientId = ref('claude-ai');
+
+const activeClient = computed(() => clientsById.value.get(activeClientId.value));
+
+type MenuItemData = { kind: 'header' } | { kind: 'client'; client: McpClientSetup };
+
+// Grouped picker items: each category is a disabled, divided header item
+// (non-selectable) followed by its clients; the active client carries `checked`.
+const clientMenuItems = computed<Array<DropdownMenuItemProps<string, MenuItemData>>>(() => {
+	const items: Array<DropdownMenuItemProps<string, MenuItemData>> = [];
+	for (const group of catalog.value) {
+		items.push({
+			id: `header:${group.id}`,
+			label: i18n.baseText(`settings.mcp.connectDialog.category.${group.id}` as BaseTextKey),
+			disabled: true,
+			divided: items.length > 0,
+			data: { kind: 'header' },
+		});
+		for (const client of group.clients) {
+			items.push({
+				id: client.id,
+				label: client.name,
+				checked: client.id === activeClientId.value,
+				data: { kind: 'client', client },
+			});
+		}
+	}
+	return items;
+});
+
+const onSelectClient = (id: string) => {
+	const item = clientMenuItems.value.find((menuItem) => menuItem.id === id);
+	if (item?.data?.kind !== 'client') return;
+	activeClientId.value = id;
+	telemetry.track('User selected MCP client in connect dialog', { client: id });
+};
+
+const onOpenChange = (open: boolean) => {
+	if (open) {
+		mcpStore.openConnectPopover();
+	} else {
+		mcpStore.closeConnectPopover();
+		mcpStore.resetCurrentUserMCPKey();
+		activeMethod.value = 'oauth';
+	}
+};
+
+const trackCopy = (parameter: string) => {
+	telemetry.track('User copied MCP connection parameter', {
+		parameter,
+		source: 'connect-dialog',
+	});
+};
+
+const handleTokenTabCopy = (type: 'serverUrl' | 'accessToken' | 'mcpJson') => {
+	const itemMap = { serverUrl: 'server-url', accessToken: 'access-token', mcpJson: 'mcp-json' };
+	trackCopy(itemMap[type]);
+};
+
+const installTitle = computed(() =>
+	i18n.baseText('settings.mcp.connectDialog.install.title', {
+		interpolate: { client: activeClient.value?.name ?? '' },
+	}),
+);
+const installDescription = computed(() =>
+	i18n.baseText('settings.mcp.connectDialog.install.description', {
+		interpolate: { client: activeClient.value?.name ?? '' },
+	}),
+);
+const authenticateDescription = computed(() =>
+	activeClient.value?.authCommand
+		? i18n.baseText('settings.mcp.connectDialog.authenticate.description.command')
+		: i18n.baseText('settings.mcp.connectDialog.authenticate.description.mcpCommand', {
+				interpolate: { client: activeClient.value?.name ?? '' },
+			}),
+);
+const oneClickDescription = computed(() =>
+	activeClient.value?.category === 'web'
+		? i18n.baseText('settings.mcp.connectDialog.oneClick.description.web', {
+				interpolate: { client: activeClient.value?.name ?? '' },
+			})
+		: i18n.baseText('settings.mcp.connectDialog.oneClick.description.ide', {
+				interpolate: { client: activeClient.value?.name ?? '' },
+			}),
+);
+const addButtonLabel = computed(() =>
+	i18n.baseText('settings.mcp.connectDialog.oneClick.button', {
+		interpolate: { client: activeClient.value?.name ?? '' },
+	}),
+);
+const serverUrlDescription = computed(() =>
+	i18n.baseText('settings.mcp.connectDialog.serverUrl.description', {
+		interpolate: { client: activeClient.value?.name ?? '' },
+	}),
+);
+</script>
+
+<template>
+	<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"
+			/>
+
+			<N8nSettingsRowGroup v-if="activeMethod === 'oauth'">
+				<N8nSettingsRow
+					:title="i18n.baseText('settings.mcp.connectDialog.yourClient.title')"
+					:description="i18n.baseText('settings.mcp.connectDialog.yourClient.description')"
+					:show-divider="!!activeClient"
+				>
+					<template #action>
+						<N8nDropdownMenu
+							:items="clientMenuItems"
+							placement="bottom-end"
+							max-height="min(var(--reka-dropdown-menu-content-available-height), 30rem)"
+							:extra-popper-class="$style['picker-menu']"
+							data-test-id="mcp-connect-client-picker"
+							@select="onSelectClient"
+						>
+							<template #trigger>
+								<N8nButton
+									variant="outline"
+									size="medium"
+									:aria-label="i18n.baseText('settings.mcp.connectDialog.yourClient.title')"
+									data-test-id="mcp-connect-client-picker-trigger"
+								>
+									<span :class="$style['picker-trigger']">
+										<component
+											:is="activeClient.icon"
+											v-if="activeClient?.icon"
+											:class="$style['brand-icon']"
+										/>
+										<N8nIcon v-else icon="mcp" size="small" color="text-light" />
+										{{ activeClient?.name }}
+										<N8nIcon icon="chevron-down" size="small" />
+									</span>
+								</N8nButton>
+							</template>
+							<template #item-leading="{ item }">
+								<template v-if="item.data?.kind === 'client'">
+									<component
+										:is="item.data.client.icon"
+										v-if="item.data.client.icon"
+										:class="$style['brand-icon']"
+									/>
+									<N8nIcon v-else icon="mcp" size="large" color="text-light" />
+								</template>
+							</template>
+							<template #item-label="{ item }">
+								<span v-if="item.data?.kind === 'header'" :class="$style.category">
+									{{ item.label }}
+								</span>
+								<N8nText v-else size="medium" color="text-dark" :class="$style['client-label']">
+									{{ item.label }}
+								</N8nText>
+							</template>
+						</N8nDropdownMenu>
+					</template>
+				</N8nSettingsRow>
+
+				<!-- CLI: one command adds the server (requires the client installed and
+				     writes its config), OR edit the config file manually → Authenticate. -->
+				<template v-if="activeClient?.category === 'cli'">
+					<N8nSettingsRow
+						layout="vertical"
+						:show-divider="false"
+						:title="installTitle"
+						:description="installDescription"
+					>
+						<template #action>
+							<ConnectionParameter
+								id="mcp-install-command"
+								:class="$style['copy-field']"
+								:label="''"
+								:value="activeClient.installCommand ?? ''"
+								@copy="trackCopy('install-command')"
+							/>
+						</template>
+					</N8nSettingsRow>
+					<N8nSettingsRow
+						layout="vertical"
+						:show-divider="false"
+						:title="i18n.baseText('settings.mcp.connectDialog.configure.titleAlt')"
+						:description="i18n.baseText('settings.mcp.connectDialog.configure.descriptionAlt')"
+					>
+						<template #action>
+							<McpConfigSnippet
+								:class="$style['copy-field']"
+								:value="activeClient.configSnippet ?? ''"
+								:language="activeClient.id === 'codex' ? 'toml' : 'json'"
+								@copy="trackCopy('config')"
+							/>
+						</template>
+					</N8nSettingsRow>
+					<N8nSettingsRow
+						layout="vertical"
+						:show-divider="false"
+						:title="i18n.baseText('settings.mcp.connectDialog.authenticate.title')"
+						:description="authenticateDescription"
+					>
+						<template #action>
+							<ConnectionParameter
+								id="mcp-auth-command"
+								:class="$style['copy-field']"
+								:label="''"
+								:value="activeClient.authCommand ?? '/mcp'"
+								@copy="trackCopy('auth-command')"
+							/>
+						</template>
+					</N8nSettingsRow>
+				</template>
+
+				<!-- Web: one-click connector (when supported) + the mandatory server URL to paste in. -->
+				<template v-else-if="activeClient?.category === 'web'">
+					<N8nSettingsRow
+						v-if="activeClient.addUrl"
+						:show-divider="false"
+						:title="i18n.baseText('settings.mcp.connectDialog.oneClick.title')"
+						:description="oneClickDescription"
+					>
+						<template #action>
+							<N8nButton
+								variant="outline"
+								size="medium"
+								:href="activeClient.addUrl"
+								target="_blank"
+								data-test-id="mcp-connect-one-click"
+							>
+								<component
+									:is="activeClient.icon"
+									v-if="activeClient.icon"
+									:class="$style['brand-icon']"
+								/>
+								{{ addButtonLabel }}
+							</N8nButton>
+						</template>
+					</N8nSettingsRow>
+					<N8nSettingsRow
+						layout="vertical"
+						:show-divider="false"
+						:title="i18n.baseText('settings.mcp.connectDialog.serverUrl')"
+						:description="serverUrlDescription"
+					>
+						<template #action>
+							<ConnectionParameter
+								id="mcp-web-server-url"
+								:class="$style['copy-field']"
+								:label="''"
+								:value="serverUrl"
+								@copy="trackCopy('server-url')"
+							/>
+						</template>
+					</N8nSettingsRow>
+				</template>
+
+				<!-- IDE: one-click deep link (when supported) + manual config -->
+				<template v-else-if="activeClient">
+					<N8nSettingsRow
+						v-if="activeClient.deepLink"
+						:show-divider="false"
+						:title="i18n.baseText('settings.mcp.connectDialog.oneClick.title')"
+						:description="oneClickDescription"
+					>
+						<template #action>
+							<N8nButton
+								variant="outline"
+								size="medium"
+								:href="activeClient.deepLink"
+								data-test-id="mcp-connect-one-click"
+							>
+								<component
+									:is="activeClient.icon"
+									v-if="activeClient.icon"
+									:class="$style['brand-icon']"
+								/>
+								{{ addButtonLabel }}
+							</N8nButton>
+						</template>
+					</N8nSettingsRow>
+					<N8nSettingsRow
+						layout="vertical"
+						:show-divider="false"
+						:title="i18n.baseText('settings.mcp.connectDialog.serverUrl')"
+						:description="serverUrlDescription"
+					>
+						<template #action>
+							<ConnectionParameter
+								id="mcp-server-url"
+								:class="$style['copy-field']"
+								:label="''"
+								:value="serverUrl"
+								@copy="trackCopy('server-url')"
+							/>
+						</template>
+					</N8nSettingsRow>
+					<N8nSettingsRow
+						layout="vertical"
+						:show-divider="false"
+						:title="i18n.baseText('settings.mcp.connectDialog.configure.title')"
+						:description="i18n.baseText('settings.mcp.connectDialog.configure.description')"
+					>
+						<template #action>
+							<McpConfigSnippet
+								:class="$style['copy-field']"
+								:value="activeClient.configSnippet ?? ''"
+								@copy="trackCopy('config')"
+							/>
+						</template>
+					</N8nSettingsRow>
+				</template>
+			</N8nSettingsRowGroup>
+
+			<div v-else :class="$style['token-setup']" data-test-id="mcp-connect-token-setup">
+				<McpAccessTokenTab :server-url="serverUrl" @copied="handleTokenTabCopy" />
+			</div>
+		</div>
+	</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;
+}
+
+.tabs {
+	margin-bottom: var(--spacing--sm);
+}
+
+.picker-trigger {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing--2xs);
+}
+
+/* Give the menu room so client names (e.g. "Claude Code") never wrap. */
+.picker-menu {
+	min-width: 15rem;
+}
+
+.client-label {
+	white-space: nowrap;
+}
+
+.brand-icon {
+	width: 1em;
+	height: 1em;
+	flex: 0 0 auto;
+	font-size: var(--font-size--md);
+}
+
+.category {
+	display: block;
+	padding-block: var(--spacing--5xs);
+	font-size: var(--font-size--3xs);
+	font-weight: var(--font-weight--bold);
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--color--text--tint-1);
+}
+
+/* Vertical settings rows hug the action to its content; the copy fields
+   should span the full row width. */
+.copy-field {
+	width: 100%;
+}
+
+.token-setup {
+	margin-top: var(--spacing--2xs);
+}
+</style>

package/src/components/McpConnectedClientRow.test.ts

@@ -0,0 +1,86 @@
+import userEvent from '@testing-library/user-event';
+import { createTestingPinia } from '@pinia/testing';
+import { createComponentRenderer } from '@n8n/frontend-test-utils';
+import McpConnectedClientRow from './McpConnectedClientRow.vue';
+import { createOAuthClient } from '../mcp.test.utils';
+
+const createComponent = createComponentRenderer(McpConnectedClientRow, {
+	pinia: createTestingPinia(),
+	global: {
+		stubs: {
+			N8nTimeAgo: {
+				props: ['date'],
+				template: '<span>2 minutes ago</span>',
+			},
+		},
+	},
+});
+
+describe('McpConnectedClientRow', () => {
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('renders the client with its type, connection time and access summary', () => {
+		const { getByTestId } = createComponent({
+			props: {
+				client: createOAuthClient({
+					name: 'Cursor',
+					scopes: ['workflow:read', 'execution:read', 'workflow:write'],
+				}),
+			},
+		});
+
+		const row = getByTestId('mcp-client-preview-row');
+		expect(getByTestId('mcp-client-preview-name')).toHaveTextContent('Cursor');
+		expect(row).toHaveTextContent('IDE · Connected 2 minutes ago');
+		expect(getByTestId('mcp-client-preview-access')).toHaveTextContent(
+			'List workflows, Get execution details +1',
+		);
+	});
+
+	it('omits the type for clients without a recognized brand', () => {
+		const { getByTestId } = createComponent({
+			props: { client: createOAuthClient({ name: 'Some Unknown Client' }) },
+		});
+
+		expect(getByTestId('mcp-client-preview-row')).not.toHaveTextContent('·');
+		expect(getByTestId('mcp-client-preview-row')).toHaveTextContent('Connected 2 minutes ago');
+	});
+
+	it('reads a grant covering every offered scope as full access', () => {
+		const { getByTestId } = createComponent({
+			props: {
+				client: createOAuthClient({ scopes: ['workflow:read', 'execution:read'] }),
+				scopeTools: { 'workflow:read': ['list_workflows'], 'execution:read': ['get_execution'] },
+			},
+		});
+
+		expect(getByTestId('mcp-client-preview-access')).toHaveTextContent('Full access');
+	});
+
+	it('emits click when the row is activated', async () => {
+		const { getByTestId, emitted } = createComponent({
+			props: { client: createOAuthClient() },
+		});
+
+		await userEvent.click(getByTestId('mcp-client-preview-name'));
+
+		expect(emitted('click')).toHaveLength(1);
+		expect(emitted('revoke')).toBeUndefined();
+	});
+
+	it('emits revoke, and not click, when the revoke action is used', async () => {
+		const { getByTestId, emitted } = createComponent({
+			props: { client: createOAuthClient({ name: 'Claude Code' }) },
+		});
+
+		const button = getByTestId('mcp-client-preview-revoke-button');
+		expect(button).toHaveAccessibleName('Revoke access for Claude Code');
+
+		await userEvent.click(button);
+
+		expect(emitted('revoke')).toHaveLength(1);
+		expect(emitted('click')).toBeUndefined();
+	});
+});

package/src/components/McpConnectedClientRow.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { I18nT } from 'vue-i18n';
+import type { OAuthClientResponseDto } from '@n8n/api-types';
+import { N8nButton, N8nIcon, N8nSettingsRow, N8nText, N8nTimeAgo } from '@n8n/design-system';
+import { useI18n } from '@n8n/i18n';
+import type { BaseTextKey } from '@n8n/i18n';
+import { useRootStore } from '@n8n/stores/useRootStore';
+
+import { getAccessSummary, getClientBrand } from '../clients.utils';
+
+/**
+ * One of the current user's connected clients, previewed inline on the MCP
+ * settings overview. The row opens the client's details; the hover-revealed
+ * action starts the revoke flow.
+ */
+const props = defineProps<{
+	client: OAuthClientResponseDto;
+	/** Tool names each scope unlocks on this instance; decides when a grant reads as "Full access". */
+	scopeTools?: Record<string, string[]>;
+}>();
+
+const emit = defineEmits<{
+	click: [];
+	revoke: [];
+}>();
+
+const i18n = useI18n();
+const rootStore = useRootStore();
+
+const brand = computed(() => getClientBrand(props.client.name));
+
+const typeLabel = computed(() => {
+	const type = brand.value.type;
+	if (!type) return null;
+	return i18n.baseText(`settings.mcp.oAuthClients.clientType.${type}` as BaseTextKey);
+});
+
+const offeredScopes = computed(() =>
+	props.scopeTools ? Object.keys(props.scopeTools) : undefined,
+);
+
+const accessSummary = computed(() => getAccessSummary(i18n, props.client, offeredScopes.value));
+
+const grantedAt = computed(() => new Date(props.client.grantedAt).toISOString());
+
+// One translatable phrase per shape ("IDE · Connected 2 minutes ago" / "Connected
+// 2 minutes ago"), so locales own the separator and word order; the relative time
+// is a component, hence slot interpolation rather than a string.
+const metaKeypath = computed(() =>
+	typeLabel.value
+		? 'settings.mcp.connectedClients.preview.meta'
+		: 'settings.mcp.connectedClients.preview.metaWithoutType',
+);
+
+const revokeLabel = computed(() =>
+	i18n.baseText('settings.mcp.oAuthClients.table.action.revokeAccessFor', {
+		interpolate: { name: props.client.name },
+	}),
+);
+</script>
+
+<template>
+	<N8nSettingsRow
+		:title="client.name"
+		show-visual
+		clickable
+		reveal-actions-on-hover
+		data-test-id="mcp-client-preview-row"
+		@click="emit('click')"
+	>
+		<template #visual>
+			<span :class="$style.tile">
+				<component :is="brand.icon" v-if="brand.icon" :class="$style.icon" />
+				<N8nIcon v-else icon="mcp" :class="$style.icon" />
+			</span>
+		</template>
+		<template #info>
+			<div :class="$style.info">
+				<N8nText
+					bold
+					size="medium"
+					color="text-dark"
+					:class="$style.line"
+					data-test-id="mcp-client-preview-name"
+				>
+					{{ client.name }}
+				</N8nText>
+				<N8nText size="small" color="text-light" :class="$style.line">
+					<I18nT :keypath="metaKeypath" scope="global" tag="span">
+						<template v-if="typeLabel" #type>{{ typeLabel }}</template>
+						<template #timeAgo
+							><N8nTimeAgo :date="grantedAt" :locale="rootStore.defaultLocale"
+						/></template>
+					</I18nT>
+				</N8nText>
+				<N8nText
+					size="xsmall"
+					color="text-light"
+					:class="$style.line"
+					data-test-id="mcp-client-preview-access"
+				>
+					{{ accessSummary }}
+				</N8nText>
+			</div>
+		</template>
+		<template #action>
+			<N8nButton
+				variant="outline"
+				size="small"
+				:label="i18n.baseText('settings.mcp.oAuthClients.table.action.revokeAccess')"
+				:aria-label="revokeLabel"
+				data-test-id="mcp-client-preview-revoke-button"
+				@click="emit('revoke')"
+			/>
+		</template>
+	</N8nSettingsRow>
+</template>
+
+<style lang="scss" module>
+/* Fills the row's bordered visual box. Fixed white so dark brand marks stay visible on the dark theme. */
+.tile {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	background-color: var(--color--neutral-white);
+}
+
+.icon {
+	width: var(--spacing--md);
+	height: var(--spacing--md);
+	/* the tile is always white, so the fallback MCP glyph must stay dark in both themes */
+	color: var(--color--neutral-black);
+}
+
+/* Mirrors the row's own title/description stack so the extra access line slots in beneath them. */
+.info {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing--5xs);
+	min-width: 0;
+}
+
+.line {
+	display: block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+</style>