anthropics / anthropics/claude-ai-mcp

Claude.ai ignores ui/notifications/size-changed — reads iframe DOM height directly instead

未關閉
#69 1 則留言 1 個 reaction 已指派 0 人 在 GitHub 檢視
mcp-apps
主要語言
沒有語言資料
星號
471
分支
76
PR 合併指標
30 天內沒有已合併 PR

描述

## 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)](https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/2026-01-26/apps.mdx) which states:

> "Hosts MUST listen for `ui/notifications/size-changed` notifications from the View and update the iframe dimensions accordingly"

## Steps to Reproduce

1. Create an MCP App that renders content in an iframe
2. After rendering, send `ui/notifications/size-changed` via postMessage with a height value (e.g. `{height: 900, width: 600}`)
3. 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 ``:

```javascript
// 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

- #61 — Claude fails to invoke/render MCP App UI element
- modelcontextprotocol/ext-apps#143 — setupSizeChangedNotifications reports size before content is ready
- modelcontextprotocol/ext-apps#502 — autoResize: true default causes layout bugs

## Environment

- Claude.ai (web)
- Tested February 2026

貢獻指南

這個儲存庫沒有索引到貢獻指南

評估

這個 Issue 還沒有評估資料。

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。