@n8n/frontend-module-mcp 0.1.0

package/src/components/tabs/WorkflowsTable.vue

@@ -0,0 +1,398 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useI18n } from '@n8n/i18n';
+import type { McpWorkflow } from '../../mcp.types';
+import type { TableHeader, TableOptions, UserAction } from '@n8n/design-system';
+import {
+	N8nActionToggle,
+	N8nButton,
+	N8nDataTableServer,
+	N8nIcon,
+	N8nLink,
+	N8nLoading,
+	N8nSelectedItemsInfo,
+	N8nText,
+	N8nTooltip,
+} from '@n8n/design-system';
+import { VIEWS } from '@n8n/frontend-constants/views';
+import { useRouter } from 'vue-router';
+import WorkflowLocation from '../WorkflowLocation.vue';
+import { MCP_TOOLTIP_DELAY } from '../../mcp.constants';
+import { getResourcePermissions } from '@n8n/permissions';
+
+type Props = {
+	workflows: McpWorkflow[];
+	totalCount?: number;
+	loading: boolean;
+};
+
+const props = defineProps<Props>();
+
+const tableOptions = defineModel<TableOptions>('tableOptions', {
+	default: () => ({
+		page: 0,
+		itemsPerPage: 10,
+		sortBy: [],
+	}),
+});
+
+const tablePage = computed({
+	get: () => tableOptions.value.page,
+	set: (page: number) => {
+		tableOptions.value = { ...tableOptions.value, page };
+	},
+});
+
+const tableItemsPerPage = computed({
+	get: () => tableOptions.value.itemsPerPage,
+	set: (itemsPerPage: number) => {
+		tableOptions.value = { ...tableOptions.value, itemsPerPage };
+	},
+});
+
+const tableSortBy = computed({
+	get: () => tableOptions.value.sortBy,
+	set: (sortBy: TableOptions['sortBy']) => {
+		tableOptions.value = { ...tableOptions.value, sortBy };
+	},
+});
+
+const emit = defineEmits<{
+	removeMcpAccess: [workflow: McpWorkflow];
+	bulkRemoveMcpAccess: [workflowIds: string[]];
+	connectWorkflows: [];
+	updateDescription: [workflow: McpWorkflow];
+	'update:options': [payload: TableOptions];
+}>();
+
+const i18n = useI18n();
+const router = useRouter();
+
+const itemsLength = computed(() => props.totalCount ?? props.workflows.length);
+
+const selectedWorkflowIds = ref<string[]>([]);
+
+// Selection references loaded rows, so any data reload invalidates it
+watch(
+	() => props.workflows,
+	() => {
+		selectedWorkflowIds.value = [];
+	},
+);
+
+const isRowSelectable = (workflow: McpWorkflow) =>
+	!!getResourcePermissions(workflow.scopes).workflow.update;
+
+const clearSelection = () => {
+	selectedWorkflowIds.value = [];
+};
+
+const onBulkRemoveMcpAccess = () => {
+	emit('bulkRemoveMcpAccess', selectedWorkflowIds.value);
+};
+
+const tableHeaders = ref<Array<TableHeader<McpWorkflow>>>([
+	{
+		title: i18n.baseText('settings.mcp.workflows.table.column.name'),
+		key: 'workflow',
+		width: 150,
+		disableSort: true,
+		value() {
+			return;
+		},
+	},
+	{
+		title: i18n.baseText('settings.mcp.workflows.table.column.location'),
+		key: 'location',
+		width: 200,
+		disableSort: true,
+		value() {
+			return;
+		},
+	},
+	{
+		title: i18n.baseText('generic.description'),
+		key: 'description',
+		width: 350,
+		disableSort: true,
+		value() {
+			return;
+		},
+	},
+	{
+		title: '',
+		key: 'actions',
+		align: 'end',
+		width: 50,
+		disableSort: true,
+		value() {
+			return;
+		},
+	},
+]);
+
+const getAvailableActions = (workflow: McpWorkflow): Array<UserAction<McpWorkflow>> => {
+	const permissions = getResourcePermissions(workflow.scopes);
+
+	return [
+		{
+			label: i18n.baseText('settings.mcp.workflows.table.action.removeMCPAccess'),
+			value: 'removeFromMCP',
+			disabled: !permissions.workflow.update,
+		},
+		{
+			label: i18n.baseText('settings.mcp.workflows.table.action.updateDescription'),
+			value: 'updateDescription',
+			disabled: !permissions.workflow.update,
+		},
+	];
+};
+
+const onWorkflowAction = (action: string, workflow: McpWorkflow) => {
+	switch (action) {
+		case 'removeFromMCP':
+			emit('removeMcpAccess', workflow);
+			break;
+		case 'updateDescription':
+			emit('updateDescription', workflow);
+			break;
+		default:
+			break;
+	}
+};
+
+const onConnectClick = () => {
+	emit('connectWorkflows');
+};
+</script>
+
+<template>
+	<div>
+		<div v-if="props.loading">
+			<N8nLoading :loading="props.loading" variant="h1" class="mb-l" />
+			<N8nLoading :loading="props.loading" variant="p" :rows="5" :shrink-last="false" />
+		</div>
+		<div v-else class="mt-s mb-xl" :class="$style['table-container']">
+			<N8nDataTableServer
+				v-model:sort-by="tableSortBy"
+				v-model:page="tablePage"
+				v-model:items-per-page="tableItemsPerPage"
+				v-model:selection="selectedWorkflowIds"
+				:class="$style['workflow-table']"
+				data-test-id="mcp-workflow-table"
+				:headers="tableHeaders"
+				:items="props.workflows"
+				:items-length="itemsLength"
+				:page-sizes="[10, 25, 50]"
+				:show-select="itemsLength > 0"
+				:item-selectable="isRowSelectable"
+				@update:options="emit('update:options', $event)"
+			>
+				<template v-if="itemsLength === 0" #cover>
+					<div :class="$style['empty-state']">
+						<N8nText data-test-id="mcp-workflow-table-empty-state" size="large" color="text-base">
+							{{ i18n.baseText('settings.mcp.workflows.table.empty.title') }}
+						</N8nText>
+						<N8nText
+							data-test-id="mcp-workflow-table-empty-state-description"
+							size="small"
+							color="text-base"
+						>
+							{{ i18n.baseText('settings.mcp.workflows.table.empty.description') }}
+						</N8nText>
+						<N8nButton
+							variant="solid"
+							data-test-id="mcp-workflow-table-empty-state-button"
+							:label="i18n.baseText('settings.mcp.connectWorkflows')"
+							@click="onConnectClick"
+						/>
+					</div>
+				</template>
+				<template #[`item.workflow`]="{ item }">
+					<div :class="$style['workflow-cell']" data-test-id="mcp-workflow-cell">
+						<N8nLink
+							data-test-id="mcp-workflow-name-link"
+							:new-window="true"
+							:to="
+								router.resolve({
+									name: VIEWS.WORKFLOW,
+									params: { workflowId: item.id },
+								}).fullPath
+							"
+							:theme="'text'"
+							:class="[$style['table-link'], $style.truncate]"
+						>
+							<N8nText :class="$style.truncate" data-test-id="mcp-workflow-name">{{
+								item.name
+							}}</N8nText>
+						</N8nLink>
+					</div>
+				</template>
+				<template #[`item.location`]="{ item }">
+					<div :class="$style['location-cell']" data-test-id="mcp-workflow-location-cell">
+						<WorkflowLocation
+							:workflow-id="item.id"
+							:home-project="item.homeProject"
+							:parent-folder="item.parentFolder"
+							:as-links="true"
+						/>
+					</div>
+				</template>
+				<template #[`item.description`]="{ item }">
+					<!-- as-child anchors the tooltip to the cell content itself, keeping it
+						above the cell instead of positioning against an inline wrapper span -->
+					<N8nTooltip
+						:content="
+							item.description
+								? i18n.baseText('settings.mcp.workflows.table.column.description.editTooltip')
+								: i18n.baseText('settings.mcp.workflows.table.column.description.emptyTooltip')
+						"
+						:show-after="MCP_TOOLTIP_DELAY"
+						as-child
+					>
+						<div
+							data-test-id="mcp-workflow-description-cell"
+							:class="$style['description-cell']"
+							@click="emit('updateDescription', item)"
+						>
+							<N8nText
+								v-if="item.description"
+								:class="$style['description-text']"
+								data-test-id="mcp-workflow-description"
+							>
+								{{ item.description }}
+							</N8nText>
+							<span v-else :class="$style['empty-description']">
+								<N8nIcon icon="triangle-alert" :size="14" color="warning" class="mr-2xs" />
+								<N8nText data-test-id="mcp-workflow-description-empty">
+									{{
+										i18n.baseText('settings.mcp.workflows.table.column.description.emptyContent')
+									}}
+								</N8nText>
+							</span>
+						</div>
+					</N8nTooltip>
+				</template>
+				<template #[`item.actions`]="{ item }">
+					<N8nActionToggle
+						:class="$style['action-toggle']"
+						data-test-id="mcp-workflow-action-toggle"
+						placement="bottom"
+						:actions="getAvailableActions(item)"
+						theme="dark"
+						@action="onWorkflowAction($event, item)"
+					/>
+				</template>
+			</N8nDataTableServer>
+			<N8nSelectedItemsInfo
+				:class="$style['selection-bar']"
+				:selected-count="selectedWorkflowIds.length"
+				@clear-selection="clearSelection"
+			>
+				<template #actions>
+					<N8nButton
+						variant="subtle"
+						data-test-id="mcp-bulk-remove-access-button"
+						:label="i18n.baseText('settings.mcp.workflows.table.action.removeMCPAccess')"
+						@click="onBulkRemoveMcpAccess"
+					/>
+				</template>
+			</N8nSelectedItemsInfo>
+		</div>
+	</div>
+</template>
+
+<style module lang="scss">
+.header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+// The selection bar's default absolute positioning assumes a tall anchor
+// container and overlaps the header when the table is short. Sticky keeps
+// it below the table, floating at the viewport bottom only while a long
+// table extends past it.
+.table-container .selection-bar {
+	position: sticky;
+	bottom: var(--spacing--3xl);
+	left: auto;
+	transform: none;
+	width: fit-content;
+	margin: 0 auto;
+}
+
+.workflow-table {
+	margin-bottom: var(--spacing--sm);
+
+	:global(.table-scroll) {
+		overflow-y: hidden;
+	}
+
+	tr:last-child {
+		border-bottom: none !important;
+	}
+}
+
+.empty-state {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--spacing--sm);
+	padding: var(--spacing--lg) 0;
+	min-height: 250px;
+}
+
+.workflow-cell {
+	display: flex;
+	padding: var(--spacing--2xs) 0;
+	min-width: 0;
+	overflow: hidden;
+}
+
+.location-cell {
+	padding: var(--spacing--2xs) 0;
+}
+
+.description-cell {
+	// Shrink to the text so the tooltip is anchored near it, not centered on the column
+	display: inline-block;
+	max-width: 100%;
+	color: var(--color--text);
+	padding: var(--spacing--2xs) 0;
+	cursor: pointer;
+
+	&:hover span {
+		color: var(--color--text--shade-1);
+	}
+}
+
+// Line clamping only works on inline content, so it has to live on the
+// text element itself rather than on a wrapper with non-inline children
+.description-text {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 3;
+	line-clamp: 3;
+	overflow: hidden;
+	word-break: break-word;
+}
+
+.empty-description {
+	display: flex;
+	align-items: center;
+}
+
+.table-link {
+	color: var(--color--text);
+}
+
+.truncate {
+	display: block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	min-width: 0;
+}
+</style>

