strapi-mcp-server 0.1.1

package/admin/src/lib/api.ts

@@ -0,0 +1,27 @@
+import { useFetchClient } from '@strapi/strapi/admin';
+import { PLUGIN_ID } from '../pluginId';
+
+// Strapi mounts plugin admin routes at `/<plugin-name>/<path>` at the host root
+// (no `/api` or `/admin` prefix). useFetchClient handles the admin JWT, base
+// URL, and error normalization for us.
+const base = `/${PLUGIN_ID}`;
+
+export function useMcpApi() {
+  const { get, post, put, del } = useFetchClient();
+  return {
+    overview: async () => (await get(`${base}/dashboard`)).data,
+    listClients: async () => (await get(`${base}/clients`)).data,
+    getClient: async (clientId: string) =>
+      (await get(`${base}/clients/${clientId}`)).data,
+    createClient: async (body: Record<string, unknown>) =>
+      (await post(`${base}/clients`, body)).data,
+    updateClient: async (clientId: string, body: Record<string, unknown>) =>
+      (await put(`${base}/clients/${clientId}`, body)).data,
+    deleteClient: async (clientId: string) =>
+      (await del(`${base}/clients/${clientId}`)).data,
+    listAudit: async (params: Record<string, string | number> = {}) =>
+      (await get(`${base}/audit`, { params })).data,
+    settings: async () => (await get(`${base}/settings`)).data,
+    tools: async () => (await get(`${base}/tools`)).data,
+  };
+}

package/admin/src/lib/applyQuery.ts

@@ -0,0 +1,152 @@
+'use strict';
+
+/**
+ * Client-side application of Strapi's URL-driven list query (`_q` search +
+ * `filters.$and` clauses produced by the native `SearchInput` and `Filters`
+ * components). Our admin pages load all rows up front (audit capped at 200,
+ * clients typically few), so we filter in-memory rather than round-tripping.
+ */
+
+type FilterClause = Record<string, Record<string, string>>;
+
+export interface McpListQuery {
+  _q?: string;
+  filters?: { $and?: FilterClause[] };
+  /** Strapi's Pagination component writes these to the URL as strings. */
+  page?: string | number;
+  pageSize?: string | number;
+}
+
+export const DEFAULT_PAGE_SIZE = 10;
+
+/**
+ * Slice an array to the page selected in the URL query. Pairs with Strapi's
+ * native `Pagination` component, which reads/writes `page` + `pageSize` URL
+ * params on the same query state our filters and search already use. Returns
+ * the visible slice plus pageCount/total for `Pagination.Root`.
+ */
+export function paginate<T>(
+  rows: T[],
+  query: McpListQuery
+): { rows: T[]; pageCount: number; total: number; page: number; pageSize: number } {
+  const pageSize = Math.max(1, Number(query.pageSize) || DEFAULT_PAGE_SIZE);
+  const total = rows.length;
+  const pageCount = Math.max(1, Math.ceil(total / pageSize));
+  const page = Math.min(pageCount, Math.max(1, Number(query.page) || 1));
+  const start = (page - 1) * pageSize;
+  return { rows: rows.slice(start, start + pageSize), pageCount, total, page, pageSize };
+}
+
+/**
+ * Day-granular comparison for $gt/$gte/$lt/$lte and date-aware $eq/$ne. We
+ * compare only the `YYYY-MM-DD` prefix of each value, so a `date` filter
+ * ("May 27") matches a row stored at any time on that day. ISO date prefixes
+ * sort lexicographically, so a string compare is correct and timezone-stable.
+ * Returns `negative | 0 | positive`, or null when either side isn't a date
+ * (so enum filters fall back to exact string matching).
+ */
+const DATE_PREFIX_RE = /^(\d{4}-\d{2}-\d{2})/;
+
+function datePart(value: string): string | null {
+  const m = DATE_PREFIX_RE.exec(value);
+  return m ? m[1] : null;
+}
+
+function dateCompare(a: string, b: string): number | null {
+  const ap = datePart(a);
+  const bp = datePart(b);
+  if (ap === null || bp === null) return null;
+  return ap < bp ? -1 : ap > bp ? 1 : 0;
+}
+
+function ordCompare(a: string, b: string): number {
+  const d = dateCompare(a, b);
+  if (d !== null) return d;
+  const an = Number(a);
+  const bn = Number(b);
+  if (a !== '' && b !== '' && !Number.isNaN(an) && !Number.isNaN(bn)) return an - bn;
+  return a < b ? -1 : a > b ? 1 : 0;
+}
+
+function matchOp(rowValue: string | null | undefined, op: string, value: string): boolean {
+  const rv = rowValue ?? '';
+  const rvl = rv.toLowerCase();
+  const vl = (value ?? '').toLowerCase();
+  switch (op) {
+    case '$eq': {
+      const d = dateCompare(rv, value);
+      return d !== null ? d === 0 : rv === value;
+    }
+    case '$eqi':
+      return rvl === vl;
+    case '$ne': {
+      const d = dateCompare(rv, value);
+      return d !== null ? d !== 0 : rv !== value;
+    }
+    case '$nei':
+      return rvl !== vl;
+    case '$null':
+      return rv === '';
+    case '$notNull':
+      return rv !== '';
+    case '$gt':
+      return rv !== '' && ordCompare(rv, value) > 0;
+    case '$gte':
+      return rv !== '' && ordCompare(rv, value) >= 0;
+    case '$lt':
+      return rv !== '' && ordCompare(rv, value) < 0;
+    case '$lte':
+      return rv !== '' && ordCompare(rv, value) <= 0;
+    case '$contains':
+      return rv.includes(value);
+    case '$containsi':
+      return rvl.includes(vl);
+    case '$notContains':
+      return !rv.includes(value);
+    case '$notContainsi':
+      return !rvl.includes(vl);
+    case '$startsWith':
+      return rv.startsWith(value);
+    case '$endsWith':
+      return rv.endsWith(value);
+    default:
+      // Unknown operator → don't exclude the row.
+      return true;
+  }
+}
+
+export function applyMcpQuery<T>(
+  rows: T[],
+  query: McpListQuery,
+  opts: {
+    /** Concatenated searchable text for the `_q` free-text match. */
+    searchText: (row: T) => string;
+    /** Resolve a filter field name to the row's comparable string value. */
+    field: (row: T, name: string) => string | null | undefined;
+  }
+): T[] {
+  let result = rows;
+
+  const q = (query._q ?? '').trim().toLowerCase();
+  if (q) {
+    result = result.filter((r) => opts.searchText(r).toLowerCase().includes(q));
+  }
+
+  const and = query.filters?.$and ?? [];
+  for (const clause of and) {
+    const entries = Object.entries(clause);
+    if (entries.length === 0) continue;
+    const [fieldName, opObj] = entries[0];
+    const opEntries = Object.entries(opObj ?? {});
+    if (opEntries.length === 0) continue;
+    const [op, value] = opEntries[0];
+    result = result.filter((r) => matchOp(opts.field(r, fieldName), op, String(value)));
+  }
+
+  return result;
+}
+
+/** True when the query carries any active search text or filter clause. */
+export function hasActiveQuery(query: McpListQuery): boolean {
+  return Boolean((query._q ?? '').trim()) || (query.filters?.$and?.length ?? 0) > 0;
+}

