Skip to content

Commit 3df49c3

Browse files
ochafikochafik
authored
fix iframe resizing (#19)
* reshuffle build / start scripts * fix resize logic * prettier * extract RESOURCE_URI_META_KEY constant * Update message-transport.ts * Update package.json
1 parent 0e62cec commit 3df49c3

File tree

11 files changed

+38
-100
lines changed

11 files changed

+38
-100
lines changed

‎build.esbuild.ts‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎examples/simple-host/package.json‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,30 @@
44
"version": "1.0.0",
55
"type": "module",
66
"scripts": {
7-
"start:server": "tsx server.ts",
8-
"start:mcp-server": "cd ../simple-server && npm install && npm run start",
9-
"build": "concurrently 'INPUT=example-host-vanilla.html vite build' 'INPUT=example-host-react.html vite build' 'INPUT=sandbox.html vite build'",
10-
"server": "bun server.ts",
11-
"start": "NODE_ENV=development npm run build && concurrently 'npm run start:server' 'npm run start:mcp-server'"
7+
"start": "NODE_ENV=development npm run build && concurrently 'npm run start:server'",
8+
"start:server": "bun server.ts",
9+
"build": "concurrently 'INPUT=example-host-vanilla.html vite build' 'INPUT=example-host-react.html vite build' 'INPUT=sandbox.html vite build'"
1210
},
1311
"dependencies": {
1412
"@modelcontextprotocol/ext-apps": "../..",
1513
"@modelcontextprotocol/sdk": "^1.22.0",
16-
"react-dom": "^19.2.0",
1714
"react": "^19.2.0",
15+
"react-dom": "^19.2.0",
1816
"zod": "^3.25.0"
1917
},
2018
"devDependencies": {
2119
"@types/express": "^5.0.0",
2220
"@types/node": "^22.0.0",
23-
"@types/react-dom": "^19.2.2",
2421
"@types/react": "^19.2.2",
22+
"@types/react-dom": "^19.2.2",
2523
"@vitejs/plugin-react": "^4.3.4",
24+
"bun": "^1.3.2",
2625
"concurrently": "^9.2.1",
2726
"cors": "^2.8.5",
28-
"esbuild": "~0.19.10",
2927
"express": "^5.1.0",
3028
"prettier": "^3.6.2",
31-
"tsx": "^4.20.6",
32-
"typescript": "^5.9.3",
33-
"vite-plugin-singlefile": "^2.3.0",
3429
"vite": "^6.0.0",
30+
"vite-plugin-singlefile": "^2.3.0",
3531
"vitest": "^3.2.4"
3632
}
3733
}

