@n8n/frontend-module-mcp 0.1.0

package/LICENSE.md

@@ -0,0 +1,88 @@
+# License
+
+Portions of this software are licensed as follows:
+
+- Content of branches other than the main branch (i.e. "master") are not licensed.
+- Source code files that contain ".ee." in their filename or ".ee" in their dirname are NOT licensed under
+  the Sustainable Use License.
+  To use source code files that contain ".ee." in their filename or ".ee" in their dirname you must hold a
+	valid n8n Enterprise License specifically allowing you access to such source code files and as defined
+	in "LICENSE_EE.md".
+- All third party components incorporated into the n8n Software are licensed under the original license
+  provided by the owner of the applicable component.
+- Content outside of the above mentioned files or restrictions is available under the "Sustainable Use
+  License" as defined below.
+
+## Sustainable Use License
+
+Version 1.0
+
+### Acceptance
+
+By using the software, you agree to all of the terms and conditions below.
+
+### Copyright License
+
+The licensor grants you a non-exclusive, royalty-free, worldwide, non-sublicensable, non-transferable license
+to use, copy, distribute, make available, and prepare derivative works of the software, in each case subject
+to the limitations below.
+
+### Limitations
+
+You may use or modify the software only for your own internal business purposes or for non-commercial or
+personal use. You may distribute the software or provide it to others only if you do so free of charge for
+non-commercial purposes. You may not alter, remove, or obscure any licensing, copyright, or other notices of
+the licensor in the software. Any use of the licensor’s trademarks is subject to applicable law.
+
+### Patents
+
+The licensor grants you a license, under any patent claims the licensor can license, or becomes able to
+license, to make, have made, use, sell, offer for sale, import and have imported the software, in each case
+subject to the limitations and conditions in this license. This license does not cover any patent claims that
+you cause to be infringed by modifications or additions to the software. If you or your company make any
+written claim that the software infringes or contributes to infringement of any patent, your patent license
+for the software granted under these terms ends immediately. If your company makes such a claim, your patent
+license ends immediately for work on behalf of your company.
+
+### Notices
+
+You must ensure that anyone who gets a copy of any part of the software from you also gets a copy of these
+terms. If you modify the software, you must include in any modified copies of the software a prominent notice
+stating that you have modified the software.
+
+### No Other Rights
+
+These terms do not imply any licenses other than those expressly granted in these terms.
+
+### Termination
+
+If you use the software in violation of these terms, such use is not licensed, and your license will
+automatically terminate. If the licensor provides you with a notice of your violation, and you cease all
+violation of this license no later than 30 days after you receive that notice, your license will be reinstated
+retroactively. However, if you violate these terms after such reinstatement, any additional violation of these
+terms will cause your license to terminate automatically and permanently.
+
+### No Liability
+
+As far as the law allows, the software comes as is, without any warranty or condition, and the licensor will
+not be liable to you for any damages arising out of these terms or the use or nature of the software, under
+any kind of legal claim.
+
+### Definitions
+
+The “licensor” is the entity offering these terms.
+
+The “software” is the software the licensor makes available under these terms, including any portion of it.
+
+“You” refers to the individual or entity agreeing to these terms.
+
+“Your company” is any legal entity, sole proprietorship, or other kind of organization that you work for, plus
+all organizations that have control over, are under the control of, or are under common control with that
+organization. Control means ownership of substantially all the assets of an entity, or the power to direct its
+management and policies by vote, contract, or otherwise. Control can be direct or indirect.
+
+“Your license” is the license granted to you for the software under these terms.
+
+“Use” means anything you do with the software requiring your license.
+
+“Trademark” means trademarks, service marks, and similar rights.

package/README.md

