{
  "name": "mcp-capability-matrix",
  "type": "registry:ui",
  "title": "MCP Capability Matrix",
  "description": "Which server provides which capability, and where two of them collide. MCP names are not namespaced by the protocol, so two servers exposing `search` is decided by your client’s merge order — silently. A per-server list can never show that.",
  "category": "MCP",
  "dependencies": [
    "lucide-react@^1.39.0"
  ],
  "registryDependencies": [
    "badge",
    "lib-motion",
    "lib-styles",
    "lib-utils"
  ],
  "files": [
    {
      "path": "components/ui/mcp-capability-matrix.tsx",
      "type": "registry:ui",
      "content": "import type { ComponentProps, ReactNode } from 'react'\nimport { Check, TriangleAlert } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { enterFade } from '@/lib/motion'\nimport { radius, surface } from '@/lib/styles'\nimport { cn } from '@/lib/utils'\n\n/**\n * Which server provides which capability, and where two of them collide.\n *\n * The problem this exists for: MCP capability names are not namespaced by the\n * protocol. Connect two servers that both expose `search`, and which one the\n * model reaches is decided by your client's merge order — silently. A per-server\n * list can never show that, because the collision only exists *between* lists.\n *\n * So the grid is capabilities down, servers across, and any row with more than\n * one provider is flagged. That flag is the entire reason to render a matrix\n * rather than a set of cards.\n *\n * Grid, not a table element: the header column is sticky while the server\n * columns scroll, which `<table>` will not do without fighting it.\n */\nexport type CapabilityRow = {\n  name: string\n  kind?: 'tool' | 'resource' | 'prompt'\n  /** Server ids that provide it. More than one is a collision. */\n  providers: string[]\n  description?: ReactNode\n}\n\ntype McpCapabilityMatrixProps = Omit<ComponentProps<'div'>, 'children'> & {\n  /** Column order. Ids must match those in `providers`. */\n  servers: { id: string; name: string }[]\n  capabilities: CapabilityRow[]\n  /** Which provider wins a collision. Usually your client's merge order. */\n  resolve?: (row: CapabilityRow) => string\n  conflictLabel?: string\n  emptyLabel?: string\n  label?: string\n}\n\nfunction McpCapabilityMatrix({\n  servers,\n  capabilities,\n  resolve,\n  conflictLabel = 'Shadowed',\n  emptyLabel = 'Nothing exposed yet.',\n  label = 'Capability matrix',\n  className,\n  ...props\n}: McpCapabilityMatrixProps) {\n  if (capabilities.length === 0) {\n    return (\n      <div className={cn(surface, radius.surface, 'p-4', className)} {...props}>\n        <p className=\"text-muted-foreground text-xs\">{emptyLabel}</p>\n      </div>\n    )\n  }\n\n  const conflicts = capabilities.filter((row) => row.providers.length > 1).length\n\n  return (\n    <div\n      data-slot=\"mcp-capability-matrix\"\n      className={cn(enterFade, surface, radius.surface, 'overflow-hidden', className)}\n      {...props}\n    >\n      {conflicts > 0 && (\n        <p className=\"border-border bg-[var(--amber-soft)] text-[var(--amber-soft-foreground)] flex items-center gap-2 border-b px-4 py-2.5 text-xs\">\n          <TriangleAlert className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n          {conflicts} capability name{conflicts === 1 ? '' : 's'} provided by more than one server.\n        </p>\n      )}\n\n      <div className=\"overflow-x-auto\">\n        <div\n          role=\"table\"\n          aria-label={label}\n          className=\"min-w-max\"\n          style={{ display: 'grid', gridTemplateColumns: `minmax(180px, 1fr) repeat(${servers.length}, 7rem)` }}\n        >\n          <div role=\"row\" className=\"contents\">\n            <span\n              role=\"columnheader\"\n              className=\"bg-muted/40 border-border text-muted-foreground/70 sticky start-0 z-10 border-b p-3 text-[11px] tracking-wide uppercase\"\n            >\n              Capability\n            </span>\n            {servers.map((server) => (\n              <span\n                key={server.id}\n                role=\"columnheader\"\n                className=\"bg-muted/40 border-border text-muted-foreground/70 truncate border-b p-3 text-center text-[11px] tracking-wide uppercase\"\n                title={server.name}\n              >\n                {server.name}\n              </span>\n            ))}\n          </div>\n\n          {capabilities.map((row) => {\n            const clash = row.providers.length > 1\n            const winner = clash && resolve ? resolve(row) : row.providers[0]\n\n            return (\n              <div role=\"row\" key={`${row.kind}-${row.name}`} className=\"contents\">\n                <span\n                  role=\"rowheader\"\n                  className=\"bg-card border-border/60 sticky start-0 z-10 flex min-w-0 items-center gap-2 border-b p-3\"\n                >\n                  <code className=\"truncate font-mono text-xs\">{row.name}</code>\n                  {row.kind && (\n                    <Badge size=\"sm\" variant=\"outline\" className=\"shrink-0\">\n                      {row.kind}\n                    </Badge>\n                  )}\n                </span>\n\n                {servers.map((server) => {\n                  const provides = row.providers.includes(server.id)\n                  const shadowed = provides && clash && server.id !== winner\n\n                  return (\n                    <span\n                      key={server.id}\n                      role=\"cell\"\n                      className=\"border-border/60 flex items-center justify-center border-b p-3\"\n                    >\n                      {provides ? (\n                        shadowed ? (\n                          <Badge size=\"sm\" color=\"amber\" variant=\"ghost\" title={conflictLabel}>\n                            {conflictLabel}\n                          </Badge>\n                        ) : (\n                          <Check\n                            className=\"size-4 text-[var(--green-soft-foreground)]\"\n                            aria-label=\"Provided\"\n                          />\n                        )\n                      ) : (\n                        <span className=\"text-muted-foreground/25\" aria-hidden=\"true\">\n                          —\n                        </span>\n                      )}\n                    </span>\n                  )\n                })}\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport { McpCapabilityMatrix }\nexport type { McpCapabilityMatrixProps }\n"
    }
  ]
}