Pattern to reuse iframe-embed as an MCP App

embeddable-app.ts

import { App, PostMessageTransport } from "@modelcontextprotocol/ext-apps";

function getMode() {
  return new URL(window.location.href).searchParams.has('mcp-app')) ? 'mcp-app' : 'embed';
}

// Returns the query params when embedded, or the MCP tool result' structuredContent
async function getParameters(): Record<string, string> {
  if (getMode() === 'mcp-app') {
    const app = new McpApp({name: 'Our App', version: ''});
    await app.connect(new PostMessageTransport());
    return new Promise(resolve => {
      app.ontoolresult = ({structuredContent}) => resolve(structuredContent);
      // Note: inputs are available too.
    });
  } else {
    return Object.fromEntries([...new URL(window.location.href).searchParams])
  }
}

async function main() {
  const params = await getParameters();
  ...
}