update videos

kentcdodds · kentcdodds · commit cdab1cceff2a · 2025-12-05T16:30:31.000-07:00
diff --git a/exercises/01.simple/01.problem.raw-html/README.mdx b/exercises/01.simple/01.problem.raw-html/README.mdx
@@ -1,6 +1,6 @@
 # Raw HTML
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/raw-html~nf6c7" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/raw-html~nf6c7" />
 
 👨‍💼 When users ask our AI assistant about specific tags or categories, they expect to see that information presented clearly and visually, not just as a wall of text. Think about it - when someone asks "What is the 'javascript' tag about?" they want to see a nicely formatted card with the tag name prominently displayed and a clear description, not just raw text that says "javascript: A programming language for web development."
 
diff --git a/exercises/01.simple/01.solution.raw-html/README.mdx b/exercises/01.simple/01.solution.raw-html/README.mdx
@@ -1,6 +1,6 @@
 # Raw HTML
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/raw-html~nf6c7/solution" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/raw-html~nf6c7/solution" />
 
 👨‍💼 Great work! We've successfully transformed our tag information from plain text responses into rich, visual interfaces that users can quickly scan and understand. This is a game-changer for user experience - instead of users having to parse through walls of text to find tag information, they now get immediate, scannable visual cards that make the information feel accessible and professional.
 
diff --git a/exercises/01.simple/FINISHED.mdx b/exercises/01.simple/FINISHED.mdx
@@ -1,6 +1,6 @@
 # Simple
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/simple-break-zwmwv" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/simple-break-zwmwv" />
 
 Congratulations! You've successfully implemented your first MCP UI feature. You've transformed a basic text-based MCP tool into a rich, visual interface that provides users with an immediately scannable and professional experience.
 
diff --git a/exercises/01.simple/README.mdx b/exercises/01.simple/README.mdx
@@ -1,6 +1,6 @@
 # Simple
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/intro-to-simple-acds4" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/intro-to-simple-acds4" />
 
 MCP UI enables servers to send rich, interactive user interfaces along with their responses, transforming AI chat from text-only interactions into visually engaging experiences. Instead of just returning plain text, your MCP server can now provide HTML content that clients can render as actual UI components.
 
diff --git a/exercises/02.consistent/01.problem.remote-dom/README.mdx b/exercises/02.consistent/01.problem.remote-dom/README.mdx
@@ -1,6 +1,6 @@
 # Remote DOM
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/remote-dom-715sn" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/remote-dom-715sn" />
 
 👨‍💼 When users interact with our journaling app, they expect a consistent, professional experience that feels native to the application they're using. Right now, our tag viewer uses raw HTML which means our UI is rendered in an iframe and cannot resemble the variety of agents using our MCP server because it can't integrate with the host application's design system. Users notice this inconsistency and it makes our app feel less polished and trustworthy.
 
diff --git a/exercises/02.consistent/01.solution.remote-dom/README.mdx b/exercises/02.consistent/01.solution.remote-dom/README.mdx
@@ -1,6 +1,6 @@
 # Remote DOM
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/remote-dom-715sn/solution" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/remote-dom-715sn/solution" />
 
 👨‍💼 Excellent work! We've successfully transformed our tag viewer from raw HTML to Remote DOM, solving a critical user experience problem. Now our UI components automatically inherit the host application's design system, creating a consistent and professional experience that feels native to whatever application our users are using.
 
diff --git a/exercises/02.consistent/FINISHED.mdx b/exercises/02.consistent/FINISHED.mdx
@@ -1,6 +1,6 @@
 # Consistent
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/consistent-break-hze2g" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/consistent-break-hze2g" />
 
 Congratulations! You've successfully transformed your MCP UI from raw HTML to Remote DOM, solving a critical user experience problem. You've moved from writing static HTML with custom CSS to using JavaScript that creates DOM elements with predefined UI components.
 
diff --git a/exercises/02.consistent/README.mdx b/exercises/02.consistent/README.mdx
@@ -1,6 +1,6 @@
 # Consistent
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/intro-to-consistent-3fis7" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/intro-to-consistent-3fis7" />
 
 While raw HTML gives us visual interfaces, it has limitations when it comes to creating truly interactive and consistent user experiences. Raw HTML requires you to write all the styling from scratch, handle responsive design manually, and manage complex interactions through custom JavaScript. This leads to inconsistent designs across different UI components and makes it harder to maintain a cohesive user experience.
 
