@prenta/admin 2.4.0 → 2.6.0

package/src/views/settings/mcp-connect.ts

@@ -0,0 +1,209 @@
+/**
+ * Connection text for Settings → MCP. Each client gets one thing to copy.
+ * OAuth clients receive the remote URL. Editors that cannot sign in receive
+ * a stdio config with a placeholder key, never a real secret.
+ */
+
+export type McpClientId =
+  | 'claude-code'
+  | 'claude'
+  | 'chatgpt'
+  | 'grok'
+  | 'cursor'
+  | 'vscode'
+  | 'other'
+
+export interface McpClientGuide {
+  id: McpClientId
+  label: string
+  title: string
+  /** One sentence under the title. */
+  summary: string
+  /** Primary button. */
+  action: string
+  /** Exact text the primary button and the panel copy control place on the clipboard. */
+  copyText: string
+  /** Shown in the panel. Equals copyText except where the panel adds a label. */
+  panel: string
+  manual: string[]
+  /** This client needs a Content API key created on the API Keys tab. */
+  needsApiKey: boolean
+}
+
+export function mcpServerName(mcpUrl: string): string {
+  try {
+    const host = new URL(mcpUrl).hostname.replace(/^www\./, '')
+    const label = (host.split('.')[0] || 'site').toLowerCase().replace(/[^a-z0-9]+/g, '-')
+    return `${label.replace(/^-|-$/g, '') || 'site'}-prenta`
+  } catch {
+    return 'site-prenta'
+  }
+}
+
+function mcpSiteOrigin(mcpUrl: string): string {
+  try {
+    return new URL(mcpUrl).origin
+  } catch {
+    return mcpUrl.replace(/\/mcp\/?$/, '')
+  }
+}
+
+export function mcpClientGuides(mcpUrl: string): McpClientGuide[] {
+  const name = mcpServerName(mcpUrl)
+  const origin = mcpSiteOrigin(mcpUrl)
+  const claudeCodePrompt = [
+    'Add this Prenta site as a remote MCP server.',
+    '',
+    'Connection details:',
+    `- Server URL: ${mcpUrl}`,
+    '- Transport: HTTP',
+    `- Server name: ${name}`,
+    '',
+    'Do not store an API key. This site signs in with OAuth. After the server is added, start the sign-in flow so I can approve it in the browser.',
+    '',
+    `Command: claude mcp add --transport http ${name} ${mcpUrl}`,
+  ].join('\n')
+
+  const cursorConfig = JSON.stringify(
+    {
+      mcpServers: {
+        [name]: {
+          command: 'npx',
+          args: ['-y', '@prenta/mcp-server'],
+          env: {
+            PRENTA_BASE_URL: origin,
+            PRENTA_API_KEY: 'act_sk_...',
+          },
+        },
+      },
+    },
+    null,
+    2,
+  )
+
+  const vscodeConfig = JSON.stringify(
+    {
+      servers: {
+        [name]: {
+          type: 'stdio',
+          command: 'npx',
+          args: ['-y', '@prenta/mcp-server'],
+          env: {
+            PRENTA_BASE_URL: origin,
+            PRENTA_API_KEY: 'act_sk_...',
+          },
+        },
+      },
+    },
+    null,
+    2,
+  )
+
+  const bearer = 'Authorization: Bearer act_sk_...'
+
+  return [
+    {
+      id: 'claude-code',
+      label: 'Claude Code',
+      title: 'Connect this site to Claude Code',
+      summary:
+        'Paste this prompt into Claude Code. It adds the server, then this site asks you to approve access.',
+      action: 'Copy prompt',
+      copyText: claudeCodePrompt,
+      panel: claudeCodePrompt,
+      manual: [
+        `Run: claude mcp add --transport http ${name} ${mcpUrl}`,
+        'Approve the sign-in page this site opens. Do not paste an API key into the command.',
+      ],
+      needsApiKey: false,
+    },
+    {
+      id: 'claude',
+      label: 'Claude',
+      title: 'Connect this site to Claude',
+      summary: 'Claude on the web, Desktop, and Cowork use this URL and sign in here.',
+      action: 'Copy URL',
+      copyText: mcpUrl,
+      panel: mcpUrl,
+      manual: [
+        'Open Claude → Settings → Connectors → Add custom connector.',
+        'Paste the URL and continue. This site opens so you can allow access.',
+      ],
+      needsApiKey: false,
+    },
+    {
+      id: 'chatgpt',
+      label: 'ChatGPT',
+      title: 'Connect this site to ChatGPT',
+      summary: 'ChatGPT signs in here. It cannot use an API key.',
+      action: 'Copy URL',
+      copyText: mcpUrl,
+      panel: mcpUrl,
+      manual: [
+        'Open ChatGPT → Settings → Connectors and add a custom connector.',
+        'Paste the URL. ChatGPT sends you back here to approve access.',
+      ],
+      needsApiKey: false,
+    },
+    {
+      id: 'grok',
+      label: 'Grok',
+      title: 'Connect this site to Grok',
+      summary:
+        'Grok on the web signs in here. The Grok CLI and the xAI API send a Content API key instead.',
+      action: 'Copy URL',
+      copyText: mcpUrl,
+      panel: mcpUrl,
+      manual: [
+        'On grok.com, add a connector and paste the URL, then approve access on this site.',
+        `For the Grok CLI or the xAI API, create a Content API key and send ${bearer}. Include the word Bearer.`,
+      ],
+      needsApiKey: true,
+    },
+    {
+      id: 'cursor',
+      label: 'Cursor',
+      title: 'Connect this site to Cursor',
+      summary:
+        'Cursor runs the local server. Create a Content API key and replace the placeholder.',
+      action: 'Copy config',
+      copyText: cursorConfig,
+      panel: cursorConfig,
+      manual: [
+        'Open Cursor → Settings → MCP and add a new server, or paste this into .cursor/mcp.json.',
+        'Create a Content API key and replace act_sk_... . Do not commit the file.',
+      ],
+      needsApiKey: true,
+    },
+    {
+      id: 'vscode',
+      label: 'VS Code',
+      title: 'Connect this site to VS Code',
+      summary:
+        'Save this as .vscode/mcp.json. Create a Content API key and replace the placeholder.',
+      action: 'Copy config',
+      copyText: vscodeConfig,
+      panel: vscodeConfig,
+      manual: [
+        'Save the config as .vscode/mcp.json.',
+        'Create a Content API key and replace act_sk_... . Do not commit the file.',
+      ],
+      needsApiKey: true,
+    },
+    {
+      id: 'other',
+      label: 'Other',
+      title: 'Connect another client',
+      summary:
+        'Clients that can sign in use the URL. Clients that can set a header use a Content API key.',
+      action: 'Copy URL',
+      copyText: mcpUrl,
+      panel: mcpUrl,
+      manual: [
+        'Point the client at the server URL.',
+        'If it signs in, approve access on this site. If it sends a header, use a Content API key as Authorization: Bearer act_sk_... . Do not put the key in the query string.',
+      ],
+      needsApiKey: true,
+    },
+  ]
+}

