create-nextblock 0.14.5 → 0.14.6

package/templates/nextblock-template/app/cms/settings/cortex-ai/McpServerSettingsCard.tsx

@@ -0,0 +1,584 @@
+'use client';
+
+import React, { useMemo, useState, useTransition } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  Input,
+  Label,
+} from '@nextblock-cms/ui';
+import {
+  AlertTriangle,
+  Check,
+  Copy,
+  KeyRound,
+  Plug,
+  Plus,
+  Trash2,
+} from 'lucide-react';
+
+import {
+  createMcpAccessTokenAction,
+  revokeMcpAccessTokenAction,
+  saveMcpSettingsAction,
+  type McpAccessTokenSummary,
+} from './mcp-actions';
+
+type McpScope = 'read' | 'write';
+
+type McpServerSettingsCardProps = {
+  allowLocalhostWithoutToken: boolean;
+  enabled: boolean;
+  /** Loopback URL for a locally-running dev server. */
+  localMcpUrl: string;
+  /** The publicly reachable endpoint, derived from NEXT_PUBLIC_URL. */
+  mcpUrl: string;
+  tokens: McpAccessTokenSummary[];
+};
+
+const TOKEN_PLACEHOLDER = 'YOUR_TOKEN';
+
+function CopyButton({ label = 'Copy', value }: { label?: string; value: string }) {
+  const [copied, setCopied] = useState(false);
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="sm"
+      className="h-7 shrink-0"
+      onClick={() => {
+        void navigator.clipboard.writeText(value).then(() => {
+          setCopied(true);
+          setTimeout(() => setCopied(false), 1800);
+        });
+      }}
+    >
+      {copied ? <Check className="mr-1.5 h-3.5 w-3.5" /> : <Copy className="mr-1.5 h-3.5 w-3.5" />}
+      {copied ? 'Copied' : label}
+    </Button>
+  );
+}
+
+function Snippet({ code, title }: { code: string; title: string }) {
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-xs font-medium">{title}</p>
+        <CopyButton value={code} />
+      </div>
+      <pre className="overflow-x-auto rounded-md border bg-muted/40 p-3 text-[11px] leading-relaxed">
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+}
+
+function formatDate(value: string | null) {
+  if (!value) return null;
+  return new Intl.DateTimeFormat('en', { dateStyle: 'medium', timeStyle: 'short' }).format(
+    new Date(value)
+  );
+}
+
+export function McpServerSettingsCard({
+  allowLocalhostWithoutToken,
+  enabled,
+  localMcpUrl,
+  mcpUrl,
+  tokens,
+}: McpServerSettingsCardProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+
+  const [isEnabled, setIsEnabled] = useState(enabled);
+  const [allowLocalhost, setAllowLocalhost] = useState(allowLocalhostWithoutToken);
+  const [tokenName, setTokenName] = useState('');
+  const [allowWrites, setAllowWrites] = useState(true);
+  const [expiresInDays, setExpiresInDays] = useState('');
+  const [mintedToken, setMintedToken] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [activeClient, setActiveClient] = useState<'claude-code' | 'claude-desktop' | 'cursor' | 'vscode'>(
+    'claude-code'
+  );
+  const [useLocalUrl, setUseLocalUrl] = useState(false);
+
+  const url = useLocalUrl ? localMcpUrl : mcpUrl;
+
+  // Once a token has been minted in this session, bake it into the snippets so the
+  // admin can copy a config that actually works instead of hand-substituting.
+  const tokenForSnippet = mintedToken ?? TOKEN_PLACEHOLDER;
+
+  /**
+   * Whether the generated snippets should carry an Authorization header at all.
+   *
+   * A loopback connection covered by localhost trust needs none — and must not send
+   * one: the route verifies any bearer it receives and rejects an invalid value
+   * outright rather than falling back to localhost trust, so pasting the literal
+   * placeholder would 401 instead of silently working. Once a real token exists we
+   * include it either way, since it works on both origins.
+   */
+  const usesLocalhostTrust = useLocalUrl && allowLocalhost && !mintedToken;
+
+  const snippets = useMemo(() => {
+    const authHeader = usesLocalhostTrust
+      ? undefined
+      : { Authorization: `Bearer ${tokenForSnippet}` };
+
+    const claudeCode = JSON.stringify(
+      {
+        mcpServers: {
+          nextblock: {
+            ...(authHeader ? { headers: authHeader } : {}),
+            type: 'http',
+            url,
+          },
+        },
+      },
+      null,
+      2
+    );
+
+    const cursor = JSON.stringify(
+      {
+        mcpServers: {
+          nextblock: {
+            ...(authHeader ? { headers: authHeader } : {}),
+            url,
+          },
+        },
+      },
+      null,
+      2
+    );
+
+    const vscode = JSON.stringify(
+      usesLocalhostTrust
+        ? { servers: { nextblock: { type: 'http', url } } }
+        : {
+            inputs: [
+              {
+                description: 'NextBlock MCP access token',
+                id: 'nextblockToken',
+                password: true,
+                type: 'promptString',
+              },
+            ],
+            servers: {
+              nextblock: {
+                headers: { Authorization: 'Bearer ${input:nextblockToken}' },
+                type: 'http',
+                url,
+              },
+            },
+          },
+      null,
+      2
+    );
+
+    const claudeDesktop = JSON.stringify(
+      {
+        mcpServers: {
+          nextblock: {
+            args: [
+              '-y',
+              'mcp-remote',
+              url,
+              ...(usesLocalhostTrust
+                ? []
+                : ['--header', `Authorization: Bearer ${tokenForSnippet}`]),
+            ],
+            command: 'npx',
+          },
+        },
+      },
+      null,
+      2
+    );
+
+    return { claudeCode, claudeDesktop, cursor, vscode };
+  }, [tokenForSnippet, url, usesLocalhostTrust]);
+
+  const claudeCodeCli = usesLocalhostTrust
+    ? `claude mcp add --transport http nextblock ${url}`
+    : `claude mcp add --transport http nextblock ${url} --header "Authorization: Bearer ${tokenForSnippet}"`;
+
+  function persistSettings(next: { allowLocalhostWithoutToken: boolean; enabled: boolean }) {
+    setError(null);
+    startTransition(async () => {
+      const result = await saveMcpSettingsAction(next);
+
+      if (!result.success) {
+        setError(result.error ?? 'Failed to save MCP settings.');
+        // Snap the optimistic toggle back so the UI never claims a state the DB rejected.
+        setIsEnabled(enabled);
+        setAllowLocalhost(allowLocalhostWithoutToken);
+        return;
+      }
+
+      router.refresh();
+    });
+  }
+
+  function handleCreateToken() {
+    setError(null);
+    setMintedToken(null);
+
+    startTransition(async () => {
+      const parsedDays = Number.parseInt(expiresInDays, 10);
+      const result = await createMcpAccessTokenAction({
+        expiresInDays: Number.isFinite(parsedDays) && parsedDays > 0 ? parsedDays : null,
+        name: tokenName,
+        scopes: allowWrites ? (['read', 'write'] as McpScope[]) : (['read'] as McpScope[]),
+      });
+
+      if (!result.success || !result.token) {
+        setError(result.error ?? 'Failed to create the token.');
+        return;
+      }
+
+      setMintedToken(result.token);
+      setTokenName('');
+      setExpiresInDays('');
+      router.refresh();
+    });
+  }
+
+  function handleRevoke(id: string) {
+    setError(null);
+    startTransition(async () => {
+      const result = await revokeMcpAccessTokenAction({ id });
+
+      if (!result.success) {
+        setError(result.error ?? 'Failed to revoke the token.');
+        return;
+      }
+
+      router.refresh();
+    });
+  }
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-3">
+        <div>
+          <CardTitle className="flex flex-wrap items-center gap-2 text-base">
+            <Plug className="h-4 w-4" />
+            MCP server access
+            <Badge variant={isEnabled ? 'default' : 'outline'} className="ml-0.5 font-normal">
+              {isEnabled ? 'Enabled' : 'Disabled'}
+            </Badge>
+            {isEnabled && tokens.length > 0 && (
+              <Badge variant="secondary" className="font-normal">
+                {tokens.length} active {tokens.length === 1 ? 'token' : 'tokens'}
+              </Badge>
+            )}
+          </CardTitle>
+          <CardDescription className="text-xs">
+            Expose this CMS to external AI clients over the Model Context Protocol. Claude Code,
+            Claude Desktop, Cursor, and VS Code get the same typed Cortex tools the dashboard agent
+            uses — building pages, editing blocks, querying analytics — from inside your editor.
+          </CardDescription>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4 pt-0">
+        {error && (
+          <Alert variant="destructive">
+            <AlertTriangle className="h-4 w-4" />
+            <AlertTitle>Could not save</AlertTitle>
+            <AlertDescription className="text-xs">{error}</AlertDescription>
+          </Alert>
+        )}
+
+        {/* Toggles */}
+        <div className="space-y-3 rounded-md border bg-muted/20 p-3">
+          <div className="flex items-start gap-2.5">
+            <Checkbox
+              id="mcp_enabled"
+              checked={isEnabled}
+              disabled={isPending}
+              onCheckedChange={(checked) => {
+                const next = checked === true;
+                setIsEnabled(next);
+                persistSettings({ allowLocalhostWithoutToken: allowLocalhost, enabled: next });
+              }}
+            />
+            <div className="space-y-0.5">
+              <Label htmlFor="mcp_enabled" className="text-sm font-medium">
+                Enable the MCP server
+              </Label>
+              <p className="text-xs text-muted-foreground">
+                While off, <span className="font-mono">/api/mcp</span> rejects every request. Off by
+                default because this is a remote write surface onto your live content.
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-start gap-2.5">
+            <Checkbox
+              id="mcp_allow_localhost"
+              checked={allowLocalhost}
+              disabled={isPending || !isEnabled}
+              onCheckedChange={(checked) => {
+                const next = checked === true;
+                setAllowLocalhost(next);
+                persistSettings({ allowLocalhostWithoutToken: next, enabled: isEnabled });
+              }}
+            />
+            <div className="space-y-0.5">
+              <Label htmlFor="mcp_allow_localhost" className="text-sm font-medium">
+                Trust localhost without a token
+              </Label>
+              <p className="text-xs text-muted-foreground">
+                Convenience for local development only — it is ignored whenever{' '}
+                <span className="font-mono">NODE_ENV=production</span>, so your deployed site always
+                requires a token.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Endpoint */}
+        <div className="space-y-1.5">
+          <Label className="text-xs">Endpoint URL</Label>
+          <div className="flex items-center gap-2">
+            <Input readOnly value={url} className="font-mono text-xs" />
+            <CopyButton value={url} />
+          </div>
+          <div className="flex gap-1.5 pt-0.5">
+            <Button
+              type="button"
+              size="sm"
+              variant={useLocalUrl ? 'ghost' : 'secondary'}
+              className="h-6 text-[11px]"
+              onClick={() => setUseLocalUrl(false)}
+            >
+              Live site
+            </Button>
+            <Button
+              type="button"
+              size="sm"
+              variant={useLocalUrl ? 'secondary' : 'ghost'}
+              className="h-6 text-[11px]"
+              onClick={() => setUseLocalUrl(true)}
+            >
+              Localhost
+            </Button>
+          </div>
+        </div>
+
+        {/* Token minting */}
+        <div className="space-y-3 rounded-md border p-3">
+          <div className="space-y-0.5">
+            <p className="text-sm font-medium">Access tokens</p>
+            <p className="text-xs text-muted-foreground">
+              Only the token&rsquo;s hash is stored, so it is shown once and cannot be recovered
+              afterwards. A read-only token cannot even list the mutating tools.
+            </p>
+          </div>
+
+          <div className="flex flex-wrap items-end gap-2">
+            <div className="min-w-[180px] flex-1 space-y-1.5">
+              <Label htmlFor="mcp_token_name" className="text-xs">
+                Name
+              </Label>
+              <Input
+                id="mcp_token_name"
+                value={tokenName}
+                maxLength={80}
+                placeholder="My laptop — Claude Code"
+                onChange={(event) => setTokenName(event.target.value)}
+              />
+            </div>
+            <div className="w-28 space-y-1.5">
+              <Label htmlFor="mcp_token_expiry" className="text-xs">
+                Expires (days)
+              </Label>
+              <Input
+                id="mcp_token_expiry"
+                type="number"
+                min={1}
+                max={3650}
+                value={expiresInDays}
+                placeholder="Never"
+                onChange={(event) => setExpiresInDays(event.target.value)}
+              />
+            </div>
+            <div className="flex h-9 items-center gap-2">
+              <Checkbox
+                id="mcp_token_write"
+                checked={allowWrites}
+                onCheckedChange={(checked) => setAllowWrites(checked === true)}
+              />
+              <Label htmlFor="mcp_token_write" className="text-xs">
+                Allow writes
+              </Label>
+            </div>
+            <Button
+              type="button"
+              size="sm"
+              disabled={isPending || !tokenName.trim()}
+              onClick={handleCreateToken}
+            >
+              <Plus className="mr-1.5 h-3.5 w-3.5" />
+              Create
+            </Button>
+          </div>
+
+          {mintedToken && (
+            <Alert>
+              <KeyRound className="h-4 w-4" />
+              <AlertTitle>Copy this token now</AlertTitle>
+              <AlertDescription className="space-y-2">
+                <p className="text-xs">
+                  This is the only time it will be shown. The snippets below already include it.
+                </p>
+                <div className="flex items-center gap-2">
+                  <Input readOnly value={mintedToken} className="font-mono text-xs" />
+                  <CopyButton value={mintedToken} />
+                </div>
+              </AlertDescription>
+            </Alert>
+          )}
+
+          {tokens.length > 0 && (
+            <div className="divide-y rounded-md border">
+              {tokens.map((token) => {
+                const lastUsed = formatDate(token.lastUsedAt);
+                const expires = formatDate(token.expiresAt);
+
+                return (
+                  <div key={token.id} className="flex items-center justify-between gap-2 p-2.5">
+                    <div className="min-w-0 space-y-0.5">
+                      <div className="flex flex-wrap items-center gap-1.5">
+                        <span className="truncate text-sm font-medium">{token.name}</span>
+                        <Badge
+                          variant={token.scopes.includes('write') ? 'secondary' : 'outline'}
+                          className="font-normal"
+                        >
+                          {token.scopes.includes('write') ? 'read + write' : 'read only'}
+                        </Badge>
+                      </div>
+                      <p className="text-[11px] text-muted-foreground">
+                        <span className="font-mono">{token.tokenPrefix}…</span>
+                        {' · '}
+                        {lastUsed ? `last used ${lastUsed}` : 'never used'}
+                        {expires ? ` · expires ${expires}` : ''}
+                      </p>
+                    </div>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      disabled={isPending}
+                      className="h-7 shrink-0 text-destructive hover:text-destructive"
+                      onClick={() => handleRevoke(token.id)}
+                    >
+                      <Trash2 className="mr-1.5 h-3.5 w-3.5" />
+                      Revoke
+                    </Button>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Client configuration */}
+        <div className="space-y-3 rounded-md border p-3">
+          <div className="space-y-0.5">
+            <p className="text-sm font-medium">Connect a client</p>
+            <p className="text-xs text-muted-foreground">
+              {usesLocalhostTrust
+                ? 'No token needed: localhost trust covers this connection while the dev server runs. These snippets deliberately send no Authorization header — an invalid one would be rejected rather than falling back to localhost trust.'
+                : mintedToken
+                  ? 'These snippets include the token you just created.'
+                  : `Create a token above and these snippets will fill it in; otherwise replace ${TOKEN_PLACEHOLDER}.`}
+            </p>
+          </div>
+
+          <div className="flex flex-wrap gap-1.5">
+            {(
+              [
+                ['claude-code', 'Claude Code'],
+                ['claude-desktop', 'Claude Desktop'],
+                ['cursor', 'Cursor'],
+                ['vscode', 'VS Code'],
+              ] as const
+            ).map(([key, label]) => (
+              <Button
+                key={key}
+                type="button"
+                size="sm"
+                variant={activeClient === key ? 'secondary' : 'ghost'}
+                className="h-7 text-xs"
+                onClick={() => setActiveClient(key)}
+              >
+                {label}
+              </Button>
+            ))}
+          </div>
+
+          {activeClient === 'claude-code' && (
+            <div className="space-y-3">
+              <Snippet code={claudeCodeCli} title="One-line CLI setup" />
+              <Snippet
+                code={snippets.claudeCode}
+                title="…or add to .mcp.json in your project root"
+              />
+              <p className="text-[11px] text-muted-foreground">
+                The <span className="font-mono">type</span> field is required — Claude Code skips a
+                server entry that has a <span className="font-mono">url</span> but no{' '}
+                <span className="font-mono">type</span>.
+              </p>
+            </div>
+          )}
+
+          {activeClient === 'claude-desktop' && (
+            <div className="space-y-3">
+              <Alert>
+                <AlertTriangle className="h-4 w-4" />
+                <AlertTitle>Two options, and the easy one has a catch</AlertTitle>
+                <AlertDescription className="text-xs">
+                  Settings &rarr; Connectors &rarr; Add custom connector accepts{' '}
+                  <span className="font-mono">{url}</span> directly (type{' '}
+                  <span className="font-mono">Bearer YOUR_TOKEN</span>, including the space, in the
+                  auth field) — but custom connectors dial out from Anthropic&rsquo;s cloud, so a
+                  localhost or firewalled site will not connect that way. Use the config below
+                  instead in that case; it bridges over stdio from your own machine.
+                </AlertDescription>
+              </Alert>
+              <Snippet code={snippets.claudeDesktop} title="claude_desktop_config.json" />
+            </div>
+          )}
+
+          {activeClient === 'cursor' && (
+            <Snippet code={snippets.cursor} title=".cursor/mcp.json" />
+          )}
+
+          {activeClient === 'vscode' && (
+            <div className="space-y-3">
+              <Snippet code={snippets.vscode} title=".vscode/mcp.json" />
+              <p className="text-[11px] text-muted-foreground">
+                VS Code uses <span className="font-mono">servers</span> at the top level, not{' '}
+                <span className="font-mono">mcpServers</span>, and prompts for the token rather than
+                storing it in the file.
+              </p>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/templates/nextblock-template/app/cms/settings/cortex-ai/StoredCortexAiSettingsClient.tsx

@@ -72,6 +72,8 @@ type StoredCortexAiSettingsClientProps = {
   stockKeysUpdatedAt: string | null;
   unsplashAppName: string | null;
   agentSettings: CortexAiAgentSettings;
+  /** Slot for server-rendered cards (currently the MCP server access card). */
+  children?: React.ReactNode;
   successMessage?: string;
   errorMessage?: string;
 };
@@ -142,6 +144,7 @@ export function StoredCortexAiSettingsClient({
   hasEnvUnsplashKey,
   unsplashAppName,
   agentSettings,
+  children,
   successMessage,
   errorMessage,
 }: StoredCortexAiSettingsClientProps) {
@@ -496,6 +499,9 @@ export function StoredCortexAiSettingsClient({
         </CardContent>
       </Card>
 
+      {/* MCP server access — rendered by the server page so it can read token state. */}
+      {children}
+
       {/* Advanced settings (collapsed by default) */}
       <div>
         <button

package/templates/nextblock-template/app/cms/settings/cortex-ai/actions.ts

@@ -3,7 +3,9 @@
 import { revalidatePath } from 'next/cache';
 import { redirect } from 'next/navigation';
 
-import { createClient, verifyPackageOnline } from '@nextblock-cms/db/server';
+import { verifyPackageOnline } from '@nextblock-cms/db/server';
+
+import { requireAdminSupabaseClient as requireAdminAccess } from './require-admin';
 
 import {
   CORTEX_AI_AGENT_SETTINGS_DEFAULTS,
@@ -65,25 +67,7 @@ function redirectWithStatus(status: 'success' | 'error', message: string): never
 }
 
 async function requireAdminSupabaseClient() {
-  const supabase = createClient();
-  const {
-    data: { user },
-    error: userError,
-  } = await supabase.auth.getUser();
-
-  if (userError || !user) {
-    throw new Error('You must be logged in to manage Cortex AI settings.');
-  }
-
-  const { data: profile, error: profileError } = await supabase
-    .from('profiles')
-    .select('role')
-    .eq('id', user.id)
-    .single();
-
-  if (profileError || !profile || profile.role !== 'ADMIN') {
-    throw new Error('You do not have permission to manage Cortex AI settings.');
-  }
+  const { supabase } = await requireAdminAccess();
 
   return supabase;
 }