@payloadcms/plugin-mcp 4.0.0-canary.1 → 4.0.0-canary.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/plugin-mcp",
-  "version": "4.0.0-canary.1",
+  "version": "4.0.0-canary.3",
   "description": "MCP (Model Context Protocol) capabilities with Payload",
   "keywords": [
     "plugin",
@@ -56,19 +56,20 @@
     "@cfworker/json-schema": "^4.1.1",
     "@modelcontextprotocol/server": "2.0.0-alpha.2",
     "tsx": "4.22.4",
-    "zod": "^4.0.0"
+    "zod": "^4.0.0",
+    "@payloadcms/translations": "4.0.0-canary.3"
   },
   "devDependencies": {
     "@types/react": "19.2.14",
     "react": "^19.0.1 || ^19.1.2 || ^19.2.1",
+    "@payloadcms/ui": "4.0.0-canary.3",
     "@payloadcms/eslint-config": "3.28.0",
-    "@payloadcms/ui": "4.0.0-canary.1",
-    "payload": "4.0.0-canary.1"
+    "payload": "4.0.0-canary.3"
   },
   "peerDependencies": {
     "react": "^19.0.1 || ^19.1.2 || ^19.2.1",
-    "@payloadcms/ui": "4.0.0-canary.1",
-    "payload": "4.0.0-canary.1"
+    "@payloadcms/ui": "4.0.0-canary.3",
+    "payload": "4.0.0-canary.3"
   },
   "//deps_notes": {
     "zod": "zod is a hard dependency of @modelcontextprotocol/server, thus we can safely use it without it impacting bundle size. Make extra sure the zod version here matches exactly what's defined in the dependencies of @modelcontextprotocol/server to avoid duplicate versions being installed.",

package/src/collection/getAccessField.ts

@@ -2,6 +2,12 @@ import type { JSONField } from 'payload'
 
 import type { ClientMCPPluginConfig, MCPItem, SanitizedMCPPluginConfig } from '../types.js'
 
+import {
+  COLLECTION_AUTH_BUILTINS,
+  COLLECTION_BUILTINS,
+  GLOBAL_BUILTINS,
+} from '../mcp/builtinTools.js'
+
 /**
  * Returns the API key collection's `access` field — a JSON field whose value
  * is the `MCPAPIKeysDocAccessTree` the endpoint consults. The actual UI is
@@ -25,13 +31,9 @@ export const getAccessField = ({
           path: '@payloadcms/plugin-mcp/client#AccessField',
         },
       },
-      // TODO: needs i18n once design is finalized
-      description: 'Access for this API key — uncheck to revoke individual tools.',
-      position: 'sidebar',
     },
     defaultValue: {},
-    // TODO: needs i18n once design is finalized
-    label: 'Access',
+    label: false,
   }
 }
 
@@ -43,14 +45,19 @@ export const getAccessField = ({
 const sanitizeClientPluginConfig = (
   pluginConfig: SanitizedMCPPluginConfig,
 ): ClientMCPPluginConfig => ({
-  items: pluginConfig.items.map((item) => ({
-    ...(item.type === 'collectionTool' ? { collectionSlug: item.collectionSlug } : {}),
-    ...(item.type === 'globalTool' ? { globalSlug: item.globalSlug } : {}),
-    type: item.type,
-    configKey: item.configKey,
-    description: itemDescription(item),
-    label: item.label,
-  })),
+  items: pluginConfig.items.map((item) => {
+    const group = itemGroup(item)
+
+    return {
+      ...(item.type === 'collectionTool' ? { collectionSlug: item.collectionSlug } : {}),
+      ...(item.type === 'globalTool' ? { globalSlug: item.globalSlug } : {}),
+      type: item.type,
+      configKey: item.configKey,
+      ...(group === 'operations' ? {} : { description: itemDescription(item) }),
+      group,
+      label: item.label,
+    }
+  }),
 })
 
 const itemDescription = (item: MCPItem): string => {
@@ -62,3 +69,16 @@ const itemDescription = (item: MCPItem): string => {
   }
   return item.tool.description
 }
+
+const itemGroup = (item: MCPItem): 'auth' | 'custom' | 'operations' | undefined => {
+  if (item.type === 'collectionTool') {
+    if (item.configKey in COLLECTION_BUILTINS) {
+      return 'operations'
+    }
+    return item.configKey in COLLECTION_AUTH_BUILTINS ? 'auth' : 'custom'
+  }
+  if (item.type === 'globalTool') {
+    return item.configKey in GLOBAL_BUILTINS ? 'operations' : 'custom'
+  }
+  return undefined
+}

package/src/collection/index.ts

@@ -1,9 +1,25 @@
 import type { CollectionConfig } from 'payload'
 
+import { createAPIKeyFields } from 'payload'
+
 import type { SanitizedMCPPluginConfig } from '../types.js'
 
 import { getAccessField } from './getAccessField.js'
 
+const apiKeyStorageFields = createAPIKeyFields({
+  apiKeyField: {
+    admin: {
+      components: { Field: '@payloadcms/plugin-mcp/client#APIKeyField' },
+    },
+    required: true,
+  },
+  apiKeyIndexField: {
+    index: true,
+    required: true,
+  },
+  includeEnableAPIKey: false,
+})
+
 export const getAPIKeysCollection = ({
   pluginConfig,
 }: {
@@ -12,48 +28,73 @@ export const getAPIKeysCollection = ({
   const collection: CollectionConfig = {
     slug: 'payload-mcp-api-keys',
     admin: {
-      description:
-        'API keys control which collections, resources, tools, and prompts MCP clients can access',
-      group: 'MCP',
+      components: {
+        views: {
+          list: {
+            NoResults: '@payloadcms/plugin-mcp/client#APIKeysEmptyState',
+          },
+        },
+      },
+      defaultColumns: ['label', 'lastUsed', 'user'],
+      // Kept out of the main nav — reachable through the user menu's settings instead.
+      group: false,
       useAsTitle: 'label',
     },
-    auth: {
-      disableLocalStrategy: true,
-      useAPIKey: true,
-    },
     fields: [
-      {
-        name: 'user',
-        type: 'relationship',
-        admin: { description: 'The user that the API key is associated with.' },
-        relationTo: pluginConfig.userCollection,
-        required: true,
-      },
+      ...apiKeyStorageFields,
+      getAccessField({ pluginConfig }),
       {
         name: 'label',
         type: 'text',
-        admin: { description: 'A useful label for the API key.' },
+        admin: {
+          description: ({ t }) => t('plugin-mcp:titleDescription'),
+          position: 'sidebar',
+        },
+        label: ({ t }) => t('plugin-mcp:title'),
       },
       {
         name: 'description',
         type: 'text',
-        admin: { description: 'The purpose of the API key.' },
+        admin: {
+          description: ({ t }) => t('plugin-mcp:descriptionDescription'),
+          position: 'sidebar',
+        },
+        label: ({ t }) => t('plugin-mcp:description'),
+      },
+      {
+        name: 'lastUsed',
+        type: 'date',
+        admin: {
+          date: { pickerAppearance: 'dayAndTime' },
+          disabled: { field: true },
+        },
+        label: ({ t }) => t('plugin-mcp:lastUsed'),
+      },
+      {
+        name: 'user',
+        type: 'relationship',
+        admin: {
+          description: ({ t }) => t('plugin-mcp:userDescription'),
+          position: 'sidebar',
+        },
+        label: ({ t }) => t('general:user'),
+        relationTo: pluginConfig.userCollection,
+        required: true,
       },
       {
         name: 'overrideAccess',
         type: 'checkbox',
         admin: {
-          description:
-            'When checked, this key bypasses Payload access control on every operation it performs. Leave unchecked unless you have a specific reason.',
+          description: ({ t }) => t('plugin-mcp:overrideAccessDescription'),
+          position: 'sidebar',
         },
         defaultValue: false,
-        label: 'Override access control',
+        label: ({ t }) => t('plugin-mcp:overrideAccess'),
       },
-      getAccessField({ pluginConfig }),
     ],
     labels: {
-      plural: 'API Keys',
-      singular: 'API Key',
+      plural: ({ t }) => `${t('plugin-mcp:mcp')} ${t('plugin-mcp:apiKeys')}`,
+      singular: ({ t }) => `${t('plugin-mcp:mcp')} ${t('authentication:apiKey')}`,
     },
     versions: false,
   }

package/src/components/APIKeyField/index.client.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import { APIKeyInput, Button, useField, useTranslation, WarningTriangleIcon } from '@payloadcms/ui'
+import React, { useState } from 'react'
+
+import type { PluginMCPTranslationKeys, PluginMCPTranslations } from '../../translations/index.js'
+
+import './index.css'
+
+const baseClass = 'mcp-api-key-field'
+
+/**
+ * Custom component for the MCP API-keys collection's `apiKey` field:
+ * - no key yet: a "Generate new key" button
+ * - key set: a dismissible privacy warning + the shared masked-key input
+ */
+export const APIKeyField: React.FC = () => {
+  const { setValue: setApiKey, value: apiKey } = useField<string>({ path: 'apiKey' })
+  const { t } = useTranslation<PluginMCPTranslations, PluginMCPTranslationKeys>()
+  const [isWarningDismissed, setIsWarningDismissed] = useState(false)
+
+  const generateKey = () => {
+    setApiKey(crypto.randomUUID())
+    setIsWarningDismissed(false)
+  }
+
+  return (
+    <div className={baseClass}>
+      <p className={`${baseClass}__description`}>{t('plugin-mcp:apiKeyDescription')}</p>
+      <div className={`${baseClass}__panel`}>
+        <div className={`${baseClass}__header`}>
+          <span className={`${baseClass}__title`}>{t('authentication:apiKey')}</span>
+          {!apiKey && (
+            <Button
+              buttonStyle="primary"
+              className={`${baseClass}__generate`}
+              onClick={generateKey}
+            >
+              {t('authentication:generateNewAPIKey')}
+            </Button>
+          )}
+        </div>
+        {Boolean(apiKey) && (
+          <div className={`${baseClass}__body`}>
+            {!isWarningDismissed && (
+              <div className={`${baseClass}__warning`}>
+                <WarningTriangleIcon className={`${baseClass}__warning-icon`} />
+                <p className={`${baseClass}__warning-text`}>
+                  <strong>{t('plugin-mcp:keepKeyPrivate')}</strong>
+                  {` ${t('plugin-mcp:keyPrivateDescription')}`}
+                </p>
+                <button
+                  aria-label={t('plugin-mcp:dismiss')}
+                  className={`${baseClass}__warning-dismiss`}
+                  onClick={() => setIsWarningDismissed(true)}
+                  type="button"
+                >
+                  &times;
+                </button>
+              </div>
+            )}
+            <APIKeyInput aria-label={t('authentication:apiKey')} value={apiKey} />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/APIKeyField/index.css

@@ -0,0 +1,105 @@
+@layer payload-default {
+  /* Section wrapper: description + panel, closed off by a full-bleed divider
+     that spans the fields column past its horizontal gutter. */
+  .mcp-api-key-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--base);
+    margin-inline: calc(-1 * var(--gutter-h));
+    padding-inline: var(--gutter-h);
+    padding-block-end: var(--spacer-4);
+    border-block-end: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  .mcp-api-key-field__description {
+    margin: 0;
+    color: var(--color-text);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+  }
+
+  .mcp-api-key-field__panel {
+    overflow: hidden;
+    background: var(--color-bg);
+    border: var(--stroke-width-small) solid var(--color-border);
+    border-radius: var(--button-radius);
+  }
+
+  .mcp-api-key-field__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacer-2);
+    min-height: var(--spacer-5);
+    padding: var(--spacer-2) var(--spacer-3);
+    background: var(--color-bg-secondary);
+  }
+
+  /* Holds the warning + key row; its top border is the full-width divider
+     under the header. Only rendered once a key exists. */
+  .mcp-api-key-field__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+    padding: var(--spacer-3);
+    border-block-start: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  .mcp-api-key-field__title {
+    color: var(--color-text);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-strong-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+  }
+
+  .mcp-api-key-field__generate {
+    margin: 0;
+  }
+
+  /* Matches the core Banner's warning treatment: theme-adaptive warning-tertiary
+     bg with regular --color-text (NOT --color-text-onwarning, which is only
+     defined for light mode and reads as muddy dark-on-dark in dark mode). */
+  .mcp-api-key-field__warning {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--base) / 2);
+    padding: calc(var(--spacer-2) + (var(--spacer-1) / 2)) calc(var(--base) / 2);
+    background: var(--color-bg-warning-tertiary);
+    border: none;
+    border-radius: var(--radius-medium);
+    color: var(--color-text);
+  }
+
+  .mcp-api-key-field__warning-icon {
+    flex-shrink: 0;
+    width: 15px;
+    height: 13px;
+  }
+
+  .mcp-api-key-field__warning-text {
+    flex-grow: 1;
+    margin: 0;
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    line-height: var(--text-body-medium-line-height);
+  }
+
+  .mcp-api-key-field__warning-text strong {
+    font-weight: var(--text-body-medium-strong-font-weight);
+  }
+
+  .mcp-api-key-field__warning-dismiss {
+    appearance: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: inherit;
+    font-size: 1rem;
+    line-height: 1;
+    padding: 0;
+  }
+}

package/src/components/APIKeysEmptyState/index.client.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import type { NoResultsClientProps } from 'payload'
+
+import { Button, NoListResults, useTranslation } from '@payloadcms/ui'
+import React from 'react'
+
+import type { PluginMCPTranslationKeys, PluginMCPTranslations } from '../../translations/index.js'
+
+export const APIKeysEmptyState: React.FC<NoResultsClientProps> = ({
+  hasCreatePermission,
+  newDocumentURL,
+  viewType,
+}) => {
+  const { t } = useTranslation<PluginMCPTranslations, PluginMCPTranslationKeys>()
+
+  return (
+    <NoListResults
+      Actions={
+        hasCreatePermission && newDocumentURL && viewType !== 'trash'
+          ? [
+              <Button el="link" key="create" to={newDocumentURL}>
+                {t('authentication:generateNewAPIKey')}
+              </Button>,
+            ]
+          : []
+      }
+      description={t('plugin-mcp:apiKeyDescription')}
+      title={t('plugin-mcp:noAPIKeys')}
+      withMargin
+    />
+  )
+}