React renderer for MCP Apps

eslint.config.mjs

@@ -0,0 +1,52 @@
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import typescriptParser from '@typescript-eslint/parser';
+import reactPlugin from 'eslint-plugin-react';
+import prettier from 'eslint-config-prettier';
+
+export default [
+  {
+    ignores: [
+      'node_modules/**',
+      'dist/**',
+      'coverage/**',
+      '**/*.log',
+      '**/*.js',
+      '**/*.mjs',
+      '**/*.cjs',
+      'sdks/typescript/client/src/remote-dom/iframe-bundle.ts',
+      'examples/**',
+    ],
+  },
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+      react: reactPlugin,
+    },
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      ...typescriptEslint.configs.recommended.rules,
+      ...reactPlugin.configs.recommended.rules,
+      ...reactPlugin.configs['jsx-runtime'].rules,
+      'react/prop-types': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+      '@typescript-eslint/no-empty-object-type': 'off',
+    },
+  },
+  prettier,
+];

examples/mcp-apps-demo/package.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@mcp-ui/server": "workspace:*",
-    "@modelcontextprotocol/ext-apps": "https://github.com/modelcontextprotocol/ext-apps/archive/192d29f2ba122d0ad22e4456b9fd6b1e0fa7110f.tar.gz",
+    "@modelcontextprotocol/ext-apps": "github:modelcontextprotocol/ext-apps#main",
     "@modelcontextprotocol/sdk": "^1.22.0",
     "cors": "^2.8.5",
     "express": "^4.18.2",

sdks/typescript/client/package.json

@@ -19,11 +19,14 @@
     "dist"
   ],
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.22.0",
+    "@modelcontextprotocol/ext-apps": "github:modelcontextprotocol/ext-apps#main",
+    "@modelcontextprotocol/sdk": "^1.23.0",
+    "@mcp-ui/shared": "workspace:*",
     "@quilted/threads": "^3.1.3",
     "@r2wc/react-to-web-component": "^2.0.4",
     "@remote-dom/core": "^1.8.0",
-    "@remote-dom/react": "^1.2.2"
+    "@remote-dom/react": "^1.2.2",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.0.0",

sdks/typescript/client/src/components/AppFrame.tsx

