About
A searchable, selectable list of resources an MCP server exposes, showing each resource's full URI, MIME type, size and originating server so items can be filtered and attached to a prompt.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds MCP Resource List to your project and fits it to your theme.
Code
How MCP Resource List is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import { McpResourceList } from "@/components/ui/mcp-resource-list";
import type { McpResource } from "@/components/ui/mcp-resource-list";
import { useState } from "react";
const RESOURCES: McpResource[] = [
{
uri: "file:///Users/ada/work/astralyx/README.md",
name: "README",
mimeType: "text/markdown",
size: 8420,
server: "filesystem",
},
{
uri: "file:///Users/ada/.ssh/id_rsa",
name: "SSH key",
mimeType: "text/plain",
size: 2602,
server: "filesystem",
},
{
uri: "postgres://prod/public/customers",
name: "customers",
mimeType: "application/json",
server: "postgres",
},
{
uri: "https://mcp.linear.app/issues/ENG-4127",
name: "ENG-4127 - retry storm",
mimeType: "application/json",
server: "linear",
},
];
export default function ResourcePicker() {
const [picked, setPicked] = useState([
"file:///Users/ada/work/astralyx/README.md",
]);
return (
<div className="w-full max-w-2xl">
<McpResourceList
resources={RESOURCES}
value={picked}
onValueChange={setPicked}
/>
</div>
);
}
Dependencies
More by astralyxdev
View all
Rate Limit Meter
18
Note Graph
13
Prompt Versions
7
Migration List
7
IP Cluster
7
Checkout Summary
7
Odds Display
5
Budget Guard
5