diff --git a/exercises/03.complex/01.problem.iframe/README.mdx b/exercises/03.complex/01.problem.iframe/README.mdx
@@ -1,6 +1,6 @@
 # iframe
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/iframe-s6mai" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/iframe-s6mai" />
 
 👨‍💼 When users interact with our AI assistant, they expect rich, interactive experiences that go beyond simple text responses. Whether they're viewing a detailed project dashboard or exploring a complex data visualization, they want to see and interact with full-featured interfaces that feel like native applications. The problem is: how do we provide these sophisticated UI experiences within the constraints of MCP?
 
diff --git a/exercises/03.complex/01.solution.iframe/README.mdx b/exercises/03.complex/01.solution.iframe/README.mdx
@@ -1,6 +1,6 @@
 # iframe
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/iframe-s6mai/solution" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/iframe-s6mai/solution" />
 
 👨‍💼 Great work! We've successfully solved a key problem for our users: now they can view their journal entries in a rich, interactive interface instead of just plain text. This makes the journal viewing experience much more engaging and professional.
 
diff --git a/exercises/03.complex/02.problem.ready/README.mdx b/exercises/03.complex/02.problem.ready/README.mdx
@@ -1,6 +1,6 @@
 # Ready
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/ready-5t7rk" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/ready-5t7rk" />
 
 👨‍💼 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.
 
diff --git a/exercises/03.complex/02.solution.ready/README.mdx b/exercises/03.complex/02.solution.ready/README.mdx
@@ -1,6 +1,6 @@
 # Ready
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/ready-5t7rk/solution" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/ready-5t7rk/solution" />
 
 👨‍💼 Great work! We've successfully solved a critical communication problem for our users: now when iframes load in AI chat, they immediately tell the host application they're ready to receive data and handle interactions. This eliminates broken interfaces and endless loading states that frustrated users before.
 
diff --git a/exercises/03.complex/03.problem.sizing/README.mdx b/exercises/03.complex/03.problem.sizing/README.mdx
@@ -1,6 +1,6 @@
 # Sizing
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/sizing-v9100" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/sizing-v9100" />
 
 👨‍💼 When users view their journal entries, they expect the interface to be sized appropriately for comfortable reading. A cramped window makes it hard to read entries, while an oversized frame wastes screen space.
 
diff --git a/exercises/03.complex/03.solution.sizing/README.mdx b/exercises/03.complex/03.solution.sizing/README.mdx
@@ -1,6 +1,6 @@
 # Sizing
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/sizing-v9100/solution" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/sizing-v9100/solution" />
 
 👨‍💼 Great work! We've successfully solved a key problem for our users: now the journal viewer displays at the optimal size for comfortable reading. This makes the interface much more user-friendly and professional, which is exactly what our users expect.
 
diff --git a/exercises/03.complex/04.problem.dynamic-sizing/README.mdx b/exercises/03.complex/04.problem.dynamic-sizing/README.mdx
@@ -1,6 +1,6 @@
 # Dynamic Sizing
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/dynamic-sizing-rxiyf" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/dynamic-sizing-rxiyf" />
 
 👨‍💼 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.
 
diff --git a/exercises/03.complex/04.solution.dynamic-sizing/README.mdx b/exercises/03.complex/04.solution.dynamic-sizing/README.mdx
@@ -1,6 +1,6 @@
 # Dynamic Sizing
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/dynamic-sizing-rxiyf/solution" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/dynamic-sizing-rxiyf/solution" />
 
 👨‍💼 Perfect! Our journal viewer now measures its content and tells the host exactly how much space it needs. Short entries no longer waste space, and long entries display completely without scrolling.
 
diff --git a/exercises/03.complex/FINISHED.mdx b/exercises/03.complex/FINISHED.mdx
@@ -1,6 +1,6 @@
 # Complex
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/break-to-complex-9bauc" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/break-to-complex-9bauc" />
 
 Congratulations! You've successfully implemented iframe-based UI components in your MCP server. You've moved from simple HTML and Remote DOM approaches to embedding full web applications that can leverage entire frameworks and provide rich, interactive experiences.
 
