MCPNEW

McpAppFrame

Sandboxed iframe + postMessage bridge for MCP Apps spec.

Available inreact

Preview

Live previewreal component

Install

TerminalBash

$ npx @mcp-elements/cli add mcp-app-frame

Usage

mcp-app-frame-example.tsxTSX

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

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

Props

Prop	Type	Default	Description
`src *`	`string`	—	URL of the MCP App to load in the sandboxed iframe
`onMessage`	`(event: MessageEvent) => void`	—	Called when the embedded app sends a postMessage
`height`	`string \| number`	`480`	Height of the iframe in pixels or CSS value
`title *`	`string`	—	Accessible title for the iframe element