React MCP App 自动高度调整useAutoResize Hook 完整指南【免费下载链接】ext-appsOfficial repo for spec SDK of MCP Apps protocol - standard for UIs embedded AI chatbots, served by MCP servers项目地址: https://gitcode.com/GitHub_Trending/ex/ext-appsReact MCP App 的自动高度调整是 MCP Apps 协议中最贴心的设计之一。本文带你深入解析useAutoResizeHook 的工作原理为什么useApp默认就够了、ResizeObserver如何监听页面尺寸、以及何时才需要手动调用它。读完这篇指南你将彻底搞懂嵌入 AI 聊天框的界面如何自动变高。为什么 MCP App 需要自动高度调整MCP App 是运行在宿主Host应用中的内嵌界面通常被放在一个 iframe 容器里。当你构建了一个数据面板、图表或表单类应用时内容的高度往往是动态的——比如展开更多详情、加载更多内容时界面会变得更长。如果容器高度固定用户就会看到难看的内部滚动条。理想的效果是内容变高容器跟着变高。MCP Apps 协议通过一条ui/notifications/size-changed通知实现了这一点View你的 App把最新宽高上报给 HostHost 收到后调整 iframe 尺寸。下面这张 Quickstart 示例中嵌入在宿主里的 App 界面就是自动高度调整生效后的效果——容器恰好包裹住 Tool Input 与结果区域没有多余留白useAutoResize 的工作原理Hook 的实现非常简洁核心源码在 useAutoResize.tsexport function useAutoResize(app, elementRef?) { useEffect(() { if (!app) return; return app.setupSizeChangedNotifications(); }, [app, elementRef]); }它只做一件事调用App实例的setupSizeChangedNotifications()方法。真正的重活在 app.ts 中完成机制可以概括为 4 步监听尺寸变化创建一个ResizeObserver同时观察html和body两个元素确保捕获所有尺寸变化防抖合并用requestAnimationFrame把高频的 resize 事件合并成一帧一次避免疯狂发通知精确测量临时把html高度设为max-content来测出真实内容高度宽度则取window.innerWidth源码注释解释了为什么不能对宽度也用fit-content——那会破坏响应式布局的横向滚动位置按需上报只有宽高真正变化时才调用sendSizeChanged({ width, height })发送ui/notifications/size-changed防止样式变化引发通知→布局→再通知的反馈循环。Host 侧收到通知后会在 app-bridge.ts 定义的sizechange事件回调里更新 iframe 尺寸闭环完成。99% 的情况根本不用管它这是本文最重要的结论useApp默认就开启了自动高度调整见 useApp.tsx 中的autoResize true默认值。也就是说用useApp写 App → 自动高度调整开箱即用什么都不用做手动new App(...)时不传配置 → 同样默认开启。useAutoResize官方文档明确标注了它的定位这是一个高级场景才需要的 Hook见 useAutoResize.ts 的注释。什么时候才需要手动调用 useAutoResize只有一种情况你为了自定义配置手动创建App并在构造时关闭了自动调整但之后又想要回来。官方示例在 useAutoResize.examples.tsx 中演示了这个模式const myApp new App( { name: MyApp, version: 1.0.0 }, {}, { autoResize: false }, // 先关掉 ); // ... connect 之后 ... useAutoResize(app); // 再手动加上两个实用细节记得清理Hook 在组件卸载时会自动断开ResizeObserver无需手动清理不要传 ref第二个参数elementRef实际上未被使用Hook 永远观察document.body传 ref 只会触发不必要的副作用重跑——文档建议直接省略。手动上报尺寸sendSizeChanged 逃生舱如果自动监听不满足需求例如你想在特定业务时机精确上报可以直接调用底层方法见 app.tsapp.sendSizeChanged({ width: 400, height: 600 });这是useAutoResize的手动挡版本适合配合业务逻辑在精确时刻控制容器尺寸。实测效果内容变化时界面跟着变看这张来自 Scenario Modeler 示例的截图——拖动参数滑块、切换Compare to...对比项时MRR 预测曲线和底部指标卡会实时增减整个 MCP App 容器的高度也随之平滑变化宿主侧的布局同步重排常见问题速查表问题答案用useApp后还要调useAutoResize吗不用默认已开启想让自动调整延迟开启手动创建App并设autoResize: false再用useAutoResize(app)补上想让 App 高度固定不变useApp({ ..., autoResize: false })或手动创建时关闭如何精确控制尺寸直接调用app.sendSizeChanged({ width, height })总结useAutoResize本质上是一层薄封装底层靠ResizeObserverrequestAnimationFrame防抖 变化检测三重机制保证高效与稳定绝大多数 React MCP App 通过useApp即可免费获得自动高度调整无需任何额外代码只有在手动创建 App 且关闭了默认行为的高级场景下才需要显式调用这个 Hook。想了解更多协议细节与 React 集成方式可以查阅项目内的官方文档 docs/quickstart.md 和 docs/overview.md以及 React 集成的完整示例 src/react/index.tsx。【免费下载链接】ext-appsOfficial repo for spec SDK of MCP Apps protocol - standard for UIs embedded AI chatbots, served by MCP servers项目地址: https://gitcode.com/GitHub_Trending/ex/ext-apps创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考