MCPNEW
McpResourceBrowser
Browse MCP resources with type icons and preview.
Available in
reactPreview
Live previewreal component
Install
TerminalBash
npx @mcp-elements/cli add mcp-resource-browserUsage
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
| Prop | Type | Default | Description |
|---|---|---|---|
resources * | McpResource[] | — | List of MCP resource objects to display |
onSelect | (resource: McpResource) => void | — | Called when user clicks a resource row |
loading | boolean | false | Shows skeleton loading rows |