feat: add example gallery with auto-generated screenshots

README.md

@@ -56,19 +56,28 @@ Or edit your `package.json` manually:
 
 ## Examples
 
-Start with these foundational examples to learn the SDK:
-
-- [`examples/basic-server-vanillajs`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vanillajs) — MCP server + MCP App using vanilla JS
-- [`examples/basic-server-react`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-react) — MCP server + MCP App using [React](https://github.com/facebook/react)
-- [`examples/basic-server-vue`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vue) — MCP server + MCP App using [Vue](https://github.com/vuejs/vue)
-- [`examples/basic-server-svelte`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-svelte) — MCP server + MCP App using [Svelte](https://github.com/sveltejs/svelte)
-- [`examples/basic-server-preact`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-preact) — MCP server + MCP App using [Preact](https://github.com/preactjs/preact)
-- [`examples/basic-server-solid`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-solid) — MCP server + MCP App using [Solid](https://github.com/solidjs/solid)
-- [`examples/basic-host`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host) — MCP host application supporting MCP Apps
+<!-- prettier-ignore-start -->
+| | | |
+|:---:|:---:|:---:|
+| [![Map](examples/map-server/grid-cell.png "Interactive 3D globe viewer using CesiumJS")](examples/map-server) | [![Three.js](examples/threejs-server/grid-cell.png "Interactive 3D scene renderer")](examples/threejs-server) | [![ShaderToy](examples/shadertoy-server/grid-cell.png "Real-time GLSL shader renderer")](examples/shadertoy-server) |
+| [**Map**](examples/map-server) | [**Three.js**](examples/threejs-server) | [**ShaderToy**](examples/shadertoy-server) |
+| [![Sheet Music](examples/sheet-music-server/grid-cell.png "ABC notation to sheet music")](examples/sheet-music-server) | [![Wiki Explorer](examples/wiki-explorer-server/grid-cell.png "Wikipedia link graph visualization")](examples/wiki-explorer-server) | [![Cohort Heatmap](examples/cohort-heatmap-server/grid-cell.png "Customer retention heatmap")](examples/cohort-heatmap-server) |
+| [**Sheet Music**](examples/sheet-music-server) | [**Wiki Explorer**](examples/wiki-explorer-server) | [**Cohort Heatmap**](examples/cohort-heatmap-server) |
+| [![Scenario Modeler](examples/scenario-modeler-server/grid-cell.png "SaaS business projections")](examples/scenario-modeler-server) | [![Budget Allocator](examples/budget-allocator-server/grid-cell.png "Interactive budget allocation")](examples/budget-allocator-server) | [![Customer Segmentation](examples/customer-segmentation-server/grid-cell.png "Scatter chart with clustering")](examples/customer-segmentation-server) |
+| [**Scenario Modeler**](examples/scenario-modeler-server) | [**Budget Allocator**](examples/budget-allocator-server) | [**Customer Segmentation**](examples/customer-segmentation-server) |
+| [![System Monitor](examples/system-monitor-server/grid-cell.png "Real-time OS metrics")](examples/system-monitor-server) | [![Transcript](examples/transcript-server/grid-cell.png "Live speech transcription")](examples/transcript-server) | [![Video Resource](examples/video-resource-server/grid-cell.png "Binary video via MCP resources")](examples/video-resource-server) |
+| [**System Monitor**](examples/system-monitor-server) | [**Transcript**](examples/transcript-server) | [**Video Resource**](examples/video-resource-server) |
+
+### Starter Templates
+
+| | |
+|:---:|:---|
+| [![Basic](examples/basic-server-react/grid-cell.png "Starter template")](examples/basic-server-react) | The same app built with different frameworks — pick your favorite!<br><br>[React](examples/basic-server-react) · [Vue](examples/basic-server-vue) · [Svelte](examples/basic-server-svelte) · [Preact](examples/basic-server-preact) · [Solid](examples/basic-server-solid) · [Vanilla JS](examples/basic-server-vanillajs) |
+<!-- prettier-ignore-end -->
 
 The [`examples/`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples) directory contains additional demo apps showcasing real-world use cases.
 
-To run all examples together:
+To run all examples:
 
 ```bash
 npm install

examples/basic-server-react/README.md

@@ -1,5 +1,7 @@
 # Example: Basic Server (React)
 
+![Screenshot](screenshot.png)
+
 An MCP App example with a React UI.
 
 > [!TIP]

examples/map-server/README.md

@@ -1,5 +1,7 @@
 # Example: Interactive Map
 
+![Screenshot](screenshot.png)
+
 Interactive 3D globe viewer using CesiumJS with OpenStreetMap tiles. Demonstrates geocoding integration and full MCP App capabilities.
 
 ## Features

examples/shadertoy-server/README.md

@@ -50,7 +50,10 @@ _Tool input:_
 
 ```json
 {
-  "fragmentShader": "void mainImage(out vec4 fragColor, in vec2 fragCoord) {\n    vec2 uv = fragCoord / iResolution.xy;\n    fragColor = vec4(uv, 0.5 + 0.5*sin(iTime), 1.0);\n}"
+  "fragmentShader": "void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+    vec2 uv = fragCoord / iResolution.xy;
+    fragColor = vec4(uv, 0.5 + 0.5*sin(iTime), 1.0);
+}"
 }
 ```
 
@@ -79,7 +82,22 @@ _Tool input:_
 
 ```json
 {
-  "fragmentShader": "void mainImage(out vec4 fragColor, in vec2 fragCoord) {\n    vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;\n    float segments = 6.0;\n    float zoom = 1.0 + 0.3 * sin(iTime * 0.2);\n    float angle = atan(uv.y, uv.x) + iTime * 0.3;\n    float r = length(uv) * zoom;\n    angle = mod(angle, 6.28 / segments);\n    angle = abs(angle - 3.14 / segments);\n    vec2 p = vec2(cos(angle), sin(angle)) * r;\n    p += iTime * 0.1;\n    float v = sin(p.x * 10.0) * sin(p.y * 10.0);\n    v += sin(length(p) * 15.0 - iTime * 2.0);\n    v += sin(p.x * 5.0 + p.y * 7.0 + iTime);\n    vec3 col = 0.5 + 0.5 * cos(v * 2.0 + vec3(0.0, 2.0, 4.0) + iTime);\n    fragColor = vec4(col, 1.0);\n}"
+  "fragmentShader": "void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+    vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+    float segments = 6.0;
+    float zoom = 1.0 + 0.3 * sin(iTime * 0.2);
+    float angle = atan(uv.y, uv.x) + iTime * 0.3;
+    float r = length(uv) * zoom;
+    angle = mod(angle, 6.28 / segments);
+    angle = abs(angle - 3.14 / segments);
+    vec2 p = vec2(cos(angle), sin(angle)) * r;
+    p += iTime * 0.1;
+    float v = sin(p.x * 10.0) * sin(p.y * 10.0);
+    v += sin(length(p) * 15.0 - iTime * 2.0);
+    v += sin(p.x * 5.0 + p.y * 7.0 + iTime);
+    vec3 col = 0.5 + 0.5 * cos(v * 2.0 + vec3(0.0, 2.0, 4.0) + iTime);
+    fragColor = vec4(col, 1.0);
+}"
 }
 ```
 
@@ -108,7 +126,22 @@ _Tool input:_
 
 ```json
 {
-  "fragmentShader": "void mainImage(out vec4 fragColor, in vec2 fragCoord) {\n    vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y * 2.5;\n    vec2 mouse = (iMouse.xy / iResolution.xy - 0.5) * 2.0;\n    vec2 c = mouse;\n    vec2 z = uv;\n    float iter = 0.0;\n    for (int i = 0; i < 100; i++) {\n        z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;\n        if (dot(z, z) > 4.0) break;\n        iter++;\n    }\n    float t = iter / 100.0;\n    vec3 col = 0.5 + 0.5 * cos(3.0 + t * 6.28 * 2.0 + vec3(0.0, 0.6, 1.0));\n    if (iter == 100.0) col = vec3(0.0);\n    fragColor = vec4(col, 1.0);\n}"
+  "fragmentShader": "void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+    vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y * 2.5;
+    vec2 mouse = (iMouse.xy / iResolution.xy - 0.5) * 2.0;
+    vec2 c = mouse;
+    vec2 z = uv;
+    float iter = 0.0;
+    for (int i = 0; i < 100; i++) {
+        z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
+        if (dot(z, z) > 4.0) break;
+        iter++;
+    }
+    float t = iter / 100.0;
+    vec3 col = 0.5 + 0.5 * cos(3.0 + t * 6.28 * 2.0 + vec3(0.0, 0.6, 1.0));
+    if (iter == 100.0) col = vec3(0.0);
+    fragColor = vec4(col, 1.0);
+}"
 }
 ```
 

examples/sheet-music-server/README.md

@@ -38,7 +38,12 @@ When calling the `play-sheet-music` tool, provide ABC notation:
 
 ```json
 {
-  "abcNotation": "X:1\nT:C Major Scale\nM:4/4\nL:1/4\nK:C\nC D E F | G A B c |"
+  "abcNotation": "X:1
+T:C Major Scale
+M:4/4
+L:1/4
+K:C
+C D E F | G A B c |"
 }
 ```
 

examples/threejs-server/README.md

@@ -1,12 +1,8 @@
 # Example: Three.js App
 
-Interactive 3D scene renderer using Three.js. Demonstrates streaming code preview and full MCP App integration.
+![Screenshot](screenshot.png)
 
-<table>
-  <tr>
-    <td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/threejs-server/screenshot.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/threejs-server/screenshot.png" alt="Three.js scene" width="400"></a></td>
-  </tr>
-</table>
+Interactive 3D scene renderer using Three.js. Demonstrates streaming code preview and full MCP App integration.
 
 ## Features
 

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

@@ -28,10 +28,19 @@ 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);
 
-scene.add(new THREE.DirectionalLight(0xffffff, 1));
-scene.add(new THREE.AmbientLight(0x404040));
+// 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;
 

examples/transcript-server/README.md

@@ -1,5 +1,7 @@
 # Transcript Server
 
+![Screenshot](screenshot.png)
+
 An MCP App Server for live speech transcription using the Web Speech API.
 
 ## Features

examples/video-resource-server/README.md

@@ -1,5 +1,7 @@
 # Video Resource Server
 
+![Screenshot](screenshot.png)
+
 Demonstrates serving binary content (video) via MCP resources using the base64 blob pattern.
 
 ## Quick Start