Ready
👨💼 When iframes load in AI chat, the host application doesn't know when they're ready to receive data or handle interactions. Without this handshake, users see broken interfaces or endless loading states.
// Notify the host that the iframe is ready
useEffect(() => {
window.parent.postMessage({ type: 'ui-lifecycle-iframe-ready' }, '*')
}, [])
The
ui-lifecycle-iframe-ready message tells the host that the iframe has loaded and is ready for communication. This enables the host to send initial data and makes interactions work properly.Always send the ready message as soon as the component mounts. Delaying this
message means the host application will wait indefinitely.
📜 For more details on the MCP UI lifecycle protocol, see the MCP UI
Embeddable UI documentation.
Now, implement the lifecycle communication to make your iframe ready for interaction!