@@ -0,0 +1,51 @@
+# @n8n/frontend-module-mcp
+
+Frontend feature module. Consumed from source by the editor-ui shell through
+`src/app/modules.manifest.ts`; there is no build step and no `dist`.
+
+Read the full guide at `packages/@n8n/module-cli/frontend-module-guide.md`. It gives the
+descriptor contract, the registration points and the known problems. This README gives a
+summary only.
+
+```bash
+pnpm turbo typecheck --filter=@n8n/frontend-module-mcp
+pnpm turbo lint --filter=@n8n/frontend-module-mcp
+pnpm turbo lint:styles --filter=@n8n/frontend-module-mcp
+pnpm turbo test --filter=@n8n/frontend-module-mcp
+```
+
+Go through turbo, not `pnpm --filter <pkg> typecheck`: this package is consumed
+from source, and on a cold tree its platform dependencies have not been built
+yet. Turbo builds them first; the bare pnpm form does not.
+
+## Import rules
+
+- Depend on L0–L2 platform packages only. The full list is in "Imports and
+  boundaries" in the guide. Never import another `@n8n/frontend-module-*`, and
+  never import `@/…` from the shell.
+- `@n8n/stores`, `@n8n/composables`, `@n8n/frontend-constants` and
+  `@n8n/utils` are **subpath-only** — import `@n8n/stores/settings.store`, not
+  `@n8n/stores`.
+- The no-cross-module rule is currently a convention: the shared tsconfig base
+  omits sibling modules from `paths`, which blocks an accidental import but not
+  a deliberate one (declaring the dependency makes it typecheck clean). The
+  CAT-3692 tracks the ESLint rule that will enforce it.
+
+## Adding UI
+
+`vite.config.ts` already carries the three plugins a design-system consumer
+needs, so a `.vue` file compiles in tests without further setup:
+
+- `@vitejs/plugin-vue` — single-file components.
+- `unplugin-icons` — the `~icons/lucide/*` virtual modules behind `N8nIcon`.
+- `vite-svg-loader` — design-system's `custom/*.svg` icon components. Without
+  it an `.svg` import is a data-URI string, which Vue renders as a tag name.
+
+`src/__tests__/design-system-icons.test.ts` renders one icon of each kind, so a
+plugin dropped from `vite.config.ts` fails this package's own suite. Keep that
+test while the module renders any design-system component.
+
+SCSS goes in a scoped `<style lang="scss">` block, with tokens from
+design-system — `stylelint.config.mjs` holds this package to the same rules the
+shell uses. Route components must load lazily — see the note in
+`src/mcp.module.ts`.

package/biome.jsonc

@@ -0,0 +1,4 @@
+{
+	"$schema": "../../../../node_modules/@biomejs/biome/configuration_schema.json",
+	"extends": ["../../../../biome.jsonc"]
+}

package/eslint.config.mjs

