@vendure/mcp-plugin 3.8.0-minor-bootstrap.0

package/src/dashboard/components/tools-block.tsx

@@ -0,0 +1,274 @@
+import { Trans, useLingui } from '@lingui/react/macro';
+import {
+    Alert,
+    AlertDescription,
+    api,
+    Badge,
+    type ColumnDef,
+    DataTable,
+    DataTableColumnHeader,
+    getFilteredRowModel,
+    getSortedRowModel,
+    type ResultOf,
+    Switch,
+    toast,
+    useMutation,
+    usePermissions,
+    useQuery,
+    useQueryClient,
+} from '@vendure/dashboard';
+import { InfoIcon, TriangleAlert } from 'lucide-react';
+import { useMemo, useState } from 'react';
+
+import { mcpServerConfigQuery, mcpToolsQuery, setMcpToolEnabledMutation } from '../mcp.graphql';
+
+import { TooltipButton } from './tooltip-button';
+import { useMcpColumnVisibility } from './use-mcp-table-state';
+
+type McpTool = ResultOf<typeof mcpToolsQuery>['mcpTools'][number];
+
+const toolsQueryKey = ['mcp-tools'];
+
+function safetyPresentation(behavior: McpTool['behavior']) {
+    if (behavior === 'destructive') {
+        return {
+            variant: 'destructive' as const,
+            label: <Trans>Destructive</Trans>,
+            explanation: <Trans>This tool can delete data or make changes that cannot be undone.</Trans>,
+        };
+    }
+    if (behavior === 'readonly') {
+        return {
+            variant: 'secondary' as const,
+            label: <Trans>Read-only</Trans>,
+            explanation: <Trans>This tool only reads data. It never changes anything.</Trans>,
+        };
+    }
+    return {
+        variant: 'warning' as const,
+        label: <Trans>Mutating</Trans>,
+        explanation: <Trans>This tool creates or updates data, but does not delete anything.</Trans>,
+    };
+}
+
+function SafetyBadge({ behavior }: { behavior: McpTool['behavior'] }) {
+    const { variant, label, explanation } = safetyPresentation(behavior);
+    return (
+        <TooltipButton tooltip={explanation} className="inline-flex h-auto p-0">
+            <Badge variant={variant}>{label}</Badge>
+        </TooltipButton>
+    );
+}
+
+export function ToolsBlock() {
+    const { t } = useLingui();
+    const queryClient = useQueryClient();
+    const [search, setSearch] = useState('');
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const { defaultVisibility, onColumnVisibilityChange } = useMcpColumnVisibility({});
+    const { hasPermissions } = usePermissions();
+    const canUpdate = hasPermissions(['UpdateMcpServer']);
+
+    const { data, isLoading, error } = useQuery({
+        queryKey: toolsQueryKey,
+        queryFn: () => api.query(mcpToolsQuery),
+    });
+
+    const { data: configData } = useQuery({
+        queryKey: ['mcp-server-config'],
+        queryFn: () => api.query(mcpServerConfigQuery),
+    });
+
+    const toggle = useMutation({
+        mutationFn: (vars: { toolName: string; toolset: McpTool['toolset']; enabled: boolean }) =>
+            api.mutate(setMcpToolEnabledMutation, vars),
+        // Optimistic update so the switch doesn't wait for the refetch; rolled back on server rejection.
+        onMutate: async vars => {
+            await queryClient.cancelQueries({ queryKey: toolsQueryKey });
+            const previous = queryClient.getQueryData<ResultOf<typeof mcpToolsQuery>>(toolsQueryKey);
+            queryClient.setQueryData<ResultOf<typeof mcpToolsQuery>>(toolsQueryKey, old =>
+                old
+                    ? {
+                          ...old,
+                          mcpTools: old.mcpTools.map(tool =>
+                              tool.name === vars.toolName && tool.toolset === vars.toolset
+                                  ? { ...tool, enabled: vars.enabled }
+                                  : tool,
+                          ),
+                      }
+                    : old,
+            );
+            return { previous };
+        },
+        onSuccess: () => {
+            toast.success(t`Tool updated`);
+        },
+        onError: (_error, _vars, context) => {
+            if (context?.previous) {
+                queryClient.setQueryData(toolsQueryKey, context.previous);
+            }
+            toast.error(t`Could not update tool`);
+        },
+        // Refetch either way so the cache ends up matching the server.
+        onSettled: () => {
+            void queryClient.invalidateQueries({ queryKey: toolsQueryKey });
+        },
+    });
+
+    const tools = data?.mcpTools ?? [];
+    const isDiscoveryExposure = configData?.mcpServerConfig.toolExposure === 'discovery';
+
+    const filtered = useMemo(() => {
+        const term = search.trim().toLowerCase();
+        if (!term) {
+            return tools;
+        }
+        return tools.filter(
+            tool => tool.name.toLowerCase().includes(term) || tool.description.toLowerCase().includes(term),
+        );
+    }, [tools, search]);
+
+    if (error) {
+        return (
+            <Alert variant="destructive">
+                <TriangleAlert className="h-4 w-4" />
+                <AlertDescription>
+                    <Trans>Error loading tools: {error.message}</Trans>
+                </AlertDescription>
+            </Alert>
+        );
+    }
+
+    const columns: Array<ColumnDef<McpTool>> = [
+        {
+            accessorKey: 'name',
+            header: headerContext => (
+                <DataTableColumnHeader
+                    headerContext={headerContext}
+                    customConfig={{ header: () => <Trans>Name</Trans> }}
+                />
+            ),
+            cell: ({ row }) => <span className="font-medium font-mono text-sm">{row.original.name}</span>,
+        },
+        {
+            accessorKey: 'toolset',
+            header: headerContext => (
+                <DataTableColumnHeader
+                    headerContext={headerContext}
+                    customConfig={{ header: () => <Trans>Toolset</Trans> }}
+                />
+            ),
+
+            filterFn: (row, columnId, filterValue: string[]) => filterValue.includes(row.getValue(columnId)),
+            cell: ({ row }) => <Badge variant="outline">{row.original.toolset}</Badge>,
+        },
+        {
+            accessorKey: 'pluginSource',
+            header: headerContext => (
+                <DataTableColumnHeader
+                    headerContext={headerContext}
+                    customConfig={{ header: () => <Trans>Plugin</Trans> }}
+                />
+            ),
+            // Lets operators tell built-in tools apart from ones their own plugins contribute.
+            cell: ({ row }) => (
+                <span className="text-sm text-muted-foreground">{row.original.pluginSource}</span>
+            ),
+        },
+        {
+            accessorKey: 'behavior',
+            header: headerContext => (
+                <DataTableColumnHeader
+                    headerContext={headerContext}
+                    customConfig={{ header: () => <Trans>Safety</Trans> }}
+                />
+            ),
+            cell: ({ row }) => <SafetyBadge behavior={row.original.behavior} />,
+        },
+        {
+            accessorKey: 'description',
+            header: () => <Trans>Description</Trans>,
+            // Clamped to two lines in the row; the tooltip carries the full text.
+            cell: ({ row }) => (
+                <TooltipButton
+                    tooltip={row.original.description}
+                    className="block h-auto p-0 text-left text-sm font-normal text-muted-foreground line-clamp-2 max-w-md whitespace-normal"
+                >
+                    {row.original.description}
+                </TooltipButton>
+            ),
+        },
+        {
+            id: 'enabled',
+            header: () => <Trans>Enabled</Trans>,
+            cell: ({ row }) => (
+                <Switch
+                    checked={row.original.enabled}
+                    disabled={!canUpdate}
+                    onCheckedChange={checked =>
+                        toggle.mutate({
+                            toolName: row.original.name,
+                            toolset: row.original.toolset,
+                            enabled: checked,
+                        })
+                    }
+                />
+            ),
+        },
+    ];
+
+    return (
+        <div className="space-y-4">
+            {isDiscoveryExposure ? (
+                <Alert>
+                    <InfoIcon className="h-4 w-4" />
+                    <AlertDescription>
+                        <Trans>
+                            Tool exposure is set to discovery. Clients see only search_tools and execute_tool.
+                            The toggles below still decide which tools execute_tool may run.
+                        </Trans>
+                    </AlertDescription>
+                </Alert>
+            ) : null}
+            <DataTable
+                columns={columns}
+                data={filtered}
+                totalItems={filtered.length}
+                isLoading={isLoading}
+                defaultColumnVisibility={defaultVisibility}
+                onColumnVisibilityChange={onColumnVisibilityChange}
+                onSearchTermChange={term => setSearch(term)}
+                facetedFilters={{
+                    toolset: {
+                        title: t`Toolset`,
+                        options: [
+                            { label: 'admin', value: 'admin' },
+                            { label: 'shop', value: 'shop' },
+                        ],
+                    },
+                }}
+                onRefresh={() => {
+                    void queryClient.invalidateQueries({ queryKey: toolsQueryKey });
+                }}
+                setTableOptions={options => ({
+                    ...options,
+                    manualPagination: false,
+                    manualSorting: false,
+                    manualFiltering: false,
+                    rowCount: undefined,
+                    getSortedRowModel: getSortedRowModel(),
+                    getFilteredRowModel: getFilteredRowModel(),
+                    // Stops a data refresh (e.g. after toggling a tool) from jumping back to page 1.
+                    autoResetPageIndex: false,
+                })}
+                page={page}
+                itemsPerPage={pageSize}
+                onPageChange={(_table, newPage, newPageSize) => {
+                    setPage(newPage);
+                    setPageSize(newPageSize);
+                }}
+            />
+        </div>
+    );
+}