package/src/views/settings/useAppearanceSettings.ts

@@ -5,6 +5,8 @@ import {
   logoShapeWarning,
   resolveAdminBrand,
   resolvePublicBrand,
+  parsePublicTheme,
+  publicThemeFieldError,
   validateAccentColor,
   type AdminBrandingMode,
   type BrandAssetLike,
@@ -13,6 +15,7 @@ import {
   type ColorMode,
   type LogoShape,
   type ResolvedAdminBrand,
+  type PublicTheme,
   type ResolvedPublicBrand,
   type SidebarDensity,
 } from '@prenta/core/appearance'
@@ -39,6 +42,7 @@ interface AppearanceForm {
   density: SidebarDensity
   font: string
   reduceMotion: boolean
+  publicTheme: Required<PublicTheme>
 }
 
 /** Brand asset references + admin branding mode (the `brand` settings blob). */
@@ -136,6 +140,7 @@ export interface UseAppearanceSettings {
   setDensity: (v: SidebarDensity) => void
   setFont: (v: string) => void
   setReduceMotion: (v: boolean) => void
+  setPublicTheme: (patch: Partial<PublicTheme>) => void
   setBrandingMode: (v: AdminBrandingMode) => void
   setAltText: (v: string) => void
   uploadAsset: (field: BrandAssetField, file: File) => Promise<void>
@@ -147,12 +152,22 @@ export interface UseAppearanceSettings {
   reload: () => void
 }
 
+const EMPTY_PUBLIC_THEME: Required<PublicTheme> = {
+  accent: '',
+  background: '',
+  foreground: '',
+  muted: '',
+  fontFamily: '',
+  radius: '',
+}
+
 const DEFAULT_FORM: AppearanceForm = {
   colorMode: 'system',
   accent: 'purple',
   density: 'default',
   font: 'System UI',
   reduceMotion: false,
+  publicTheme: EMPTY_PUBLIC_THEME,
 }
 
 const DEFAULT_BRAND_FORM: BrandForm = { mode: 'inheritPublicBrand' }
@@ -263,12 +278,14 @@ export function useAppearanceSettings(
       return
     }
     const d = res.data
+    const storedTheme = d.appearance.publicTheme
     const nextAppearance: AppearanceForm = {
       colorMode: d.appearance.adminColorModeDefault,
       accent: d.appearance.adminAccentColor,
       density: d.appearance.sidebarDensity,
       font: d.appearance.contentFont,
       reduceMotion: d.appearance.reduceMotion,
+      publicTheme: { ...EMPTY_PUBLIC_THEME, ...storedTheme },
     }
     const nextBrand: BrandForm = { ...d.brand, mode: d.brand?.mode ?? 'inheritPublicBrand' }
     const nextAssets = parseAppearanceAssets(d.assets ?? [])
@@ -319,6 +336,15 @@ export function useAppearanceSettings(
     (v: boolean) => update({ ...appearance, reduceMotion: v }, brand, assets),
     [appearance, brand, assets, update],
   )
+  const setPublicTheme = useCallback(
+    (patch: Partial<PublicTheme>) =>
+      update(
+        { ...appearance, publicTheme: { ...appearance.publicTheme, ...patch } },
+        brand,
+        assets,
+      ),
+    [appearance, brand, assets, update],
+  )
   const setBrandingMode = useCallback(
     (v: AdminBrandingMode) => update(appearance, { ...brand, mode: v }, assets),
     [appearance, brand, assets, update],
@@ -434,6 +460,17 @@ export function useAppearanceSettings(
     }
     // Dark mode default but no dark logo.
     const hasDark = Boolean(brand.publicDarkLogoAssetId || brand.adminDarkLogoAssetId)
+    for (const field of [
+      'accent',
+      'background',
+      'foreground',
+      'muted',
+      'fontFamily',
+      'radius',
+    ] as const) {
+      const message = publicThemeFieldError(field, appearance.publicTheme[field])
+      if (message) out.push({ field: `publicTheme.${field}`, message, severity: 'error' })
+    }
     if (appearance.colorMode === 'dark' && !hasDark) {
       out.push({
         field: 'colorMode',
@@ -488,6 +525,7 @@ export function useAppearanceSettings(
       sidebarDensity: appearance.density,
       contentFont: appearance.font,
       reduceMotion: appearance.reduceMotion,
+      publicTheme: parsePublicTheme(appearance.publicTheme),
       updatedAt: now,
     }
     const merged = {
@@ -536,6 +574,7 @@ export function useAppearanceSettings(
     setDensity,
     setFont,
     setReduceMotion,
+    setPublicTheme,
     setBrandingMode,
     setAltText,
     uploadAsset,