updates

Author: kentcdodds

exercises/01.simple/01.problem.raw-html/package.json

@@ -16,7 +16,7 @@
     "@epic-web/invariant": "^1.0.0",
     "@mcp-ui/server": "^5.10.0",
     "@modelcontextprotocol/sdk": "^1.17.5",
-    "agents": "^0.0.113",
+    "agents": "https://pkg.pr.new/cloudflare/agents@426",
     "zod": "^3.25.67"
   },
   "devDependencies": {

exercises/01.simple/01.solution.raw-html/package.json

@@ -16,7 +16,7 @@
     "@epic-web/invariant": "^1.0.0",
     "@mcp-ui/server": "^5.10.0",
     "@modelcontextprotocol/sdk": "^1.17.5",
-    "agents": "^0.0.113",
+    "agents": "https://pkg.pr.new/cloudflare/agents@426",
     "zod": "^3.25.67"
   },
   "devDependencies": {

exercises/02.consistent/01.problem.remote-dom/README.mdx

@@ -18,7 +18,8 @@ const resource = createUIResource({
 	content: {
 		type: 'remoteDom',
 		framework: 'react',
-		script: `
+		// some editors will syntax highlight a string followed by the /* js */ comment
+		script: /* js */ `
 			const stack = document.createElement('ui-stack');
 			stack.setAttribute('direction', 'vertical');
 			stack.setAttribute('spacing', '20');
@@ -50,6 +51,27 @@ const resource = createUIResource({
 	host application.
 </callout-info>
 
+You need to implement the `getTagRemoteDomUIScript` function to create a Remote DOM version of the tag viewer. Here's what you need to know:
+
+- `ui-stack` - Container with layout properties (direction, spacing, align)
+- `ui-text` - Text content with automatic styling
+
+```js
+const stack = document.createElement('ui-stack')
+stack.setAttribute('direction', 'vertical')
+stack.setAttribute('spacing', '20')
+stack.setAttribute('align', 'center')
+
+const title = document.createElement('ui-text')
+title.setAttribute('content', 'Your content here')
+stack.appendChild(title)
+
+// "root" is globally available in your script
+root.appendChild(stack)
+```
+
+There's more available from remote-dom, but we'll keep it simple for now.
+
 📜 [MCP UI
 Server
 Documentation](https://mcpui.dev/guide/server/typescript/usage-examples#basic-usage).

exercises/02.consistent/01.problem.remote-dom/package.json

@@ -16,7 +16,7 @@
     "@epic-web/invariant": "^1.0.0",
     "@mcp-ui/server": "^5.10.0",
     "@modelcontextprotocol/sdk": "^1.17.5",
-    "agents": "^0.0.113",
+    "agents": "https://pkg.pr.new/cloudflare/agents@426",
     "zod": "^3.25.67"
   },
   "devDependencies": {

exercises/02.consistent/01.problem.remote-dom/worker/mcp/tools.ts

@@ -18,7 +18,10 @@ import { type CallToolResult } from '@modelcontextprotocol/sdk/types.js'
 import { z } from 'zod'
 import { type EpicMeMCP } from './index.ts'
 import { suggestTagsSampling } from './sampling.ts'
+// 💣 get rid of this:
 import { getTagViewUI } from './ui.ts'
+// 💰 bring this in instead:
+// import { getTagRemoteDomUIScript } from './ui.ts'
 
 export async function initializeTools(agent: EpicMeMCP) {
 	agent.server.registerTool(
@@ -242,8 +245,11 @@ export async function initializeTools(agent: EpicMeMCP) {
 					createUIResource({
 						uri: `ui://view-tag/${id}`,
 						content: {
+							// 🐨 instead of rawHtml, use remoteDom:
 							type: 'rawHtml',
+							// 🐨 instead of htmlString, use script and await getTagRemoteDomUIScript:
 							htmlString: await getTagViewUI(agent.db, id),
+							// 🐨 add framework: 'react'
 						},
 						encoding: 'text',
 					}),

exercises/02.consistent/01.problem.remote-dom/worker/mcp/ui.ts

@@ -1,5 +1,23 @@
 import { type DBClient } from '@epic-web/epicme-db-client'
 
+export async function getTagRemoteDomUIScript(db: DBClient, tagId: number) {
+	const tag = await db.getTag(tagId)
+	if (tag) {
+		return /* js */ `
+// 🐨 Create a ui-stack element with vertical direction, spacing 20, and center alignment
+// 🐨 Create a ui-text element for the tag name and append it to the stack
+// 🐨 Create a ui-text element for the tag description and append it to the stack
+// 🐨 Append the stack to the (globally available) "root" element
+		`.trim()
+	} else {
+		return /* js */ `
+// 🐨 Create a ui-stack element with vertical direction, spacing 20, and center alignment
+// 🐨 Create a ui-text element with content "Tag not found" and append it to the stack
+// 🐨 Append the stack to the (globally available) "root" element
+		`.trim()
+	}
+}
+
 export async function getTagViewUI(db: DBClient, tagId: number) {
 	const tag = await db.getTag(tagId)
 	if (tag) {

exercises/02.consistent/01.solution.remote-dom/package.json

@@ -16,7 +16,7 @@
     "@epic-web/invariant": "^1.0.0",
     "@mcp-ui/server": "^5.10.0",
     "@modelcontextprotocol/sdk": "^1.17.5",
-    "agents": "^0.0.113",
+    "agents": "https://pkg.pr.new/cloudflare/agents@426",
     "zod": "^3.25.67"
   },
   "devDependencies": {

exercises/02.consistent/01.solution.remote-dom/worker/mcp/ui.ts

@@ -17,35 +17,84 @@ const description = document.createElement('ui-text');
 description.setAttribute('content', ${JSON.stringify(tag.description)});
 stack.appendChild(description);
 
-const deleteButton = document.createElement('ui-button');
-deleteButton.setAttribute('content', 'Delete Tag');
-deleteButton.addEventListener('press', () => {
-	window.parent.postMessage(
-		{
-			type: 'tool',
-			payload: {
-				toolName: 'deleteTag',
-				params: { tagId: tag.id.toString() },
-			},
-		},
-		'*',
-	)
-});
-stack.appendChild(deleteButton);
-
 root.appendChild(stack);
 		`.trim()
 	} else {
 		return /* js */ `
-console.error('Tag not found');
 const stack = document.createElement('ui-stack');
 stack.setAttribute('direction', 'vertical');
 stack.setAttribute('spacing', '20');
 stack.setAttribute('align', 'center');
+
 const title = document.createElement('ui-text');
 title.setAttribute('content', 'Tag not found');
 stack.appendChild(title);
+
 root.appendChild(stack);
+		`.trim()
+	}
+}
+
+// we'll just keep this for reference for now...
+export async function getTagViewUI(db: DBClient, tagId: number) {
+	const tag = await db.getTag(tagId)
+	if (tag) {
+		return /* html */ `
+	<html>
+		<head>
+			<meta charset="UTF-8">
+			<meta name="viewport" content="width=device-width, initial-scale=1.0">
+			<title>Epic Me</title>
+			<style>
+				* { margin: 0; padding: 0; box-sizing: border-box; }
+				body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: oklch(20% 0.06 320); background-color: oklch(98% 0.02 320); }
+				.container { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; }
+				.title { font-size: 2rem; font-weight: 700; color: oklch(20% 0.06 320); margin-bottom: 2rem; text-align: center; }
+				.description { text-align: center; color: oklch(40% 0.07 320); }
+			</style>
+		</head>
+		<body>
+			<div class="container">
+				<h1 class="title">${tag.name}</h1>
+				<p class="description">${tag.description}</p>
+			</div>
+		</body>
+	</html>
 		`
 	}
+
+	return /* html */ `
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>Epic Me</title>
+		<style>
+			* { margin: 0; padding: 0; box-sizing: border-box; }
+			body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: oklch(20% 0.06 320); background-color: oklch(98% 0.02 320); }
+			.container { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; }
+			.title { font-size: 2rem; font-weight: 700; color: oklch(20% 0.06 320); margin-bottom: 2rem; text-align: center; }
+			.description { text-align: center; color: oklch(40% 0.07 320); }
+			.error-state { text-align: center; padding: 4rem 2rem; }
+			.error-state h1 { margin: 1rem 0 2rem; color: oklch(20% 0.06 320); }
+			.error-icon { color: oklch(60% 0.18 0); width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center; }
+			.error-icon svg { width: 100%; height: 100%; }
+		</style>
+	</head>
+	<body>
+		<div class="container">
+			<div class="error-state">
+				<span class="error-icon" data-icon="alert-circle">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						<circle cx="12" cy="12" r="10"/>
+						<line x1="12" y1="8" x2="12" y2="12"/>
+						<line x1="12" y1="16" x2="12.01" y2="16"/>
+					</svg>
+				</span>
+				<h1>Tag with id ${tagId} not found</h1>
+			</div>
+		</div>
+	</body>
+</html>
+		`
 }

exercises/03.complex/01.problem.iframe/package.json

@@ -19,7 +19,7 @@
     "@epic-web/invariant": "^1.0.0",
     "@mcp-ui/server": "^5.10.0",
     "@modelcontextprotocol/sdk": "^1.17.5",
-    "agents": "^0.0.113",
+    "agents": "https://pkg.pr.new/cloudflare/agents@426",
     "isbot": "^5.1.30",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",

exercises/03.complex/01.problem.iframe/worker/index.ts

@@ -11,9 +11,22 @@ export default {
 	fetch: async (request, env, ctx) => {
 		const url = new URL(request.url)
 		if (url.pathname === '/mcp') {
+			// 🐨 create a headers object based on the request
+			// - then add the x-origin header set to the url.origin
+			// - then create a new request with the headers
+			// 💰 here's how you do that:
+			// const headers = new Headers(request.headers)
+			// headers.set('x-origin', url.origin)
+			// const newRequest = new Request(request, { headers })
+
 			return EpicMeMCP.serve('/mcp', {
 				binding: 'EPIC_ME_MCP_OBJECT',
-			}).fetch(request, env, ctx)
+			}).fetch(
+				// 🐨 pass the newRequest instead of request
+				request,
+				env,
+				ctx,
+			)
 		}
 
 		return requestHandler(request, {