@@ -0,0 +1,253 @@
+import { useEffect, useRef, useState } from 'react';
+
+import type {
+  CallToolResult,
+  LoggingMessageNotification,
+  Implementation,
+} from '@modelcontextprotocol/sdk/types.js';
+
+import {
+  AppBridge,
+  PostMessageTransport,
+  type McpUiSizeChangedNotification,
+  type McpUiResourceCsp,
+  type McpUiAppCapabilities,
+} from '@modelcontextprotocol/ext-apps/app-bridge';
+
+import { setupSandboxProxyIframe } from '../utils/app-host-utils';
+
+/**
+ * Information about the guest app, available after initialization.
+ */
+export interface AppInfo {
+  /** Guest app's name and version */
+  appVersion?: Implementation;
+  /** Guest app's declared capabilities */
+  appCapabilities?: McpUiAppCapabilities;
+}
+
+/**
+ * Sandbox configuration for the iframe.
+ */
+export interface SandboxConfig {
+  /** URL to the sandbox proxy HTML */
+  url: URL;
+  /** Override iframe sandbox attribute (default: "allow-scripts allow-same-origin allow-forms") */
+  permissions?: string;
+  /** CSP metadata to forward to the sandbox proxy */
+  csp?: McpUiResourceCsp;
+}
+
+/**
+ * Props for the AppFrame component.
+ */
+export interface AppFrameProps {
+  /** Pre-fetched HTML content to render in the sandbox */
+  html: string;
+
+  /** Sandbox configuration */
+  sandbox: SandboxConfig;
+
+  /** Pre-configured AppBridge for MCP communication (required) */
+  appBridge: AppBridge;
+
+  /** Callback when guest reports size change */
+  onSizeChanged?: (params: McpUiSizeChangedNotification['params']) => void;
+
+  /** Callback when guest sends a logging message */
+  onLoggingMessage?: (params: LoggingMessageNotification['params']) => void;
+
+  /** Callback when app initialization completes, with app info */
+  onInitialized?: (appInfo: AppInfo) => void;
+
+  /** Tool input arguments to send when app initializes */
+  toolInput?: Record<string, unknown>;
+
+  /** Tool result to send when app initializes */
+  toolResult?: CallToolResult;
+
+  /** Callback when an error occurs */
+  onError?: (error: Error) => void;
+}
+
+/**
+ * Low-level component that renders pre-fetched HTML in a sandboxed iframe.
+ *
+ * This component requires a pre-configured AppBridge for MCP communication.
+ * For automatic AppBridge creation and resource fetching, use the higher-level
+ * AppRenderer component instead.
+ *
+ * @example With pre-configured AppBridge
+ * ```tsx
+ * const appBridge = new AppBridge(client, hostInfo, capabilities);
+ * // ... configure appBridge handlers ...
+ *
+ * <AppFrame
+ *   html={htmlContent}
+ *   sandbox={{ url: sandboxUrl }}
+ *   appBridge={appBridge}
+ *   toolInput={args}
+ *   toolResult={result}
+ *   onSizeChanged={({ width, height }) => console.log('Size:', width, height)}
+ * />
+ * ```
+ */
+export const AppFrame = (props: AppFrameProps) => {
+  const {
+    html,
+    sandbox,
+    appBridge,
+    onSizeChanged,
+    onLoggingMessage,
+    onInitialized,
+    toolInput,
+    toolResult,
+    onError,
+  } = props;
+
+  const [iframeReady, setIframeReady] = useState(false);
+  const [bridgeConnected, setBridgeConnected] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+
+  // Refs for callbacks to avoid effect re-runs
+  const onSizeChangedRef = useRef(onSizeChanged);
+  const onLoggingMessageRef = useRef(onLoggingMessage);
+  const onInitializedRef = useRef(onInitialized);
+  const onErrorRef = useRef(onError);
+
+  useEffect(() => {
+    onSizeChangedRef.current = onSizeChanged;
+    onLoggingMessageRef.current = onLoggingMessage;
+    onInitializedRef.current = onInitialized;
+    onErrorRef.current = onError;
+  });
+
+  // Effect 1: Set up sandbox iframe and connect AppBridge
+  useEffect(() => {
+    let mounted = true;
+
+    const setup = async () => {
+      try {
+        const { iframe, onReady } = await setupSandboxProxyIframe(sandbox.url);
+
+        if (!mounted) return;
+
+        iframeRef.current = iframe;
+        if (containerRef.current) {
+          containerRef.current.appendChild(iframe);
+        }
+
+        await onReady;
+
+        if (!mounted) return;
+
+        // Register size change handler
+        appBridge.onsizechange = async (params) => {
+          onSizeChangedRef.current?.(params);
+          // Also update iframe size
+          if (iframeRef.current) {
+            if (params.width !== undefined) {
+              iframeRef.current.style.width = `${params.width}px`;
+            }
+            if (params.height !== undefined) {
+              iframeRef.current.style.height = `${params.height}px`;
+            }
+          }
+        };
+
+        // Hook into initialization
+        appBridge.oninitialized = () => {
+          if (!mounted) return;
+          console.log('[AppFrame] App initialized');
+          setIframeReady(true);
+          onInitializedRef.current?.({
+            appVersion: appBridge.getAppVersion(),
+            appCapabilities: appBridge.getAppCapabilities(),
+          });
+        };
+
+        // Register logging handler
+        appBridge.onloggingmessage = (params) => {
+          onLoggingMessageRef.current?.(params);
+        };
+
+        // Connect the bridge
+        await appBridge.connect(
+          new PostMessageTransport(iframe.contentWindow!, iframe.contentWindow!),
+        );
+
+        if (!mounted) return;
+
+        setBridgeConnected(true);
+      } catch (err) {
+        console.error('[AppFrame] Error:', err);
+        if (!mounted) return;
+        const error = err instanceof Error ? err : new Error(String(err));
+        setError(error);
+        onErrorRef.current?.(error);
+      }
+    };
+
+    setup();
+
+    return () => {
+      mounted = false;
+      if (iframeRef.current && containerRef.current?.contains(iframeRef.current)) {
+        containerRef.current.removeChild(iframeRef.current);
+      }
+    };
+  }, [sandbox.url, appBridge]);
+
+  // Effect 2: Send HTML to sandbox when bridge is connected
+  useEffect(() => {
+    if (!bridgeConnected || !html) return;
+
+    const sendHtml = async () => {
+      try {
+        console.log('[AppFrame] Sending HTML to sandbox');
+        await appBridge.sendSandboxResourceReady({
+          html,
+          csp: sandbox.csp,
+        });
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        setError(error);
+        onErrorRef.current?.(error);
+      }
+    };
+
+    sendHtml();
+  }, [bridgeConnected, html, appBridge, sandbox.csp]);
+
+  // Effect 3: Send tool input when ready
+  useEffect(() => {
+    if (bridgeConnected && iframeReady && toolInput) {
+      console.log('[AppFrame] Sending tool input:', toolInput);
+      appBridge.sendToolInput({ arguments: toolInput });
+    }
+  }, [appBridge, bridgeConnected, iframeReady, toolInput]);
+
+  // Effect 4: Send tool result when ready
+  useEffect(() => {
+    if (bridgeConnected && iframeReady && toolResult) {
+      console.log('[AppFrame] Sending tool result:', toolResult);
+      appBridge.sendToolResult(toolResult);
+    }
+  }, [appBridge, bridgeConnected, iframeReady, toolResult]);
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      {error && <div style={{ color: 'red', padding: '1rem' }}>Error: {error.message}</div>}
+    </div>
+  );
+};