package/src/composables/useMcp.test.ts

@@ -0,0 +1,59 @@
+import { TELEMETRY_EVENT } from '@n8n/telemetry';
+
+import { useMcp } from './useMcp';
+
+const { trackSpy } = vi.hoisted(() => ({ trackSpy: vi.fn() }));
+
+vi.mock('@n8n/composables/useTelemetry', () => ({
+	useTelemetry: () => ({ track: trackSpy }),
+}));
+
+describe('useMcp', () => {
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('should report where the connect dialog was opened from', () => {
+		useMcp().trackConnectClientClicked('settings');
+
+		expect(trackSpy).toHaveBeenCalledWith(TELEMETRY_EVENT.MCP.USER_CLICKED_CONNECT_CLIENT, {
+			source: 'settings',
+		});
+	});
+
+	it('should track the instance-wide clients view', () => {
+		useMcp().trackViewedAllClients();
+
+		expect(trackSpy).toHaveBeenCalledWith(TELEMETRY_EVENT.MCP.USER_VIEWED_ALL_MCP_CLIENTS, {});
+	});
+
+	it('should resolve brand and type from the revoked client name', () => {
+		useMcp().trackClientAccessRevoked({
+			clientId: 'client-1',
+			clientName: 'Cursor',
+			revokedForOther: false,
+		});
+
+		expect(trackSpy).toHaveBeenCalledWith(TELEMETRY_EVENT.MCP.USER_REVOKED_MCP_CLIENT_ACCESS, {
+			client_id: 'client-1',
+			client_brand: 'cursor',
+			client_type: 'ide',
+			revoked_for_other: false,
+		});
+	});
+
+	it('should send null brand and type for a client name matching no known brand', () => {
+		useMcp().trackClientAccessRevoked({
+			clientId: 'client-2',
+			clientName: 'some-in-house-agent',
+			revokedForOther: true,
+		});
+
+		expect(trackSpy).toHaveBeenCalledWith(TELEMETRY_EVENT.MCP.USER_REVOKED_MCP_CLIENT_ACCESS, {
+			client_id: 'client-2',
+			client_brand: null,
+			client_type: null,
+			revoked_for_other: true,
+		});
+	});
+});