package/src/dashboard/components/tooltip-button.tsx

@@ -0,0 +1,28 @@
+import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@vendure/dashboard';
+
+export function TooltipButton({
+    tooltip,
+    tooltipClassName,
+    className,
+    label,
+    children,
+}: {
+    tooltip: React.ReactNode;
+    tooltipClassName?: string;
+    className?: string;
+    label?: string;
+    children: React.ReactNode;
+}) {
+    return (
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger
+                    render={<Button type="button" variant="ghost" aria-label={label} className={className} />}
+                >
+                    {children}
+                </TooltipTrigger>
+                <TooltipContent className={tooltipClassName}>{tooltip}</TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    );
+}

package/src/dashboard/components/use-mcp-table-state.ts

@@ -0,0 +1,47 @@
+import { type ColumnFiltersState, type SortingState, usePage, useUserSettings } from '@vendure/dashboard';
+import { useState } from 'react';
+
+type ColumnVisibility = Record<string, boolean>;
+
+export function useMcpColumnVisibility<V extends ColumnVisibility>(defaultVisibility: V) {
+    const { pageId } = usePage();
+    const { settings, setTableSettings } = useUserSettings();
+    const savedVisibility = pageId ? settings.tableSettings?.[pageId]?.columnVisibility : undefined;
+
+    return {
+        onColumnVisibilityChange: (_table: unknown, newVisibility: ColumnVisibility) => {
+            if (pageId) {
+                setTableSettings(pageId, 'columnVisibility', newVisibility);
+            }
+        },
+        defaultVisibility: { ...defaultVisibility, ...savedVisibility } as V,
+    };
+}
+
+export function useMcpTableState<V extends ColumnVisibility>({
+    defaultSorting,
+    defaultVisibility,
+}: {
+    defaultSorting: SortingState;
+    defaultVisibility: V;
+}) {
+    const [page, setPage] = useState(1);
+    const [itemsPerPage, setItemsPerPage] = useState(10);
+    const [sorting, setSorting] = useState<SortingState>(defaultSorting);
+    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+    const columnVisibility = useMcpColumnVisibility(defaultVisibility);
+
+    return {
+        page,
+        itemsPerPage,
+        sorting,
+        columnFilters,
+        onPageChange: (_table: unknown, newPage: number, newItemsPerPage: number) => {
+            setPage(newPage);
+            setItemsPerPage(newItemsPerPage);
+        },
+        onSortChange: (_table: unknown, newSorting: SortingState) => setSorting(newSorting),
+        onFilterChange: (_table: unknown, newFilters: ColumnFiltersState) => setColumnFilters(newFilters),
+        ...columnVisibility,
+    };
+}

