add readme and finished content

Author: kentcdodds

exercises/FINISHED.mdx

@@ -1,3 +1,50 @@
 # MCP UI 🪟
 
-Hooray! You're all done! 👏👏
+Hooray! You made it through the whole workshop! 👏
+
+## What you've learned
+
+### 1. Simple - Raw HTML UI Resources
+
+Learned the core pattern: use `createUIResource` to return a `rawHtml` UI resource instead of plain text. You delivered styled, visual output (e.g. info cards) and saw how a `uri` + content type package UI for compliant clients.
+
+### 2. Consistent - Remote DOM
+
+Moved from hand-authored HTML/CSS to a component-driven, host-consistent layer (Shopify's Remote DOM). You gained: design system consistency, built-in interactivity, less styling drift, and safer structured creation of elements (`ui-text`, `ui-button`, etc.).
+
+### 3. Complex - Iframe / Embedded Apps
+
+Escalated to full application surfaces using the `externalUrl` content type. Added preferred sizing metadata, understood lifecycle messages, and decomposed complexity into an independently deployed (or locally served) app. Sub-steps introduced readiness, fixed sizing, and dynamic resizing strategies.
+
+### 4. Interactive - Communication Protocol
+
+Empowered iframes to participate in workflows: sending `link`, `tool`, and `prompt` messages via `postMessage`. You handled message IDs, async responses, and error feedback—turning passive UI into an active collaborator with the host + MCP toolchain.
+
+### 5. Advanced - Tool Results & Render Data
+
+Closed the loop on data richness and performance:
+
+- **Structured Tool Results:** Defined output schemas so clients can safely parse, validate, and branch on outcomes (e.g. metrics, suggestions).
+- **Render Data:** Preloaded initial iframe data through `uiMetadata` (`initial-render-data`) to avoid extra network hops and securely pass contextual, possibly private data at creation time.
+
+### Putting It All Together
+
+Across the progression you learned how to choose the right abstraction:
+
+- Raw HTML → quickest path to visual output
+- Remote DOM → consistency & built-in components
+- Iframe Apps → full framework power & complex interaction
+- Protocol Messaging → rich, bi-directional intent + action
+- Structured Results & Render Data → reliability, safety, and performance
+
+### Next Steps
+
+You're well equipped to ship production-grade MCP UI experiences. Consider:
+
+- Converting existing plain-text MCP tools into visual UI resources
+- Adding schema validation everywhere a boundary exists (tool inputs/outputs, render data)
+- Building a reusable internal component library for Remote DOM use
+- Layering authorization & audit logging around iframe messages
+- Contributing examples or docs back to the MCP UI ecosystem
+
+You've taken AI interaction from linear text to adaptive, interactive surfaces that feel native and intentional. Nicely done. Keep experimenting—and ship something real next.

exercises/README.mdx

@@ -1,8 +1,23 @@
 # MCP UI 🪟
 
+👨‍💼 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!
+
+Welcome to **MCP UI 🪟**! In this workshop, you'll dive into the world of the [Model Context Protocol (MCP)](https://modelcontextprotocol.io)—an open protocol designed to seamlessly connect AI models with external data sources and tools. [MCP UI](https://mcpui.dev) is a powerful extension to the spec that enables servers to send rich, interactive user interfaces along with their responses, transforming AI chat into visually engaging experiences.
+
+Throughout this workshop, you'll learn:
+
+- The core concepts of MCP UI and how it extends the MCP protocol
+- How to create raw HTML UI resources
+- How to create consistent UI with Remote DOM
+- How to build complex interactions with iframe-based UI components
+- How to implement interactive communication between iframes and the host using `postMessage`
+- Advanced features like structured tool results and passing initial render data
+
 ## Check out how to set up an MCP UI agent
 
 <EpicVideo
 	title="Use MCP-UI with nanobot.ai"
 	url="https://www.epicai.pro/use-mcp-ui-with-nanobot-ai-8fc71"
 />
+
+Ready to connect your AI to the world... Visually!? Let's get started!