chore: import upstream snapshot with attribution

examples/integrations/mcp-apps/threejs-server/src/global.css

@@ -0,0 +1,47 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
+  font-size: 1rem;
+  margin: 0;
+  padding: 0;
+  background: #1a1a2e;
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 400px;
+  color: #888;
+  font-size: 14px;
+}
+
+.error {
+  padding: 20px;
+  color: #ff6b6b;
+}
+
+.threejs-container {
+  width: 100%;
+  position: relative;
+}
+
+.error-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ff6b6b;
+  background: rgba(26, 26, 46, 0.9);
+  border-radius: 8px;
+  font-family: system-ui;
+  padding: 20px;
+}

examples/integrations/mcp-apps/threejs-server/src/mcp-app-wrapper.tsx

@@ -0,0 +1,135 @@
+/**
+ * Three.js Widget - MCP App Wrapper
+ *
+ * Generic wrapper that handles MCP App connection and passes all relevant
+ * props to the actual widget component.
+ */
+import type { App, McpUiHostContext } from "@modelcontextprotocol/ext-apps";
+import { useApp } from "@modelcontextprotocol/ext-apps/react";
+import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
+import { StrictMode, useState, useCallback, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+import ThreeJSApp from "./threejs-app.tsx";
+import "./global.css";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * Props passed to the widget component.
+ * This interface can be reused for other widgets.
+ */
+export interface WidgetProps<TToolInput = Record<string, unknown>> {
+  /** Complete tool input (after streaming finishes) */
+  toolInputs: TToolInput | null;
+  /** Partial tool input (during streaming) */
+  toolInputsPartial: TToolInput | null;
+  /** Tool execution result from the server */
+  toolResult: CallToolResult | null;
+  /** Host context (theme, dimensions, locale, etc.) */
+  hostContext: McpUiHostContext | null;
+  /** Call a tool on the MCP server */
+  callServerTool: App["callServerTool"];
+  /** Send a message to the host's chat */
+  sendMessage: App["sendMessage"];
+  /** Request the host to open a URL */
+  openLink: App["openLink"];
+  /** Send log messages to the host */
+  sendLog: App["sendLog"];
+}
+
+// =============================================================================
+// MCP App Wrapper
+// =============================================================================
+
+function McpAppWrapper() {
+  const [toolInputs, setToolInputs] = useState<Record<string, unknown> | null>(
+    null,
+  );
+  const [toolInputsPartial, setToolInputsPartial] = useState<Record<
+    string,
+    unknown
+  > | null>(null);
+  const [toolResult, setToolResult] = useState<CallToolResult | null>(null);
+  const [hostContext, setHostContext] = useState<McpUiHostContext | null>(null);
+
+  const { app, error } = useApp({
+    appInfo: { name: "Three.js Widget", version: "1.0.0" },
+    capabilities: {},
+    onAppCreated: (app) => {
+      // Complete tool input (streaming finished)
+      app.ontoolinput = (params) => {
+        setToolInputs(params.arguments as Record<string, unknown>);
+        setToolInputsPartial(null);
+      };
+      // Partial tool input (streaming in progress)
+      app.ontoolinputpartial = (params) => {
+        setToolInputsPartial(params.arguments as Record<string, unknown>);
+      };
+      // Tool execution result
+      app.ontoolresult = (params) => {
+        setToolResult(params as CallToolResult);
+      };
+      // Host context changes (theme, dimensions, etc.)
+      app.onhostcontextchanged = (params) => {
+        setHostContext((prev) => ({ ...prev, ...params }));
+      };
+    },
+  });
+
+  // Get initial host context after connection
+  useEffect(() => {
+    if (app) {
+      const ctx = app.getHostContext();
+      if (ctx) {
+        setHostContext(ctx);
+      }
+    }
+  }, [app]);
+
+  // Memoized callbacks that forward to app methods
+  const callServerTool = useCallback<App["callServerTool"]>(
+    (params, options) => app!.callServerTool(params, options),
+    [app],
+  );
+  const sendMessage = useCallback<App["sendMessage"]>(
+    (params, options) => app!.sendMessage(params, options),
+    [app],
+  );
+  const openLink = useCallback<App["openLink"]>(
+    (params, options) => app!.openLink(params, options),
+    [app],
+  );
+  const sendLog = useCallback<App["sendLog"]>(
+    (params) => app!.sendLog(params),
+    [app],
+  );
+
+  if (error) {
+    return <div className="error">Error: {error.message}</div>;
+  }
+
+  if (!app) {
+    return <div className="loading">Connecting...</div>;
+  }
+
+  return (
+    <ThreeJSApp
+      toolInputs={toolInputs}
+      toolInputsPartial={toolInputsPartial}
+      toolResult={toolResult}
+      hostContext={hostContext}
+      callServerTool={callServerTool}
+      sendMessage={sendMessage}
+      openLink={openLink}
+      sendLog={sendLog}
+    />
+  );
+}
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <McpAppWrapper />
+  </StrictMode>,
+);

examples/integrations/mcp-apps/threejs-server/src/threejs-app.tsx

