MCP

MCPResourceBrowser

Searchable list of resources exposed by MCP servers, optionally grouped by URI scheme.

Preview

Resources

Installation

pnpm add nyxis-ui

Usage

import { MCPResourceBrowser, type MCPResource } from 'nyxis-ui';

<MCPResourceBrowser resources={resources} activeUri={current} onSelect={(r) => preview(r)} />;

Anatomy

Sticky header: count + search input.
Group headers per URI scheme (file://, db://, https://, …) — collapsible.
Each row: mime-type icon, name, URI, optional description, mime tag.
Selected resource highlighted in primary tone (activeUri controlled).

Pair with a separate preview pane (e.g. <StreamingMarkdown> or a JSON viewer) to surface the resource body when one is picked.