MCPNEW

McpResourceBrowser

Browse MCP resources with type icons and preview.

Available inreact

Preview

Live previewreal component

Install

TerminalBash
npx @mcp-elements/cli add mcp-resource-browser

Usage

mcp-resource-browser-example.tsxTSX
import { McpResourceBrowser } from '@mcp-elements/react'

const resources = [
  { uri: 'file:///src/index.ts', name: 'index.ts', mimeType: 'text/typescript' },
  { uri: 'file:///README.md', name: 'README.md', mimeType: 'text/markdown' },
]

export function Example() {
  return (
    <McpResourceBrowser
      resources={resources}
      onSelect={(r) => console.log('selected', r.uri)}
    />
  )
}

Props

PropTypeDefaultDescription
resources *McpResource[]List of MCP resource objects to display
onSelect(resource: McpResource) => voidCalled when user clicks a resource row
loadingbooleanfalseShows skeleton loading rows