@@ -0,0 +1,4 @@
+import { defineConfig } from 'eslint/config';
+import { frontendConfig } from '@n8n/eslint-config/frontend';
+
+export default defineConfig(frontendConfig);

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@n8n/frontend-module-mcp",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./mcp.module": "./src/mcp.module.ts"
+  },
+  "dependencies": {
+    "@n8n/api-types": "1.43.0",
+    "@n8n/composables": "1.33.0",
+    "@n8n/design-system": "2.42.0",
+    "@n8n/frontend-constants": "0.9.0",
+    "@n8n/frontend-module-sdk": "0.13.0",
+    "@n8n/i18n": "2.43.0",
+    "@n8n/permissions": "0.80.0",
+    "@n8n/rest-api-client": "2.43.0",
+    "@n8n/stores": "2.43.0",
+    "@n8n/telemetry": "1.11.0",
+    "@n8n/utils": "1.50.0",
+    "element-plus": "2.4.3",
+    "lodash": "4.18.1",
+    "n8n-workflow": "2.43.0",
+    "pinia": "^2.2.4",
+    "reka-ui": "^2.5.0",
+    "vue": "^3.5.13",
+    "vue-i18n": "^11.4.4",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@iconify/json": "^2.2.488",
+    "@n8n/eslint-config": "0.0.1",
+    "@n8n/frontend-test-utils": "0.1.0",
+    "@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",
+    "@pinia/testing": "^0.1.6",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/user-event": "^14.6.1",
+    "@testing-library/vue": "^8.1.0",
+    "@types/lodash": "4.17.17",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vitest/coverage-v8": "5.0.1",
+    "eslint": "9.29.0",
+    "jsdom": "23.0.1",
+    "stylelint": "^16.23.0",
+    "typescript": "6.0.2",
+    "unplugin-icons": "^23.0.1",
+    "vite": "^8.0.2",
+    "vite-svg-loader": "5.1.0",
+    "vitest": "5.0.1",
+    "vitest-mock-extended": "^3.1.0",
+    "vue-tsc": "^2.2.8"
+  },
+  "license": "LicenseRef-n8n-sustainable-use",
+  "scripts": {
+    "clean": "rimraf .turbo",
+    "typecheck": "vue-tsc --noEmit",
+    "test": "vitest run",
+    "test:changed": "janitor test-scoped",
+    "test:dev": "vitest",
+    "lint": "eslint src --quiet",
+    "lint:fix": "eslint src --fix",
+    "lint:styles": "stylelint \"src/**/*.{scss,sass,vue}\" --cache --allow-empty-input",
+    "lint:styles:fix": "stylelint \"src/**/*.{scss,sass,vue}\" --fix --cache --allow-empty-input",
+    "format": "biome format --write . && prettier --write . --ignore-path ../../../../.prettierignore",
+    "format:check": "biome ci . && prettier --check . --ignore-path ../../../../.prettierignore"
+  }
+}

package/src/SettingsMCPAgentsView.test.ts

