MCP Resource List

The resources a server exposes, addressed by URI. The URI is always shown in full and is what search matches first — “SSH key” and file:///Users/me/.ssh/id_rsa are the same resource, and only one of them makes anyone look twice.

src/components/ui/mcp-resource-list.tsx

About

From the component's own source, where it was written.

The resources an MCP server exposes, addressed by URI.

Resources are the half of MCP that is easy to under-render. A tool has a name and an obvious shape; a resource is a URI, and a list that shows only the human title hides which server it came from and what scheme it speaks — exactly the two things that decide whether it should be in the context.

So the URI is always shown, in full, in mono, and it is what search matches first. file:///Users/me/.ssh/id_rsa and "SSH key" are the same resource; only one of them makes anyone look twice.

Selection is optional and controlled. Attaching resources to a prompt is the common case, and the caller owns that set because it is usually part of a larger composer.

Install

npx astralyx-ui add mcp-resource-list

Usage

import { McpResourceList } from '@/components/ui/mcp-resource-list'

<McpResourceList resources={resources} value={attached} onValueChange={setAttached} />

Composer

Change the props and the source below follows.

Props

No props to configure.

tsx

<McpResourceList
  resources={resources}
  value={attached}
  onValueChange={setAttached}
/>

Examples

Attaching resources to a prompt

tsx

<McpResourceList resources={resources} value={attached} onValueChange={setAttached} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`McpResourceList`

Extends Omit<ComponentProps<'div'>, 'onSelect'>.

Prop	Type	Default	Description
resources	McpResource[]	required	{ uri, name?, description?, mimeType?, server?, size? }.
value	string[]	—	Selected URIs. Omit both for a read-only catalogue — the rows stop being buttons rather than becoming inert ones.
onValueChange	(next: string[]) => void	—	Selected URIs. Omit both for a read-only catalogue — the rows stop being buttons rather than becoming inert ones.
searchable	boolean	true	Matches URI, name and MIME type, URI first.
searchPlaceholder	string	'Filter by URI or name…'	—
searchLabel	string	'Filter resources'	—
emptyLabel	string	'No resources match'	—
emptyHint	string	'Try a different word, or clear the filter.'	—
showServer	boolean	true	Which server offered it — matters as soon as more than one is connected.
formatSize	(bytes: number) => string	defaultSize	—

Types

`McpResource`

The resources an MCP server exposes, addressed by URI.

Field	Type	Description
uri	string	—
name?	string	Human title. The URI is shown regardless.
description?	ReactNode	—
mimeType?	string	—
server?	string	Which server offered it — matters when several are connected.
size?	number	Bytes, when the server reports it.