package/admin/src/pages/App.tsx

@@ -0,0 +1,126 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { Box, Flex } from '@strapi/design-system';
+import { useAuth } from '@strapi/strapi/admin';
+import { Sidebar } from '../components/Sidebar';
+import { HomePage } from './HomePage';
+import { Clients } from './Clients';
+import { NewClient } from './NewClient';
+import { EditClient } from './EditClient';
+import { Tools } from './Tools';
+import { AuditLog } from './AuditLog';
+import { Settings } from './Settings';
+import { SsoBridge } from './SsoBridge';
+
+interface UserPermission {
+  action: string;
+  subject: string | null;
+}
+
+const ACTION_READ = 'plugin::mcp-server.read';
+const ACTION_AUDIT = 'plugin::mcp-server.audit.read';
+const ACTION_CLIENTS = 'plugin::mcp-server.clients.manage';
+
+function useUserPermissions(): UserPermission[] {
+  return (
+    useAuth('mcp-server', (s: { permissions?: UserPermission[] }) => s?.permissions) ?? []
+  );
+}
+
+/**
+ * Wrap a route with a permission check. If the user lacks the action, redirect
+ * to the plugin's index (which itself redirects to the user's landing page).
+ * The Sidebar already hides the menu entry — this catches direct URL access.
+ */
+function Protected({
+  action,
+  children,
+}: {
+  action: string;
+  children: JSX.Element;
+}): JSX.Element {
+  const userPermissions = useUserPermissions();
+  const hasAccess = userPermissions.some((p) => p.action === action);
+  if (!hasAccess) return <Navigate to="" replace />;
+  return children;
+}
+
+/**
+ * Index route. The plugin's Overview page requires `read`; a user who only
+ * has `audit.read` or `clients.manage` should land on the page they CAN see
+ * instead of getting a "Failed: Policy Failed" error on the dashboard.
+ */
+function IndexRoute(): JSX.Element {
+  const userPermissions = useUserPermissions();
+  const has = (a: string): boolean => userPermissions.some((p) => p.action === a);
+  if (has(ACTION_READ)) return <HomePage />;
+  if (has(ACTION_CLIENTS)) return <Navigate to="clients" replace />;
+  if (has(ACTION_AUDIT)) return <Navigate to="audit" replace />;
+  // No MCP permission at all — Strapi shouldn't have routed them here, but
+  // belt-and-suspenders, push them back to the admin home.
+  return <Navigate to="/" replace />;
+}
+
+export function App(): JSX.Element {
+  return (
+    <Flex alignItems="stretch" minHeight="100vh">
+      <Sidebar />
+      <Box flex={1} padding={10} background="neutral100" overflow="auto">
+        <Routes>
+          <Route index element={<IndexRoute />} />
+          <Route
+            path="clients"
+            element={
+              <Protected action={ACTION_CLIENTS}>
+                <Clients />
+              </Protected>
+            }
+          />
+          <Route
+            path="clients/new"
+            element={
+              <Protected action={ACTION_CLIENTS}>
+                <NewClient />
+              </Protected>
+            }
+          />
+          <Route
+            path="clients/:clientId/edit"
+            element={
+              <Protected action={ACTION_CLIENTS}>
+                <EditClient />
+              </Protected>
+            }
+          />
+          <Route
+            path="tools"
+            element={
+              <Protected action={ACTION_READ}>
+                <Tools />
+              </Protected>
+            }
+          />
+          <Route
+            path="audit"
+            element={
+              <Protected action={ACTION_AUDIT}>
+                <AuditLog />
+              </Protected>
+            }
+          />
+          <Route
+            path="settings"
+            element={
+              <Protected action={ACTION_READ}>
+                <Settings />
+              </Protected>
+            }
+          />
+          <Route path="sso-bridge" element={<SsoBridge />} />
+          <Route path="*" element={<Navigate to="" replace />} />
+        </Routes>
+      </Box>
+    </Flex>
+  );
+}
+
+export default App;