diff --git a/exercises/03.complex/README.mdx b/exercises/03.complex/README.mdx
@@ -1,6 +1,6 @@
 # Complex
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/intro-to-complex-2lxda" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/intro-to-complex-2lxda" />
 
 While raw HTML and Remote DOM provide great ways to create UI components, they have limitations when it comes to building truly complex, interactive applications. Raw HTML requires you to write all styling from scratch, and Remote DOM, while consistent, can be cumbersome for complex layouts and interactions. For sophisticated applications that need rich functionality, responsive design, and complex state management, you need a more powerful approach.
 
diff --git a/exercises/04.interactive/01.problem.links/README.mdx b/exercises/04.interactive/01.problem.links/README.mdx
@@ -1,6 +1,6 @@
 # Navigate to Links
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/links-j40ci" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/links-j40ci" />
 
 👨‍💼 Our users want to be able to share how many entries they have in their journal on 𝕏. We can use `postMessage` to send a link to the host application to navigate to the 𝕏 intent page.
 
diff --git a/exercises/04.interactive/01.solution.links/README.mdx b/exercises/04.interactive/01.solution.links/README.mdx
@@ -1,6 +1,6 @@
 # Navigate to Links
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/links-j40ci/solution" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/links-j40ci/solution" />
 
 👨‍💼 Super! Now users can click buttons in our iframe-based UI components and navigate to external links seamlessly. Users can now share their journal entries on social media!
 
diff --git a/exercises/04.interactive/02.problem.tools/README.mdx b/exercises/04.interactive/02.problem.tools/README.mdx
@@ -1,6 +1,6 @@
 # Call Tools
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/tools-ow1ol" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/tools-ow1ol" />
 
 👨‍💼 When users click "View Entry" on a journal entry, nothing happens. They need a way to trigger tool calls that fetch detailed data from the host application.
 
diff --git a/exercises/04.interactive/02.solution.tools/README.mdx b/exercises/04.interactive/02.solution.tools/README.mdx
@@ -1,6 +1,6 @@
 # Call Tools
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/tools-ow1ol/solution" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/tools-ow1ol/solution" />
 
 👨‍💼 We can now call MCP tools directly from within the UI components. This makes the interface truly interactive and functional, which is exactly what our users need for a complete experience.
 
diff --git a/exercises/04.interactive/03.problem.prompts/README.mdx b/exercises/04.interactive/03.problem.prompts/README.mdx
@@ -1,6 +1,6 @@
 # Send Prompts
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/prompts-m0qlk" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/prompts-m0qlk" />
 
 👨‍💼 Our users expect the "Summarize" button to instantly craft a short, insightful take on the entry they're viewing. To make that happen, the UI needs to send a natural-language prompt to the host via our MCP bridge, then show the result without a page reload. If we don't deliver, people lose trust and the feature feels broken.
 
diff --git a/exercises/04.interactive/03.solution.prompts/README.mdx b/exercises/04.interactive/03.solution.prompts/README.mdx
@@ -1,6 +1,6 @@
 # Send Prompts
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/prompts-m0qlk/solution" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/prompts-m0qlk/solution" />
 
 👨‍💼 Big win here. Users can now hit "Summarize" and immediately get a concise, insightful take on the entry they're viewing. This closes the loop between curiosity and clarity: they ask, the system interprets, and the answer shows up without disrupting their flow.
 
diff --git a/exercises/04.interactive/FINISHED.mdx b/exercises/04.interactive/FINISHED.mdx
@@ -1,6 +1,6 @@
 # Interactive
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/break-interactive-aorgu" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/break-interactive-aorgu" />
 
 Congratulations! You've successfully implemented interactive communication in your iframe-based UI components. You've transformed static iframes into dynamic components that can communicate with the host application to trigger actions, execute tools, and send prompts.
 
diff --git a/exercises/04.interactive/README.mdx b/exercises/04.interactive/README.mdx
@@ -1,6 +1,6 @@
 # Interactive
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/intro-to-interactive-gcc2n" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/intro-to-interactive-gcc2n" />
 
 While iframe-based UI components provide rich, visual interfaces, they need a way to communicate back to the host application to trigger actions, request data, or request links be opened. Without this communication, iframes would be isolated islands that can't integrate with the broader application ecosystem.
 
