@abinnovision/payloadcms-mcpx 1.0.0-beta.7 → 1.0.0-beta.9

package/README.md

@@ -27,6 +27,9 @@ yarn add @abinnovision/payloadcms-mcpx
 ```
 
 - Peer dependency: `payload >=3.88.0 <4`.
+- `@payloadcms/ui` and `react` are optional peers, needed only by the admin
+  setup guide. A headless install can leave them out and set
+  `apiKeys.setupGuide: false`.
 - The package is published as ESM only, matching Payload itself.
 
 ## Usage
@@ -85,6 +88,22 @@ all keys) or add fields.
 
 ## Connecting a client
 
+Saved keys carry a **Connect a client** tab in the admin holding these same
+instructions with their own URL and key filled in, each block behind a copy
+button. The tab only exists once the key does, so the create form stays free of
+it. Turn it off with `apiKeys.setupGuide: false`, which also drops the tabs and
+restores the flat form.
+
+The tab renders an admin component, so it has to be in the import map:
+
+```bash
+payload generate:importmap
+```
+
+Without that entry Payload logs a missing-component error and renders nothing
+else; the rest of the plugin is unaffected. The URL comes from `serverURL` when
+the config sets one and from the browser's origin otherwise.
+
 The endpoint speaks streamable HTTP with `Authorization: Bearer <key>`:
 
 ```bash
@@ -163,8 +182,9 @@ Rules the tools enforce and explain in their own descriptions:
   the only place the restriction is checked.
 - Field and collection `admin.description` values are included in
   `describeSchema` and `listCapabilities`, so intent written for the admin
-  panel reaches the client. Strings and locale-keyed records pass through;
-  functions and components are dropped.
+  panel reaches the client. A locale-keyed record is resolved to one string for
+  the request's language, falling back to the deployment's fallback language and
+  then to the record's first entry; functions and components are dropped.
 - Builtin tools reject unknown arguments by name instead of silently ignoring
   them.
 - Every path this plugin accepts or reports is a JSON Pointer. A schema path
@@ -295,6 +315,7 @@ Builtin tools reject them instead.
 | `globals.<slug>.allowLiveWrites`     | `false`                        | Permit writes to a global without drafts (they land live).                                                         |
 | `userCollection`                     | `config.admin.user` or `users` | Auth collection the keys act as.                                                                                   |
 | `apiKeys.slug`                       | `mcpx-api-keys`                | Slug of the generated key collection.                                                                              |
+| `apiKeys.setupGuide`                 | `true`                         | Add a "Connect a client" tab to saved keys. Needs the import map.                                                  |
 | `apiKeys.overrideCollection`         | none                           | Final override applied to the generated collection.                                                                |
 | `endpoint.path`                      | `/mcpx`                        | Endpoint path below the API route.                                                                                 |
 | `limits.maxLimit`                    | `25`                           | Upper bound for `findDocuments.limit`.                                                                             |

package/dist/api-keys/collection.mjs

