@payloadcms/plugin-mcp 3.85.0 → 4.0.0-canary.0

package/dist/utils/schemaConversion/transformPointFields.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/schemaConversion/transformPointFields.ts"],"sourcesContent":["import type { JSONSchema4 } from 'json-schema'\n\nexport function transformPointFieldsForMCP(schema: JSONSchema4): JSONSchema4 {\n  if (!schema || typeof schema !== 'object') {\n    return schema\n  }\n\n  const transformed = { ...schema }\n\n  if (transformed.properties && typeof transformed.properties === 'object') {\n    transformed.properties = Object.fromEntries(\n      Object.entries(transformed.properties).map(([key, value]) => {\n        const isArrayType =\n          value.type === 'array' || (Array.isArray(value.type) && value.type.includes('array'))\n\n        if (\n          value &&\n          typeof value === 'object' &&\n          isArrayType &&\n          Array.isArray(value.items) &&\n          value.items.length === 2 &&\n          value.items.every((item: JSONSchema4) => item?.type === 'number')\n        ) {\n          // Transform to object format\n          const isNullable = Array.isArray(value.type) && value.type.includes('null')\n\n          return [\n            key,\n            {\n              type: isNullable ? ['object', 'null'] : 'object',\n              description: value.description || 'Geographic coordinates (longitude, latitude)',\n              properties: {\n                latitude: { type: 'number', description: 'Latitude coordinate' },\n                longitude: { type: 'number', description: 'Longitude coordinate' },\n              },\n              required: ['longitude', 'latitude'],\n            },\n          ]\n        }\n\n        return [key, transformPointFieldsForMCP(value)]\n      }),\n    )\n  }\n\n  if (\n    transformed.items &&\n    typeof transformed.items === 'object' &&\n    !Array.isArray(transformed.items)\n  ) {\n    transformed.items = transformPointFieldsForMCP(transformed.items)\n  }\n\n  return transformed\n}\n"],"names":["transformPointFieldsForMCP","schema","transformed","properties","Object","fromEntries","entries","map","key","value","isArrayType","type","Array","isArray","includes","items","length","every","item","isNullable","description","latitude","longitude","required"],"mappings":"AAEA,OAAO,SAASA,2BAA2BC,MAAmB;IAC5D,IAAI,CAACA,UAAU,OAAOA,WAAW,UAAU;QACzC,OAAOA;IACT;IAEA,MAAMC,cAAc;QAAE,GAAGD,MAAM;IAAC;IAEhC,IAAIC,YAAYC,UAAU,IAAI,OAAOD,YAAYC,UAAU,KAAK,UAAU;QACxED,YAAYC,UAAU,GAAGC,OAAOC,WAAW,CACzCD,OAAOE,OAAO,CAACJ,YAAYC,UAAU,EAAEI,GAAG,CAAC,CAAC,CAACC,KAAKC,MAAM;YACtD,MAAMC,cACJD,MAAME,IAAI,KAAK,WAAYC,MAAMC,OAAO,CAACJ,MAAME,IAAI,KAAKF,MAAME,IAAI,CAACG,QAAQ,CAAC;YAE9E,IACEL,SACA,OAAOA,UAAU,YACjBC,eACAE,MAAMC,OAAO,CAACJ,MAAMM,KAAK,KACzBN,MAAMM,KAAK,CAACC,MAAM,KAAK,KACvBP,MAAMM,KAAK,CAACE,KAAK,CAAC,CAACC,OAAsBA,MAAMP,SAAS,WACxD;gBACA,6BAA6B;gBAC7B,MAAMQ,aAAaP,MAAMC,OAAO,CAACJ,MAAME,IAAI,KAAKF,MAAME,IAAI,CAACG,QAAQ,CAAC;gBAEpE,OAAO;oBACLN;oBACA;wBACEG,MAAMQ,aAAa;4BAAC;4BAAU;yBAAO,GAAG;wBACxCC,aAAaX,MAAMW,WAAW,IAAI;wBAClCjB,YAAY;4BACVkB,UAAU;gCAAEV,MAAM;gCAAUS,aAAa;4BAAsB;4BAC/DE,WAAW;gCAAEX,MAAM;gCAAUS,aAAa;4BAAuB;wBACnE;wBACAG,UAAU;4BAAC;4BAAa;yBAAW;oBACrC;iBACD;YACH;YAEA,OAAO;gBAACf;gBAAKR,2BAA2BS;aAAO;QACjD;IAEJ;IAEA,IACEP,YAAYa,KAAK,IACjB,OAAOb,YAAYa,KAAK,KAAK,YAC7B,CAACH,MAAMC,OAAO,CAACX,YAAYa,KAAK,GAChC;QACAb,YAAYa,KAAK,GAAGf,2BAA2BE,YAAYa,KAAK;IAClE;IAEA,OAAOb;AACT"}
+{"version":3,"sources":["../../../src/utils/schemaConversion/transformPointFields.ts"],"sourcesContent":["import type { JsonSchemaType } from '../../types.js'\n\nexport function transformPointFieldsForMCP(schema: JsonSchemaType): JsonSchemaType {\n  if (!schema || typeof schema !== 'object') {\n    return schema\n  }\n\n  const transformed = { ...schema }\n\n  if (transformed.properties && typeof transformed.properties === 'object') {\n    transformed.properties = Object.fromEntries(\n      Object.entries(transformed.properties).map(([key, value]) => {\n        if (!value || typeof value !== 'object') {\n          return [key, value]\n        }\n        const isArrayType =\n          value.type === 'array' || (Array.isArray(value.type) && value.type.includes('array'))\n\n        if (\n          isArrayType &&\n          Array.isArray(value.items) &&\n          value.items.length === 2 &&\n          value.items.every((item) => item && typeof item === 'object' && item.type === 'number')\n        ) {\n          // Transform to object format\n          const isNullable = Array.isArray(value.type) && value.type.includes('null')\n\n          return [\n            key,\n            {\n              type: isNullable ? ['object', 'null'] : 'object',\n              description: value.description || 'Geographic coordinates (longitude, latitude)',\n              properties: {\n                latitude: { type: 'number', description: 'Latitude coordinate' },\n                longitude: { type: 'number', description: 'Longitude coordinate' },\n              },\n              required: ['longitude', 'latitude'],\n            },\n          ]\n        }\n\n        return [key, transformPointFieldsForMCP(value)]\n      }),\n    )\n  }\n\n  if (\n    transformed.items &&\n    typeof transformed.items === 'object' &&\n    !Array.isArray(transformed.items)\n  ) {\n    transformed.items = transformPointFieldsForMCP(transformed.items)\n  }\n\n  return transformed\n}\n"],"names":["transformPointFieldsForMCP","schema","transformed","properties","Object","fromEntries","entries","map","key","value","isArrayType","type","Array","isArray","includes","items","length","every","item","isNullable","description","latitude","longitude","required"],"mappings":"AAEA,OAAO,SAASA,2BAA2BC,MAAsB;IAC/D,IAAI,CAACA,UAAU,OAAOA,WAAW,UAAU;QACzC,OAAOA;IACT;IAEA,MAAMC,cAAc;QAAE,GAAGD,MAAM;IAAC;IAEhC,IAAIC,YAAYC,UAAU,IAAI,OAAOD,YAAYC,UAAU,KAAK,UAAU;QACxED,YAAYC,UAAU,GAAGC,OAAOC,WAAW,CACzCD,OAAOE,OAAO,CAACJ,YAAYC,UAAU,EAAEI,GAAG,CAAC,CAAC,CAACC,KAAKC,MAAM;YACtD,IAAI,CAACA,SAAS,OAAOA,UAAU,UAAU;gBACvC,OAAO;oBAACD;oBAAKC;iBAAM;YACrB;YACA,MAAMC,cACJD,MAAME,IAAI,KAAK,WAAYC,MAAMC,OAAO,CAACJ,MAAME,IAAI,KAAKF,MAAME,IAAI,CAACG,QAAQ,CAAC;YAE9E,IACEJ,eACAE,MAAMC,OAAO,CAACJ,MAAMM,KAAK,KACzBN,MAAMM,KAAK,CAACC,MAAM,KAAK,KACvBP,MAAMM,KAAK,CAACE,KAAK,CAAC,CAACC,OAASA,QAAQ,OAAOA,SAAS,YAAYA,KAAKP,IAAI,KAAK,WAC9E;gBACA,6BAA6B;gBAC7B,MAAMQ,aAAaP,MAAMC,OAAO,CAACJ,MAAME,IAAI,KAAKF,MAAME,IAAI,CAACG,QAAQ,CAAC;gBAEpE,OAAO;oBACLN;oBACA;wBACEG,MAAMQ,aAAa;4BAAC;4BAAU;yBAAO,GAAG;wBACxCC,aAAaX,MAAMW,WAAW,IAAI;wBAClCjB,YAAY;4BACVkB,UAAU;gCAAEV,MAAM;gCAAUS,aAAa;4BAAsB;4BAC/DE,WAAW;gCAAEX,MAAM;gCAAUS,aAAa;4BAAuB;wBACnE;wBACAG,UAAU;4BAAC;4BAAa;yBAAW;oBACrC;iBACD;YACH;YAEA,OAAO;gBAACf;gBAAKR,2BAA2BS;aAAO;QACjD;IAEJ;IAEA,IACEP,YAAYa,KAAK,IACjB,OAAOb,YAAYa,KAAK,KAAK,YAC7B,CAACH,MAAMC,OAAO,CAACX,YAAYa,KAAK,GAChC;QACAb,YAAYa,KAAK,GAAGf,2BAA2BE,YAAYa,KAAK;IAClE;IAEA,OAAOb;AACT"}

package/dist/utils/toStandardSchema.d.ts

@@ -0,0 +1,5 @@
+import { type StandardSchemaWithJSON } from '@modelcontextprotocol/server';
+import type { ToolInputSchema } from '../types.js';
+/** Normalize a tool/prompt input to a Standard Schema. Raw JSON Schema gets wrapped; Standard Schema instances pass through. */
+export declare const toStandardSchema: (schema: ToolInputSchema) => StandardSchemaWithJSON;
+//# sourceMappingURL=toStandardSchema.d.ts.map

package/dist/utils/toStandardSchema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toStandardSchema.d.ts","sourceRoot":"","sources":["../../src/utils/toStandardSchema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,sBAAsB,EAAE,MAAM,8BAA8B,CAAA;AAE1F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAElD,gIAAgI;AAChI,eAAO,MAAM,gBAAgB,GAAI,QAAQ,eAAe,KAAG,sBAG/B,CAAA"}

package/dist/utils/toStandardSchema.js

@@ -0,0 +1,4 @@
+import { fromJsonSchema } from '@modelcontextprotocol/server';
+/** Normalize a tool/prompt input to a Standard Schema. Raw JSON Schema gets wrapped; Standard Schema instances pass through. */ export const toStandardSchema = (schema)=>typeof schema === 'object' && schema !== null && '~standard' in schema ? schema : fromJsonSchema(schema);
+
+//# sourceMappingURL=toStandardSchema.js.map

package/dist/utils/toStandardSchema.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/toStandardSchema.ts"],"sourcesContent":["import { fromJsonSchema, type StandardSchemaWithJSON } from '@modelcontextprotocol/server'\n\nimport type { ToolInputSchema } from '../types.js'\n\n/** Normalize a tool/prompt input to a Standard Schema. Raw JSON Schema gets wrapped; Standard Schema instances pass through. */\nexport const toStandardSchema = (schema: ToolInputSchema): StandardSchemaWithJSON =>\n  typeof schema === 'object' && schema !== null && '~standard' in schema\n    ? (schema as StandardSchemaWithJSON)\n    : fromJsonSchema(schema)\n"],"names":["fromJsonSchema","toStandardSchema","schema"],"mappings":"AAAA,SAASA,cAAc,QAAqC,+BAA8B;AAI1F,8HAA8H,GAC9H,OAAO,MAAMC,mBAAmB,CAACC,SAC/B,OAAOA,WAAW,YAAYA,WAAW,QAAQ,eAAeA,SAC3DA,SACDF,eAAeE,QAAO"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/plugin-mcp",
-  "version": "3.85.0",
+  "version": "4.0.0-canary.0",
   "description": "MCP (Model Context Protocol) capabilities with Payload",
   "keywords": [
     "plugin",
@@ -21,34 +21,59 @@
       "url": "https://payloadcms.com"
     }
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "type": "module",
   "exports": {
     ".": {
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
+    },
+    "./client": {
+      "import": "./dist/exports/client.js",
+      "types": "./dist/exports/client.d.ts",
+      "default": "./dist/exports/client.js"
+    },
+    "./stdio": {
+      "import": "./dist/stdio.js",
+      "types": "./dist/stdio.d.ts",
+      "default": "./dist/stdio.js"
     }
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "bin": {
+    "payload-mcp": "./bin.js"
+  },
   "files": [
     "src",
-    "dist"
+    "dist",
+    "bin.js"
   ],
   "dependencies": {
-    "@modelcontextprotocol/sdk": "1.27.1",
-    "@types/json-schema": "7.0.15",
-    "json-schema-to-zod": "2.6.1",
-    "mcp-handler": "^1.0.7",
-    "zod": "^3.25.50"
+    "@cfworker/json-schema": "^4.1.1",
+    "@modelcontextprotocol/server": "2.0.0-alpha.2",
+    "tsx": "4.22.4",
+    "zod": "^4.0.0"
   },
   "devDependencies": {
+    "@types/react": "19.2.14",
+    "react": "^19.0.1 || ^19.1.2 || ^19.2.1",
     "@payloadcms/eslint-config": "3.28.0",
-    "payload": "3.85.0"
+    "payload": "4.0.0-canary.0",
+    "@payloadcms/ui": "4.0.0-canary.0"
   },
   "peerDependencies": {
-    "payload": "3.85.0"
+    "react": "^19.0.1 || ^19.1.2 || ^19.2.1",
+    "@payloadcms/ui": "4.0.0-canary.0",
+    "payload": "4.0.0-canary.0"
+  },
+  "//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.",
+    "@cfworker/json-schema": "Should be able to remove in next @modelcontextprotocol/server alpha release. Marked as an optional peer of @modelcontextprotocol/server, but its bundle does an eager top-level `import { Validator } from '@cfworker/json-schema'`, so it must be installed even when only zod-registered tools are used. Drop once upstream lazy-loads the validator. See: https://github.com/modelcontextprotocol/typescript-sdk",
+    "tsx": "Required by the `bin.js` stdio mcp. Keep the version pinned to whatever `payload` ships to avoid duplicate installs."
   },
   "homepage:": "https://payloadcms.com",
   "scripts": {

package/src/collection/getAccessField.ts

@@ -0,0 +1,64 @@
+import type { JSONField } from 'payload'
+
+import type { ClientMCPPluginConfig, MCPItem, SanitizedMCPPluginConfig } from '../types.js'
+
+/**
+ * Returns the API key collection's `access` field — a JSON field whose value
+ * is the `MCPAPIKeysDocAccessTree` the endpoint consults. The actual UI is
+ * a custom client component (`AccessField`) which renders a permissions
+ * matrix; the field's stored shape is just the runtime access tree.
+ */
+export const getAccessField = ({
+  pluginConfig,
+}: {
+  pluginConfig: SanitizedMCPPluginConfig
+}): JSONField => {
+  const clientPluginConfig = sanitizeClientPluginConfig(pluginConfig)
+
+  return {
+    name: 'access',
+    type: 'json',
+    admin: {
+      components: {
+        Field: {
+          clientProps: { pluginConfig: clientPluginConfig },
+          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',
+  }
+}
+
+/**
+ * Strips the non-serializable parts of `SanitizedMCPPluginConfig` (handlers,
+ * input/argsSchema functions, etc.) so the result is safe to thread to a
+ * client component via `clientProps`.
+ */
+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,
+    description: itemDescription(item),
+    key: item.key,
+    label: item.label,
+  })),
+})
+
+const itemDescription = (item: MCPItem): string => {
+  if (item.type === 'prompt') {
+    return item.prompt.description
+  }
+  if (item.type === 'resource') {
+    return item.resource.description
+  }
+  return item.tool.description
+}

package/src/collection/index.ts

@@ -0,0 +1,63 @@
+import type { CollectionConfig } from 'payload'
+
+import type { SanitizedMCPPluginConfig } from '../types.js'
+
+import { getAccessField } from './getAccessField.js'
+
+export const getAPIKeysCollection = ({
+  pluginConfig,
+}: {
+  pluginConfig: SanitizedMCPPluginConfig
+}): CollectionConfig => {
+  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',
+      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,
+      },
+      {
+        name: 'label',
+        type: 'text',
+        admin: { description: 'A useful label for the API key.' },
+      },
+      {
+        name: 'description',
+        type: 'text',
+        admin: { description: 'The purpose of the API key.' },
+      },
+      {
+        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.',
+        },
+        defaultValue: false,
+        label: 'Override access control',
+      },
+      getAccessField({ pluginConfig }),
+    ],
+    labels: {
+      plural: 'API Keys',
+      singular: 'API Key',
+    },
+  }
+
+  return pluginConfig.overrideApiKeyCollection
+    ? pluginConfig.overrideApiKeyCollection(collection)
+    : collection
+}

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

@@ -0,0 +1,344 @@
+'use client'
+
+import type { JSONFieldClientProps } from 'payload'
+
+import { CheckboxInput, Collapsible, useField } from '@payloadcms/ui'
+import React from 'react'
+
+import type { ClientMCPPluginConfig, MCPAPIKeysDocAccessTree } from '../../types.js'
+
+import './index.css'
+
+const baseClass = 'mcp-access-field'
+
+type ClientItem = ClientMCPPluginConfig['items'][number]
+type ScopeKey = 'collections' | 'globals'
+type FlatKey = 'prompts' | 'resources' | 'tools'
+
+type Props = {
+  pluginConfig: ClientMCPPluginConfig
+} & JSONFieldClientProps
+
+/** Drop a key from an object and return a new object — or `undefined` if it'd be empty. */
+const without = <T extends Record<string, unknown>>(
+  obj: T | undefined,
+  key: string,
+): T | undefined => {
+  if (!obj || !(key in obj)) {
+    return obj
+  }
+  const { [key]: _omitted, ...rest } = obj
+  return Object.keys(rest).length === 0 ? undefined : (rest as T)
+}
+
+const setKey = <T extends Record<string, unknown>>(
+  obj: T | undefined,
+  key: string,
+  value: unknown,
+): T => ({ ...(obj ?? {}), [key]: value }) as T
+
+export const AccessField: React.FC<Props> = ({ path, pluginConfig }) => {
+  const { setValue, value } = useField<MCPAPIKeysDocAccessTree>({ path })
+  const access = value ?? {}
+
+  // Bucket items for rendering. (Bucketing is cheap and runs once per render;
+  // memoizing would mean managing inputs/refs for marginal benefit.)
+  const collectionsBySlug: Record<string, ClientItem[]> = {}
+  const globalsBySlug: Record<string, ClientItem[]> = {}
+  const tools: ClientItem[] = []
+  const prompts: ClientItem[] = []
+  const resources: ClientItem[] = []
+  for (const item of pluginConfig.items) {
+    switch (item.type) {
+      case 'collectionTool':
+        ;(collectionsBySlug[item.collectionSlug!] ??= []).push(item)
+        break
+      case 'globalTool':
+        ;(globalsBySlug[item.globalSlug!] ??= []).push(item)
+        break
+      case 'prompt':
+        prompts.push(item)
+        break
+      case 'resource':
+        resources.push(item)
+        break
+      case 'tool':
+        tools.push(item)
+        break
+    }
+  }
+
+  const isScopedAllowed = (scope: ScopeKey, slug: string, key: string): boolean =>
+    access[scope]?.[slug]?.[key] !== false
+
+  const isFlatAllowed = (scope: FlatKey, key: string): boolean => access[scope]?.[key] !== false
+
+  const toggleScoped = (scope: ScopeKey, slug: string, key: string, allow: boolean) => {
+    if (allow) {
+      const slugBucket = without(access[scope]?.[slug], key)
+      const scopeBucket = slugBucket
+        ? setKey(access[scope], slug, slugBucket)
+        : without(access[scope], slug)
+      setValue(scopeBucket ? setKey(access, scope, scopeBucket) : (without(access, scope) ?? {}))
+    } else {
+      setValue(
+        setKey(
+          access,
+          scope,
+          setKey(access[scope], slug, setKey(access[scope]?.[slug], key, false)),
+        ),
+      )
+    }
+  }
+
+  const toggleFlat = (scope: FlatKey, key: string, allow: boolean) => {
+    if (allow) {
+      const bucket = without(access[scope], key)
+      setValue(bucket ? setKey(access, scope, bucket) : (without(access, scope) ?? {}))
+    } else {
+      setValue(setKey(access, scope, setKey(access[scope], key, false)))
+    }
+  }
+
+  const setAllScoped = (scope: ScopeKey, slug: string, leaves: ClientItem[], allow: boolean) => {
+    if (allow) {
+      const scopeBucket = without(access[scope], slug)
+      setValue(scopeBucket ? setKey(access, scope, scopeBucket) : (without(access, scope) ?? {}))
+    } else {
+      const slugBucket = leaves.reduce<Record<string, boolean>>(
+        (acc, leaf) => ({ ...acc, [leaf.key]: false }),
+        {},
+      )
+      setValue(setKey(access, scope, setKey(access[scope], slug, slugBucket)))
+    }
+  }
+
+  const setAllFlat = (scope: FlatKey, leaves: ClientItem[], allow: boolean) => {
+    if (allow) {
+      setValue(without(access, scope) ?? {})
+    } else {
+      const bucket = leaves.reduce<Record<string, boolean>>(
+        (acc, leaf) => ({ ...acc, [leaf.key]: false }),
+        {},
+      )
+      setValue(setKey(access, scope, bucket))
+    }
+  }
+
+  const collectionSlugs = Object.keys(collectionsBySlug)
+  const globalSlugs = Object.keys(globalsBySlug)
+
+  return (
+    <div className={baseClass}>
+      {collectionSlugs.length > 0 && (
+        <section className={`${baseClass}__section`}>
+          <header className={`${baseClass}__section-header`}>
+            {/* TODO: needs i18n once design is finalized */}
+            <h4>Collection-level permissions</h4>
+            {/* TODO: needs i18n once design is finalized */}
+            <p>Allow MCP clients to perform the following actions within these collections:</p>
+          </header>
+          {collectionSlugs.map((slug) => {
+            const leaves = collectionsBySlug[slug]!
+            return (
+              <Collapsible
+                actions={
+                  <GroupActions
+                    onSetAll={(allow) => setAllScoped('collections', slug, leaves, allow)}
+                  />
+                }
+                className={`${baseClass}__group`}
+                header={<span className={`${baseClass}__group-label`}>{titleCase(slug)}</span>}
+                initCollapsed
+                key={`collection-${slug}`}
+              >
+                <ul className={`${baseClass}__list`}>
+                  {leaves.map((leaf) => (
+                    <li key={leaf.key}>
+                      <CheckboxInput
+                        checked={isScopedAllowed('collections', slug, leaf.key)}
+                        id={`${path}.collections.${slug}.${leaf.key}`}
+                        label={leaf.label}
+                        onToggle={(e) =>
+                          toggleScoped('collections', slug, leaf.key, e.target.checked)
+                        }
+                        tooltip={leaf.description}
+                      />
+                    </li>
+                  ))}
+                </ul>
+              </Collapsible>
+            )
+          })}
+        </section>
+      )}
+
+      {globalSlugs.length > 0 && (
+        <section className={`${baseClass}__section`}>
+          <header className={`${baseClass}__section-header`}>
+            {/* TODO: needs i18n once design is finalized */}
+            <h4>Global-level permissions</h4>
+            {/* TODO: needs i18n once design is finalized */}
+            <p>Allow MCP clients to perform the following actions on these globals:</p>
+          </header>
+          {globalSlugs.map((slug) => {
+            const leaves = globalsBySlug[slug]!
+            return (
+              <Collapsible
+                actions={
+                  <GroupActions
+                    onSetAll={(allow) => setAllScoped('globals', slug, leaves, allow)}
+                  />
+                }
+                className={`${baseClass}__group`}
+                header={<span className={`${baseClass}__group-label`}>{titleCase(slug)}</span>}
+                initCollapsed
+                key={`global-${slug}`}
+              >
+                <ul className={`${baseClass}__list`}>
+                  {leaves.map((leaf) => (
+                    <li key={leaf.key}>
+                      <CheckboxInput
+                        checked={isScopedAllowed('globals', slug, leaf.key)}
+                        id={`${path}.globals.${slug}.${leaf.key}`}
+                        label={leaf.label}
+                        onToggle={(e) => toggleScoped('globals', slug, leaf.key, e.target.checked)}
+                        tooltip={leaf.description}
+                      />
+                    </li>
+                  ))}
+                </ul>
+              </Collapsible>
+            )
+          })}
+        </section>
+      )}
+
+      {(tools.length > 0 || prompts.length > 0 || resources.length > 0) && (
+        <section className={`${baseClass}__section`}>
+          <header className={`${baseClass}__section-header`}>
+            {/* TODO: needs i18n once design is finalized */}
+            <h4>Project-level permissions</h4>
+            {/* TODO: needs i18n once design is finalized */}
+            <p>Cross-cutting tools, prompts, and resources not scoped to a single collection.</p>
+          </header>
+          {tools.length > 0 && (
+            <Collapsible
+              actions={<GroupActions onSetAll={(allow) => setAllFlat('tools', tools, allow)} />}
+              className={`${baseClass}__group`}
+              header={
+                /* TODO: needs i18n once design is finalized */
+                <span className={`${baseClass}__group-label`}>Tools</span>
+              }
+              initCollapsed
+            >
+              <ul className={`${baseClass}__list`}>
+                {tools.map((leaf) => (
+                  <li key={leaf.key}>
+                    <CheckboxInput
+                      checked={isFlatAllowed('tools', leaf.key)}
+                      id={`${path}.tools.${leaf.key}`}
+                      label={leaf.label}
+                      onToggle={(e) => toggleFlat('tools', leaf.key, e.target.checked)}
+                      tooltip={leaf.description}
+                    />
+                  </li>
+                ))}
+              </ul>
+            </Collapsible>
+          )}
+          {prompts.length > 0 && (
+            <Collapsible
+              actions={<GroupActions onSetAll={(allow) => setAllFlat('prompts', prompts, allow)} />}
+              className={`${baseClass}__group`}
+              header={
+                /* TODO: needs i18n once design is finalized */
+                <span className={`${baseClass}__group-label`}>Prompts</span>
+              }
+              initCollapsed
+            >
+              <ul className={`${baseClass}__list`}>
+                {prompts.map((leaf) => (
+                  <li key={leaf.key}>
+                    <CheckboxInput
+                      checked={isFlatAllowed('prompts', leaf.key)}
+                      id={`${path}.prompts.${leaf.key}`}
+                      label={leaf.label}
+                      onToggle={(e) => toggleFlat('prompts', leaf.key, e.target.checked)}
+                      tooltip={leaf.description}
+                    />
+                  </li>
+                ))}
+              </ul>
+            </Collapsible>
+          )}
+          {resources.length > 0 && (
+            <Collapsible
+              actions={
+                <GroupActions onSetAll={(allow) => setAllFlat('resources', resources, allow)} />
+              }
+              className={`${baseClass}__group`}
+              header={
+                /* TODO: needs i18n once design is finalized */
+                <span className={`${baseClass}__group-label`}>Resources</span>
+              }
+              initCollapsed
+            >
+              <ul className={`${baseClass}__list`}>
+                {resources.map((leaf) => (
+                  <li key={leaf.key}>
+                    <CheckboxInput
+                      checked={isFlatAllowed('resources', leaf.key)}
+                      id={`${path}.resources.${leaf.key}`}
+                      label={leaf.label}
+                      onToggle={(e) => toggleFlat('resources', leaf.key, e.target.checked)}
+                      tooltip={leaf.description}
+                    />
+                  </li>
+                ))}
+              </ul>
+            </Collapsible>
+          )}
+        </section>
+      )}
+    </div>
+  )
+}
+
+const GroupActions: React.FC<{ onSetAll: (allow: boolean) => void }> = ({ onSetAll }) => (
+  // TODO: button labels + aria-labels need i18n once design is finalized
+  <div className={`${baseClass}__group-actions`}>
+    <button
+      aria-label="Select all"
+      className={`${baseClass}__action`}
+      onClick={(e) => {
+        e.stopPropagation()
+        onSetAll(true)
+      }}
+      title="Select all"
+      type="button"
+    >
+      all
+    </button>
+    <span aria-hidden className={`${baseClass}__action-sep`}>
+      /
+    </span>
+    <button
+      aria-label="Clear all"
+      className={`${baseClass}__action`}
+      onClick={(e) => {
+        e.stopPropagation()
+        onSetAll(false)
+      }}
+      title="Clear all"
+      type="button"
+    >
+      none
+    </button>
+  </div>
+)
+
+const titleCase = (slug: string): string =>
+  slug.replace(/(^|[-_])(.)/g, (_, sep: string, ch: string) =>
+    sep ? ` ${ch.toUpperCase()}` : ch.toUpperCase(),
+  )

package/src/components/AccessField/index.css

@@ -0,0 +1,93 @@
+@layer payload-default {
+  .mcp-access-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--base);
+  }
+
+  .mcp-access-field__section {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) / 2);
+    padding-bottom: var(--base);
+    /* Full-bleed separator: extend past the sidebar's horizontal gutter so the
+       border-block-end spans the entire sidebar width. */
+    margin-inline-start: calc(-1 * var(--sidebar-gutter-h-left, var(--gutter-h)));
+    margin-inline-end: calc(-1 * var(--sidebar-gutter-h-right, var(--gutter-h)));
+    padding-inline-start: var(--sidebar-gutter-h-left, var(--gutter-h));
+    padding-inline-end: var(--sidebar-gutter-h-right, var(--gutter-h));
+    border-block-end: 1px solid var(--theme-elevation-100);
+  }
+
+  .mcp-access-field__section:last-child {
+    border-block-end: none;
+  }
+
+  .mcp-access-field__section-header {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .mcp-access-field__section-header h4 {
+    margin: 0;
+    color: var(--color-text);
+    font-family: var(--text-heading-small-font-family);
+    font-size: var(--text-heading-small-font-size);
+    font-weight: var(--text-heading-small-font-weight);
+    line-height: var(--text-heading-small-line-height);
+    letter-spacing: var(--text-heading-small-letter-spacing);
+  }
+
+  .mcp-access-field__section-header p {
+    margin: 0;
+    color: var(--color-text-secondary);
+    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-access-field__group {
+    margin-block-end: calc(var(--base) / 2);
+  }
+
+  .mcp-access-field__group-label {
+    font-weight: 600;
+  }
+
+  .mcp-access-field__group-actions {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--base) / 6);
+  }
+
+  .mcp-access-field__action {
+    appearance: none;
+    background: none;
+    border: none;
+    color: var(--theme-elevation-500);
+    cursor: pointer;
+    font-size: 0.75rem;
+    padding: 0;
+  }
+
+  .mcp-access-field__action:hover {
+    color: var(--theme-text);
+    text-decoration: underline;
+  }
+
+  .mcp-access-field__action-sep {
+    color: var(--theme-elevation-300);
+    font-size: 0.75rem;
+  }
+
+  .mcp-access-field__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) / 3);
+  }
+}