package/admin/src/pages/AuditLog.tsx

@@ -0,0 +1,386 @@
+import { useEffect, useMemo, useState } from 'react';
+import {
+  Badge,
+  Box,
+  Button,
+  Flex,
+  IconButton,
+  Modal,
+  Table,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  Typography,
+} from '@strapi/design-system';
+import { Eye } from '@strapi/icons';
+import { Filters, Pagination, SearchInput, useQueryParams } from '@strapi/strapi/admin';
+import { useMcpApi } from '../lib/api';
+import { PageHeader } from '../components/PageHeader';
+import { applyMcpQuery, hasActiveQuery, paginate, type McpListQuery } from '../lib/applyQuery';
+
+interface PrincipalAdmin {
+  id: number;
+  email?: string;
+  firstname?: string;
+  lastname?: string;
+  username?: string;
+}
+
+interface AuditClient {
+  clientId: string;
+  clientName: string;
+}
+
+interface Entry {
+  ts: string;
+  principalType?: string;
+  principalId: string;
+  principalAdmin?: PrincipalAdmin | null;
+  sessionId?: string | null;
+  clientId?: string | null;
+  client?: AuditClient | null;
+  tool: string;
+  params?: unknown;
+  resultStatus: 'ok' | 'error';
+  errorCode?: string | null;
+  durationMs?: number | null;
+  ip?: string | null;
+  userAgent?: string | null;
+}
+
+function formatPrincipal(admin: PrincipalAdmin | null | undefined, fallbackId: string): string {
+  if (!admin) return fallbackId ? `#${fallbackId}` : '—';
+  const name = [admin.firstname, admin.lastname].filter(Boolean).join(' ').trim();
+  return name || admin.email || admin.username || `#${admin.id}`;
+}
+
+function DetailRow({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}): JSX.Element {
+  return (
+    <Box paddingBottom={4}>
+      <Typography variant="sigma" textColor="neutral600">
+        {label}
+      </Typography>
+      <Box paddingTop={1}>{children}</Box>
+    </Box>
+  );
+}
+
+export function AuditLog(): JSX.Element {
+  const api = useMcpApi();
+  const [entries, setEntries] = useState<Entry[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [selected, setSelected] = useState<Entry | null>(null);
+  const [{ query }] = useQueryParams<McpListQuery>();
+
+  useEffect(() => {
+    api
+      .listAudit({ limit: 200 })
+      .then((d: { entries: Entry[] }) => setEntries(d.entries ?? []))
+      .catch((err: Error) => setError(err.message ?? String(err)))
+      .finally(() => setLoading(false));
+  }, []);
+
+  // Distinct tools present in the loaded entries, for the Tool filter dropdown.
+  const auditFilters = useMemo(
+    () => [
+      {
+        name: 'tool',
+        label: 'Tool',
+        type: 'enumeration' as const,
+        options: Array.from(new Set(entries.map((e) => e.tool).filter(Boolean)))
+          .sort()
+          .map((t) => ({ label: t, value: t })),
+      },
+      {
+        name: 'resultStatus',
+        label: 'Status',
+        type: 'enumeration' as const,
+        options: [
+          { label: 'ok', value: 'ok' },
+          { label: 'error', value: 'error' },
+        ],
+      },
+      {
+        name: 'ts',
+        label: 'Date',
+        type: 'date' as const,
+      },
+    ],
+    [entries]
+  );
+
+  const filtered = useMemo(
+    () =>
+      applyMcpQuery(entries, query, {
+        searchText: (e) =>
+          [
+            e.tool,
+            formatPrincipal(e.principalAdmin, e.principalId),
+            e.client?.clientName ?? '',
+            e.errorCode ?? '',
+          ].join(' '),
+        field: (e, name) => {
+          if (name === 'tool') return e.tool;
+          if (name === 'resultStatus') return e.resultStatus;
+          if (name === 'ts') return e.ts;
+          return '';
+        },
+      }),
+    [entries, query]
+  );
+  const paged = useMemo(() => paginate(filtered, query), [filtered, query]);
+
+  const hasFilters = hasActiveQuery(query);
+
+  return (
+    <Box>
+      <PageHeader
+        title="Audit Log"
+        subtitle="Every MCP tool call, recorded with redacted parameters"
+      />
+
+      {error && (
+        <Box background="danger100" padding={4} hasRadius marginBottom={6}>
+          <Typography textColor="danger700">Failed to load audit log: {error}</Typography>
+        </Box>
+      )}
+
+      <Flex gap={1} paddingBottom={4} alignItems="flex-start">
+        <SearchInput
+          label="Search audit log"
+          placeholder="Search by tool, principal, client, or error"
+        />
+        <Filters.Root options={auditFilters}>
+          <Filters.Trigger />
+          <Filters.Popover />
+          <Filters.List />
+        </Filters.Root>
+      </Flex>
+
+      <Box background="neutral0" hasRadius shadow="tableShadow">
+        <Table colCount={6} rowCount={paged.rows.length}>
+          <Thead>
+            <Tr>
+              <Th>
+                <Typography variant="sigma">Time</Typography>
+              </Th>
+              <Th>
+                <Typography variant="sigma">Principal</Typography>
+              </Th>
+              <Th>
+                <Typography variant="sigma">Client</Typography>
+              </Th>
+              <Th>
+                <Typography variant="sigma">Tool</Typography>
+              </Th>
+              <Th>
+                <Typography variant="sigma">Status</Typography>
+              </Th>
+              <Th>
+                <Typography variant="sigma">Duration</Typography>
+              </Th>
+              <Th>
+                <Typography variant="sigma">&nbsp;</Typography>
+              </Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {paged.rows.map((e, i) => (
+              <Tr key={i}>
+                <Td>
+                  <Typography variant="omega" textColor="neutral700">
+                    {new Date(e.ts).toLocaleString()}
+                  </Typography>
+                </Td>
+                <Td>
+                  <Typography variant="omega">
+                    {formatPrincipal(e.principalAdmin, e.principalId)}
+                  </Typography>
+                </Td>
+                <Td>
+                  <Typography variant="omega" textColor="neutral700">
+                    {e.client?.clientName ?? '—'}
+                  </Typography>
+                </Td>
+                <Td>
+                  <Typography variant="omega" fontWeight="semiBold">
+                    {e.tool}
+                  </Typography>
+                </Td>
+                <Td>
+                  <Badge
+                    backgroundColor={e.resultStatus === 'ok' ? 'success100' : 'danger100'}
+                  >
+                    {e.resultStatus}
+                  </Badge>
+                </Td>
+                <Td>
+                  <Typography variant="omega" textColor="neutral700">
+                    {e.durationMs !== undefined && e.durationMs !== null
+                      ? `${e.durationMs}ms`
+                      : ''}
+                  </Typography>
+                </Td>
+                <Td>
+                  <Flex justifyContent="flex-end">
+                    <IconButton
+                      label="View details"
+                      variant="ghost"
+                      onClick={() => setSelected(e)}
+                    >
+                      <Eye />
+                    </IconButton>
+                  </Flex>
+                </Td>
+              </Tr>
+            ))}
+            {!loading && paged.rows.length === 0 && (
+              <Tr>
+                <Td colSpan={7}>
+                  <Box paddingTop={6} paddingBottom={6}>
+                    <Typography textColor="neutral600">
+                      {entries.length === 0
+                        ? 'No tool calls recorded yet.'
+                        : hasFilters
+                          ? 'No entries match the current search or filters.'
+                          : 'No entries to display.'}
+                    </Typography>
+                  </Box>
+                </Td>
+              </Tr>
+            )}
+          </Tbody>
+        </Table>
+      </Box>
+
+      {paged.total > 0 && (
+        <Box paddingTop={4}>
+          <Pagination.Root pageCount={paged.pageCount} total={paged.total}>
+            <Pagination.PageSize />
+            <Pagination.Links />
+          </Pagination.Root>
+        </Box>
+      )}
+
+      <Modal.Root
+        open={selected !== null}
+        onOpenChange={(open) => !open && setSelected(null)}
+      >
+        <Modal.Content>
+          <Modal.Header>
+            <Modal.Title>Audit entry</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            {selected && (
+              <Box paddingTop={2}>
+                <DetailRow label="Time">
+                  <Typography variant="omega">
+                    {new Date(selected.ts).toLocaleString()}
+                  </Typography>
+                </DetailRow>
+                <DetailRow label="Tool">
+                  <Typography variant="omega" fontWeight="semiBold">
+                    {selected.tool}
+                  </Typography>
+                </DetailRow>
+                <DetailRow label="Status">
+                  <Badge
+                    backgroundColor={
+                      selected.resultStatus === 'ok' ? 'success100' : 'danger100'
+                    }
+                  >
+                    {selected.resultStatus}
+                  </Badge>
+                  {selected.errorCode && (
+                    <Box paddingTop={2}>
+                      <Typography variant="omega" textColor="danger700">
+                        Error: <code>{selected.errorCode}</code>
+                      </Typography>
+                    </Box>
+                  )}
+                </DetailRow>
+                <DetailRow label="Duration">
+                  <Typography variant="omega">
+                    {selected.durationMs !== undefined && selected.durationMs !== null
+                      ? `${selected.durationMs}ms`
+                      : '—'}
+                  </Typography>
+                </DetailRow>
+                <DetailRow label="Principal">
+                  <Typography variant="omega">
+                    {formatPrincipal(selected.principalAdmin, selected.principalId)}
+                    {selected.principalAdmin?.email && (
+                      <Typography variant="pi" textColor="neutral600">
+                        {' '}
+                        ({selected.principalAdmin.email})
+                      </Typography>
+                    )}
+                  </Typography>
+                </DetailRow>
+                <DetailRow label="Client">
+                  <Typography variant="omega">
+                    {selected.client?.clientName ?? '—'}
+                    {selected.clientId && (
+                      <Typography variant="pi" textColor="neutral600">
+                        {' '}
+                        (<code>{selected.clientId}</code>)
+                      </Typography>
+                    )}
+                  </Typography>
+                </DetailRow>
+                <DetailRow label="Session">
+                  <Typography variant="omega" textColor="neutral700">
+                    <code>{selected.sessionId ?? '—'}</code>
+                  </Typography>
+                </DetailRow>
+                <DetailRow label="IP">
+                  <Typography variant="omega" textColor="neutral700">
+                    {selected.ip ?? '—'}
+                  </Typography>
+                </DetailRow>
+                {selected.userAgent && (
+                  <DetailRow label="User-Agent">
+                    <Typography variant="omega" textColor="neutral700">
+                      {selected.userAgent}
+                    </Typography>
+                  </DetailRow>
+                )}
+                <DetailRow label="Parameters">
+                  <Box background="neutral100" padding={3} hasRadius>
+                    <pre
+                      style={{
+                        margin: 0,
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-all',
+                        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+                        fontSize: 13,
+                      }}
+                    >
+                      {selected.params === undefined || selected.params === null
+                        ? '(none)'
+                        : JSON.stringify(selected.params, null, 2)}
+                    </pre>
+                  </Box>
+                </DetailRow>
+              </Box>
+            )}
+          </Modal.Body>
+          <Modal.Footer>
+            <Modal.Close>
+              <Button variant="tertiary">Close</Button>
+            </Modal.Close>
+          </Modal.Footer>
+        </Modal.Content>
+      </Modal.Root>
+    </Box>
+  );
+}