Add Three.js marketing example server

New example demonstrating interactive 3D scene rendering with:
- show_threejs_scene tool with streaming code preview
- learn_threejs documentation tool
- Full WidgetProps interface for MCP App integration
- Reusable mcp-app-wrapper.tsx pattern

Also adds bun.lockb to .gitignore.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

examples/threejs-server/src/global.css

@@ -0,0 +1,43 @@
+* {
+  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/threejs-server/src/mcp-app-wrapper.tsx

@@ -0,0 +1,119 @@
+/**
+ * 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 } from "react";
+import { createRoot } from "react-dom/client";
+import ThreeJSApp from "./threejs-app.tsx";
+import "./global.css";
+
+const APP_INFO = { name: "Three.js Widget", version: "1.0.0" };
+
+/**
+ * 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, viewport, 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 */
+  sendOpenLink: App["sendOpenLink"];
+  /** Send log messages to the host */
+  sendLog: App["sendLog"];
+}
+
+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: APP_INFO,
+    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, viewport, etc.)
+      app.onhostcontextchanged = (params) => {
+        setHostContext(params);
+      };
+    },
+  });
+
+  // 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 sendOpenLink = useCallback<App["sendOpenLink"]>(
+    (params, options) => app!.sendOpenLink(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}
+      sendOpenLink={sendOpenLink}
+      sendLog={sendLog}
+    />
+  );
+}
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <McpAppWrapper />
+  </StrictMode>,
+);

examples/threejs-server/src/threejs-app.tsx

@@ -0,0 +1,161 @@
+/**
+ * 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";
+
+interface ThreeJSToolInput {
+  code?: string;
+  height?: number;
+}
+
+type ThreeJSAppProps = WidgetProps<ThreeJSToolInput>;
+
+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>
+  );
+}
+
+// Context object passed to user code
+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);
+}
+
+export default function ThreeJSApp({
+  toolInputs,
+  toolInputsPartial,
+  toolResult: _toolResult,
+  hostContext: _hostContext,
+  callServerTool: _callServerTool,
+  sendMessage: _sendMessage,
+  sendOpenLink: _sendOpenLink,
+  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;
+  const partialCode = toolInputsPartial?.code;
+  const isStreaming = !toolInputs && !!toolInputsPartial;
+
+  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 <LoadingShimmer height={height} code={partialCode} />;
+  }
+
+  return (
+    <div ref={containerRef} className="threejs-container">
+      <canvas
+        ref={canvasRef}
+        style={{
+          width: "100%",
+          height,
+          borderRadius: 8,
+          display: "block",
+          background: "#1a1a2e",
+        }}
+      />
+      {error && <div className="error-overlay">Error: {error}</div>}
+    </div>
+  );
+}