McpAppFrame

import { McpAppFrame } from '@mcp-elements/react'
import { APP_RESOURCE_MIME_TYPE } from '@mcp-elements/core'

// 1. Your MCP client reads the tool's declared ui:// resource
const { contents } = await client.readResource({ uri: toolMeta.ui.resourceUri })
const resource = contents[0] // mimeType === APP_RESOURCE_MIME_TYPE

// 2. Render it — the frame answers ui/initialize, injects the spec CSP,
//    proxies tools/call back to your client, and streams tool input/results
export function Example({ toolArgs, result }) {
  return (
    <McpAppFrame
      html={resource.text}
      resourceMeta={resource._meta?.ui}
      hostContext={{ theme: 'dark' }}
      callTool={(name, args) => client.callTool({ name, arguments: args })}
      toolInput={toolArgs}
      toolResult={result}
      openLink={(url) => window.open(url, '_blank', 'noopener')}
    />
  )
}

// Note: the Angular adapter currently ships the pre-SEP envelope bridge.
// For full SEP-1865 hosting (JSON-RPC handshake, tool proxying, CSP), wire
// createAppHost from @mcp-elements/core directly — the React adapter shows the shape.
import { Component } from '@angular/core'
import { McpeMcpAppFrameComponent } from '@mcp-elements/angular'
import type { AppMessageEnvelope } from '@mcp-elements/core'

@Component({
  selector: 'app-app-frame-example',
  standalone: true,
  imports: [McpeMcpAppFrameComponent],
  template: `<mcpe-mcp-app-frame src="https://my-mcp-app.example.com" [height]="600" (onMessage)="onMessage($event)" />`,
})
export class AppFrameExampleComponent {
  onMessage(env: AppMessageEnvelope) {
    console.log('app message', env)
  }
}

<script setup lang="ts">
// Note: the Vue adapter currently ships the pre-SEP envelope bridge.
// For full SEP-1865 hosting (JSON-RPC handshake, tool proxying, CSP), wire
// createAppHost from @mcp-elements/core directly — the React adapter shows the shape.
import { McpeMcpAppFrame } from '@mcp-elements/vue'
import type { AppMessageEnvelope } from '@mcp-elements/core'

function onMessage(env: AppMessageEnvelope) {
  console.log('app message', env)
}
</script>

<template>
  <McpeMcpAppFrame src="https://my-mcp-app.example.com" :height="600" @message="onMessage" />
</template>