@@ -0,0 +1,256 @@
+import { nextTick } from 'vue';
+import { createTestingPinia } from '@pinia/testing';
+import { waitFor } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { createComponentRenderer, mockedStore, type MockedStore } from '@n8n/frontend-test-utils';
+import SettingsMCPAgentsView from './SettingsMCPAgentsView.vue';
+import { useMCPStore } from './mcp.store';
+import { useSettingsStore } from '@n8n/stores/settings.store';
+import type { FrontendSettings } from '@n8n/api-types';
+import { MCP_SETTINGS_VIEW } from './mcp.constants';
+import type { McpAgent } from './mcp.types';
+
+const { routerPush, routerReplace } = vi.hoisted(() => ({
+	routerPush: vi.fn(),
+	routerReplace: vi.fn(),
+}));
+
+vi.mock('vue-router', async (importOriginal) => ({
+	...(await importOriginal()),
+	useRouter: () => ({ push: routerPush, replace: routerReplace }),
+	useRoute: vi.fn(() => ({
+		params: {},
+	})),
+	RouterLink: {
+		template: '<a><slot /></a>',
+	},
+}));
+
+vi.mock('@n8n/composables/useDocumentTitle', () => ({
+	useDocumentTitle: () => ({
+		set: vi.fn(),
+	}),
+}));
+
+let pinia: ReturnType<typeof createTestingPinia>;
+let mcpStore: MockedStore<typeof useMCPStore>;
+let settingsStore: MockedStore<typeof useSettingsStore>;
+
+const createComponent = createComponentRenderer(SettingsMCPAgentsView, {
+	global: {
+		stubs: {
+			AgentsTable: {
+				inheritAttrs: true,
+				template:
+					'<div><button data-test-id="agents-table-page-2" @click="$emit(\'update:options\', { page: 1, itemsPerPage: 10, sortBy: [] })">Page 2</button><button data-test-id="agents-table-page-size-50" @click="$emit(\'update:options\', { page: 3, itemsPerPage: 50, sortBy: [] })">Page size 50</button><button data-test-id="agents-table-bulk-remove" @click="$emit(\'bulkRemoveMcpAccess\', [\'agent-1\', \'agent-2\'])">Bulk remove</button>Agents Table</div>',
+			},
+			MCPConnectAgentsModal: {
+				props: ['open', 'enableMcpAccess'],
+				template:
+					'<div v-if="open" data-test-id="mcp-connect-agents-dialog-stub"><button data-test-id="stub-enable-access" @click="enableMcpAccess([\'agent-1\', \'agent-2\'])">Enable</button></div>',
+			},
+		},
+	},
+});
+
+const createAgent = (overrides: Partial<McpAgent> = {}): McpAgent => ({
+	id: 'agent-1',
+	name: 'My Agent',
+	projectId: 'project-1',
+	...overrides,
+});
+
+const agentPage = (data: McpAgent[] = []) => ({ data, count: data.length });
+
+const mockAgentPages = (data: McpAgent[] = []) => {
+	mcpStore.fetchAgentsAvailableForMCPPage.mockImplementation(async (page: number) => ({
+		...agentPage(data),
+		page,
+	}));
+};
+
+describe('SettingsMCPAgentsView', () => {
+	beforeEach(() => {
+		pinia = createTestingPinia();
+		mcpStore = mockedStore(useMCPStore);
+		settingsStore = mockedStore(useSettingsStore);
+
+		settingsStore.settings = {
+			enterprise: {},
+		} as FrontendSettings;
+
+		settingsStore.moduleSettings = {
+			mcp: {
+				mcpAccessEnabled: true,
+				mcpManagedByEnv: false,
+				autoExposeNewWorkflows: false,
+			},
+		};
+		settingsStore.isAgentsEnabled = true;
+
+		mockAgentPages();
+	});
+
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('should redirect to the MCP settings view when MCP is disabled', async () => {
+		settingsStore.moduleSettings = {
+			mcp: {
+				mcpAccessEnabled: false,
+				mcpManagedByEnv: false,
+				autoExposeNewWorkflows: false,
+			},
+		};
+
+		createComponent({ pinia });
+		await nextTick();
+
+		expect(routerReplace).toHaveBeenCalledWith({ name: MCP_SETTINGS_VIEW });
+		expect(mcpStore.fetchAgentsAvailableForMCPPage).not.toHaveBeenCalled();
+	});
+
+	it('should redirect to the MCP settings view when agents are disabled', async () => {
+		settingsStore.isAgentsEnabled = false;
+
+		createComponent({ pinia });
+		await nextTick();
+
+		expect(routerReplace).toHaveBeenCalledWith({ name: MCP_SETTINGS_VIEW });
+		expect(mcpStore.fetchAgentsAvailableForMCPPage).not.toHaveBeenCalled();
+	});
+
+	describe('Agent pagination', () => {
+		beforeEach(() => {
+			mockAgentPages([createAgent({ id: '1', name: 'Agent 1' })]);
+		});
+
+		it('should fetch the first agent page on mount', async () => {
+			createComponent({ pinia });
+
+			await waitFor(() => {
+				expect(mcpStore.fetchAgentsAvailableForMCPPage).toHaveBeenCalledWith(1, 10);
+			});
+		});
+
+		it('should fetch the selected agent page when table options change', async () => {
+			const { getByTestId } = createComponent({ pinia });
+
+			await waitFor(() => {
+				expect(mcpStore.fetchAgentsAvailableForMCPPage).toHaveBeenCalledWith(1, 10);
+			});
+			mcpStore.fetchAgentsAvailableForMCPPage.mockClear();
+
+			await userEvent.click(getByTestId('agents-table-page-2'));
+
+			await waitFor(() => {
+				expect(mcpStore.fetchAgentsAvailableForMCPPage).toHaveBeenCalledWith(2, 10);
+			});
+		});
+
+		it('should reset to first page when agent table page size changes', async () => {
+			const { getByTestId } = createComponent({ pinia });
+
+			await waitFor(() => {
+				expect(mcpStore.fetchAgentsAvailableForMCPPage).toHaveBeenCalledWith(1, 10);
+			});
+			mcpStore.fetchAgentsAvailableForMCPPage.mockClear();
+
+			await userEvent.click(getByTestId('agents-table-page-size-50'));
+
+			await waitFor(() => {
+				expect(mcpStore.fetchAgentsAvailableForMCPPage).toHaveBeenCalledWith(1, 50);
+			});
+		});
+	});
+
+	describe('Connect Agents button', () => {
+		it('should not show the button when there are no agents', async () => {
+			mockAgentPages();
+
+			const { queryByTestId } = createComponent({ pinia });
+
+			await waitFor(() => {
+				expect(queryByTestId('mcp-connect-agents-header-button')).not.toBeInTheDocument();
+			});
+		});
+
+		it('should open the Connect Agents modal when the button is clicked', async () => {
+			mockAgentPages([createAgent({ id: '1', name: 'Agent 1' })]);
+
+			const { getByTestId } = createComponent({ pinia });
+
+			await waitFor(() => {
+				expect(getByTestId('mcp-connect-agents-header-button')).toBeVisible();
+			});
+			await userEvent.click(getByTestId('mcp-connect-agents-header-button'));
+
+			expect(getByTestId('mcp-connect-agents-dialog-stub')).toBeInTheDocument();
+		});
+	});
+
+	describe('Bulk agent actions', () => {
+		beforeEach(() => {
+			mockAgentPages([createAgent({ id: '1', name: 'Agent 1' })]);
+			mcpStore.toggleAgentsMcpAccess.mockResolvedValue({
+				updatedCount: 2,
+				updatedIds: ['agent-1', 'agent-2'],
+				unchangedIds: [],
+			});
+		});
+
+		it('should bulk-enable the agents selected in the Connect Agents modal', async () => {
+			const { getByTestId } = createComponent({ pinia });
+
+			await waitFor(() => {
+				expect(getByTestId('mcp-connect-agents-header-button')).toBeVisible();
+			});
+			await userEvent.click(getByTestId('mcp-connect-agents-header-button'));
+			mcpStore.fetchAgentsAvailableForMCPPage.mockClear();
+
+			await userEvent.click(getByTestId('stub-enable-access'));
+
+			await waitFor(() => {
+				expect(mcpStore.fetchAgentsAvailableForMCPPage).toHaveBeenCalledWith(1, 10);
+			});
+			expect(mcpStore.toggleAgentsMcpAccess).toHaveBeenCalledWith(
+				{ agentIds: ['agent-1', 'agent-2'] },
+				true,
+			);
+		});
+
+		it('should disable MCP access for bulk-selected agents and refresh the table', async () => {
+			const { getByTestId } = createComponent({ pinia });
+			await nextTick();
+			mcpStore.fetchAgentsAvailableForMCPPage.mockClear();
+
+			await userEvent.click(getByTestId('agents-table-bulk-remove'));
+
+			await waitFor(() => {
+				expect(mcpStore.toggleAgentsMcpAccess).toHaveBeenCalledWith(
+					{ agentIds: ['agent-1', 'agent-2'] },
+					false,
+				);
+			});
+			await waitFor(() => {
+				expect(mcpStore.fetchAgentsAvailableForMCPPage).toHaveBeenCalled();
+			});
+		});
+	});
+
+	describe('Refresh button', () => {
+		it('should refresh the agents list', async () => {
+			const { getByTestId } = createComponent({ pinia });
+			await nextTick();
+
+			mcpStore.fetchAgentsAvailableForMCPPage.mockClear();
+
+			await userEvent.click(getByTestId('mcp-agents-refresh-button'));
+
+			await waitFor(() => {
+				expect(mcpStore.fetchAgentsAvailableForMCPPage).toHaveBeenCalled();
+			});
+		});
+	});
+});