diff --git a/examples/video-resource-server/grid-cell.png b/examples/video-resource-server/grid-cell.png
index 9fb01f6a3..186e8e95d 100644
Binary files a/examples/video-resource-server/grid-cell.png and b/examples/video-resource-server/grid-cell.png differ
diff --git a/examples/video-resource-server/mcp-app.html b/examples/video-resource-server/mcp-app.html
index 437c0205c..bc2ae2fb6 100644
--- a/examples/video-resource-server/mcp-app.html
+++ b/examples/video-resource-server/mcp-app.html
@@ -5,6 +5,16 @@
Video Resource Player
+
diff --git a/examples/video-resource-server/screenshot.png b/examples/video-resource-server/screenshot.png
index 1e6e169dd..6a9dd04a2 100644
Binary files a/examples/video-resource-server/screenshot.png and b/examples/video-resource-server/screenshot.png differ
diff --git a/examples/video-resource-server/src/mcp-app.css b/examples/video-resource-server/src/mcp-app.css
index 331255387..9697c06fc 100644
--- a/examples/video-resource-server/src/mcp-app.css
+++ b/examples/video-resource-server/src/mcp-app.css
@@ -1,9 +1,12 @@
.main {
width: 100%;
- max-width: 640px;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
}
.loading {
+ flex: 1;
display: flex;
flex-direction: column;
align-items: center;
@@ -40,11 +43,20 @@
margin: 0;
}
+.player {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+}
+
.player video {
width: 100%;
- max-height: 480px;
+ flex: 1;
+ min-height: 0;
border-radius: 8px;
background-color: #000;
+ object-fit: contain;
}
.video-info {
diff --git a/examples/video-resource-server/src/mcp-app.ts b/examples/video-resource-server/src/mcp-app.ts
index bc7688a81..bec5e6425 100644
--- a/examples/video-resource-server/src/mcp-app.ts
+++ b/examples/video-resource-server/src/mcp-app.ts
@@ -63,7 +63,15 @@ function showPlayer(dataUri: string, info: string) {
// MCP Apps SDK Integration
// =============================================================================
-const app = new App({ name: "Video Resource Player", version: "1.0.0" });
+/** Preferred height for inline mode - fills viewport but gives host a size hint */
+const PREFERRED_INLINE_HEIGHT = 400;
+
+// autoResize: false - we manually send size since video fills its container
+const app = new App(
+ { name: "Video Resource Player", version: "1.0.0" },
+ {},
+ { autoResize: false },
+);
// Handle tool result - Requests a resource via resources/read and converts the
// base64 blob to a data URI for use in the browser.
@@ -131,4 +139,6 @@ app.connect().then(() => {
if (ctx) {
handleHostContextChanged(ctx);
}
+ // Send preferred size for inline mode
+ app.sendSizeChanged({ height: PREFERRED_INLINE_HEIGHT });
});
diff --git a/tests/e2e/generate-grid-screenshots.spec.ts b/tests/e2e/generate-grid-screenshots.spec.ts
index ae2797c6a..4a0ee4e0f 100644
--- a/tests/e2e/generate-grid-screenshots.spec.ts
+++ b/tests/e2e/generate-grid-screenshots.spec.ts
@@ -26,8 +26,8 @@ const EXTRA_WAIT_MS: Record = {
};
// Servers to skip (screenshots maintained manually)
-const SKIP_SERVERS = new Set([
- "video-resource", // Uses custom screenshot from PR comment
+const SKIP_SERVERS = new Set([
+ // Previously had video-resource, but now it auto-generates like other servers
]);
// Optional: filter to a single example via EXAMPLE env var (folder name)