McpResourceBrowser

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)}
    />
  )
}

import { Component } from '@angular/core'
import { McpeMcpResourceBrowserComponent, type McpResource } from '@mcp-elements/angular'

@Component({
  selector: 'app-resource-browser-example',
  standalone: true,
  imports: [McpeMcpResourceBrowserComponent],
  template: `<mcpe-mcp-resource-browser [resources]="resources" (onSelect)="select($event)" />`,
})
export class ResourceBrowserExampleComponent {
  resources: McpResource[] = [
    { uri: 'file:///src/index.ts', name: 'index.ts', mimeType: 'text/typescript' },
    { uri: 'file:///README.md', name: 'README.md', mimeType: 'text/markdown' },
  ]
  select(r: McpResource) {
    console.log('selected', r.uri)
  }
}

<script setup lang="ts">
import { McpeMcpResourceBrowser, type McpResource } from '@mcp-elements/vue'

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

function select(r: McpResource) {
  console.log('selected', r.uri)
}
</script>

<template>
  <McpeMcpResourceBrowser :resources="resources" @select="select" />
</template>