make things better

kentcdodds · kentcdodds · commit 21391a74c4d7 · 2025-09-23T18:15:06.000-06:00
diff --git a/exercises/03.complex/04.problem.dynamic-sizing/README.mdx b/exercises/03.complex/04.problem.dynamic-sizing/README.mdx
@@ -3,8 +3,8 @@
 👨‍💼 Users expect iframes to fit their content perfectly, not waste space or require scrolling. The journal viewer should automatically adjust to show exactly what's needed.
 
 ```tsx
-const height = document.documentElement.scrollHeight
-const width = document.documentElement.scrollWidth
+const height = document.documentElement.clientHeight
+const width = document.documentElement.clientWidth
 
 window.parent.postMessage(
 	{
@@ -15,7 +15,7 @@ window.parent.postMessage(
 )
 ```
 
-Use `scrollHeight` and `scrollWidth` to measure the full content dimensions, then send a `ui-size-change` message to the parent window so it can resize the iframe accordingly.
+Use `clientHeight` and `clientWidth` to measure the full content dimensions, then send a `ui-size-change` message to the parent window so it can resize the iframe accordingly.
 
 The static `preferred-frame-size` from the previous exercise works for fixed layouts, but journal entries have varying content lengths. A short entry wastes space, while a long entry gets cut off.
 
diff --git a/exercises/03.complex/04.problem.dynamic-sizing/app/routes/ui/journal-viewer.tsx b/exercises/03.complex/04.problem.dynamic-sizing/app/routes/ui/journal-viewer.tsx
@@ -34,8 +34,8 @@ export default function JournalViewer({ loaderData }: Route.ComponentProps) {
 		// 💰 const root = rootRef.current
 		// 🐨 if the root is null, return
 		// 🐨 get the height and width of the root
-		// 💰 const height = root.scrollHeight
-		// 💰 const width = root.scrollWidth
+		// 💰 const height = root.clientHeight
+		// 💰 const width = root.clientWidth
 		// 🐨 call window.parent.postMessage with the type 'ui-size-change' and the payload { height, width }
 		// 🐨 set the targetOrigin to '*'
 	}, [])