package/src/dashboard/i18n/ar.po

@@ -0,0 +1,311 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2025-02-20 14:18+0100\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: ar\n"
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
+
+
+msgid "Actions"
+msgstr "الإجراءات"
+
+msgid "Actor"
+msgstr "الفاعل"
+
+msgid "Actor type"
+msgstr "نوع الفاعل"
+
+msgid "Approve"
+msgstr "موافقة"
+
+msgid "Authorization request could not be loaded"
+msgstr "تعذّر تحميل طلب التفويض"
+
+msgid "Calls per hour"
+msgstr "الاستدعاءات في الساعة"
+
+msgid "Client"
+msgstr "العميل"
+
+msgid "Connect an MCP client to your Vendure server using the endpoints below."
+msgstr "قم بتوصيل عميل MCP بخادم Vendure الخاص بك باستخدام نقاط النهاية أدناه."
+
+msgid "Could not revoke grant"
+msgstr "تعذّر إلغاء المنح"
+
+msgid "Could not update tool"
+msgstr "تعذّر تحديث الأداة"
+
+msgid "Deny"
+msgstr "رفض"
+
+msgid "Description"
+msgstr "الوصف"
+
+msgid "Destructive"
+msgstr "تدميري"
+
+msgid "Duration"
+msgstr "المدة"
+
+msgid "Enabled"
+msgstr "ممكّن"
+
+
+msgid "Expires"
+msgstr "تنتهي في"
+
+msgid "Grant revoked"
+msgstr "تم إلغاء المنح"
+
+msgid "Health & usage"
+msgstr "الصحة والاستخدام"
+
+msgid "Last activity"
+msgstr "آخر نشاط"
+
+msgid "Last hour"
+msgstr "آخر ساعة"
+
+msgid "Last 24 hours"
+msgstr "آخر 24 ساعة"
+
+msgid "Last 7 days"
+msgstr "آخر 7 أيام"
+
+msgid "Last 30 days"
+msgstr "آخر 30 يومًا"
+
+msgid "Loading authorization request…"
+msgstr "جارٍ تحميل طلب التفويض…"
+
+msgid "MCP Server"
+msgstr "MCP Server"
+
+msgid "Mutating"
+msgstr "معدِّل"
+
+msgid "Name"
+msgstr "الاسم"
+
+msgid "No calls recorded in this period."
+msgstr "لا توجد استدعاءات مسجّلة في هذه الفترة."
+
+msgid "Read-only"
+msgstr "للقراءة فقط"
+
+msgid "Revoke"
+msgstr "إلغاء"
+
+msgid "Revoke grant"
+msgstr "إلغاء المنح"
+
+msgid "Safety"
+msgstr "الأمان"
+
+msgid "Status"
+msgstr "الحالة"
+
+msgid "Success rate"
+msgstr "معدل النجاح"
+
+
+msgid "This destination is on the local machine. Any application running on that machine could receive the authorization code."
+msgstr "هذه الوجهة موجودة على الجهاز المحلي. أي تطبيق يعمل على ذلك الجهاز قد يستلم رمز التفويض."
+
+msgid "This immediately revokes the client's access. The client will need to authorize again to reconnect."
+msgstr "يؤدي هذا إلى إلغاء وصول العميل فورًا. سيحتاج العميل إلى التفويض مرة أخرى لإعادة الاتصال."
+
+msgid "Time"
+msgstr "الوقت"
+
+msgid "Tool"
+msgstr "الأداة"
+
+msgid "Tool updated"
+msgstr "تم تحديث الأداة"
+
+msgid "Tools"
+msgstr "الأدوات"
+
+msgid "Toolset"
+msgstr "مجموعة الأدوات"
+
+msgid "Top tools"
+msgstr "أهم الأدوات"
+
+msgid "Total calls"
+msgstr "إجمالي الاستدعاءات"
+
+msgid "Usage over the selected period"
+msgstr "الاستخدام خلال الفترة المحددة"
+
+msgid "p50 latency"
+msgstr "زمن الاستجابة p50"
+
+msgid "p95 latency"
+msgstr "زمن الاستجابة p95"
+
+msgid "Authorize MCP Client"
+msgstr "تفويض عميل MCP"
+
+msgid "The grant could not be revoked; it may have already been removed"
+msgstr "تعذّر إلغاء المنح؛ ربما تمت إزالتها بالفعل"
+
+msgid "Request failed ({0})"
+msgstr "فشل الطلب ({0})"
+
+msgid "Authorize MCP access"
+msgstr "تفويض الوصول إلى MCP"
+
+msgid "Plugin"
+msgstr "الإضافة"
+
+msgid "Error loading MCP statistics: {0}"
+msgstr "خطأ في تحميل إحصائيات MCP: {0}"
+
+msgid "Error loading tools: {0}"
+msgstr "خطأ في تحميل الأدوات: {0}"
+
+msgid "The request could not be completed"
+msgstr "تعذر إكمال الطلب"
+
+msgid "Active"
+msgstr "نشط"
+
+msgid "Revoked"
+msgstr "ملغى"
+
+msgid "Expired"
+msgstr "منتهي الصلاحية"
+
+msgid "No tool calls yet"
+msgstr ""
+
+msgid "Half of the calls in this period finished faster than this."
+msgstr ""
+
+msgid "95 out of 100 calls in this period finished faster than this. It shows how slow the worst calls are."
+msgstr ""
+
+msgid "This tool can delete data or make changes that cannot be undone."
+msgstr ""
+
+msgid "This tool only reads data. It never changes anything."
+msgstr ""
+
+msgid "This tool creates or updates data, but does not delete anything."
+msgstr ""
+
+msgid "No actions available for a revoked grant"
+msgstr ""
+
+msgid "Unnamed application"
+msgstr ""
+
+msgid "Hostname verified"
+msgstr ""
+
+msgid "Unverified"
+msgstr ""
+
+msgid "The client's details were fetched from this address, so the hostname is verified. The name above is still chosen by the client itself."
+msgstr ""
+
+msgid "This name and address are reported by the application itself and are not verified."
+msgstr ""
+
+msgid "wants to access the Admin API of your Vendure server"
+msgstr ""
+
+msgid "Full access to the Admin API as your administrator account."
+msgstr ""
+
+msgid "wants to access the Shop API of your Vendure server"
+msgstr ""
+
+msgid "Access to the Shop API as a customer."
+msgstr ""
+
+msgid "After approval, the authorization code is sent here. Only approve if you recognise this destination."
+msgstr ""
+
+msgid "Setup guide for connecting MCP clients"
+msgstr ""
+
+msgid "Anonymous"
+msgstr ""
+
+msgid "Failed calls"
+msgstr ""
+
+msgid "Average number of tool calls per hour over the selected period."
+msgstr ""
+
+msgid "What this number means"
+msgstr ""
+
+msgid "See all activity"
+msgstr ""
+
+msgid "Granted to"
+msgstr ""
+
+msgid "The link may have expired or already been used. Start the connection again from your MCP client."
+msgstr ""
+
+msgid "Full access to the Admin API as {name} ({emailAddress})."
+msgstr ""
+
+msgid "Connect a client"
+msgstr ""
+
+msgid "Admin API"
+msgstr ""
+
+msgid "Shop API"
+msgstr ""
+
+msgid "Test with MCP Inspector"
+msgstr ""
+
+msgid "Close"
+msgstr ""
+
+msgid "Overview"
+msgstr ""
+
+msgid "Activity"
+msgstr ""
+
+msgid "Grants"
+msgstr ""
+
+msgid "The client will act on this channel:"
+msgstr ""
+
+msgid "This destination is not on the application's own host ({clientHost}). Only approve if you expect the code to be sent there."
+msgstr ""
+
+msgid "Revoking needs the UpdateMcpServer permission"
+msgstr ""
+
+msgid "Tool exposure is set to discovery. Clients see only search_tools and execute_tool. The toggles below still decide which tools execute_tool may run."
+msgstr ""
+
+msgid "OAuth is not configured, so no client can be granted access. Add an oauth block to McpPlugin.init to use grants."
+msgstr ""
+
+msgid "The admin endpoint needs OAuth. Add an oauth block to McpPlugin.init to enable it."
+msgstr ""
+
+msgid "The shop endpoint is disabled (shopAccess: 'disabled')."
+msgstr ""