@@ -0,0 +1,232 @@
+/**
+ * Three.js App Component
+ *
+ * Renders interactive 3D scenes using Three.js with streaming code preview.
+ * Receives all MCP App props from the wrapper.
+ */
+import { useState, useEffect, useRef } from "react";
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
+import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
+import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js";
+import type { WidgetProps } from "./mcp-app-wrapper.tsx";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface ThreeJSToolInput {
+  code?: string;
+  height?: number;
+}
+
+type ThreeJSAppProps = WidgetProps<ThreeJSToolInput>;
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+// Default demo code shown when no code is provided
+const DEFAULT_THREEJS_CODE = `const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
+const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+renderer.setSize(width, height);
+renderer.setClearColor(0x1a1a2e);
+
+const cube = new THREE.Mesh(
+  new THREE.BoxGeometry(1, 1, 1),
+  new THREE.MeshStandardMaterial({ color: 0x00ff88 })
+);
+// Start with an isometric-ish rotation to show 3 faces
+cube.rotation.x = 0.5;
+cube.rotation.y = 0.7;
+scene.add(cube);
+
+// Better lighting: key light + fill light + ambient
+const keyLight = new THREE.DirectionalLight(0xffffff, 1.2);
+keyLight.position.set(1, 1, 2);
+scene.add(keyLight);
+const fillLight = new THREE.DirectionalLight(0x8888ff, 0.4);
+fillLight.position.set(-1, 0, -1);
+scene.add(fillLight);
+scene.add(new THREE.AmbientLight(0x404040, 0.5));
+
+camera.position.z = 3;
+
+function animate() {
+  requestAnimationFrame(animate);
+  cube.rotation.x += 0.01;
+  cube.rotation.y += 0.01;
+  renderer.render(scene, camera);
+}
+animate();`;
+
+// =============================================================================
+// Streaming Preview
+// =============================================================================
+
+const SHIMMER_STYLE = `
+  @keyframes shimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+`;
+
+function LoadingShimmer({ height, code }: { height: number; code?: string }) {
+  const preRef = useRef<HTMLPreElement>(null);
+
+  useEffect(() => {
+    if (preRef.current) preRef.current.scrollTop = preRef.current.scrollHeight;
+  }, [code]);
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        height,
+        borderRadius: 8,
+        padding: 16,
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        background:
+          "linear-gradient(90deg, #1a1a2e 25%, #2d2d44 50%, #1a1a2e 75%)",
+        backgroundSize: "200% 100%",
+        animation: "shimmer 1.5s ease-in-out infinite",
+      }}
+    >
+      <style>{SHIMMER_STYLE}</style>
+      <div
+        style={{
+          color: "#888",
+          fontFamily: "system-ui",
+          fontSize: 12,
+          marginBottom: 8,
+        }}
+      >
+        🎮 Three.js
+      </div>
+      {code && (
+        <pre
+          ref={preRef}
+          style={{
+            margin: 0,
+            padding: 0,
+            flex: 1,
+            overflow: "auto",
+            color: "#aaa",
+            fontFamily: "monospace",
+            fontSize: 11,
+            lineHeight: 1.4,
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word",
+          }}
+        >
+          {code}
+        </pre>
+      )}
+    </div>
+  );
+}
+
+// =============================================================================
+// Three.js Execution
+// =============================================================================
+
+const threeContext = {
+  THREE,
+  OrbitControls,
+  EffectComposer,
+  RenderPass,
+  UnrealBloomPass,
+};
+
+async function executeThreeCode(
+  code: string,
+  canvas: HTMLCanvasElement,
+  width: number,
+  height: number,
+): Promise<void> {
+  const fn = new Function(
+    "ctx",
+    "canvas",
+    "width",
+    "height",
+    `const { THREE, OrbitControls, EffectComposer, RenderPass, UnrealBloomPass } = ctx;
+     return (async () => { ${code} })();`,
+  );
+  await fn(threeContext, canvas, width, height);
+}
+
+// =============================================================================
+// Main Component
+// =============================================================================
+
+export default function ThreeJSApp({
+  toolInputs,
+  toolInputsPartial,
+  toolResult: _toolResult,
+  hostContext,
+  callServerTool: _callServerTool,
+  sendMessage: _sendMessage,
+  openLink: _openLink,
+  sendLog: _sendLog,
+}: ThreeJSAppProps) {
+  const [error, setError] = useState<string | null>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const height = toolInputs?.height ?? toolInputsPartial?.height ?? 400;
+  const code = toolInputs?.code || DEFAULT_THREEJS_CODE;
+  const partialCode = toolInputsPartial?.code;
+  const isStreaming = !toolInputs && !!toolInputsPartial;
+
+  const safeAreaInsets = hostContext?.safeAreaInsets;
+  const containerStyle = {
+    paddingTop: safeAreaInsets?.top,
+    paddingRight: safeAreaInsets?.right,
+    paddingBottom: safeAreaInsets?.bottom,
+    paddingLeft: safeAreaInsets?.left,
+  };
+
+  useEffect(() => {
+    if (!code || !canvasRef.current || !containerRef.current) return;
+
+    setError(null);
+    const width = containerRef.current.offsetWidth || 800;
+    executeThreeCode(code, canvasRef.current, width, height).catch((e) =>
+      setError(e instanceof Error ? e.message : "Unknown error"),
+    );
+  }, [code, height]);
+
+  if (isStreaming || !code) {
+    return (
+      <div style={containerStyle}>
+        <LoadingShimmer height={height} code={partialCode} />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className="threejs-container"
+      style={containerStyle}
+    >
+      <canvas
+        id="threejs-canvas"
+        ref={canvasRef}
+        style={{
+          width: "100%",
+          height,
+          borderRadius: 8,
+          display: "block",
+          background: "#1a1a2e",
+        }}
+      />
+      {error && <div className="error-overlay">Error: {error}</div>}
+    </div>
+  );
+}