diff --git a/exercises/03.complex/04.solution.dynamic-sizing/app/routes/ui/journal-viewer.tsx b/exercises/03.complex/04.solution.dynamic-sizing/app/routes/ui/journal-viewer.tsx
@@ -25,8 +25,8 @@ export default function JournalViewer({ loaderData }: Route.ComponentProps) {
 		const root = rootRef.current
 		if (!root) return
 
-		const height = root.scrollHeight
-		const width = root.scrollWidth
+		const height = root.clientHeight
+		const width = root.clientWidth
 
 		window.parent.postMessage(
 			{ type: 'ui-size-change', payload: { height, width } },
diff --git a/exercises/04.interactive/01.problem.links/app/routes/ui/journal-viewer.tsx b/exercises/04.interactive/01.problem.links/app/routes/ui/journal-viewer.tsx
@@ -30,7 +30,10 @@ export default function JournalViewer({ loaderData }: Route.ComponentProps) {
 	}
 
 	return (
-		<div className="bg-background max-h-[800px] overflow-y-auto p-4">
+		<div
+			ref={rootRef}
+			className="bg-background max-h-[800px] overflow-y-auto p-4"
+		>
 			<div className="mx-auto max-w-4xl">
 				<div className="bg-card mb-6 rounded-xl border p-6 shadow-lg">
 					<h1 className="text-foreground mb-2 text-3xl font-bold">
diff --git a/exercises/04.interactive/01.problem.links/app/utils/mcp.ts b/exercises/04.interactive/01.problem.links/app/utils/mcp.ts
@@ -5,8 +5,8 @@ export function useMcpUiInit(rootRef: React.RefObject<HTMLDivElement | null>) {
 		window.parent.postMessage({ type: 'ui-lifecycle-iframe-ready' }, '*')
 		if (!rootRef.current) return
 
-		const height = rootRef.current.scrollHeight
-		const width = rootRef.current.scrollWidth
+		const height = rootRef.current.clientHeight
+		const width = rootRef.current.clientWidth
 
 		window.parent.postMessage(
 			{ type: 'ui-size-change', payload: { height, width } },
diff --git a/exercises/04.interactive/01.solution.links/app/utils/mcp.ts b/exercises/04.interactive/01.solution.links/app/utils/mcp.ts
@@ -5,8 +5,8 @@ export function useMcpUiInit(rootRef: React.RefObject<HTMLDivElement | null>) {
 		window.parent.postMessage({ type: 'ui-lifecycle-iframe-ready' }, '*')
 		if (!rootRef.current) return
 
-		const height = rootRef.current.scrollHeight
-		const width = rootRef.current.scrollWidth
+		const height = rootRef.current.clientHeight
+		const width = rootRef.current.clientWidth
 
 		window.parent.postMessage(
 			{ type: 'ui-size-change', payload: { height, width } },
diff --git a/exercises/04.interactive/02.problem.tools/app/utils/mcp.ts b/exercises/04.interactive/02.problem.tools/app/utils/mcp.ts
@@ -6,8 +6,8 @@ export function useMcpUiInit(rootRef: React.RefObject<HTMLDivElement | null>) {
 		window.parent.postMessage({ type: 'ui-lifecycle-iframe-ready' }, '*')
 		if (!rootRef.current) return
 
-		const height = rootRef.current.scrollHeight
-		const width = rootRef.current.scrollWidth
+		const height = rootRef.current.clientHeight
+		const width = rootRef.current.clientWidth
 
 		window.parent.postMessage(
 			{ type: 'ui-size-change', payload: { height, width } },
diff --git a/exercises/04.interactive/02.problem.tools/worker/mcp/tools.ts b/exercises/04.interactive/02.problem.tools/worker/mcp/tools.ts
@@ -460,7 +460,7 @@ export async function initializeTools(agent: EpicMeMCP) {
 		},
 		async ({ id }) => {
 			const iframeUrl = new URL(
-				'/ui/entry-viewer/${id}',
+				`/ui/entry-viewer/${id}`,
 				agent.requireBaseUrl(),
 			)
 
diff --git a/exercises/04.interactive/02.solution.tools/app/utils/mcp.ts b/exercises/04.interactive/02.solution.tools/app/utils/mcp.ts
@@ -6,8 +6,8 @@ export function useMcpUiInit(rootRef: React.RefObject<HTMLDivElement | null>) {
 		window.parent.postMessage({ type: 'ui-lifecycle-iframe-ready' }, '*')
 		if (!rootRef.current) return
 
-		const height = rootRef.current.scrollHeight
-		const width = rootRef.current.scrollWidth
+		const height = rootRef.current.clientHeight
+		const width = rootRef.current.clientWidth
 
 		window.parent.postMessage(
 			{ type: 'ui-size-change', payload: { height, width } },
diff --git a/exercises/04.interactive/02.solution.tools/worker/mcp/tools.ts b/exercises/04.interactive/02.solution.tools/worker/mcp/tools.ts
@@ -460,7 +460,7 @@ export async function initializeTools(agent: EpicMeMCP) {
 		},
 		async ({ id }) => {
 			const iframeUrl = new URL(
-				'/ui/entry-viewer/${id}',
+				`/ui/entry-viewer/${id}`,
 				agent.requireBaseUrl(),
 			)
 
diff --git a/exercises/04.interactive/03.problem.prompts/app/utils/mcp.ts b/exercises/04.interactive/03.problem.prompts/app/utils/mcp.ts
@@ -6,8 +6,8 @@ export function useMcpUiInit(rootRef: React.RefObject<HTMLDivElement | null>) {
 		window.parent.postMessage({ type: 'ui-lifecycle-iframe-ready' }, '*')
 		if (!rootRef.current) return
 
-		const height = rootRef.current.scrollHeight
-		const width = rootRef.current.scrollWidth
+		const height = rootRef.current.clientHeight
+		const width = rootRef.current.clientWidth
 
 		window.parent.postMessage(
 			{ type: 'ui-size-change', payload: { height, width } },
diff --git a/exercises/04.interactive/03.problem.prompts/worker/mcp/tools.ts b/exercises/04.interactive/03.problem.prompts/worker/mcp/tools.ts
@@ -460,7 +460,7 @@ export async function initializeTools(agent: EpicMeMCP) {
 		},
 		async ({ id }) => {
 			const iframeUrl = new URL(
-				'/ui/entry-viewer/${id}',
+				`/ui/entry-viewer/${id}`,
 				agent.requireBaseUrl(),
 			)
 
diff --git a/exercises/04.interactive/03.solution.prompts/app/utils/mcp.ts b/exercises/04.interactive/03.solution.prompts/app/utils/mcp.ts
@@ -6,8 +6,8 @@ export function useMcpUiInit(rootRef: React.RefObject<HTMLDivElement | null>) {
 		window.parent.postMessage({ type: 'ui-lifecycle-iframe-ready' }, '*')
 		if (!rootRef.current) return
 
-		const height = rootRef.current.scrollHeight
-		const width = rootRef.current.scrollWidth
+		const height = rootRef.current.clientHeight
+		const width = rootRef.current.clientWidth
 
 		window.parent.postMessage(
 			{ type: 'ui-size-change', payload: { height, width } },
diff --git a/exercises/04.interactive/03.solution.prompts/worker/mcp/tools.ts b/exercises/04.interactive/03.solution.prompts/worker/mcp/tools.ts
@@ -460,7 +460,7 @@ export async function initializeTools(agent: EpicMeMCP) {
 		},
 		async ({ id }) => {
 			const iframeUrl = new URL(
-				'/ui/entry-viewer/${id}',
+				`/ui/entry-viewer/${id}`,
 				agent.requireBaseUrl(),
 			)
 
diff --git a/exercises/05.advanced/01.problem.tool-results/app/utils/mcp.ts b/exercises/05.advanced/01.problem.tool-results/app/utils/mcp.ts
@@ -6,8 +6,8 @@ export function useMcpUiInit(rootRef: React.RefObject<HTMLDivElement | null>) {
 		window.parent.postMessage({ type: 'ui-lifecycle-iframe-ready' }, '*')
 		if (!rootRef.current) return
 
-		const height = rootRef.current.scrollHeight
-		const width = rootRef.current.scrollWidth
+		const height = rootRef.current.clientHeight
+		const width = rootRef.current.clientWidth
 
 		window.parent.postMessage(
 			{ type: 'ui-size-change', payload: { height, width } },
diff --git a/exercises/05.advanced/01.problem.tool-results/worker/mcp/tools.ts b/exercises/05.advanced/01.problem.tool-results/worker/mcp/tools.ts
@@ -460,7 +460,7 @@ export async function initializeTools(agent: EpicMeMCP) {
 		},
 		async ({ id }) => {
 			const iframeUrl = new URL(
-				'/ui/entry-viewer/${id}',
+				`/ui/entry-viewer/${id}`,
 				agent.requireBaseUrl(),
 			)
 
diff --git a/exercises/05.advanced/01.solution.tool-results/app/utils/mcp.ts b/exercises/05.advanced/01.solution.tool-results/app/utils/mcp.ts
@@ -6,8 +6,8 @@ export function useMcpUiInit(rootRef: React.RefObject<HTMLDivElement | null>) {
 		window.parent.postMessage({ type: 'ui-lifecycle-iframe-ready' }, '*')
 		if (!rootRef.current) return
 
-		const height = rootRef.current.scrollHeight
-		const width = rootRef.current.scrollWidth
+		const height = rootRef.current.clientHeight
+		const width = rootRef.current.clientWidth
 
 		window.parent.postMessage(
 			{ type: 'ui-size-change', payload: { height, width } },
diff --git a/exercises/05.advanced/01.solution.tool-results/worker/mcp/tools.ts b/exercises/05.advanced/01.solution.tool-results/worker/mcp/tools.ts
@@ -460,7 +460,7 @@ export async function initializeTools(agent: EpicMeMCP) {
 		},
 		async ({ id }) => {
 			const iframeUrl = new URL(
-				'/ui/entry-viewer/${id}',
+				`/ui/entry-viewer/${id}`,
 				agent.requireBaseUrl(),
 			)
 
diff --git a/exercises/05.advanced/02.problem.render-data/app/utils/mcp.ts b/exercises/05.advanced/02.problem.render-data/app/utils/mcp.ts
@@ -6,8 +6,8 @@ export function useMcpUiInit(rootRef: React.RefObject<HTMLDivElement | null>) {
 		window.parent.postMessage({ type: 'ui-lifecycle-iframe-ready' }, '*')
 		if (!rootRef.current) return
 
-		const height = rootRef.current.scrollHeight
-		const width = rootRef.current.scrollWidth
+		const height = rootRef.current.clientHeight
+		const width = rootRef.current.clientWidth
 
 		window.parent.postMessage(
 			{ type: 'ui-size-change', payload: { height, width } },
@@ -105,28 +105,3 @@ export { sendMcpMessage }
 // 🐨 if the event.data.payload.renderData is present, return resolve(renderData)
 // 💯 add schema as an optional parameter and parse the renderData if it is present
 // 🦺 if you'd like to make it more typesafe, make waitForRenderData a generic (withForRenderData<RenderData>), pass the generic type to the schema (z.ZodSchema<RenderData>) and set it as the return type (Promise<RenderData>)
-
-export function waitForRenderData<RenderData>(
-	schema: z.ZodSchema<RenderData>,
-): Promise<RenderData> {
-	return new Promise((resolve, reject) => {
-		window.parent.postMessage({ type: 'ui-lifecycle-iframe-ready' }, '*')
-
-		function handleMessage(event: MessageEvent) {
-			if (event.data?.type !== 'ui-lifecycle-iframe-render-data') return
-			window.removeEventListener('message', handleMessage)
-
-			const { renderData, error } = event.data.payload
-
-			if (error) return reject(error)
-			if (!schema) return resolve(renderData)
-
-			const parseResult = schema.safeParse(renderData)
-			if (!parseResult.success) return reject(parseResult.error)
-
-			return resolve(parseResult.data)
-		}
-
-		window.addEventListener('message', handleMessage)
-	})
-}
diff --git a/exercises/05.advanced/02.problem.render-data/worker/mcp/tools.ts b/exercises/05.advanced/02.problem.render-data/worker/mcp/tools.ts
@@ -461,7 +461,7 @@ export async function initializeTools(agent: EpicMeMCP) {
 		async ({ id }) => {
 			// 🐨 get rid of the ${id} here:
 			const iframeUrl = new URL(
-				'/ui/entry-viewer/${id}',
+				`/ui/entry-viewer/${id}`,
 				agent.requireBaseUrl(),
 			)
 			// 🐨 get the entry from the database and make sure it exists (use invariant)
diff --git a/exercises/05.advanced/02.solution.render-data/app/utils/mcp.ts b/exercises/05.advanced/02.solution.render-data/app/utils/mcp.ts
@@ -6,8 +6,8 @@ export function useMcpUiInit(rootRef: React.RefObject<HTMLDivElement | null>) {
 		window.parent.postMessage({ type: 'ui-lifecycle-iframe-ready' }, '*')
 		if (!rootRef.current) return
 
-		const height = rootRef.current.scrollHeight
-		const width = rootRef.current.scrollWidth
+		const height = rootRef.current.clientHeight
+		const width = rootRef.current.clientWidth
 
 		window.parent.postMessage(
 			{ type: 'ui-size-change', payload: { height, width } },
diff --git a/exercises/05.advanced/README.mdx b/exercises/05.advanced/README.mdx
@@ -2,6 +2,34 @@
 
 We're going to cover two advanced features of MCP UI that make it more powerful.
 
+```mermaid
+sequenceDiagram
+    participant User
+    participant Iframe
+    participant App
+    participant MCP as MCP Server
+
+    Note over User,MCP: Tool Results Flow
+    User->>Iframe: Interact with UI (e.g., delete entry)
+    Iframe->>App: Send tool message via postMessage
+    App->>MCP: Call tool with structured output schema
+    MCP->>MCP: Process request
+    MCP->>App: Return structured result (success/failure)
+    App->>Iframe: Send result via postMessage
+    Iframe->>Iframe: Validate with Zod schema
+    Iframe->>User: Update UI based on result
+
+    Note over User,MCP: Render Data Flow
+    User->>App: Request UI resource
+    App->>MCP: Get UI resource with initial data
+    MCP->>App: Return resource with uiMetadata containing render data
+    App->>Iframe: Create iframe with resource
+    Iframe->>App: Emit ui-lifecycle-iframe-ready event
+    App->>Iframe: Send ui-lifecycle-iframe-render-data event
+    Iframe->>Iframe: Process initial data
+    Iframe->>User: Display content with pre-loaded data
+```
+
 ## Tool Results
 
 When we call tools, we get the result of the tool call and because we have structured content, we can use it programmatically. This enables rich integrations where the client can understand and act on tool results.

Original file line number	Diff line number	Diff line change
`@@ -3,8 +3,8 @@`
`3`	`3`	`👨‍💼 Users expect iframes to fit their content perfectly, not waste space or require scrolling. The journal viewer should automatically adjust to show exactly what's needed.`
`4`	`4`
`5`	`5`	```tsx
`6`		`-const height = document.documentElement.scrollHeight`
`7`		`-const width = document.documentElement.scrollWidth`
	`6`	`+const height = document.documentElement.clientHeight`
	`7`	`+const width = document.documentElement.clientWidth`
`8`	`8`
`9`	`9`	`window.parent.postMessage(`
`10`	`10`	`{`
`@@ -15,7 +15,7 @@ window.parent.postMessage(`
`15`	`15`	`)`
`16`	`16`	```
`17`	`17`
`18`		-Use `scrollHeight` and `scrollWidth` to measure the full content dimensions, then send a `ui-size-change` message to the parent window so it can resize the iframe accordingly.
	`18`	+Use `clientHeight` and `clientWidth` to measure the full content dimensions, then send a `ui-size-change` message to the parent window so it can resize the iframe accordingly.
`19`	`19`
`20`	`20`	The static `preferred-frame-size` from the previous exercise works for fixed layouts, but journal entries have varying content lengths. A short entry wastes space, while a long entry gets cut off.
`21`	`21`
Original file line number	Diff line number	Diff line change
`@@ -460,7 +460,7 @@ export async function initializeTools(agent: EpicMeMCP) {`
`460`	`460`	`},`
`461`	`461`	`async ({ id }) => {`
`462`	`462`	`const iframeUrl = new URL(`
`463`		`- '/ui/entry-viewer/${id}',`
	`463`	+ `/ui/entry-viewer/${id}`,
`464`	`464`	`agent.requireBaseUrl(),`
`465`	`465`	`)`
`466`	`466`