🛠️ feat: MCP Servers Editor (Wave 2)

e2e/mcp.spec.ts

@@ -0,0 +1,162 @@
+import { test, expect } from '@playwright/test';
+import type { Locator, Page } from '@playwright/test';
+import { LIVE, LIVE_SKIP_REASON } from './live';
+
+/**
+ * MCP server journeys (WS12) from the MCP audit. They need a real LibreChat
+ * backend whose librechat.yaml defines the remote server E2E_MCP_REMOTE
+ * (with an Authorization header) and the stdio server E2E_MCP_STDIO: run
+ * with E2E_LIVE=1 and E2E_BASE_URL.
+ */
+const REMOTE = process.env.E2E_MCP_REMOTE ?? 'github';
+const PLAIN = process.env.E2E_MCP_PLAIN ?? 'cloudflare';
+const STDIO = process.env.E2E_MCP_STDIO ?? 'everything';
+
+const unsavedBar = (page: Page) => page.getByRole('region', { name: 'Unsaved changes' });
+
+async function openMcp(page: Page) {
+  await page.goto('/configuration?tab=mcp');
+  await page.waitForLoadState('networkidle');
+}
+
+/** The expanded card of the server `key`. */
+async function card(page: Page, key: string): Promise<Locator> {
+  const entry = page.locator(`[data-mcp-server="${key}"]`);
+  await expect(entry).toHaveCount(1);
+  const header = entry.locator('button[aria-expanded]').first();
+  if ((await header.getAttribute('aria-expanded')) !== 'true') await header.click();
+  return entry;
+}
+
+async function openGroup(entry: Locator, title: string) {
+  const trigger = entry.locator('.settings-group-header button', { hasText: title }).first();
+  if ((await trigger.getAttribute('aria-expanded')) !== 'true') await trigger.click();
+}
+
+async function openMenu(page: Page, key: string) {
+  await page
+    .locator(`[data-mcp-server="${key}"]`)
+    .getByRole('button', { name: `Actions for ${key}` })
+    .click();
+}
+
+async function menu(page: Page, key: string, item: string | RegExp) {
+  await openMenu(page, key);
+  await page.getByRole('menuitem', { name: item }).click();
+}
+
+async function review(page: Page) {
+  await unsavedBar(page)
+    .getByRole('button', { name: /^Review & save$/ })
+    .click();
+  return page.getByRole('dialog');
+}
+
+async function saveAndWait(page: Page) {
+  const dialog = page.getByRole('dialog');
+  await dialog.getByRole('button', { name: /^Save$/ }).click();
+  await expect(dialog).toHaveCount(0);
+}
+
+async function setText(field: Locator, value: string) {
+  await field.fill(value);
+  await field.press('Tab');
+}
+
+test.describe('Configuration: MCP servers', () => {
+  test.skip(!LIVE, LIVE_SKIP_REASON);
+  test.describe.configure({ mode: 'serial', timeout: 120_000 });
+
+  test('turning Show in chat menu on and back to Default leaves nothing to save (MCP-6)', async ({
+    page,
+  }) => {
+    await openMcp(page);
+    const entry = await card(page, PLAIN);
+    await openGroup(entry, 'Display');
+    const choice = entry.locator(`#mcpServers-${PLAIN}-chatMenu`);
+    await choice.getByRole('button', { name: 'On', exact: true }).click();
+    await expect(unsavedBar(page)).toBeVisible();
+    await choice.getByRole('button', { name: /^Default/ }).click();
+    await expect(unsavedBar(page)).toHaveCount(0);
+  });
+
+  test('a librechat.yaml header and the transport cannot be removed or changed (MCP-5)', async ({
+    page,
+  }) => {
+    await openMcp(page);
+    const entry = await card(page, REMOTE);
+    await expect(entry.locator(`#mcpServers-${REMOTE}-headers`)).toBeVisible();
+    await expect(
+      entry.locator(`#mcpServers-${REMOTE}-headers`).getByRole('button', { name: /^Delete / }),
+    ).toHaveCount(0);
+    await expect(entry.locator(`select#mcpServers-${REMOTE}-type`)).toHaveCount(0);
+    await openMenu(page, REMOTE);
+    await expect(page.getByRole('menuitem', { name: 'Delete' })).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
+  });
+
+  test('a stdio server is read-only (D10)', async ({ page }) => {
+    await openMcp(page);
+    const entry = await card(page, STDIO);
+    await expect(entry.getByRole('note').first()).toContainText('local process');
+    await expect(entry.locator(`input#mcpServers-${STDIO}-command`)).toHaveCount(0);
+    await openGroup(entry, 'Display');
+    await expect(entry.locator(`input#mcpServers-${STDIO}-title`)).toHaveCount(0);
+  });
+
+  test('create, rename with an edit, and delete a server (MCP-4, MCP-9, MCP-12)', async ({
+    page,
+  }) => {
+    const name = `e2e-${Date.now()}`;
+    const renamed = `${name}-2`;
+    await openMcp(page);
+
+    await page.getByRole('button', { name: 'Create MCP server' }).click();
+    const create = page.getByRole('dialog');
+    await expect(create.locator('#mcpDraft-transport-streamable-http')).toBeChecked();
+    await expect(create.locator('#mcpDraft-transport-stdio')).toBeDisabled();
+    await create.getByLabel('Server name').fill(name);
+    await expect(create).toContainText('Still needed: Server URL');
+    await setText(create.locator('#mcpDraft-url'), 'https://mcp.e2e.example/mcp');
+    await create.getByRole('button', { name: 'API key', exact: true }).click();
+    const key = create.locator('#mcpDraft-apiKey-key');
+    await expect(key).toHaveAttribute('type', 'password');
+    await setText(key, 'sk-e2e-secret');
+    await create.getByRole('button', { name: 'Create', exact: true }).click();
+    await expect(create).toHaveCount(0);
+
+    let dialog = await review(page);
+    await expect(dialog).toContainText(`Added MCP server ${name}`);
+    await expect(dialog).not.toContainText('sk-e2e-secret');
+    await saveAndWait(page);
+
+    await page.reload();
+    await page.waitForLoadState('networkidle');
+    await menu(page, name, 'Rename');
+    const input = page.getByRole('textbox', { name: `Rename ${name}` });
+    await input.fill(renamed);
+    await input.press('Enter');
+    const entry = await card(page, renamed);
+    await openGroup(entry, 'Display');
+    await setText(entry.locator(`#mcpServers-${renamed}-title`), 'Renamed in e2e');
+    dialog = await review(page);
+    await expect(dialog).toContainText(`(${name} → ${renamed})`);
+    await expect(dialog).toContainText('Renamed in e2e');
+    await saveAndWait(page);
+
+    await menu(page, renamed, 'Delete');
+    const ghost = page.locator(`[data-mcp-deleted="${renamed}"]`);
+    await expect(ghost).toContainText('Will be deleted');
+    await ghost.getByRole('button', { name: `Undo deleting ${renamed}` }).click();
+    await expect(page.locator(`[data-mcp-server="${renamed}"]`)).toHaveCount(1);
+    await menu(page, renamed, 'Delete');
+    dialog = await review(page);
+    await expect(dialog).toContainText(`Removed MCP server ${renamed}`);
+    await saveAndWait(page);
+    await page.reload();
+    await page.waitForLoadState('networkidle');
+    await expect(page.locator(`[data-mcp-server="${renamed}"]`)).toHaveCount(0);
+  });
+});

