@abinnovision/payloadcms-mcpx 2.0.0-beta.20 → 2.0.0-beta.22

package/README.md

@@ -82,7 +82,7 @@ claude mcp add --transport http payload http://localhost:3000/api/mcpx \
 
 Claude Desktop and the MCP Inspector are covered in
 [`docs/integration.md`](./docs/integration.md#connecting-other-clients). Saved keys also have a
-"Connect a client" tab with ready-to-paste snippets.
+"Connect a client" button that opens ready-to-paste snippets.
 
 ## Options
 
@@ -96,7 +96,7 @@ Claude Desktop and the MCP Inspector are covered in
 | `globals`                    | `{}`                                      | Globals to expose, with `read`, `write` and `publish`.                                                                                            |
 | `userCollection`             | `config.admin.user`, then `users`         | Auth collection whose users the keys act as.                                                                                                      |
 | `apiKeys.slug`               | `mcpx-api-keys`                           | Slug of the key collection.                                                                                                                       |
-| `apiKeys.setupGuide`         | `true`                                    | Add the "Connect a client" tab to saved keys.                                                                                                     |
+| `apiKeys.setupGuide`         | `true`                                    | Add the "Connect a client" button to saved keys.                                                                                                  |
 | `apiKeys.overrideCollection` | none                                      | Function that receives the key collection and returns it.                                                                                         |
 | `endpoint.path`              | `/mcpx`                                   | Endpoint path below the API route.                                                                                                                |
 | `limits.maxLimit`            | `25`                                      | Highest `limit` a client may pass to a list tool.                                                                                                 |

package/dist/admin/setup-guide.d.mts

@@ -7,9 +7,9 @@ interface McpxSetupGuideProps {
   endpointPath: string;
 }
 /**
- * Per-key connection instructions on the API key edit view. Renders nothing
- * until the document is saved, because before that there is no key to hand to
- * a client.
+ * Per-key connection instructions on the API key edit view, opened from a
+ * button next to the document controls. Renders nothing until the document is
+ * saved, because before that there is no key to hand to a client.
  */
 export declare const McpxSetupGuide: React.FC<McpxSetupGuideProps>;
 //#endregion

package/dist/admin/setup-guide.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { endpointUrl } from "./endpoint-url.mjs";
 import { buildSetupGuide } from "../api-keys/setup-guide.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CopyToClipboard, useConfig, useDocumentInfo, useFormFields } from "@payloadcms/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Banner, Button, CopyToClipboard, Drawer, formatDrawerSlug, useConfig, useDocumentInfo, useEditDepth, useFormFields, useModal } from "@payloadcms/ui";
 import { useEffect, useState } from "react";
 //#region src/admin/setup-guide.tsx
 const asString = (value) => typeof value === "string" ? value : void 0;
@@ -14,7 +14,6 @@ const useOrigin = (serverUrl) => {
 	return origin;
 };
 const styles = {
-	lead: { marginBottom: "calc(var(--base) * 0.75)" },
 	section: { marginBottom: "calc(var(--base) * 0.75)" },
 	sectionHeader: {
 		display: "flex",
@@ -37,45 +36,63 @@ const styles = {
 		wordBreak: "break-all"
 	}
 };
-/**
-* Per-key connection instructions on the API key edit view. Renders nothing
-* until the document is saved, because before that there is no key to hand to
-* a client.
-*/ const McpxSetupGuide = ({ endpointPath }) => {
-	const { id } = useDocumentInfo();
+const SetupGuideContent = ({ endpointPath }) => {
 	const { config } = useConfig();
 	const apiKey = useFormFields(([fields]) => fields["apiKey"]?.value);
 	const label = useFormFields(([fields]) => fields["label"]?.value);
 	const origin = useOrigin(config.serverURL);
-	if (id === void 0) return null;
 	const sections = buildSetupGuide({
 		endpointUrl: endpointUrl(origin, config.routes.api, endpointPath),
 		apiKey: asString(apiKey),
 		label: asString(label)
 	});
-	return /*#__PURE__*/ jsxs("div", {
-		className: "field-type",
-		children: [/*#__PURE__*/ jsx("p", {
-			style: styles.lead,
-			children: "Every snippet below contains this key in full. Treat it like a password."
-		}), sections.map((section) => /*#__PURE__*/ jsxs("section", {
-			style: styles.section,
-			children: [
-				/*#__PURE__*/ jsxs("div", {
-					style: styles.sectionHeader,
-					children: [/*#__PURE__*/ jsx("strong", { children: section.title }), /*#__PURE__*/ jsx(CopyToClipboard, { value: section.snippet })]
-				}),
-				section.description ? /*#__PURE__*/ jsx("p", {
-					style: styles.description,
-					children: section.description
-				}) : null,
-				/*#__PURE__*/ jsx("pre", {
-					style: styles.snippet,
-					children: section.snippet
-				})
-			]
-		}, section.id))]
+	return /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx(Banner, {
+		type: "warning",
+		children: "Every snippet below contains this key in full. Treat it like a password."
+	}), sections.map((section) => /*#__PURE__*/ jsxs("section", {
+		style: styles.section,
+		children: [
+			/*#__PURE__*/ jsxs("div", {
+				style: styles.sectionHeader,
+				children: [/*#__PURE__*/ jsx("strong", { children: section.title }), /*#__PURE__*/ jsx(CopyToClipboard, { value: section.snippet })]
+			}),
+			section.description ? /*#__PURE__*/ jsx("p", {
+				style: styles.description,
+				children: section.description
+			}) : null,
+			/*#__PURE__*/ jsx("pre", {
+				style: styles.snippet,
+				children: section.snippet
+			})
+		]
+	}, section.id))] });
+};
+/**
+* Per-key connection instructions on the API key edit view, opened from a
+* button next to the document controls. Renders nothing until the document is
+* saved, because before that there is no key to hand to a client.
+*/ const McpxSetupGuide = ({ endpointPath }) => {
+	const { id } = useDocumentInfo();
+	const { openModal } = useModal();
+	const drawerSlug = formatDrawerSlug({
+		slug: "mcpx-connect",
+		depth: useEditDepth()
 	});
+	if (id === void 0) return null;
+	return /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx(Button, {
+		buttonStyle: "secondary",
+		margin: false,
+		onClick: () => {
+			openModal(drawerSlug);
+		},
+		size: "medium",
+		type: "button",
+		children: "Connect a client"
+	}), /*#__PURE__*/ jsx(Drawer, {
+		slug: drawerSlug,
+		title: "Connect a client",
+		children: /*#__PURE__*/ jsx(SetupGuideContent, { endpointPath })
+	})] });
 };
 //#endregion
 export { McpxSetupGuide };