package/src/composables/useMcp.ts

@@ -0,0 +1,61 @@
+import { useTelemetry } from '@n8n/composables/useTelemetry';
+import { TELEMETRY_EVENT } from '@n8n/telemetry';
+import { getMcpClientBrand, getMcpClientType } from '@n8n/api-types';
+
+export function useMcp() {
+	const telemetry = useTelemetry();
+
+	const trackMcpAccessEnabledForWorkflow = (workflowId: string) => {
+		telemetry.track(TELEMETRY_EVENT.MCP.USER_GAVE_MCP_ACCESS_TO_WORKFLOW, {
+			workflow_id: workflowId,
+		});
+	};
+
+	const trackMcpAccessEnabledForAgent = (agentId: string) => {
+		telemetry.track(TELEMETRY_EVENT.AGENTS.USER_GAVE_MCP_ACCESS_TO_AGENT, { agent_id: agentId });
+	};
+
+	const trackUserToggledMcpAccess = (enabled: boolean) => {
+		telemetry.track(TELEMETRY_EVENT.MCP.USER_TOGGLED_MCP_ACCESS, { state: enabled });
+	};
+
+	const trackAutoExposeToggled = ({
+		enabled,
+		source,
+	}: { enabled: boolean; source: 'settings' | 'expose_all' }) => {
+		telemetry.track(TELEMETRY_EVENT.MCP.AUTO_EXPOSE_NEW_WORKFLOWS_TOGGLED, { enabled, source });
+	};
+
+	const trackConnectClientClicked = (source: 'settings') => {
+		telemetry.track(TELEMETRY_EVENT.MCP.USER_CLICKED_CONNECT_CLIENT, { source });
+	};
+
+	const trackViewedAllClients = () => {
+		telemetry.track(TELEMETRY_EVENT.MCP.USER_VIEWED_ALL_MCP_CLIENTS, {});
+	};
+
+	// Brand and type come from the client's self-registered name, so the revoke
+	// can be segmented the same way the connect dialog's client slug is.
+	const trackClientAccessRevoked = ({
+		clientId,
+		clientName,
+		revokedForOther,
+	}: { clientId: string; clientName: string; revokedForOther: boolean }) => {
+		telemetry.track(TELEMETRY_EVENT.MCP.USER_REVOKED_MCP_CLIENT_ACCESS, {
+			client_id: clientId,
+			client_brand: getMcpClientBrand(clientName),
+			client_type: getMcpClientType(clientName),
+			revoked_for_other: revokedForOther,
+		});
+	};
+
+	return {
+		trackMcpAccessEnabledForWorkflow,
+		trackMcpAccessEnabledForAgent,
+		trackUserToggledMcpAccess,
+		trackAutoExposeToggled,
+		trackConnectClientClicked,
+		trackViewedAllClients,
+		trackClientAccessRevoked,
+	};
+}

