MCP Tool Registry

Demo & usage

More examples

When to use

• Building the integrations page for an agent product — what is connected, what is healthy, what expires soon.
• Letting an operator narrow what an agent may do, per tool, without editing a config file.
• Diagnosing why a tool call keeps failing, with the declared schema and the recent call log side by side.
• Giving a compliance reviewer a read-only view of every connection and granted scope.

Async states

• loading
• error
• retry

Item identity & owned state

Restorable state

• expandedIds
• paramsExpandedKeys

Bind these to put a saved view back — the open sections, the hidden columns, the selected rows — and read their Change events to store what the user does.

Outputs

Wire it to your API

This component is headless about transport: it renders what you give it and reports what the user asks for. Nothing below requires @styloviz/data — drive it from whatever you already use.

• This component does not emit a query, so it renders what you give it. Fetch on your own trigger and bind `servers`, `loading` and `error`.
• Normalize failures with `toSvDataError()` from `@styloviz/core`. It derives `retryable` from the status, so a 404 does not get a "Try again" button that can only fail again.

Full walkthrough: Connecting to a backend.

Customization & theming

• Redaction, from the pack-wide policy (`X-2`): the credential LABEL, the server URL, the server error and every call-log error are masked per `provideSvAiPrivacy({ patterns })`. A URL carries a credential without looking like one (`https://user:pass@…`, `…?token=…`) and a failing client echoes it into its error; `SV_AI_COMMON_PATTERNS` includes `url-credentials` and `url-secret-param` for exactly this.
• Role-gated reveal: with `provideSvAiPrivacy({ reveal: true })` — provided only for the roles allowed to see secrets — each server with something masked on screen gets a Reveal / Hide control, and `(revealChanged)` reports `{ server, revealed }` so you can log who looked. `reveal` is false by default, and it never switches masking off: values stay masked until a viewer asks.
• `variant` chooses the shape: `grid` for a landing page, `table` when there are more servers than fit, `permissions` for the scope matrix, `detail` for one connection in full.
• `editable` false turns the whole component into an audit view — switches, radios and actions all disappear.
• `showHealth` and `showUsage` drop the roll-up counts and the per-tool metrics independently.
• `logLimit` is the call-log page size: a longer log says how many calls are hidden and offers "Show N more". `0` hides the log. `selectedId` drives which server the single-server variants show.
• `maxParamsPerTool` (8) bounds a tool's parameter table: a generated schema can carry a hundred parameters, so the table stops at the ceiling, says what it hid, and "Show all N parameters" expands it for the one tool being inspected. `0` turns it off.
• The `SCOPE_ORDER`, `scopeAtLeast`, `registryHealth` and `credentialExpiry` helpers are exported, so a policy layer can threshold scopes and compute its own roll-ups.
• Scale ceilings: `[maxServers]` (100) bounds the catalogue and `[maxToolsPerServer]` (50) bounds one server's tool list — the second is the one that bites, because a single server exposing a generated API can carry several hundred tools, each with a parameter table. Both disclose what they left out, and the tool count beside a server name stays the SERVER's count, so the warning does not vanish exactly when it is earned. `0` turns either off.

Best practices

• Do: Set `risk` on each tool to match the risk you pass to Agent Approval, so the registry and the approval gate agree on severity.
• Do: Record `previous` from `scopeChanged` in your audit log — knowing a scope became `admin` matters far less than knowing it was `read` an hour ago.
• Do: Fill in `params` for every tool. The schema is what turns a failing call into a fixable one.
• Do: Pass `now` in tests so credential-expiry assertions are not at the mercy of the wall clock.
• Don't: Do not put secrets in `credential`. It carries a kind, a display label and an expiry — `credentialAction` asks the host to do the actual work.
• Don't: Do not set `expiresAt` on a credential that does not expire. A static key flagged as expiring is how a registry cries wolf until nobody reads it.
• Don't: Do not reach for this to pick a model — that is AI Model Selector. This manages many stateful connections, not one choice.

Accessibility

• The permission matrix is a real table: scope columns are `th[scope="col"]`, each tool row is `th[scope="row"]`, and a visually-hidden `caption` names the server.
• Each radio carries an explicit label ("merge_pull_request: write"), so the cell is meaningful without reading the row and column headers separately.
• The connected count is `role="status"`, so a connection dropping while the operator is elsewhere is announced.
• Table rows use proper `aria-expanded` / `aria-controls` disclosures pointing at the revealed tool list.
• Status is never colour-only — each state carries a text label beside its dot, and a connecting server animates rather than relying on hue alone.
• Every switch has an explicit `aria-label` naming what it enables, since the visible text belongs to the row rather than the control.
• The Reveal control is a toggle button with `aria-pressed` and a label naming the server; the parameter "Show all" control carries `aria-expanded` / `aria-controls` pointing at the parameter list.