package/dist/api-keys/collection.mjs

@@ -28,7 +28,12 @@ import { generateApiKey, hashApiKey } from "./key.mjs";
 		admin: {
 			group: "MCP",
 			useAsTitle: "label",
-			description: "Keys for MCP clients. Each key acts as its user and may only do what its capabilities allow."
+			description: "Keys for MCP clients. Each key acts as its user and may only do what its capabilities allow.",
+			...options.setupGuide && { components: { edit: { beforeDocumentControls: [{
+				path: "@abinnovision/payloadcms-mcpx/admin",
+				exportName: "McpxSetupGuide",
+				clientProps: { endpointPath: options.endpointPath }
+			}] } } }
 		},
 		access: {
 			create: isUser,
@@ -45,7 +50,7 @@ import { generateApiKey, hashApiKey } from "./key.mjs";
 			access: SERVER_ONLY,
 			defaultValue: ({ req }) => isUser({ req }) ? req.user?.id : void 0,
 			admin: { description: "The user this key acts as." }
-		}, ...createKeyFields()], createCapabilityFields(options), options)]
+		}, ...createKeyFields()], createCapabilityFields(options))]
 	};
 };
 //#endregion

package/dist/api-keys/fields.mjs

@@ -96,13 +96,10 @@ const adminField = (name, exportName, options) => ({
 * modified.
 */ const createConfirmationFields = (options) => options.confirmations ? [adminField("confirmations", "McpxConfirmations", options)] : [];
 /**
-* Wraps the key fields, the capabilities and the setup guide in unnamed tabs,
-* so wide tables and snippets get the full form width. Named tabs would nest
-* the data and move `capabilities` off the document root, which capability
-* resolution reads.
-*
-* The guide tab only shows on update: on create there is no key to hand out.
-*/ const withKeyTabs = (keyFields, capabilityFields, options) => {
+* Wraps the key fields and the capabilities in unnamed tabs, so wide tables
+* get the full form width. Named tabs would nest the data and move
+* `capabilities` off the document root, which capability resolution reads.
+*/ const withKeyTabs = (keyFields, capabilityFields) => {
 	const tabs = [{
 		label: "Key",
 		fields: keyFields
@@ -111,11 +108,6 @@ const adminField = (name, exportName, options) => ({
 		label: "Capabilities",
 		fields: capabilityFields
 	});
-	if (options.setupGuide) tabs.push({
-		label: "Connect a client",
-		admin: { condition: (_data, _siblingData, { operation }) => operation === "update" },
-		fields: [adminField("setupGuide", "McpxSetupGuide", options)]
-	});
 	return [{
 		type: "tabs",
 		tabs

package/dist/types.d.mts

@@ -284,8 +284,9 @@ export type McpxPluginOptions = {
      */
     slug?: string;
     /**
-     * Add a "Connect a client" tab to saved keys, holding ready-to-paste MCP
-     * client config. Default `true`. The snippets contain the key in full.
+     * Add a "Connect a client" button to saved keys, opening a drawer with
+     * ready-to-paste MCP client config. Default `true`. The snippets contain
+     * the key in full.
      */
     setupGuide?: boolean;
     /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@abinnovision/payloadcms-mcpx",
-  "version": "2.0.0-beta.20",
+  "version": "2.0.0-beta.22",
   "description": "Payload CMS plugin exposing a fixed, schema-aware MCP tool surface with draft-only writes and per-API-key capabilities.",
   "keywords": [
     "payload",
@@ -57,7 +57,7 @@
   },
   "prettier": "@abinnovision/prettier-config",
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.31.0",
+    "@modelcontextprotocol/sdk": "^1.32.0",
     "rfc6902": "^5.3.0",
     "zod": "^4.6.5"
   },
@@ -73,7 +73,7 @@
     "@types/node": "^26.6.3",
     "@types/react": "^19.3.0",
     "@vitest/coverage-v8": "^5.0.3",
-    "eslint": "^10.11.0",
+    "eslint": "^10.12.0",
     "payload": "3.90.2",
     "prettier": "^3.9.9",
     "publint": "^0.3.25",