@@ -1,4 +1,4 @@
-import { createCapabilityFields, createKeyFields } from "./fields.mjs";
+import { createCapabilityFields, createKeyFields, withSetupGuideTab } from "./fields.mjs";
 import { generateApiKey, hashApiKey } from "./key.mjs";
 //#region src/api-keys/collection.ts
 /**
@@ -36,7 +36,7 @@ import { generateApiKey, hashApiKey } from "./key.mjs";
 			delete: ownKeysOnly
 		},
 		hooks: { beforeChange: [keyBeforeChange] },
-		fields: [
+		fields: withSetupGuideTab([
 			{
 				name: "user",
 				type: "relationship",
@@ -51,7 +51,7 @@ import { generateApiKey, hashApiKey } from "./key.mjs";
 			},
 			...createKeyFields(),
 			...createCapabilityFields(options)
-		]
+		], options)
 	};
 };
 //#endregion

package/dist/api-keys/fields.mjs

@@ -15,6 +15,7 @@ const checkbox = (name, description) => ({
 	defaultValue: false,
 	admin: { description }
 });
+const SETUP_GUIDE_FIELD = "setupGuide";
 /**
 * Fields every key carries. Key generation and the HMAC index live in the
 * collection-level `beforeChange` hook (see `collection.ts`), because sibling
@@ -56,6 +57,39 @@ const checkbox = (name, description) => ({
 	}
 ];
 /**
+* Wraps the key fields and the setup guide in unnamed tabs, so the wide
+* snippets get the full form width without pushing the key itself out of view.
+* Unnamed on purpose: named tabs would nest the data and move `capabilities`
+* off the document root, which capability resolution reads.
+*
+* The guide tab is conditioned on the update operation. On create there is no
+* key to hand out, and a tab leading to an empty panel is worse than no tab.
+*/ const withSetupGuideTab = (keyFields, options) => {
+	if (!options.setupGuide) return keyFields;
+	return [{
+		type: "tabs",
+		tabs: [{
+			label: "Key",
+			fields: keyFields
+		}, {
+			label: "Connect a client",
+			admin: { condition: (_data, _siblingData, { operation }) => operation === "update" },
+			fields: [{
+				name: SETUP_GUIDE_FIELD,
+				type: "ui",
+				admin: {
+					disableListColumn: true,
+					components: { Field: {
+						path: "@abinnovision/payloadcms-mcpx/client",
+						exportName: "McpxSetupGuide",
+						clientProps: { endpointPath: options.endpointPath }
+					} }
+				}
+			}]
+		}]
+	}];
+};
+/**
 * One checkbox per exposed operation, grouped per collection, per global and
 * per custom tool. Only operations the plugin config exposes get a checkbox, so
 * a key can never enable more than the config allows. Everything defaults to
@@ -100,4 +134,4 @@ const checkbox = (name, description) => ({
 	}];
 };
 //#endregion
-export { createCapabilityFields, createKeyFields };
+export { SETUP_GUIDE_FIELD, createCapabilityFields, createKeyFields, withSetupGuideTab };

package/dist/api-keys/setup-guide.mjs

@@ -0,0 +1,54 @@
+//#region src/api-keys/setup-guide.ts
+const KEY_PLACEHOLDER = "<your-key>";
+/**
+* Server name for the client config. MCP clients key their config by this, so
+* it has to survive labels with spaces or punctuation.
+*/ const toServerName = (label) => {
+	const slug = (label ?? "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+	return slug === "" ? "payload" : slug;
+};
+/**
+* The connection instructions for one key, split into independently copyable
+* blocks. Kept a pure builder so the admin component holds only rendering and
+* the snippets stay unit-testable.
+*/ const buildSetupGuide = (input) => {
+	const key = typeof input.apiKey === "string" ? input.apiKey : KEY_PLACEHOLDER;
+	const name = toServerName(input.label);
+	const url = input.endpointUrl;
+	return [
+		{
+			id: "endpoint",
+			title: "Endpoint",
+			description: "Streamable HTTP. Point any MCP client at this URL.",
+			snippet: url
+		},
+		{
+			id: "header",
+			title: "Authorization header",
+			description: "The only accepted credential; cookies and JWTs are ignored.",
+			snippet: `Authorization: Bearer ${key}`
+		},
+		{
+			id: "claude-code",
+			title: "Claude Code",
+			snippet: [`claude mcp add --transport http ${name} ${url} \\`, `  --header "Authorization: Bearer ${key}"`].join("\n")
+		},
+		{
+			id: "claude-desktop",
+			title: "Claude Desktop",
+			description: "Has no direct header support, so it goes through mcp-remote.",
+			snippet: JSON.stringify({ mcpServers: { [name]: {
+				command: "npx",
+				args: [
+					"-y",
+					"mcp-remote",
+					url,
+					"--header",
+					`Authorization: Bearer ${key}`
+				]
+			} } }, null, 2)
+		}
+	];
+};
+//#endregion
+export { KEY_PLACEHOLDER, buildSetupGuide, toServerName };

package/dist/client/index.d.mts

@@ -0,0 +1,2 @@
+import { McpxSetupGuide, McpxSetupGuideProps } from "./setup-guide.mjs";
+export { McpxSetupGuide, type McpxSetupGuideProps };

package/dist/client/index.mjs

@@ -0,0 +1,2 @@
+import { McpxSetupGuide } from "./setup-guide.mjs";
+export { McpxSetupGuide };

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

@@ -0,0 +1,14 @@
+import React from "react";
+//#region src/client/setup-guide.d.ts
+interface McpxSetupGuideProps {
+  /** Endpoint path below the API route, from the plugin options. */
+  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.
+ */
+declare const McpxSetupGuide: React.FC<McpxSetupGuideProps>;
+//#endregion
+export { McpxSetupGuide, type McpxSetupGuideProps };

package/dist/client/setup-guide.mjs

@@ -0,0 +1,87 @@
+"use client";
+import { buildSetupGuide } from "../api-keys/setup-guide.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CopyToClipboard, useConfig, useDocumentInfo, useFormFields } from "@payloadcms/ui";
+import { useEffect, useState } from "react";
+//#region src/client/setup-guide.tsx
+const asString = (value) => typeof value === "string" ? value : void 0;
+/**
+* Reads `serverURL` when the config sets one and falls back to the browser's
+* origin. The fallback has to wait for mount: this component is server-rendered
+* first, where `window` does not exist.
+*/ const useOrigin = (serverUrl) => {
+	const [origin, setOrigin] = useState(serverUrl);
+	useEffect(() => {
+		if (serverUrl === "") setOrigin(window.location.origin);
+	}, [serverUrl]);
+	return origin;
+};
+/**
+* Payload's own theme variables, so the panel follows the admin's light and
+* dark themes without shipping a stylesheet consumers would have to transpile.
+*/ const styles = {
+	lead: { marginBottom: "calc(var(--base) * 0.75)" },
+	section: { marginBottom: "calc(var(--base) * 0.75)" },
+	sectionHeader: {
+		display: "flex",
+		alignItems: "center",
+		gap: "calc(var(--base) * 0.25)"
+	},
+	description: {
+		margin: "calc(var(--base) * 0.15) 0",
+		color: "var(--theme-elevation-500)"
+	},
+	snippet: {
+		margin: 0,
+		padding: "calc(var(--base) * 0.4)",
+		background: "var(--theme-elevation-50)",
+		border: "1px solid var(--theme-elevation-150)",
+		borderRadius: "3px",
+		fontFamily: "var(--font-mono)",
+		overflowX: "auto",
+		whiteSpace: "pre-wrap",
+		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 { 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: `${origin.replace(/\/+$/, "")}${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))]
+	});
+};
+//#endregion
+export { McpxSetupGuide };

package/dist/i18n.d.mts

@@ -0,0 +1 @@
+import { PayloadRequest } from "payload";

package/dist/i18n.mjs

@@ -0,0 +1,40 @@
+//#region src/i18n.ts
+/**
+* A locale-keyed record, once it is known to hold nothing but strings.
+*/ const stringRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value) && Object.values(value).every((entry) => typeof entry === "string") ? value : void 0;
+/**
+* Picks the entry a language addresses, treating an empty value as absent so
+* the chain continues rather than yielding a useless string.
+*/ const pick = (record, language) => {
+	for (const code of Array.isArray(language) ? language : [language]) {
+		const entry = record[code];
+		if (entry !== void 0 && entry.trim() !== "") return entry;
+	}
+};
+/**
+* Resolves a static label or `admin.description` to the one string a client
+* can use: the request's language, then the fallback language configured for
+* the deployment, then whichever entry the record declares first.
+*
+* Anything that is not a string or a string-valued record is dropped. A
+* description written as a function or a React component is an admin-UI
+* construct that may reach client-only i18n, so it is never invoked here.
+*/ const translateStatic = (value, language) => {
+	if (typeof value === "string") return value.trim() === "" ? void 0 : value;
+	const record = stringRecord(value);
+	if (!record) return;
+	return pick(record, language.language) ?? pick(record, language.fallbackLanguage) ?? Object.values(record).find((entry) => entry.trim() !== "");
+};
+/**
+* Binds {@link translateStatic} to a request's language, so a walk that
+* resolves many descriptions carries no request of its own.
+*/ const translatorFor = (i18n) => (value) => translateStatic(value, i18n);
+/**
+* Translator for callers with no request in hand. Both language keys miss, so
+* the chain degrades to the record's first entry.
+*/ const translateAny = translatorFor({
+	fallbackLanguage: "",
+	language: ""
+});
+//#endregion
+export { translateAny, translateStatic, translatorFor };

package/dist/options.mjs

@@ -132,6 +132,7 @@ const normalizeLimits = (limits) => {
 		userCollection,
 		apiKeysSlug,
 		endpointPath: options.endpoint?.path ?? DEFAULT_ENDPOINT_PATH,
+		setupGuide: options.apiKeys?.setupGuide ?? true,
 		limits: normalizeLimits(options.limits),
 		tools,
 		auth: options.auth,

package/dist/schema/describe.mjs

@@ -1,4 +1,5 @@
 import { lexicalSubSchema, subSchemaNodeTypes } from "./lexical.mjs";
+import { translateAny } from "../i18n.mjs";
 import { blockOf, blockSlugsOf, describeFields, findBlocksField, findRichTextField, joinPath, splitPath, targetOf } from "./walk.mjs";
 //#region src/schema/describe.ts
 /**
@@ -115,9 +116,12 @@ import { blockOf, blockSlugsOf, describeFields, findBlocksField, findRichTextFie
 /**
 * Describes a collection or global root, one block reached through a schema
 * path, or the fields a Lexical node carries.
-*/ const describeNode = (config, ref, schemaPath = "") => {
+*
+* Curried on the translator that resolves each `admin.description`, so a
+* request binds its language once and the walk itself stays request-free.
+*/ const nodeDescriber = (translate = translateAny) => (config, ref, schemaPath = "") => {
 	const { blockType, fields } = fieldsAtSchemaPath(config, targetOf(config, ref), schemaPath);
-	const descriptors = describeFields(fields);
+	const descriptors = describeFields(fields, translate);
 	const next = descriptors.flatMap((descriptor) => branchesOf(fields, descriptor, schemaPath).map((branch) => branch.path));
 	return {
 		...blockType === void 0 ? {} : { blockType },
@@ -153,4 +157,4 @@ import { blockOf, blockSlugsOf, describeFields, findBlocksField, findRichTextFie
 	};
 };
 //#endregion
-export { describeNode, reachableSchemaPaths };
+export { nodeDescriber, reachableSchemaPaths };

package/dist/schema/walk.d.mts

@@ -1,2 +1,3 @@
 import "./lexical.mjs";
+import "../i18n.mjs";
 import "payload";

package/dist/schema/walk.mjs

@@ -1,4 +1,5 @@
 import { allowedNodeTypes, nodeOptions } from "./lexical.mjs";
+import { translateAny } from "../i18n.mjs";
 import { fieldIsHiddenOrDisabled, fieldIsVirtual } from "payload/shared";
 //#region src/schema/walk.ts
 /**
@@ -46,16 +47,8 @@ import { fieldIsHiddenOrDisabled, fieldIsVirtual } from "payload/shared";
 };
 const isSkipped = (field) => !("name" in field) || field.type === "join" || RESERVED_FIELD_NAMES.has(field.name) || fieldIsVirtual(field) || fieldIsHiddenOrDisabled(field);
 const isReadOnly = (field) => "admin" in field && field.admin.readOnly === true;
-/**
-* The `admin.description` of a field or collection, when it is serializable:
-* a string or a locale-keyed record. Functions and components are admin-UI
-* constructs and are dropped.
-*/ const staticDescription = (description) => {
-	if (typeof description === "string") return description;
-	return typeof description === "object" && description !== null && Object.values(description).every((entry) => typeof entry === "string") ? description : void 0;
-};
-const describeBase = (field, path, readOnly) => {
-	const description = staticDescription("admin" in field ? field.admin.description : void 0);
+const describeBase = (field, { path, readOnly, translate }) => {
+	const description = translate("admin" in field ? field.admin.description : void 0);
 	return {
 		path,
 		type: field.type,
@@ -65,8 +58,8 @@ const describeBase = (field, path, readOnly) => {
 		...readOnly ? { readOnly: true } : {}
 	};
 };
-const describeLeaf = (field, path, readOnly) => {
-	const descriptor = describeBase(field, path, readOnly);
+const describeLeaf = (field, at) => {
+	const descriptor = describeBase(field, at);
 	if (field.type === "select" || field.type === "radio") descriptor.options = field.options.map((option) => typeof option === "string" ? option : option.value);
 	if (field.type === "relationship" || field.type === "upload") descriptor.relationTo = field.relationTo;
 	if ((field.type === "select" || field.type === "relationship" || field.type === "upload") && field.hasMany === true) descriptor.hasMany = true;
@@ -109,21 +102,34 @@ const withRows = (descriptor, field) => ({
 * constraint. The walk stops at every blocks field and names the slugs instead
 * of descending, which keeps a node proportional to the number of blocks it
 * allows rather than to the size of their definitions.
-*/ const describeFields = (fields, prefix = [], parentReadOnly = false) => fields.flatMap((field) => {
-	if (isSkipped(field)) return [];
-	const readOnly = parentReadOnly || isReadOnly(field);
-	const path = [...prefix, field.name];
-	if (field.type === "tab" || field.type === "group") {
-		const own = describeBase(field, joinPath(path), readOnly);
-		return [...isInformative(own) ? [own] : [], ...describeFields(field.flattenedFields, path, readOnly)];
-	}
-	if (field.type === "array") return [withRows(describeBase(field, joinPath(path), readOnly), field), ...describeFields(field.flattenedFields, [...path, "*"], readOnly)];
-	if (field.type === "blocks") return [withRows({
-		...describeBase(field, joinPath(path), readOnly),
-		blocks: blockSlugsOf(field)
-	}, field)];
-	return [describeLeaf(field, joinPath(path), readOnly)];
-});
+*
+* `translate` resolves each `admin.description` to the request's language.
+* Callers that walk for paths alone leave it out and get the language-agnostic
+* default, so a missing argument costs language selection, never the
+* description itself.
+*/ const describeFields = (fields, translate = translateAny) => {
+	const walk = (current, prefix, parentReadOnly) => current.flatMap((field) => {
+		if (isSkipped(field)) return [];
+		const readOnly = parentReadOnly || isReadOnly(field);
+		const path = [...prefix, field.name];
+		const at = {
+			path: joinPath(path),
+			readOnly,
+			translate
+		};
+		if (field.type === "tab" || field.type === "group") {
+			const own = describeBase(field, at);
+			return [...isInformative(own) ? [own] : [], ...walk(field.flattenedFields, path, readOnly)];
+		}
+		if (field.type === "array") return [withRows(describeBase(field, at), field), ...walk(field.flattenedFields, [...path, "*"], readOnly)];
+		if (field.type === "blocks") return [withRows({
+			...describeBase(field, at),
+			blocks: blockSlugsOf(field)
+		}, field)];
+		return [describeLeaf(field, at)];
+	});
+	return walk(fields, [], false);
+};
 /**
 * The descriptors that address a value, which is what every walk resolving a
 * path against a document needs. A container describes a position rather than
@@ -156,4 +162,4 @@ const targetOf = (config, ref) => {
 	return found;
 };
 //#endregion
-export { JSON_POINTER_PATTERN, RESERVED_FIELD_NAMES, blockOf, blockSlugsOf, describeAddressableFields, describeFields, findBlocksField, findRichTextField, joinPath, pointerFromPayloadPath, splitPath, staticDescription, targetOf };
+export { JSON_POINTER_PATTERN, RESERVED_FIELD_NAMES, blockOf, blockSlugsOf, describeAddressableFields, describeFields, findBlocksField, findRichTextField, joinPath, pointerFromPayloadPath, splitPath, targetOf };

package/dist/tools/describe-schema.mjs

@@ -1,7 +1,8 @@
+import { translatorFor } from "../i18n.mjs";
 import { jsonResult } from "../endpoint/result.mjs";
 import { targetShape } from "./shared.mjs";
 import { refOf, resolveTarget } from "./target.mjs";
-import { describeNode, reachableSchemaPaths } from "../schema/describe.mjs";
+import { nodeDescriber, reachableSchemaPaths } from "../schema/describe.mjs";
 import { z } from "zod";
 //#region src/tools/describe-schema.ts
 const describeSchema = {
@@ -33,6 +34,7 @@ Fields Payload maintains (id, _status, createdAt, updatedAt) are never listed an
 	handler: (args, scope) => {
 		const ref = refOf(resolveTarget(scope, args, "read"));
 		const { config } = scope.req.payload;
+		const describeNode = nodeDescriber(translatorFor(scope.req.i18n));
 		const expanded = args.expand === true ? reachableSchemaPaths(config, ref) : void 0;
 		const nodes = (expanded?.paths ?? (args.paths && args.paths.length > 0 ? args.paths : [""])).map((schemaPath) => {
 			try {

package/dist/tools/list-capabilities.mjs

@@ -1,4 +1,4 @@
-import { staticDescription } from "../schema/walk.mjs";
+import { translatorFor } from "../i18n.mjs";
 import { jsonResult } from "../endpoint/result.mjs";
 import { translateLabel } from "./shared.mjs";
 import { hasDraftValidationEnabled } from "payload/shared";
@@ -16,12 +16,13 @@ A global is a singleton: it has no id, is not listed by findDocuments and cannot
 	inputSchema: () => ({}),
 	handler: (_args, scope) => {
 		const { payload } = scope.req;
+		const translate = translatorFor(scope.req.i18n);
 		const collections = scope.options.collections.flatMap((entry) => {
 			const capability = scope.capabilities.collections[entry.slug];
 			const collection = payload.collections[entry.slug];
 			if (!capability || !collection || !(capability.read || capability.write)) return [];
 			const { config } = collection;
-			const description = staticDescription(config.admin.description);
+			const description = translate(config.admin.description);
 			return [{
 				slug: entry.slug,
 				labels: {
@@ -40,7 +41,7 @@ A global is a singleton: it has no id, is not listed by findDocuments and cannot
 			const capability = scope.capabilities.globals[entry.slug];
 			const config = payload.globals.config.find((candidate) => candidate.slug === entry.slug);
 			if (!capability || !config || !(capability.read || capability.write)) return [];
-			const description = staticDescription(config.admin.description);
+			const description = translate(config.admin.description);
 			return [{
 				slug: entry.slug,
 				label: translateLabel(scope, config.label, entry.slug),

package/dist/tools/shared.mjs

@@ -1,3 +1,4 @@
+import { translateStatic } from "../i18n.mjs";
 import { NotFound } from "payload";
 import { z } from "zod";
 //#region src/tools/shared.ts
@@ -90,9 +91,7 @@ const depthShape = (scope) => ({ depth: z.number().int().min(0).max(scope.option
 		i18n,
 		t
 	}) : label;
-	if (typeof resolved === "string") return resolved;
-	if (resolved && typeof resolved === "object") return resolved[i18n.language] ?? Object.values(resolved)[0] ?? fallback;
-	return fallback;
+	return translateStatic(resolved, i18n) ?? fallback;
 };
 //#endregion
 export { depthShape, idSchema, idShape, localeOf, localeShape, readTarget, slugEnum, targetShape, translateLabel };

package/dist/types.d.mts

@@ -90,6 +90,11 @@ type McpxPluginOptions = {
   apiKeys?: {
     /** Slug of the generated API key collection. Default `mcpx-api-keys`. */
     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.
+     */
+    setupGuide?: boolean;
     /** Final override applied to the generated collection. */
     overrideCollection?: (collection: CollectionConfig) => CollectionConfig;
   };

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@abinnovision/payloadcms-mcpx",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.9",
   "description": "Payload CMS plugin exposing a fixed, schema-aware MCP tool surface with draft-only writes and per-API-key capabilities.",
   "keywords": [
     "payload",
@@ -26,6 +26,10 @@
     ".": {
       "types": "./dist/index.d.mts",
       "default": "./dist/index.mjs"
+    },
+    "./client": {
+      "types": "./dist/client/index.d.mts",
+      "default": "./dist/client/index.mjs"
     }
   },
   "files": [
@@ -35,17 +39,17 @@
   ],
   "scripts": {
     "build": "tsdown",
-    "format:check": "prettier --check 'src/**/*.ts' 'test/**/*.ts' '*.{json{,5},md,y{,a}ml}'",
-    "format:fix": "prettier --write 'src/**/*.ts' 'test/**/*.ts' '*.{json{,5},md,y{,a}ml}'",
-    "lint:check": "eslint 'src/**/*.ts' 'test/**/*.ts'",
-    "lint:fix": "eslint 'src/**/*.ts' 'test/**/*.ts' --fix",
+    "format:check": "prettier --check 'src/**/*.{ts,tsx}' 'test/**/*.ts' '*.{json{,5},md,y{,a}ml}'",
+    "format:fix": "prettier --write 'src/**/*.{ts,tsx}' 'test/**/*.ts' '*.{json{,5},md,y{,a}ml}'",
+    "lint:check": "eslint 'src/**/*.{ts,tsx}' 'test/**/*.ts'",
+    "lint:fix": "eslint 'src/**/*.{ts,tsx}' 'test/**/*.ts' --fix",
     "test-integration": "vitest --run --config test/integration/vitest.config.mts",
     "test-unit": "vitest --run --coverage --config vitest.config.mts",
     "test-unit:watch": "vitest --config vitest.config.mts",
     "typecheck": "tsc --noEmit"
   },
   "lint-staged": {
-    "{src,test}/**/*.ts": [
+    "{src,test}/**/*.{ts,tsx}": [
       "eslint --fix",
       "prettier --write"
     ],
@@ -63,6 +67,7 @@
     "@arethetypeswrong/core": "^0.18.5",
     "@payloadcms/db-sqlite": "3.88.0",
     "@payloadcms/richtext-lexical": "3.88.0",
+    "@payloadcms/ui": "3.88.0",
     "@swc/core": "^1.16.1",
     "@types/node": "^26.2.0",
     "@types/react": "^19.2.18",
@@ -79,7 +84,17 @@
     "vitest": "^4.1.10"
   },
   "peerDependencies": {
-    "payload": ">=3.88.0 <4"
+    "@payloadcms/ui": ">=3.88.0 <4",
+    "payload": ">=3.88.0 <4",
+    "react": "^19"
+  },
+  "peerDependenciesMeta": {
+    "@payloadcms/ui": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "ghpr": true,