useRequestSize

The useRequestSize hook returns a function that asks the host to update the iframe height and/or width. Use it to deliberately pin a size.

import { useEffect, useState } from "react";
import { useRequestSize } from "@usefractal/frac/web";

function Expandable() {
  const requestSize = useRequestSize();
  const [expanded, setExpanded] = useState(false);

  useEffect(() => {
    requestSize({ height: expanded ? 500 : undefined });
  }, [expanded, requestSize]);

  return (
    <div>
      <button onClick={() => setExpanded((v) => !v)}>
        {expanded ? "Collapse" : "Expand"}
      </button>
      {expanded && <p>Lots of additional content...</p>}
    </div>
  );
}

Returns

requestSize: (size: { width?: number; height?: number }) => Promise<void>

An async function that asks the host to size your view’s container to the given dimensions. Both width and height are optional; pass only what you want to update.

Runtime behavior

Runtime	Behavior
Apps SDK (ChatGPT)	Not supported
MCP Apps	Sends `ui/notifications/size-changed` with both `width` and `height` to the host.