‎examples/simple-server/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
"private": true,
55
"type": "module",
66
"scripts": {
7+
"start": "NODE_ENV=development npm run build && npm run server",
78
"build": "concurrently 'INPUT=ui-raw.html vite build' 'INPUT=ui-vanilla.html vite build' 'INPUT=ui-react.html vite build'",
8-
"server": "bun server.ts",
9-
"start": "npm run build && npm run server"
9+
"server": "bun server.ts"
1010
},
1111
"dependencies": {
1212
"@modelcontextprotocol/ext-apps": "../..",

‎examples/simple-server/server.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import cors from "cors";
1414
import path from "node:path";
1515
import fs from "node:fs/promises";
1616
import { fileURLToPath } from "node:url";
17+
import { RESOURCE_URI_META_KEY } from "@modelcontextprotocol/ext-apps";
1718

1819
const __filename = fileURLToPath(import.meta.url);
1920
const __dirname = path.dirname(__filename);
@@ -81,7 +82,7 @@ const getServer = async () => {
8182
message: z.string().describe("Message to display"),
8283
},
8384
_meta: {
84-
"ui/resourceUri": rawResource.uri,
85+
[RESOURCE_URI_META_KEY]: rawResource.uri,
8586
},
8687
},
8788
async ({ message }): Promise<CallToolResult> => ({
@@ -112,7 +113,7 @@ const getServer = async () => {
112113
message: z.string().describe("Message to display"),
113114
},
114115
_meta: {
115-
"ui/resourceUri": vanillaResource.uri,
116+
[RESOURCE_URI_META_KEY]: vanillaResource.uri,
116117
},
117118
},
118119
async ({ message }): Promise<CallToolResult> => ({
@@ -143,7 +144,7 @@ const getServer = async () => {
143144
message: z.string().describe("Message to display"),
144145
},
145146
_meta: {
146-
"ui/resourceUri": reactResource.uri,
147+
[RESOURCE_URI_META_KEY]: reactResource.uri,
147148
},
148149
},
149150
async ({ message }): Promise<CallToolResult> => ({

‎examples/simple-server/src/ui-raw.ts‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -131,19 +131,11 @@ window.addEventListener("load", async () => {
131131
});
132132

133133
new ResizeObserver(() => {
134-
const { body, documentElement: html } = document;
135-
136-
const bodyStyle = getComputedStyle(body);
137-
const htmlStyle = getComputedStyle(html);
138-
139-
const width = body.scrollWidth;
140-
const height =
141-
body.scrollHeight +
142-
(parseFloat(bodyStyle.borderTop) || 0) +
143-
(parseFloat(bodyStyle.borderBottom) || 0) +
144-
(parseFloat(htmlStyle.borderTop) || 0) +
145-
(parseFloat(htmlStyle.borderBottom) || 0);
146-
134+
const rect = (
135+
document.body.parentElement ?? document.body
136+
).getBoundingClientRect();
137+
const width = Math.ceil(rect.width);
138+
const height = Math.ceil(rect.height);
147139
app.sendNotification<McpUiSizeChangeNotification>({
148140
method: "ui/notifications/size-change",
149141
params: { width, height },

‎examples/simple-server/src/ui-vanilla.ts‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,6 @@ window.addEventListener("load", async () => {
4848
appendText(`Host context changed: ${JSON.stringify(params)}`);
4949
};
5050

51-
document.body.addEventListener("resize", () => {
52-
app.sendSizeChange({
53-
width: document.body.scrollWidth,
54-
height: document.body.scrollHeight,
55-
});
56-
});
57-
5851
root.appendChild(
5952
Object.assign(document.createElement("button"), {
6053
textContent: "Get Weather (Tool)",

‎package.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@
2323
"dist"
2424
],
2525
"scripts": {
26-
"start": "cd examples/simple-host && npm i && npm start",
26+
"start:example-host": "cd examples/simple-host && npm --registry=https://registry.npmjs.org/ i && npm start",
27+
"start:example-mcp-server": "cd examples//simple-server && npm --registry=https://registry.npmjs.org/ install && npm start",
28+
"start": "NODE_ENV=development npm run build && concurrently 'npm run start:example-host' 'npm run start:example-mcp-server'",
2729
"build": "bun build.bun.ts",
2830
"prepare": "npm run build",
2931
"prettier:base-cmd": "prettier -u --ignore-path ./.gitignore --ignore-path ./.prettierignore",
@@ -36,15 +38,16 @@
3638
"@types/react-dom": "^19.2.2",
3739
"concurrently": "^9.2.1",
3840
"cors": "^2.8.5",
41+
"esbuild": "^0.25.12",
3942
"express": "^5.1.0",
40-
"prettier": "^3.6.2"
43+
"prettier": "^3.6.2",
44+
"typescript": "^5.9.3"
4145
},
4246
"dependencies": {
4347
"@modelcontextprotocol/sdk": "^1.22.0",
4448
"bun": "^1.3.2",
4549
"react": "^19.2.0",
4650
"react-dom": "^19.2.0",
47-
"typescript": "5.7.2",
4851
"zod": "^3.25"
4952
}
5053
}

‎specification/draft/apps.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -316,7 +316,7 @@ function sendRequest(method: string, params: any) {
316316
if (event.data?.id === id) {
317317
window.removeEventListener('message', listener);
318318
if (event.data?.result) {
319-
resolve(true);
319+
resolve(event.data?.result);
320320
} else if (event.data?.error) {
321321
reject(new Error(event.data.error));
322322
}

‎src/app-bridge.ts‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -185,13 +185,6 @@ export class AppBridge extends Protocol<Request, Notification, Result> {
185185
};
186186
}
187187

188-
sendSizeChange(params: McpUiSizeChangeNotification["params"]) {
189-
return this.notification(<McpUiSizeChangeNotification>{
190-
method: "ui/notifications/size-change",
191-
params,
192-
});
193-
}
194-
195188
sendToolInput(params: McpUiToolInputNotification["params"]) {
196189
return this.notification(<McpUiToolInputNotification>{
197190
method: "ui/notifications/tool-input",

‎src/app.ts‎

Lines changed: 13 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ import { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";
4141
export { PostMessageTransport } from "./message-transport.js";
4242
export * from "./types";
4343

44+
export const RESOURCE_URI_META_KEY = "ui/resourceUri";
45+
4446
type AppOptions = ProtocolOptions & {
4547
autoResize?: boolean;
4648
};
@@ -166,30 +168,20 @@ export class App extends Protocol<Request, Notification, Result> {
166168
}
167169

168170
setupSizeChangeNotifications() {
171+
let scheduled = false;
169172
const sendBodySizeChange = () => {
170-
let rafId: number | null = null;
171-
172-
// Debounce using requestAnimationFrame to avoid duplicate messages
173-
// when both documentElement and body fire resize events
174-
if (rafId !== null) {
175-
cancelAnimationFrame(rafId);
173+
if (scheduled) {
174+
return;
176175
}
177-
rafId = requestAnimationFrame(() => {
178-
const { body, documentElement: html } = document;
179-
180-
const bodyStyle = getComputedStyle(body);
181-
const htmlStyle = getComputedStyle(html);
182-
183-
const width = body.scrollWidth;
184-
const height =
185-
body.scrollHeight +
186-
(parseFloat(bodyStyle.borderTop) || 0) +
187-
(parseFloat(bodyStyle.borderBottom) || 0) +
188-
(parseFloat(htmlStyle.borderTop) || 0) +
189-
(parseFloat(htmlStyle.borderBottom) || 0);
190-
176+
scheduled = true;
177+
requestAnimationFrame(() => {
178+
scheduled = false;
179+
const rect = (
180+
document.body.parentElement ?? document.body
181+
).getBoundingClientRect();
182+
const width = Math.ceil(rect.width);
183+
const height = Math.ceil(rect.height);
191184
this.sendSizeChange({ width, height });
192-
rafId = null;
193185
});
194186
};
195187

0 commit comments

Comments
 (0)