Render Data

👨‍💼 We've got a new requirement coming up. We're going to be adding authorization to the MCP server, but our UI has no way to identify the user securely.

The problem is that we need a way to pass protected data directly from the MCP server to the iframe component, eliminating the need for additional API calls while maintaining security boundaries.

Instead, we can use MCP UI's render data to pass initial data directly to iframe components. This allows the server to provide all necessary context when creating UI resources.

// Server provides initial data with the UI resource
return {
	content: [
		{
			type: 'resource',
			resource: {
				uri: iframeUrl.toString(),
				mimeType: 'text/html',
				uiMetadata: {
					'initial-render-data': { bookmarks },
				},
			},
		},
	],
}

// Client receives data as soon as it emits the `ui-lifecycle-iframe-ready` event
window.addEventListener('message', function handleMessage(event: MessageEvent) {
	if (event.data?.type !== 'ui-lifecycle-iframe-render-data') return
	if (event.data.error) {
		// event.data.error... handle it
	} else {
		const { bookmarks } = event.data.payload
		// do stuff with this
	}
})

You need to implement render data for the entry viewer. The server should pass the entry data via uiMetadata, and the client should use waitForRenderData to receive it.

Your implementation of waitForRenderData should be a little more complete. If you need help, your AI assistant can help you with that! Just ask it!

📜 Passing Render Data to the iframe

05. Advanced/02. Render Data (💪 problem)

Render Data