Description
Claude.ai does not honor ui/notifications/size-changed postMessage notifications from MCP Apps. Instead, it loads MCP App HTML via a same-origin blob: URL and reads iframe.contentDocument.documentElement height directly from the DOM.
This violates the MCP Apps specification (2026-01-26) which states:
"Hosts MUST listen for ui/notifications/size-changed notifications from the View and update the iframe dimensions accordingly"
Steps to Reproduce
- Create an MCP App that renders content in an iframe
- After rendering, send
ui/notifications/size-changed via postMessage with a height value (e.g. {height: 900, width: 600})
- Observe that the iframe remains at a tiny default height
Evidence
Through extensive debugging of an MCP server with render tools, I confirmed:
- Sending
ui/notifications/size-changed via window.parent.postMessage(...) has no effect on iframe height in Claude.ai
- Sending the older
ui/resize method also has no effect
- Hardcoding
document.documentElement.style.height = "900px" in the HTML immediately makes the iframe grow to 900px
- This proves Claude.ai is reading the document element's height directly from the iframe DOM (possible because it uses a same-origin
blob: URL), not listening to postMessage notifications
Additional findings:
- Setting
document.documentElement.style.height before content renders causes Claude.ai to lock the iframe at that (tiny) height — it appears to snapshot early
- Using
min-height: 100vh on elements inside the iframe creates a circular dependency (iframe viewport is small → 100vh resolves to small → content reports small → iframe stays small)
- A
ResizeObserver that fires before content renders will cause Claude.ai to lock the iframe at the pre-render height
Workaround
After the MCP App renders content, explicitly measure the content and set it on <html>:
// After rendering content:
var app = document.getElementById("app");
var h = app.scrollHeight;
document.documentElement.style.height = h + "px";Also use a fixed min-height (e.g. 400px) instead of 100vh to avoid the circular sizing dependency in iframes.
We still send ui/notifications/size-changed via postMessage as a fallback for spec-compliant hosts.
Expected Behavior
Per the spec, Claude.ai should listen for ui/notifications/size-changed postMessage notifications and resize the iframe accordingly using iframe.style.height = ${height}px.
Related Issues
Environment
- Claude.ai (web)
- Tested February 2026
Description
Claude.ai does not honor
ui/notifications/size-changedpostMessage notifications from MCP Apps. Instead, it loads MCP App HTML via a same-originblob:URL and readsiframe.contentDocument.documentElementheight directly from the DOM.This violates the MCP Apps specification (2026-01-26) which states:
Steps to Reproduce
ui/notifications/size-changedvia postMessage with a height value (e.g.{height: 900, width: 600})Evidence
Through extensive debugging of an MCP server with render tools, I confirmed:
ui/notifications/size-changedviawindow.parent.postMessage(...)has no effect on iframe height in Claude.aiui/resizemethod also has no effectdocument.documentElement.style.height = "900px"in the HTML immediately makes the iframe grow to 900pxblob:URL), not listening to postMessage notificationsAdditional findings:
document.documentElement.style.heightbefore content renders causes Claude.ai to lock the iframe at that (tiny) height — it appears to snapshot earlymin-height: 100vhon elements inside the iframe creates a circular dependency (iframe viewport is small → 100vh resolves to small → content reports small → iframe stays small)ResizeObserverthat fires before content renders will cause Claude.ai to lock the iframe at the pre-render heightWorkaround
After the MCP App renders content, explicitly measure the content and set it on
<html>:Also use a fixed
min-height(e.g.400px) instead of100vhto avoid the circular sizing dependency in iframes.We still send
ui/notifications/size-changedvia postMessage as a fallback for spec-compliant hosts.Expected Behavior
Per the spec, Claude.ai should listen for
ui/notifications/size-changedpostMessage notifications and resize the iframe accordingly usingiframe.style.height = ${height}px.Related Issues
Environment