src/components/configuration/ConfigPage.tsx

@@ -607,6 +607,11 @@ export function ConfigPage({
                           filterPaths={filterPaths}
                           valueLayers={layers.valueLayers}
                           visibilityEdits={edits.visibilityEdits}
+                          onHideField={permissions.canAssign ? edits.handleHideField : undefined}
+                          onUnhideField={
+                            permissions.canAssign ? edits.handleUnhideField : undefined
+                          }
+                          onRenameEntry={edits.handleRenameEntry}
                         />
                       </CollectionEditsContext.Provider>
                     </RevealTargetContext.Provider>

src/components/configuration/ConfigTabContent.tsx

@@ -78,6 +78,9 @@ export function ConfigTabContent({
   unknownSettings,
   valueLayers,
   visibilityEdits,
+  onHideField,
+  onUnhideField,
+  onRenameEntry,
   visibleSectionIds,
   filterPaths,
   filterText,
@@ -270,6 +273,9 @@ export function ConfigTabContent({
       yamlBaseKeys: baseRecordKeys?.[dataKey],
       onValidationError,
       editSessionId,
+      onHideField,
+      onUnhideField,
+      onRenameEntry,
     };
     const content = (
       <>

src/components/configuration/configMeta.ts

@@ -173,7 +173,7 @@ export const SECTION_META: Record<string, t.SectionMeta> = {
   },
   mcpSettings: {
     titleKey: 'com_config_section_mcp_settings',
-    descriptionKey: 'com_config_section_mcp_settings_desc',
+    descriptionKey: 'com_config_mcp_settings_intro',
     tab: 'mcp',
     order: 20,
   },

src/components/configuration/edits.test.ts

@@ -14,7 +14,7 @@ import {
 } from './edits';
 import { getKeyedCollection, getValueAtPath, planConfigChanges } from '@/utils';
 import { extractSchemaTree, getSchemaPathSet } from '@/server/config';
-import { issueDisplayPath, formatIssue } from './issues';
+import { issueDisplayPath, formatIssue, describeIssues } from './issues';
 import { summarizeChanges } from './summary';
 import { findSchemaField } from './controls';
 
@@ -428,6 +428,17 @@ describe('mergeIndexedArrayEdits', () => {
 });
 
 describe('issue display and summary', () => {
+  it("shows a plain list item's first problem on the list row", () => {
+    const issues: t.ConfigIssue[] = [
+      { path: 'mcpSettings.allowedAddresses.0', code: 'custom', message: 'must include a port' },
+      { path: 'mcpSettings.allowedAddresses.0', code: 'custom', message: 'is not private' },
+    ];
+    const { fieldErrors } = describeIssues(issues, [], (key, params) =>
+      key === 'com_config_issue_list_item' ? `Item ${params?.n}: ${params?.message}` : key,
+    );
+    expect(fieldErrors['mcpSettings.allowedAddresses']).toBe('Item 1: must include a port');
+  });
+
   const edit0 = captureCollectionEdit(custom, root);
   const collections: t.PendingCollection[] = [
     { collection: custom, items: [endpoints[1], endpoints[0], endpoints[2]], edit: edit0 },

src/components/configuration/issues.ts

@@ -83,6 +83,23 @@ export function formatIssue(
   return { inline, summary };
 }
 
+/**
+ * A plain list's item an issue is about (`mcpSettings.allowedAddresses.0`):
+ * the list row shows the item's first problem ("Item 1: must include a
+ * port"), since the list control has no row per item. Entries of keyed
+ * collections show their issues in their own cards.
+ */
+function listItemOf(
+  issue: t.ConfigIssue,
+  path: string,
+): { listPath: string; index: number } | undefined {
+  if (issueCollection(issue)) return undefined;
+  const dot = path.lastIndexOf('.');
+  const segment = path.slice(dot + 1);
+  if (dot < 0 || !/^\d+$/.test(segment)) return undefined;
+  return { listPath: path.slice(0, dot), index: Number(segment) };
+}
+
 /** Per-path inline messages and a summary line per issue, for the errors map and the review. */
 export function describeIssues(
   issues: t.ConfigIssue[],
@@ -96,6 +113,13 @@ export function describeIssues(
     const { inline, summary } = formatIssue(issue, path, localize);
     fieldErrors[path] = fieldErrors[path] ? `${fieldErrors[path]}; ${inline}` : inline;
     if (!summaries.includes(summary)) summaries.push(summary);
+    const item = listItemOf(issue, path);
+    if (item && !fieldErrors[item.listPath]) {
+      fieldErrors[item.listPath] = localize('com_config_issue_list_item', {
+        n: item.index + 1,
+        message: issuePredicate(issue, localize),
+      });
+    }
   }
   return { fieldErrors, summaries };
 }

src/components/configuration/meta/index.ts

@@ -5,13 +5,15 @@ import { SECRET_CONFIG_KEYS } from '@/constants';
 import { ENDPOINT_FIELD_META } from './endpoints';
 import { GENERIC_FIELD_META } from './generic';
 import { SPEC_FIELD_META } from './specs';
+import { MCP_FIELD_META } from './mcp';
 
 /** Registries merged in order; area files are appended here (WS2 owns, WS9–13 contribute). */
 const META_SOURCES: t.FieldMetaRegistry[] = [
   GENERIC_FIELD_META,
   PROVIDER_FIELD_META,
   ENDPOINT_FIELD_META,
   SPEC_FIELD_META,
+  MCP_FIELD_META,
 ];
 
 const REGISTRY = buildFieldMetaRegistry(META_SOURCES);