@protobase/ui 0.52.0 → 0.53.0

package/dist/account/blocks/connected-apps-block.js

@@ -1,10 +1,12 @@
 import { text } from "../messages.js";
 import { useAuth } from "../../auth/auth-provider.js";
+import { useAdminMeta } from "../../app/meta-gate.js";
 import { AccountLoading } from "./account-loading.js";
 import { useAccountData } from "./use-account-data.js";
 import { ConnectedAppsSection } from "../connected-apps-section.js";
+import { McpAddressSection } from "../mcp-address-section.js";
 import { useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/account/blocks/connected-apps-block.tsx
 const Apps = () => {
 	const { account } = useAuth().session;
@@ -15,7 +17,17 @@ const Apps = () => {
 		onDisconnect: (clientId) => account.disconnectApp(clientId).then(reload)
 	});
 };
-/** The `ConnectedApps` block: the apps the signed-in person allowed to act as them, hidden when the app has no MCP. */
-const ConnectedAppsBlock = () => useAuth().mcp ? /* @__PURE__ */ jsx(Apps, {}) : null;
+const Mcp = ({ url }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(McpAddressSection, {
+	url,
+	appName: useAdminMeta().appName
+}), /* @__PURE__ */ jsx(Apps, {})] });
+/**
+* The `ConnectedApps` block: the address of the app's MCP endpoint and the apps the signed-in person allowed to act as
+* them, hidden when the app has no MCP.
+*/
+const ConnectedAppsBlock = () => {
+	const { mcp } = useAuth();
+	return mcp ? /* @__PURE__ */ jsx(Mcp, { url: mcp.url }) : null;
+};
 //#endregion
 export { ConnectedAppsBlock };

package/dist/account/connector-dialog.js

@@ -0,0 +1,14 @@
+//#region src/account/connector-dialog.ts
+/**
+* The address of Claude's dialog that adds a custom connector, filled in with the MCP endpoint's `url` and, when the
+* app has one, its name; the person sees both there and confirms.
+*/
+const connectorDialogUrl = (url, appName) => {
+	const dialog = new URL("https://claude.ai/customize/connectors");
+	dialog.searchParams.set("modal", "add-custom-connector");
+	if (appName) dialog.searchParams.set("connectorName", appName);
+	dialog.searchParams.set("connectorUrl", url);
+	return dialog.href;
+};
+//#endregion
+export { connectorDialogUrl };

package/dist/account/mcp-address-section.js

@@ -0,0 +1,45 @@
+import { text } from "./messages.js";
+import { buttonClass } from "../primitives/button.js";
+import { AccountSection } from "./account-section.js";
+import { connectorDialogUrl } from "./connector-dialog.js";
+import { useState } from "react";
+import { Check, Copy, ExternalLink } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/account/mcp-address-section.tsx
+/** The address of the app's MCP endpoint, to copy into an AI client or add to Claude, with how connecting goes. */
+const McpAddressSection = ({ url, appName }) => {
+	const [copied, setCopied] = useState(false);
+	return /* @__PURE__ */ jsx(AccountSection, {
+		title: text("mcpAddress"),
+		description: text("mcpAddressDescription"),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center gap-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 items-center gap-2 rounded-md border bg-surface py-1.5 pl-3 pr-1.5",
+				children: [/* @__PURE__ */ jsx("code", {
+					className: "min-w-0 flex-1 break-all font-mono text-xs",
+					children: url
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": copied ? text("copied") : text("copyMcpAddress"),
+					onClick: () => {
+						navigator.clipboard.writeText(url).then(() => {
+							setCopied(true);
+							setTimeout(() => setCopied(false), 2e3);
+						});
+					},
+					className: "inline-flex size-8 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-muted pointer-coarse:size-11",
+					children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-4 text-success" }) : /* @__PURE__ */ jsx(Copy, { className: "size-4" })
+				})]
+			}), /* @__PURE__ */ jsxs("a", {
+				href: connectorDialogUrl(url, appName),
+				target: "_blank",
+				rel: "noreferrer",
+				className: buttonClass(),
+				children: [/* @__PURE__ */ jsx(ExternalLink, { className: "size-3.5" }), text("addToClaude")]
+			})]
+		})
+	});
+};
+//#endregion
+export { McpAddressSection };

package/dist/account/messages.js

@@ -149,7 +149,11 @@ const text = defineMessages({
 		couldNotReadStaffSignIns: "Could not read the staff sign-ins",
 		couldNotReadPolicy: "Could not read the sign-in policy",
 		policySaved: "Saved. It applies to every sign-in from now on.",
-		policySubtitle: "How people sign in to this app. Signed-in people keep their session, and are asked for what is newly required within 15 minutes."
+		policySubtitle: "How people sign in to this app. Signed-in people keep their session, and are asked for what is newly required within 15 minutes.",
+		mcpAddress: "MCP address",
+		mcpAddressDescription: "Add this address to an AI assistant or code editor that speaks MCP, as a custom connector or remote MCP server. It opens this app in your browser, where you sign in and allow it; it then works with your access.",
+		copyMcpAddress: "Copy the MCP address",
+		addToClaude: "Add to Claude"
 	},
 	nl: {
 		account: "Account",
@@ -299,7 +303,11 @@ const text = defineMessages({
 		couldNotReadStaffSignIns: "Kon de inlogs van medewerkers niet lezen",
 		couldNotReadPolicy: "Kon het inlogbeleid niet lezen",
 		policySaved: "Bewaard. Het geldt vanaf nu voor elke inlog.",
-		policySubtitle: "Hoe mensen inloggen bij deze app. Wie is ingelogd, houdt de sessie en krijgt binnen 15 minuten de vraag naar wat nieuw verplicht is."
+		policySubtitle: "Hoe mensen inloggen bij deze app. Wie is ingelogd, houdt de sessie en krijgt binnen 15 minuten de vraag naar wat nieuw verplicht is.",
+		mcpAddress: "MCP-adres",
+		mcpAddressDescription: "Voeg dit adres toe aan een AI-assistent of code-editor die MCP spreekt, als aangepaste connector of externe MCP-server. Die opent deze app in je browser, waar je inlogt en hem toestaat; daarna werkt hij met jouw toegang.",
+		copyMcpAddress: "Het MCP-adres kopiëren",
+		addToClaude: "Toevoegen aan Claude"
 	}
 });
 //#endregion

package/dist/auth/auth-provider.js

@@ -25,7 +25,7 @@ const AuthProvider = ({ session: given, origin, nativeBridge, children }) => {
 	const [signInFirst, setSignInFirst] = useState("password");
 	const [passwordReset, setPasswordReset] = useState(false);
 	const [changeEmail, setChangeEmail] = useState(false);
-	const [mcp, setMcp] = useState(false);
+	const [mcp, setMcp] = useState();
 	const [canSignUp, setCanSignUp] = useState(false);
 	const [passkeyDomains, setPasskeyDomains] = useState([]);
 	const [socialProviders, setSocialProviders] = useState([]);
@@ -110,7 +110,7 @@ const AuthProvider = ({ session: given, origin, nativeBridge, children }) => {
 			setSignInFirst(status.signInFirst ?? "password");
 			setPasswordReset(status.passwordReset && !nativeBridge);
 			setChangeEmail(Boolean(status.changeEmail));
-			setMcp(Boolean(status.mcp));
+			setMcp(status.mcp);
 			setCanSignUp(Boolean(status.signUp));
 			setPasskeyDomains(status.passkeyDomains ?? []);
 			setSocialProviders(status.socialProviders);

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.52.0";
+var version = "0.53.0";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };