[{"_1":2,"_484":-5,"_485":-5},"loaderData",{"_3":4,"_285":286,"_387":388},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_110":111,"_114":115,"_116":113,"_117":118,"_168":120,"_169":122,"_123":124,"_170":171,"_192":193,"_217":-5,"_218":-5,"_219":220},"userId",{"_7":8,"_9":10},"id","rcab92fjhzmtidzkfu5oynfo","type","cookie.randomId","preferences","progress",[],"user","userHasAccess",true,"apps",[19,26,30,34,38,42,46,50,54,58,62,66,70,74,78,82,86,90,94,98,102,106],{"_20":21,"_22":23,"_24":25},"name","01.01.problem","fullPath","/myapp/workshop-content/exercises/01.simple/01.problem.raw-html","relativePath","exercises/01.simple/01.problem.raw-html",{"_20":27,"_22":28,"_24":29},"01.01.solution","/myapp/workshop-content/exercises/01.simple/01.solution.raw-html","exercises/01.simple/01.solution.raw-html",{"_20":31,"_22":32,"_24":33},"02.01.problem","/myapp/workshop-content/exercises/02.consistent/01.problem.remote-dom","exercises/02.consistent/01.problem.remote-dom",{"_20":35,"_22":36,"_24":37},"02.01.solution","/myapp/workshop-content/exercises/02.consistent/01.solution.remote-dom","exercises/02.consistent/01.solution.remote-dom",{"_20":39,"_22":40,"_24":41},"03.01.problem","/myapp/workshop-content/exercises/03.complex/01.problem.iframe","exercises/03.complex/01.problem.iframe",{"_20":43,"_22":44,"_24":45},"03.01.solution","/myapp/workshop-content/exercises/03.complex/01.solution.iframe","exercises/03.complex/01.solution.iframe",{"_20":47,"_22":48,"_24":49},"03.02.problem","/myapp/workshop-content/exercises/03.complex/02.problem.ready","exercises/03.complex/02.problem.ready",{"_20":51,"_22":52,"_24":53},"03.02.solution","/myapp/workshop-content/exercises/03.complex/02.solution.ready","exercises/03.complex/02.solution.ready",{"_20":55,"_22":56,"_24":57},"03.03.problem","/myapp/workshop-content/exercises/03.complex/03.problem.sizing","exercises/03.complex/03.problem.sizing",{"_20":59,"_22":60,"_24":61},"03.03.solution","/myapp/workshop-content/exercises/03.complex/03.solution.sizing","exercises/03.complex/03.solution.sizing",{"_20":63,"_22":64,"_24":65},"03.04.problem","/myapp/workshop-content/exercises/03.complex/04.problem.dynamic-sizing","exercises/03.complex/04.problem.dynamic-sizing",{"_20":67,"_22":68,"_24":69},"03.04.solution","/myapp/workshop-content/exercises/03.complex/04.solution.dynamic-sizing","exercises/03.complex/04.solution.dynamic-sizing",{"_20":71,"_22":72,"_24":73},"04.01.problem","/myapp/workshop-content/exercises/04.interactive/01.problem.links","exercises/04.interactive/01.problem.links",{"_20":75,"_22":76,"_24":77},"04.01.solution","/myapp/workshop-content/exercises/04.interactive/01.solution.links","exercises/04.interactive/01.solution.links",{"_20":79,"_22":80,"_24":81},"04.02.problem","/myapp/workshop-content/exercises/04.interactive/02.problem.tools","exercises/04.interactive/02.problem.tools",{"_20":83,"_22":84,"_24":85},"04.02.solution","/myapp/workshop-content/exercises/04.interactive/02.solution.tools","exercises/04.interactive/02.solution.tools",{"_20":87,"_22":88,"_24":89},"04.03.problem","/myapp/workshop-content/exercises/04.interactive/03.problem.prompts","exercises/04.interactive/03.problem.prompts",{"_20":91,"_22":92,"_24":93},"04.03.solution","/myapp/workshop-content/exercises/04.interactive/03.solution.prompts","exercises/04.interactive/03.solution.prompts",{"_20":95,"_22":96,"_24":97},"05.01.problem","/myapp/workshop-content/exercises/05.advanced/01.problem.tool-results","exercises/05.advanced/01.problem.tool-results",{"_20":99,"_22":100,"_24":101},"05.01.solution","/myapp/workshop-content/exercises/05.advanced/01.solution.tool-results","exercises/05.advanced/01.solution.tool-results",{"_20":103,"_22":104,"_24":105},"05.02.problem","/myapp/workshop-content/exercises/05.advanced/02.problem.render-data","exercises/05.advanced/02.problem.render-data",{"_20":107,"_22":108,"_24":109},"05.02.solution","/myapp/workshop-content/exercises/05.advanced/02.solution.render-data","exercises/05.advanced/02.solution.render-data","repoUpdates",{"_112":113},"updatesAvailable",false,"unmutedNotifications",[],"exerciseChanges","workshopConfig",{"_119":120,"_121":122,"_123":124,"_130":131,"_132":133,"_145":146,"_147":148,"_149":150,"_151":152,"_157":158,"_160":161,"_162":163,"_164":165},"title","MCP UI 🪟","subtitle","Go beyond text interaction in AI Chat","instructor",{"_20":125,"_126":127,"_128":129},"Some instructor","avatar","/images/instructor.png","𝕏","your_x_handle_here","subdomain","mcp-ui","product",{"_134":135,"_136":137,"_138":139,"_140":141,"_142":143,"_144":-7},"host","www.epicweb.dev","displayName","EpicWeb.dev","displayNameShort","Epic Web","logo","/logo.svg","discordChannelId","1161045224907341972","slug","onboardingVideo","https://www.epicweb.dev/tips/get-started-with-the-epic-workshop-app","githubRepo","https://github.com/epicweb-dev/mcp-ui","githubRoot","https://github.com/epicweb-dev/mcp-ui/tree/main","forms",{"_153":154,"_155":156},"workshop","https://docs.google.com/forms/d/e/1FAIpQLSdRmj9p8-5zyoqRzxp3UpqSbC3aFkweXvvJIKes0a5s894gzg/viewform?hl=en&embedded=true&entry.2123647600={workshopTitle}","exercise","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234={workshopTitle}&entry.428900931={exerciseTitle}","testTab",{"_159":16},"enabled","initialRoute","/","notifications",[],"sidecarProcesses",{"_166":167},"EpicMeApp","npm run dev --silent --prefix ./epicshop/epic-me -- --clearScreen=false --logLevel=error --strictPort","workshopTitle","workshopSubtitle","ENV",{"_172":173,"_174":175,"_176":177,"_178":148,"_179":150,"_180":16,"_181":182,"_183":184,"_185":186,"_187":16,"_188":189,"_190":191},"MODE","production","EPICSHOP_CONTEXT_CWD","/myapp/workshop-content","EPICSHOP_WORKSHOP_INSTANCE_ID","4e1570b81d1baf3d16bd3a08ece570cb","EPICSHOP_GITHUB_REPO","EPICSHOP_GITHUB_ROOT","EPICSHOP_DEPLOYED","EPICSHOP_APP_VERSION","6.23.8","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","8708c6715891c6f30d90c83a9cf8580876ce0d65d52bb39aabf8186eb87f80c5","EPICSHOP_IS_PUBLISHED","SENTRY_DSN","https://cd51fbf4ca0834f7b3529a478a8ece4c@o913766.ingest.us.sentry.io/4509630082252800","SENTRY_PROJECT_ID","4509630082252800","requestInfo",{"_194":195,"_196":197,"_198":199,"_200":201,"_202":201,"_203":204,"_211":212,"_213":214,"_215":161,"_216":16},"protocol","http:","hostname","mcp-ui.epicai.pro","port","","origin","http://mcp-ui.epicai.pro","domain","hints",{"_205":206,"_207":208,"_209":210},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/05/finished","session",{"_205":-5},"separator","online","toast","confettiId","presence",{"_221":222},"users",[223,241,249,258,268,276,281],{"_7":224,"_225":16,"_226":227,"_228":229,"_20":230,"_231":232},"32348b49-5c22-4419-871a-0d609f1077bb","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/ba76f6712dd0d1b0e2f85ba2166da3db?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/ba76f6712dd0d1b0e2f85ba2166da3db?size=512&default=identicon","Dave","location",{"_168":233,"_200":234,"_155":235},"MCP Auth 🔐","http://localhost:5639",{"_9":236,"_237":238,"_239":240},"problem","exerciseNumber",1,"stepNumber",3,{"_7":242,"_225":16,"_226":243,"_228":244,"_20":245,"_231":246},"2aba84c7-3d0a-473b-9c68-64f3c1308c6a","https://www.gravatar.com/avatar/e2669a1de5fe5c2a1977aefb86c66cdb?size=64&default=identicon","https://www.gravatar.com/avatar/e2669a1de5fe5c2a1977aefb86c66cdb?size=512&default=identicon","Glen Coffey",{"_168":247,"_200":234,"_155":248},"Advanced React Patterns 🤯",{"_9":236,"_237":238,"_239":238},{"_7":250,"_225":16,"_226":251,"_228":252,"_20":253,"_231":254},"2c4caa18-6594-48f9-8914-a4beb45c20cd","https://www.gravatar.com/avatar/c1c563b36d23e34002036e1de405f9ca?size=64&default=identicon","https://www.gravatar.com/avatar/c1c563b36d23e34002036e1de405f9ca?size=512&default=identicon","Kent",{"_168":233,"_200":234,"_155":255},{"_9":236,"_237":256,"_239":257},4,2,{"_7":259,"_225":16,"_226":260,"_228":261,"_20":262,"_231":263},"b84569da-5101-4cca-b7d3-5f5b6894cdc0","https://www.gravatar.com/avatar/41bc45a5d56b226ad7a8db240f3b8d5b?size=64&default=identicon","https://www.gravatar.com/avatar/41bc45a5d56b226ad7a8db240f3b8d5b?size=512&default=identicon","Benjamin Busch",{"_168":264,"_200":234,"_155":265},"Web Authentication 🔐",{"_9":266,"_237":267,"_239":238},"solution",5,{"_7":269,"_225":113,"_226":270,"_228":271,"_20":272,"_231":273},"a6bb3979-f078-4c20-acbb-610697bc36c4","https://www.gravatar.com/avatar/b2f9c064590390344edaccc71580609c?size=64&default=identicon","https://www.gravatar.com/avatar/b2f9c064590390344edaccc71580609c?size=512&default=identicon","Brandon",{"_168":274,"_200":234,"_155":275},"Advanced Vitest Patterns",{"_9":236,"_237":257,"_239":257},{"_7":277,"_231":278},"q3pyfy7rumrqh69nhudly01t",{"_168":247,"_200":279,"_155":280},"http://advanced-patterns.epicreact.dev",{"_237":256},{"_7":282,"_231":283},"urrzak1fpu6q23vjpvwvks5l",{"_168":120,"_200":201,"_155":284},{"_237":267,"_239":-5,"_9":-5},"routes/_app+/_layout",{"_168":120,"_287":288,"_383":384,"_386":113},"exercises",[289,303,314,343,366],{"_237":238,"_119":290,"_291":292,"_295":296,"_298":299},"Simple","solutions",[293],{"_239":238,"_119":294,"_20":27},"Raw HTML","problems",[297],{"_239":238,"_119":294,"_20":21},"steps",[300],{"_239":238,"_119":294,"_20":21,"_236":301,"_266":302},{"_20":21,"_119":294},{"_20":27,"_119":294},{"_237":257,"_119":304,"_291":305,"_295":308,"_298":310},"Consistent",[306],{"_239":238,"_119":307,"_20":35},"Remote DOM",[309],{"_239":238,"_119":307,"_20":31},[311],{"_239":238,"_119":307,"_20":31,"_236":312,"_266":313},{"_20":31,"_119":307},{"_20":35,"_119":307},{"_237":240,"_119":315,"_291":316,"_295":325,"_298":330},"Complex",[317,319,321,323],{"_239":238,"_119":318,"_20":43},"iframe",{"_239":257,"_119":320,"_20":51},"Ready",{"_239":240,"_119":322,"_20":59},"Sizing",{"_239":256,"_119":324,"_20":67},"Dynamic Sizing",[326,327,328,329],{"_239":238,"_119":318,"_20":39},{"_239":257,"_119":320,"_20":47},{"_239":240,"_119":322,"_20":55},{"_239":256,"_119":324,"_20":63},[331,334,337,340],{"_239":238,"_119":318,"_20":39,"_236":332,"_266":333},{"_20":39,"_119":318},{"_20":43,"_119":318},{"_239":257,"_119":320,"_20":47,"_236":335,"_266":336},{"_20":47,"_119":320},{"_20":51,"_119":320},{"_239":240,"_119":322,"_20":55,"_236":338,"_266":339},{"_20":55,"_119":322},{"_20":59,"_119":322},{"_239":256,"_119":324,"_20":63,"_236":341,"_266":342},{"_20":63,"_119":324},{"_20":67,"_119":324},{"_237":256,"_119":344,"_291":345,"_295":352,"_298":356},"Interactive",[346,348,350],{"_239":238,"_119":347,"_20":75},"Navigate to Links",{"_239":257,"_119":349,"_20":83},"Call Tools",{"_239":240,"_119":351,"_20":91},"Send Prompts",[353,354,355],{"_239":238,"_119":347,"_20":71},{"_239":257,"_119":349,"_20":79},{"_239":240,"_119":351,"_20":87},[357,360,363],{"_239":238,"_119":347,"_20":71,"_236":358,"_266":359},{"_20":71,"_119":347},{"_20":75,"_119":347},{"_239":257,"_119":349,"_20":79,"_236":361,"_266":362},{"_20":79,"_119":349},{"_20":83,"_119":349},{"_239":240,"_119":351,"_20":87,"_236":364,"_266":365},{"_20":87,"_119":351},{"_20":91,"_119":351},{"_237":267,"_119":367,"_291":368,"_295":373,"_298":376},"Advanced",[369,371],{"_239":238,"_119":370,"_20":99},"Tool Results",{"_239":257,"_119":372,"_20":107},"Render Data",[374,375],{"_239":238,"_119":370,"_20":95},{"_239":257,"_119":372,"_20":103},[377,380],{"_239":238,"_119":370,"_20":95,"_236":378,"_266":379},{"_20":95,"_119":370},{"_20":99,"_119":370},{"_239":257,"_119":372,"_20":103,"_236":381,"_266":382},{"_20":103,"_119":372},{"_20":107,"_119":372},"playground",{"_385":-5,"_237":-2,"_239":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_389":390,"_168":120,"_155":391,"_465":466,"_467":468,"_469":470,"_474":475,"_480":481},"articleId","workshop-mcp-ui-5-finished",{"_22":392,"_237":267,"_393":394,"_119":367,"_395":396,"_397":398,"_399":400,"_401":402,"_298":403,"_295":447,"_291":456},"/myapp/workshop-content/exercises/05.advanced","dirName","05.advanced","instructionsCode","var Component=(()=>{var b=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var y=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),k=(n,e)=>{for(var l in e)r(n,l,{get:e[l],enumerable:!0})},t=(n,e,l,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!v.call(n,s)&&s!==l&&r(n,s,{get:()=>e[s],enumerable:!(c=p(e,s))||c.enumerable});return n};var N=(n,e,l)=>(l=n!=null?b(u(n)):{},t(e||!n||!n.__esModule?r(l,\"default\",{value:n,enumerable:!0}):l,n)),g=n=>t(r({},\"__esModule\",{value:!0}),n);var i=y((x,o)=>{o.exports=_jsx_runtime});var w={};k(w,{default:()=>h,frontmatter:()=>f});var a=N(i()),f=void 0;function d(n){let e={a:\"a\",code:\"code\",h1:\"h1\",h2:\"h2\",p:\"p\",pre:\"pre\",span:\"span\",strong:\"strong\",...n.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h1,{children:\"Advanced\"}),`\n`,(0,a.jsx)(e.p,{children:\"We're going to cover two advanced features of MCP UI that make it more powerful.\"}),`\n`,(0,a.jsx)(e.h2,{children:\"Tool Results\"}),`\n`,(0,a.jsx)(e.p,{children:\"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.\"}),`\n`,(0,a.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"ts\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// Tool returns both human-readable and structured data\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"result\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"await\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"sendMcpMessage\"}),\"(\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"tool\"}),\"'\",\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t{\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\ttoolName: \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"analyze_code\"}),\"'\",\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\tparams: { filePath: \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"src/utils/validation.ts\"}),\"'\",\" },\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t},\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t{ schema: \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"codeAnalysisSchema\"}),\" },\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\")\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// Client can access structured data\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"metrics\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"suggestions\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"complexity\"}),\" } \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"result\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"structuredContent\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"complexity\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\">\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"10\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"showRefactorWarning\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"suggestions\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"updateCodeMetrics\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"metrics\"}),\")\",`\n`]})]})}),`\n`,(0,a.jsx)(\"callout-info\",{children:(0,a.jsx)(e.p,{children:`With structured content, MCP clients can build sophisticated workflows where\ntools can trigger automatic actions based on their results, rather than\nrequiring manual user intervention for every step.`})}),`\n`,(0,a.jsxs)(e.p,{children:[\"The structured content is defined by the tool's \",(0,a.jsx)(e.code,{children:\"outputSchema\"}),\" and validated using Zod schemas on the client side, ensuring type safety and reliable data flow between the MCP server and client applications.\"]}),`\n`,(0,a.jsxs)(e.p,{children:[\"Note, keep in mind the example above uses our \",(0,a.jsx)(e.code,{children:\"sendMcpMessage\"}),\" utility function which is really just a wrapper around the \",(0,a.jsx)(e.code,{children:\"postMessage\"}),\" API with the messageId and waiting for the response handled for us.\"]}),`\n`,(0,a.jsx)(e.h2,{children:\"Render Data\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"MCP UI resources can pass initial data directly to iframe components, eliminating the need for additional API calls or complex data fetching logic. This is especially great if the MCP server is running behind authentication and you want to pass private data into the iframe for display. This \",(0,a.jsx)(e.strong,{children:\"render data\"}),\" pattern allows the server to provide all necessary context when creating UI resources.\"]}),`\n`,(0,a.jsx)(e.p,{children:\"Example:\"}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"ts\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// Server provides initial data with the UI resource\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\tcontent: [\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\t{\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t\ttype: \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"resource\"}),\"'\",\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t\tresource: {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\t\turi: \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"iframeUrl\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"toString\"}),\"(),\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\t\t\tmimeType: \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"text/html\"}),\"'\",\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\t\t\tuiMetadata: {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\t\t\t\t\",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"initial-render-data\"}),\"'\",\": { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"bedInventory\"}),\" },\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t\t\t\t},\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t\t\t},\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"\t\t},\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"\t],\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// Client receives data as soon as it emits the `ui-lifecycle-iframe-ready` event\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"window\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"addEventListener\"}),\"(\",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"message\"}),\"'\",\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"handleMessage\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"event\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"MessageEvent\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"event\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"data\"}),\"?.\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"type\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"!==\"}),\" \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"ui-lifecycle-iframe-render-data\"}),\"'\",\") \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"event\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"data\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"error\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// event.data.error... handle it\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",children:[\"\t} \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"else\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"bedInventory\"}),\" } \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"event\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"data\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"payload\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// do stuff with this\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",children:[\"\t}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",children:[\"})\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[\"\\u{1F4DC} \",(0,a.jsx)(e.a,{href:\"https://mcpui.dev/guide/embeddable-ui#passing-render-data-to-the-iframe\",children:\"Passing Render Data to the iframe\"})]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(d,{...n})}):d(n)}return g(w);})();\n;return Component;","finishedCode","var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var y=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),_=(n,e)=>{for(var o in e)r(n,o,{get:e[o],enumerable:!0})},i=(n,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of f(e))!x.call(n,a)&&a!==o&&r(n,a,{get:()=>e[a],enumerable:!(s=m(e,a))||s.enumerable});return n};var w=(n,e,o)=>(o=n!=null?p(h(n)):{},i(e||!n||!n.__esModule?r(o,\"default\",{value:n,enumerable:!0}):o,n)),C=n=>i(r({},\"__esModule\",{value:!0}),n);var d=y((v,c)=>{c.exports=_jsx_runtime});var g={};_(g,{default:()=>u,frontmatter:()=>M});var t=w(d()),M=void 0;function l(n){let e={h1:\"h1\",p:\"p\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{children:\"Advanced\"}),`\n`,(0,t.jsx)(e.p,{children:\"Congratulations! You've successfully implemented two powerful advanced features that make MCP UI significantly more capable.\"}),`\n`,(0,t.jsx)(e.p,{children:\"These advanced features transform your MCP UI from simple display components into intelligent, data-driven interfaces that can build sophisticated workflows.\"}),`\n`,(0,t.jsx)(e.p,{children:\"You're now ready to build production-ready MCP UI applications!\"})]})}function u(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(l,{...n})}):l(n)}return C(g);})();\n;return Component;","instructionsEpicVideoEmbeds",[],"finishedEpicVideoEmbeds",[],[404,430],{"_239":238,"_236":405,"_266":421},{"_20":95,"_119":370,"_393":406,"_22":96,"_24":97,"_395":407,"_408":409,"_410":411,"_414":415,"_418":419,"_237":267,"_239":238,"_9":236,"_420":99},"01.problem.tool-results","var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var y=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),k=(a,e)=>{for(var s in e)r(a,s,{get:e[s],enumerable:!0})},o=(a,e,s,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of b(e))!x.call(a,n)&&n!==s&&r(a,n,{get:()=>e[n],enumerable:!(l=f(e,n))||l.enumerable});return a};var g=(a,e,s)=>(s=a!=null?h(p(a)):{},o(e||!a||!a.__esModule?r(s,\"default\",{value:a,enumerable:!0}):s,a)),u=a=>o(r({},\"__esModule\",{value:!0}),a);var d=y((M,i)=>{i.exports=_jsx_runtime});var v={};k(v,{default:()=>m,frontmatter:()=>w});var t=g(d()),w=void 0;function c(a){let e={code:\"code\",div:\"div\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...a.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{children:\"Tool Results\"}),`\n`,(0,t.jsx)(e.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} 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?\"}),`\n`,(0,t.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"ts\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,t.jsxs)(e.code,{children:[(0,t.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,t.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// Tool returns both human-readable and structured data\"}),`\n`]}),(0,t.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,t.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,t.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"result\"}),\" \",(0,t.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,t.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"await\"}),\" \",(0,t.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"sendMcpMessage\"}),\"(\",`\n`]}),(0,t.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",\"'\",(0,t.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"tool\"}),\"'\",\",\",`\n`]}),(0,t.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t{\",`\n`]}),(0,t.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\ttoolName: \",\"'\",(0,t.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"analyze_code\"}),\"'\",\",\",`\n`]}),(0,t.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\tparams: { filePath: \",\"'\",(0,t.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"src/utils/validation.ts\"}),\"'\",\" },\",`\n`]}),(0,t.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t},\",`\n`]}),(0,t.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t{ schema: \",(0,t.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"codeAnalysisSchema\"}),\" },\",`\n`]}),(0,t.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\")\",`\n`]}),(0,t.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:`\n`}),(0,t.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[(0,t.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// Client can access structured data and respond intelligently\"}),`\n`]}),(0,t.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[(0,t.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" { \",(0,t.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"metrics\"}),\", \",(0,t.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"suggestions\"}),\", \",(0,t.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"complexity\"}),\" } \",(0,t.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,t.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"result\"}),\".\",(0,t.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"structuredContent\"}),`\n`]}),(0,t.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[(0,t.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,t.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"complexity\"}),\" \",(0,t.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\">\"}),\" \",(0,t.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"10\"}),\") {\",`\n`]}),(0,t.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"\t\",(0,t.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"showRefactorWarning\"}),\"(\",(0,t.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"suggestions\"}),\")\",`\n`]}),(0,t.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"}\",`\n`]}),(0,t.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[(0,t.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"updateCodeMetrics\"}),\"(\",(0,t.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"metrics\"}),\")\",`\n`]})]})}),`\n`,(0,t.jsx)(e.p,{children:\"To make this happen, we use Zod schemas to validate and type the structured content returned by MCP tools. This enables rich integrations where the client can understand and act on tool results programmatically, rather than requiring manual user intervention for every step.\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The structured content is defined by the tool's \",(0,t.jsx)(e.code,{children:\"outputSchema\"}),\" and validated using Zod schemas on the client side, ensuring type safety and reliable data flow between the MCP server and client applications.\"]}),`\n`,(0,t.jsx)(\"callout-info\",{children:(0,t.jsx)(e.p,{children:`With structured content, MCP clients can build sophisticated workflows where\ntools can trigger automatic actions based on their results, creating a more\nintelligent and responsive user experience.`})}),`\n`,(0,t.jsx)(e.div,{className:\"mermaid not-prose\",dangerouslySetInnerHTML:{__html:''}}),`\n`,(0,t.jsx)(e.p,{children:\"The goal is to make tool interactions feel intelligent and responsive, so users can trust that their actions have real consequences and get immediate, accurate feedback about what happened.\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Remember, our \",(0,t.jsx)(e.code,{children:\"delete_entry\"}),\" tool returns structured content with a \",(0,t.jsx)(e.code,{children:\"success\"}),\" boolean. You'll need to create a Zod schema to validate this data and use it in your \",(0,t.jsx)(e.code,{children:\"sendMcpMessage\"}),\" call to get type-safe access to the result!\"]}),`\n`,(0,t.jsx)(e.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Thanks Kellie!\"}),`\n`,(0,t.jsx)(e.p,{children:\"Now, start by creating the schema, implement the tool call, and handle both success and failure cases to make your journal deletion feel reliable and responsive.\"})]})}function m(a={}){let{wrapper:e}=a.components||{};return e?(0,t.jsx)(e,{...a,children:(0,t.jsx)(c,{...a})}):c(a)}return u(v);})();\n;return Component;","epicVideoEmbeds",[],"test",{"_9":412,"_412":413},"script","vitest run","dev",{"_9":412,"_416":417,"_160":161},"portNumber",6041,"stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/mcp-ui/tree/main/exercises/05.advanced/01.problem.tool-results?title=Tool+Results+%28problem%29","solutionName",{"_20":99,"_119":370,"_393":422,"_22":100,"_24":101,"_395":423,"_408":424,"_410":425,"_414":426,"_418":428,"_237":267,"_239":238,"_9":266,"_429":-5},"01.solution.tool-results","var Component=(()=>{var f=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var t in e)i(n,t,{get:e[t],enumerable:!0})},c=(n,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!x.call(n,r)&&r!==t&&i(n,r,{get:()=>e[r],enumerable:!(s=m(e,r))||s.enumerable});return n};var _=(n,e,t)=>(t=n!=null?f(h(n)):{},c(e||!n||!n.__esModule?i(t,\"default\",{value:n,enumerable:!0}):t,n)),j=n=>c(i({},\"__esModule\",{value:!0}),n);var l=w((C,u)=>{u.exports=_jsx_runtime});var v={};g(v,{default:()=>d,frontmatter:()=>k});var o=_(l()),k=void 0;function a(n){let e={h1:\"h1\",p:\"p\",...n.components},{NextDiffLink:t}=e;return t||y(\"NextDiffLink\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Tool Results\"}),`\n`,(0,o.jsx)(e.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} 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!\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"\\u{1F9DD}\\u200D\\u2640\\uFE0F I'm going to prep us for a new requirement we have for the entry viewer. \",(0,o.jsx)(t,{children:\"Check out my changes\"}),\" if you'd like.\"]})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(a,{...n})}):a(n)}function y(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(v);})();\n;return Component;",[],{"_9":412,"_412":413},{"_9":412,"_416":427,"_160":161},7041,"https://stackblitz.com/github/epicweb-dev/mcp-ui/tree/main/exercises/05.advanced/01.solution.tool-results?title=Tool+Results+%28solution%29","problemName",{"_239":257,"_236":431,"_266":439},{"_20":103,"_119":372,"_393":432,"_22":104,"_24":105,"_395":433,"_408":434,"_410":435,"_414":436,"_418":438,"_237":267,"_239":257,"_9":236,"_420":107},"02.problem.render-data","var Component=(()=>{var b=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var y=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),k=(n,e)=>{for(var l in e)s(n,l,{get:e[l],enumerable:!0})},c=(n,e,l,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!v.call(n,r)&&r!==l&&s(n,r,{get:()=>e[r],enumerable:!(t=p(e,r))||t.enumerable});return n};var f=(n,e,l)=>(l=n!=null?b(u(n)):{},c(e||!n||!n.__esModule?s(l,\"default\",{value:n,enumerable:!0}):l,n)),N=n=>c(s({},\"__esModule\",{value:!0}),n);var i=y((x,o)=>{o.exports=_jsx_runtime});var w={};k(w,{default:()=>h,frontmatter:()=>g});var a=f(i()),g=void 0;function d(n){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",strong:\"strong\",...n.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h1,{children:\"Render Data\"}),`\n`,(0,a.jsx)(e.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} 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.\"}),`\n`,(0,a.jsx)(e.p,{children:\"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.\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"Instead, we can use MCP UI's \",(0,a.jsx)(e.strong,{children:\"render data\"}),\" to pass initial data directly to iframe components. This allows the server to provide all necessary context when creating UI resources.\"]}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"ts\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// Server provides initial data with the UI resource\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\tcontent: [\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\t{\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t\ttype: \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"resource\"}),\"'\",\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t\tresource: {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\t\turi: \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"iframeUrl\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"toString\"}),\"(),\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\t\t\tmimeType: \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"text/html\"}),\"'\",\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\t\t\tuiMetadata: {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\t\t\t\t\",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"initial-render-data\"}),\"'\",\": { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"bookmarks\"}),\" },\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t\t\t\t},\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t\t\t},\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"\t\t},\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"\t],\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// Client receives data as soon as it emits the `ui-lifecycle-iframe-ready` event\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"window\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"addEventListener\"}),\"(\",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"message\"}),\"'\",\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"handleMessage\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"event\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"MessageEvent\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"event\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"data\"}),\"?.\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"type\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"!==\"}),\" \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"ui-lifecycle-iframe-render-data\"}),\"'\",\") \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"event\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"data\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"error\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// event.data.error... handle it\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",children:[\"\t} \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"else\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"bookmarks\"}),\" } \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"event\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"data\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"payload\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// do stuff with this\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",children:[\"\t}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",children:[\"})\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[\"You need to implement render data for the entry viewer. The server should pass the entry data via \",(0,a.jsx)(e.code,{children:\"uiMetadata\"}),\", and the client should use \",(0,a.jsx)(e.code,{children:\"waitForRenderData\"}),\" to receive it.\"]}),`\n`,(0,a.jsxs)(e.p,{children:[\"Your implementation of \",(0,a.jsx)(e.code,{children:\"waitForRenderData\"}),\" should be a little more complete. If you need help, your AI assistant can help you with that! Just ask it!\"]}),`\n`,(0,a.jsxs)(e.p,{children:[\"\\u{1F4DC} \",(0,a.jsx)(e.a,{href:\"https://mcpui.dev/guide/embeddable-ui#passing-render-data-to-the-iframe\",children:\"Passing Render Data to the iframe\"})]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(d,{...n})}):d(n)}return N(w);})();\n;return Component;",[],{"_9":412,"_412":413},{"_9":412,"_416":437,"_160":161},6042,"https://stackblitz.com/github/epicweb-dev/mcp-ui/tree/main/exercises/05.advanced/02.problem.render-data?title=Render+Data+%28problem%29",{"_20":107,"_119":372,"_393":440,"_22":108,"_24":109,"_395":441,"_408":442,"_410":443,"_414":444,"_418":446,"_237":267,"_239":257,"_9":266,"_429":-5},"02.solution.render-data","var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var _=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),j=(e,n)=>{for(var r in n)a(e,r,{get:n[r],enumerable:!0})},s=(e,n,r,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of f(n))!x.call(e,o)&&o!==r&&a(e,o,{get:()=>n[o],enumerable:!(c=p(n,o))||c.enumerable});return e};var w=(e,n,r)=>(r=e!=null?u(h(e)):{},s(n||!e||!e.__esModule?a(r,\"default\",{value:e,enumerable:!0}):r,e)),y=e=>s(a({},\"__esModule\",{value:!0}),e);var d=_((C,i)=>{i.exports=_jsx_runtime});var M={};j(M,{default:()=>m,frontmatter:()=>v});var t=w(d()),v=void 0;function l(e){let n={h1:\"h1\",p:\"p\",...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{children:\"Render Data\"}),`\n`,(0,t.jsx)(n.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} 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.\"}),`\n`,(0,t.jsx)(n.p,{children:\"Well done!\"})]})}function m(e={}){let{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(l,{...e})}):l(e)}return y(M);})();\n;return Component;",[],{"_9":412,"_412":413},{"_9":412,"_416":445,"_160":161},7042,"https://stackblitz.com/github/epicweb-dev/mcp-ui/tree/main/exercises/05.advanced/02.solution.render-data?title=Render+Data+%28solution%29",[448,452],{"_20":95,"_119":370,"_393":406,"_22":96,"_24":97,"_395":407,"_408":449,"_410":450,"_414":451,"_418":419,"_237":267,"_239":238,"_9":236,"_420":99},[],{"_9":412,"_412":413},{"_9":412,"_416":417,"_160":161},{"_20":103,"_119":372,"_393":432,"_22":104,"_24":105,"_395":433,"_408":453,"_410":454,"_414":455,"_418":438,"_237":267,"_239":257,"_9":236,"_420":107},[],{"_9":412,"_412":413},{"_9":412,"_416":437,"_160":161},[457,461],{"_20":99,"_119":370,"_393":422,"_22":100,"_24":101,"_395":423,"_408":458,"_410":459,"_414":460,"_418":428,"_237":267,"_239":238,"_9":266,"_429":-5},[],{"_9":412,"_412":413},{"_9":412,"_416":427,"_160":161},{"_20":107,"_119":372,"_393":440,"_22":108,"_24":109,"_395":441,"_408":462,"_410":463,"_414":464,"_418":446,"_237":267,"_239":257,"_9":266,"_429":-5},[],{"_9":412,"_412":413},{"_9":412,"_416":445,"_160":161},"exerciseFormEmbedUrl","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234=MCP%20UI%20%F0%9F%AA%9F&entry.428900931=Advanced","epicVideoInfosPromise",["P",468],"exerciseFinished",{"_471":472,"_24":473},"file","/myapp/workshop-content/exercises/05.advanced/FINISHED.mdx","exercises/05.advanced/FINISHED.mdx","prevStepLink",{"_476":477,"_478":479},"to","/exercise/05/02/solution","aria-label","Render Data (solution)","nextStepLink",{"_476":482,"_478":483},"/finished","Finished! 🎉","actionData","errors"]

05. Advanced/Elaboration