Convert Web App

import { McpServer } from "@modelcontextprotocol/server";import { StdioServerTransport } from "@modelcontextprotocol/server/stdio";import { registerAppTool, registerAppResource, RESOURCE_MIME_TYPE } from "@modelcontextprotocol/ext-apps/server";import fs from "node:fs/promises";import path from "node:path";import { z } from "zod";
const server = new McpServer({ name: "my-app", version: "1.0.0" });
const resourceUri = "ui://my-app/mcp-app.html";
// Register the tool — inputSchema maps to the app's data sourcesregisterAppTool(server, "show-app", {  description: "Displays the app with the given parameters",  inputSchema: z.object({    query: z.string().describe("The search query"),  }),  _meta: { ui: { resourceUri } },}, async (args) => {  // Process args server-side if needed  return {    content: [{ type: "text", text: `Showing app for: ${args.query}` }],    structuredContent: { query: args.query },  };});
// Register the HTML resourceregisterAppResource(  server,  "My App UI",  resourceUri,  {},  async () => {    const html = await fs.readFile(      path.resolve(import.meta.dirname, "dist", "mcp-app.html"),      "utf-8",    );    return {      contents: [        {          uri: resourceUri,          mimeType: RESOURCE_MIME_TYPE,          text: html,          // Add CSP domains from Step 2 if needed:          // _meta: { ui: { csp: { connectDomains: ["https://api.example.com"], resourceDomains: ["https://cdn.example.com"] } } },        },      ],    };  },);
// Start the serverconst transport = new StdioServerTransport();await server.connect(transport);

import { defineConfig } from "vite";import { viteSingleFile } from "vite-plugin-singlefile";
export default defineConfig({  plugins: [viteSingleFile()],  build: {    outDir: "dist",    rollupOptions: {      input: "mcp-app.html",    },  },});

import { App, PostMessageTransport } from "@modelcontextprotocol/ext-apps";
// Detect whether we're running inside an MCP host.// Choose a detection method that fits the app://   - Origin check: window.location.origin !== 'https://myhost.com'//   - Null origin (sandboxed iframe): window.location.origin === 'null'//   - Query param: new URL(location.href).searchParams.has('mcp')const isMcpApp = window.location.origin === "null";
async function getParameters(): Promise<Record<string, string>> {  if (isMcpApp) {    // Running as MCP App — get params from tool lifecycle    const app = new App({ name: "My App", version: "1.0.0" });
    // Register handlers BEFORE connect()    const params = await new Promise<Record<string, string>>((resolve) => {      app.ontoolresult = (result) => resolve(result.structuredContent ?? {});    });
    await app.connect(new PostMessageTransport());    return params;  } else {    // Running as standalone web app — get params from URL    return Object.fromEntries(new URL(location.href).searchParams);  }}
async function main() {  const params = await getParameters();  renderApp(params); // Same rendering logic for both modes}
main().catch(console.error);

// Before (standalone only):const query = new URL(location.href).searchParams.get("q");renderApp(query);
// After (hybrid):async function getQuery(): Promise<string> {  if (isMcpApp) {    const app = new App({ name: "My App", version: "1.0.0" });    return new Promise((resolve) => {      app.ontoolinput = (params) => resolve(params.arguments?.q ?? "");      app.connect(new PostMessageTransport());    });  }  return new URL(location.href).searchParams.get("q") ?? "";}
const query = await getQuery();renderApp(query); // Unchanged rendering logic

// Before (standalone only):const data = await fetch("/api/data").then(r => r.json());
// After (hybrid):async function fetchData(): Promise<any> {  if (isMcpApp) {    const result = await app.callServerTool({      name: "fetch-data",      arguments: {},    });    return result.structuredContent;  }  return fetch("/api/data").then(r => r.json());}

// API calls can stay unchanged if the API is external and the CSP declares the domain// Declare connectDomains: ["api.example.com"] in the resource registration

// Before (standalone only):const saved = localStorage.getItem("settings");
// After (hybrid) — localStorage isn't available in sandboxed iframes:function getSettings(): any {  if (isMcpApp) {    // Will be provided via tool result    return null; // or a default  }  return JSON.parse(localStorage.getItem("settings") ?? "null");}

import { App, PostMessageTransport, applyDocumentTheme, applyHostStyleVariables, applyHostFonts } from "@modelcontextprotocol/ext-apps";
const isMcpApp = window.location.origin === "null";
async function initMcpApp(): Promise<Record<string, any>> {  const app = new App({ name: "My App", version: "1.0.0" });
  // Register ALL handlers BEFORE connect()  const params = await new Promise<Record<string, any>>((resolve) => {    app.ontoolinput = (input) => resolve(input.arguments ?? {});  });
  app.onhostcontextchanged = (ctx) => {    if (ctx.theme) applyDocumentTheme(ctx.theme);    if (ctx.styles?.variables) applyHostStyleVariables(ctx.styles.variables);    if (ctx.styles?.css?.fonts) applyHostFonts(ctx.styles.css.fonts);    if (ctx.safeAreaInsets) {      const { top, right, bottom, left } = ctx.safeAreaInsets;      document.body.style.padding = `${top}px ${right}px ${bottom}px ${left}px`;    }  };
  app.onteardown = async () => {    return {};  };
  await app.connect(new PostMessageTransport());  return params;}
async function initStandaloneApp(): Promise<Record<string, any>> {  return Object.fromEntries(new URL(location.href).searchParams);}
async function main() {  const params = isMcpApp ? await initMcpApp() : await initStandaloneApp();  renderApp(params); // Same rendering logic — no fork needed}
main().catch(console.error);

import { applyDocumentTheme, applyHostStyleVariables, applyHostFonts } from "@modelcontextprotocol/ext-apps";
app.onhostcontextchanged = (ctx) => {  if (ctx.theme) applyDocumentTheme(ctx.theme);  if (ctx.styles?.variables) applyHostStyleVariables(ctx.styles.variables);  if (ctx.styles?.css?.fonts) applyHostFonts(ctx.styles.css.fonts);};

import { useApp, useHostStyles } from "@modelcontextprotocol/ext-apps/react";
const { app } = useApp({ appInfo, capabilities, onAppCreated });useHostStyles(app);

registerAppTool(server, "refresh-data", {  description: "Fetches latest data for the UI",  _meta: { ui: { resourceUri, visibility: ["app"] } },}, async () => {  const data = await getLatestData();  return { content: [{ type: "text", text: JSON.stringify(data) }] };});

app.ontoolinputpartial = (params) => {  const args = params.arguments; // Healed partial JSON - always valid  renderPreview(args);};
app.ontoolinput = (params) => {  renderFull(params.arguments);};

app.onhostcontextchanged = (ctx) => {  if (ctx.availableDisplayModes?.includes("fullscreen")) {    fullscreenBtn.style.display = "block";  }  if (ctx.displayMode) {    container.classList.toggle("fullscreen", ctx.displayMode === "fullscreen");  }};
async function toggleFullscreen() {  const newMode = currentMode === "fullscreen" ? "inline" : "fullscreen";  const result = await app.requestDisplayMode({ mode: newMode });  currentMode = result.mode;}

return {  content: [{ type: "text", text: "Fallback description of the result" }],  structuredContent: { /* data for the UI */ },};