package/src/composables/useOAuthClientRevoke.ts

@@ -0,0 +1,90 @@
+import { ref } from 'vue';
+import type { OAuthClientResponseDto } from '@n8n/api-types';
+import { useI18n } from '@n8n/i18n';
+import { useToast } from '@n8n/composables/useToast';
+import { useUsersStore } from '@n8n/stores/users.store';
+
+import { useMcp } from './useMcp';
+import { useMCPStore } from '../mcp.store';
+
+/**
+ * The confirm-then-revoke flow for a connected client, shared by the settings
+ * overview and the clients page. `requestRevoke` opens the confirmation (the
+ * pending client is the dialog's `open` state), `confirmRevoke` performs the
+ * revoke and reports it, `cancelRevoke` dismisses.
+ *
+ * `onRevoked` runs after a successful revoke so the caller can refresh its own
+ * view of the data. It owns its error handling: the revoke already succeeded,
+ * so a failed refresh must not be reported as a failed revoke.
+ *
+ * `refreshList` (default true) refetches the clients page's list after the
+ * revoke. Callers that don't render that list (the overview) turn it off and
+ * refresh their own data in `onRevoked`, so the list's persisted ownership and
+ * filters are never requested from a page that doesn't show them.
+ */
+export function useOAuthClientRevoke(
+	options: { onRevoked?: () => Promise<void> | void; refreshList?: boolean } = {},
+) {
+	const i18n = useI18n();
+	const toast = useToast();
+	const mcp = useMcp();
+	const mcpStore = useMCPStore();
+	const usersStore = useUsersStore();
+
+	const revokeClient = ref<OAuthClientResponseDto | null>(null);
+	const revoking = ref(false);
+
+	/** An admin revoking someone else's grant rather than their own. */
+	const isRevokingForOther = (client: OAuthClientResponseDto) =>
+		!!client.owner && client.owner.id !== usersStore.currentUser?.id;
+
+	const requestRevoke = (client: OAuthClientResponseDto) => {
+		revokeClient.value = client;
+	};
+
+	const cancelRevoke = () => {
+		revokeClient.value = null;
+	};
+
+	const confirmRevoke = async () => {
+		const client = revokeClient.value;
+		if (!client) return;
+		let revoked = false;
+		try {
+			revoking.value = true;
+			await mcpStore.removeOAuthClient(client.id, client.owner?.id, {
+				refreshList: options.refreshList ?? true,
+			});
+			revoked = true;
+			mcp.trackClientAccessRevoked({
+				clientId: client.id,
+				clientName: client.name,
+				revokedForOther: isRevokingForOther(client),
+			});
+			toast.showMessage({
+				type: 'success',
+				title: i18n.baseText('settings.mcp.oAuthClients.revoke.success.title'),
+				message: i18n.baseText('settings.mcp.oAuthClients.revoke.success.message', {
+					interpolate: { name: client.name },
+				}),
+			});
+		} catch (error) {
+			toast.showError(error, i18n.baseText('settings.mcp.oAuthClients.revoke.error'));
+		} finally {
+			revoking.value = false;
+			revokeClient.value = null;
+		}
+		if (revoked) {
+			await options.onRevoked?.();
+		}
+	};
+
+	return {
+		revokeClient,
+		revoking,
+		isRevokingForOther,
+		requestRevoke,
+		cancelRevoke,
+		confirmRevoke,
+	};
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+// The module's public entry for consumers. The shell imports the descriptor from
+// `./mcp.module` instead, so the boot chunk does not pull in the store and the
+// components below.
+export { useMCPStore } from './mcp.store';
+export { useMcp } from './composables/useMcp';
+export type { ToggleWorkflowsMcpAccessResponse } from './mcp.api';
+export { MCP_DOCS_PAGE_URL, MCP_SCOPE_GROUPS, MCP_SETTINGS_VIEW } from './mcp.constants';
+export { getClientBrand } from './clients.utils';
+export { default as McpAccessToggle } from './components/McpAccessToggle.vue';
+export { default as McpClientLogoCards } from './components/McpClientLogoCards.vue';

package/src/mcp.api.test.ts

@@ -0,0 +1,81 @@
+import type { IRestApiContext } from '@n8n/rest-api-client';
+import { getFullApiResponse, makeRestApiRequest } from '@n8n/rest-api-client';
+
+import { fetchMcpAgents, fetchMcpExposedWorkflows, updateMcpSettings } from './mcp.api';
+
+vi.mock('@n8n/rest-api-client', () => ({
+	getFullApiResponse: vi.fn(),
+	makeRestApiRequest: vi.fn(),
+}));
+
+describe('fetchMcpAgents', () => {
+	const context = {} as IRestApiContext;
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+		vi.mocked(getFullApiResponse).mockResolvedValue({ count: 0, data: [] });
+	});
+
+	it('omits the filter for a whitespace-only query', async () => {
+		await fetchMcpAgents(context, { take: 10, query: '   ' });
+
+		expect(getFullApiResponse).toHaveBeenCalledWith(context, 'GET', '/mcp/agents', {
+			take: 10,
+		});
+	});
+
+	it('trims a non-empty query', async () => {
+		await fetchMcpAgents(context, { query: ' sales ' });
+
+		expect(getFullApiResponse).toHaveBeenCalledWith(context, 'GET', '/mcp/agents', {
+			filter: JSON.stringify({ query: 'sales' }),
+		});
+	});
+
+	it('serializes the MCP availability filter', async () => {
+		await fetchMcpAgents(context, { availableInMCP: true });
+
+		expect(getFullApiResponse).toHaveBeenCalledWith(context, 'GET', '/mcp/agents', {
+			filter: JSON.stringify({ availableInMCP: true }),
+		});
+	});
+});
+
+describe('fetchMcpExposedWorkflows', () => {
+	const context = {} as IRestApiContext;
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+		vi.mocked(getFullApiResponse).mockResolvedValue({ count: 0, data: [] });
+	});
+
+	it('queries the generic workflow list for the exposed page', async () => {
+		await fetchMcpExposedWorkflows(context, { skip: 25, take: 25 });
+
+		expect(getFullApiResponse).toHaveBeenCalledWith(context, 'GET', '/workflows', {
+			includeScopes: true,
+			filter: { isArchived: false, availableInMCP: true },
+			skip: 25,
+			take: 25,
+			sortBy: 'updatedAt:desc',
+		});
+	});
+});
+
+describe('updateMcpSettings', () => {
+	const context = {} as IRestApiContext;
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('sends the given settings as the PATCH body', async () => {
+		vi.mocked(makeRestApiRequest).mockResolvedValue({ mcpAccessEnabled: true });
+
+		await updateMcpSettings(context, { mcpAccessEnabled: true });
+
+		expect(makeRestApiRequest).toHaveBeenCalledWith(context, 'PATCH', '/mcp/settings', {
+			mcpAccessEnabled: true,
+		});
+	});
+});