diff --git a/exercises/05.advanced/01.problem.tool-results/README.mdx b/exercises/05.advanced/01.problem.tool-results/README.mdx
@@ -1,6 +1,6 @@
 # Tool Results
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/tool-results-18put" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/tool-results-18put" />
 
 👨‍💼 When users interact with our journal entries, they expect immediate feedback and reliable actions. If a user deletes an entry, they need to know it actually worked - not just hope for the best. The problem is: how do we get structured, validated data back from our MCP tools so we can build intelligent workflows that respond appropriately to different outcomes?
 
diff --git a/exercises/05.advanced/01.solution.tool-results/README.mdx b/exercises/05.advanced/01.solution.tool-results/README.mdx
@@ -1,6 +1,6 @@
 # Tool Results
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/tool-results-18put/solution" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/tool-results-18put/solution" />
 
 👨‍💼 Great work! We've successfully implemented structured tool results that enable intelligent, data-driven workflows in our journal application. Our MCP UI is now more responsive. Woo!
 
diff --git a/exercises/05.advanced/02.problem.render-data/README.mdx b/exercises/05.advanced/02.problem.render-data/README.mdx
@@ -1,6 +1,6 @@
 # Render Data
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/render-data-pa64m" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/render-data-pa64m" />
 
 👨‍💼 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.
 
diff --git a/exercises/05.advanced/02.solution.render-data/README.mdx b/exercises/05.advanced/02.solution.render-data/README.mdx
@@ -1,6 +1,6 @@
 # Render Data
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/render-data-pa64m/solution" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/render-data-pa64m/solution" />
 
 👨‍💼 Great work! We've successfully implemented render data for our journal entry viewer, solving a critical security problem. Now we can securely pass protected data from our MCP server to the iframe component.
 
diff --git a/exercises/05.advanced/FINISHED.mdx b/exercises/05.advanced/FINISHED.mdx
@@ -1,6 +1,6 @@
 # Advanced
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/break-to-advanced-lp83v" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/break-to-advanced-lp83v" />
 
 Congratulations! You've successfully implemented two powerful advanced features that make MCP UI significantly more capable.
 
diff --git a/exercises/05.advanced/README.mdx b/exercises/05.advanced/README.mdx
@@ -1,6 +1,6 @@
 # Advanced
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/intro-to-advanced-u3kkh" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/intro-to-advanced-u3kkh" />
 
 We're going to cover two advanced features of MCP UI that make it more powerful.
 
diff --git a/exercises/FINISHED.mdx b/exercises/FINISHED.mdx
@@ -1,6 +1,6 @@
 # MCP UI 🪟
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/outro-advanced-u6k8u" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/outro-advanced-u6k8u" />
 
 Hooray! You made it through the whole workshop! 👏
 
diff --git a/exercises/README.mdx b/exercises/README.mdx
@@ -1,6 +1,6 @@
 # MCP UI 🪟
 
-<EpicVideo url="https://www.epicai.pro/workshops/day-5-6-mcp-ui/intro-to-mcp-ui~6kth5" />
+<EpicVideo url="https://www.epicai.pro/workshops/mcp-ui-aubv9/intro-to-mcp-ui~6kth5" />
 
 👨‍💼 Hello, my name is Peter the Product Manager. I'm here to help you get oriented and to give you your assignments for the workshop!
 
@@ -22,4 +22,11 @@ Throughout this workshop, you'll learn:
 	url="https://www.epicai.pro/use-mcp-ui-with-nanobot-ai-8fc71"
 />
 
+Great tools that support MCP UI:
+
+- [Nanobot.ai](https://nanobot.ai)
+- [Goose](https://block.github.io/goose/)
+- [Postman](https://www.postman.com/)
+- [MCPJam](https://mcpjam.com/)
+
 Ready to connect your AI to the world... Visually!? Let's get started!
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     ],
     "product": {
       "host": "www.epicai.pro",
-      "slug": "day-5-6-mcp-ui",
+      "slug": "mcp-ui-aubv9",
       "displayName": "EpicAI.pro",
       "displayNameShort": "Epic AI",
       "discordChannelId": "1446549245246177371",
