McpAppFrame

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

export function Example() {
  return (
    <McpAppFrame
      src="https://my-mcp-app.example.com"
      height={600}
      onMessage={(env: AppMessageEnvelope) => console.log('app message', env)}
    />
  )
}

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">
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>