[{"_1":2,"_519":-5,"_520":-5},"loaderData",{"_3":4,"_300":301,"_397":398},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_102":103,"_106":107,"_108":105,"_109":110,"_165":112,"_166":114,"_115":116,"_167":168,"_189":190,"_214":-5,"_215":-5,"_216":217},"userId",{"_7":8,"_9":10},"id","z240rfpmf27w7sxuhxu9u6c1","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],{"_20":21,"_22":23,"_24":25},"name","01.01.problem","fullPath","/myapp/workshop-content/exercises/01.advanced-tools/01.problem.annotations","relativePath","exercises/01.advanced-tools/01.problem.annotations",{"_20":27,"_22":28,"_24":29},"01.01.solution","/myapp/workshop-content/exercises/01.advanced-tools/01.solution.annotations","exercises/01.advanced-tools/01.solution.annotations",{"_20":31,"_22":32,"_24":33},"01.02.problem","/myapp/workshop-content/exercises/01.advanced-tools/02.problem.structured","exercises/01.advanced-tools/02.problem.structured",{"_20":35,"_22":36,"_24":37},"01.02.solution","/myapp/workshop-content/exercises/01.advanced-tools/02.solution.structured","exercises/01.advanced-tools/02.solution.structured",{"_20":39,"_22":40,"_24":41},"02.01.problem","/myapp/workshop-content/exercises/02.elicitation/01.problem","exercises/02.elicitation/01.problem",{"_20":43,"_22":44,"_24":45},"02.01.solution","/myapp/workshop-content/exercises/02.elicitation/01.solution","exercises/02.elicitation/01.solution",{"_20":47,"_22":48,"_24":49},"03.01.problem","/myapp/workshop-content/exercises/03.sampling/01.problem.simple","exercises/03.sampling/01.problem.simple",{"_20":51,"_22":52,"_24":53},"03.01.solution","/myapp/workshop-content/exercises/03.sampling/01.solution.simple","exercises/03.sampling/01.solution.simple",{"_20":55,"_22":56,"_24":57},"03.02.problem","/myapp/workshop-content/exercises/03.sampling/02.problem.advanced","exercises/03.sampling/02.problem.advanced",{"_20":59,"_22":60,"_24":61},"03.02.solution","/myapp/workshop-content/exercises/03.sampling/02.solution.advanced","exercises/03.sampling/02.solution.advanced",{"_20":63,"_22":64,"_24":65},"04.01.problem","/myapp/workshop-content/exercises/04.long-running-tasks/01.problem.progress","exercises/04.long-running-tasks/01.problem.progress",{"_20":67,"_22":68,"_24":69},"04.01.solution","/myapp/workshop-content/exercises/04.long-running-tasks/01.solution.progress","exercises/04.long-running-tasks/01.solution.progress",{"_20":71,"_22":72,"_24":73},"04.02.problem","/myapp/workshop-content/exercises/04.long-running-tasks/02.problem.cancellation","exercises/04.long-running-tasks/02.problem.cancellation",{"_20":75,"_22":76,"_24":77},"04.02.solution","/myapp/workshop-content/exercises/04.long-running-tasks/02.solution.cancellation","exercises/04.long-running-tasks/02.solution.cancellation",{"_20":79,"_22":80,"_24":81},"05.01.problem","/myapp/workshop-content/exercises/05.changes/01.problem.list-changed","exercises/05.changes/01.problem.list-changed",{"_20":83,"_22":84,"_24":85},"05.01.solution","/myapp/workshop-content/exercises/05.changes/01.solution.list-changed","exercises/05.changes/01.solution.list-changed",{"_20":87,"_22":88,"_24":89},"05.02.problem","/myapp/workshop-content/exercises/05.changes/02.problem.resources-list-changed","exercises/05.changes/02.problem.resources-list-changed",{"_20":91,"_22":92,"_24":93},"05.02.solution","/myapp/workshop-content/exercises/05.changes/02.solution.resources-list-changed","exercises/05.changes/02.solution.resources-list-changed",{"_20":95,"_22":96,"_24":97},"05.03.problem","/myapp/workshop-content/exercises/05.changes/03.problem.subscriptions","exercises/05.changes/03.problem.subscriptions",{"_20":99,"_22":100,"_24":101},"05.03.solution","/myapp/workshop-content/exercises/05.changes/03.solution.subscriptions","exercises/05.changes/03.solution.subscriptions","repoUpdates",{"_104":105},"updatesAvailable",false,"unmutedNotifications",[],"exerciseChanges","workshopConfig",{"_111":112,"_113":114,"_115":116,"_122":123,"_135":136,"_137":138,"_139":140,"_141":142,"_150":151,"_156":157,"_159":160,"_161":162,"_163":164},"title","Advanced MCP Features 🐡","subtitle","Dive deeper into the Model Context Protocol","instructor",{"_20":117,"_118":119,"_120":121},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":-7},"host","www.epicai.pro","displayName","EpicAI.pro","displayNameShort","Epic AI","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/advanced-mcp-features","githubRoot","https://github.com/epicweb-dev/advanced-mcp-features/tree/main","stackBlitzConfig",{"_143":144,"_145":146,"_147":148,"_149":146},"view","editor","hidedevtools","1","terminalHeight","0","hideNavigation","forms",{"_152":153,"_154":155},"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",{"_158":16},"enabled","initialRoute","/","notifications",[],"sidecarProcesses",{},"workshopTitle","workshopSubtitle","ENV",{"_169":170,"_171":172,"_173":174,"_175":138,"_176":140,"_177":16,"_178":179,"_180":181,"_182":183,"_184":16,"_185":186,"_187":188},"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.20.6","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","8989cbe7137daf8cb3c5153efc84a5be4a09ba0eecd1cbab557fdf387a112574","EPICSHOP_IS_PUBLISHED","SENTRY_DSN","https://cd51fbf4ca0834f7b3529a478a8ece4c@o913766.ingest.us.sentry.io/4509630082252800","SENTRY_PROJECT_ID","4509630082252800","requestInfo",{"_191":192,"_193":194,"_195":196,"_197":198,"_199":198,"_200":201,"_208":209,"_210":211,"_212":160,"_213":16},"protocol","http:","hostname","advanced-mcp-features.epicai.pro","port","","origin","http://advanced-mcp-features.epicai.pro","domain","hints",{"_202":203,"_204":205,"_206":207},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/05/finished","session",{"_202":-5},"separator","online","toast","confettiId","presence",{"_218":219},"users",[220,238,249,257,266,272,278,283,287,292,296],{"_7":221,"_222":16,"_223":224,"_225":226,"_20":227,"_228":229},"bd681d7a-5d37-453f-97ff-28b768da6d22","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/2520fa2313ab56da3291788c6e4b192b?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/2520fa2313ab56da3291788c6e4b192b?size=512&default=identicon","Queen","location",{"_165":230,"_197":231,"_154":232},"React Fundamentals ⚛","http://localhost:5639",{"_9":233,"_234":235,"_236":237},"problem","exerciseNumber",7,"stepNumber",4,{"_7":239,"_222":16,"_223":240,"_225":241,"_20":242,"_228":243},"9c5166f4-0db4-4289-9743-a3c94707aef6","https://www.gravatar.com/avatar/ef85a0ef36a3a03cd9071957077294a8?size=64&default=identicon","https://www.gravatar.com/avatar/ef85a0ef36a3a03cd9071957077294a8?size=512&default=identicon","Jacob Silverman",{"_165":244,"_197":231,"_154":245},"React Performance ⚡",{"_9":246,"_234":247,"_236":248},"solution",5,1,{"_7":250,"_222":16,"_223":251,"_225":252,"_20":253,"_228":254},"49c59933-917f-43a7-8797-a3d1534eec46","https://www.gravatar.com/avatar/a14fdd481bbaea1750d779e3affedb37?size=64&default=identicon","https://www.gravatar.com/avatar/a14fdd481bbaea1750d779e3affedb37?size=512&default=identicon","dm",{"_165":255,"_197":231,"_154":256},"MCP Fundamentals 🧱",{"_234":247},{"_7":258,"_222":16,"_223":259,"_225":260,"_20":261,"_228":262},"25b6778d-3b9b-42e2-83ce-f5960f6c04e0","https://cdn.discordapp.com/avatars/732214093628440595/e0bac4e9fd70f50a8b985650050fb2b1.png?size=64","https://cdn.discordapp.com/avatars/732214093628440595/e0bac4e9fd70f50a8b985650050fb2b1.png?size=512","MUHAMMAD ABDULLAH",{"_165":263,"_197":264,"_154":265},"Advanced React APIs 🔥","http://192.168.0.102:5639",{"_9":233,"_234":235,"_236":248},{"_7":267,"_228":268},"k2cxl6svyfh27dse7ljdz3dk",{"_165":269,"_197":231,"_154":270},"React Hooks 🎣",{"_9":233,"_234":271,"_236":248},6,{"_7":273,"_228":274},"anp35lwlxfa152wkqtsmymd4",{"_165":275,"_197":231,"_154":276},"React Suspense 🔀",{"_234":277},2,{"_7":279,"_228":280},"ls9143d908up4s2ew2p587k4",{"_165":255,"_197":281,"_154":282},"http://mcp-fundamentals.epicai.pro",{"_234":248},{"_7":284,"_228":285},"fzsbp7p5tpn1nicccurp73cm",{"_165":263,"_197":231,"_154":286},{"_9":233,"_234":248,"_236":248},{"_7":288,"_228":289},"h2iw1h6dvtibd27dfbct2ub6",{"_165":244,"_197":290,"_154":291},"http://performance.epicreact.dev",{"_9":246,"_234":247,"_236":277},{"_7":293,"_228":294},"klhwv8y8ncef1dyh5gbkcryy",{"_165":263,"_197":231,"_154":295},{"_9":233,"_234":248,"_236":248},{"_7":297,"_228":298},"vf5zsrtnsfx2gs369uangadf",{"_165":112,"_197":198,"_154":299},{"_234":247,"_236":-5,"_9":-5},"routes/_app+/_layout",{"_165":112,"_302":303,"_393":394,"_396":105},"exercises",[304,324,335,353,370],{"_234":248,"_111":305,"_306":307,"_312":313,"_316":317},"Advanced Tools","solutions",[308,310],{"_236":248,"_111":309,"_20":27},"Annotations",{"_236":277,"_111":311,"_20":35},"Structured Output","problems",[314,315],{"_236":248,"_111":309,"_20":21},{"_236":277,"_111":311,"_20":31},"steps",[318,321],{"_236":248,"_111":309,"_20":21,"_233":319,"_246":320},{"_20":21,"_111":309},{"_20":27,"_111":309},{"_236":277,"_111":311,"_20":31,"_233":322,"_246":323},{"_20":31,"_111":311},{"_20":35,"_111":311},{"_234":277,"_111":325,"_306":326,"_312":329,"_316":331},"Elicitation",[327],{"_236":248,"_111":328,"_20":43},"Elicit Confirmation",[330],{"_236":248,"_111":328,"_20":39},[332],{"_236":248,"_111":328,"_20":39,"_233":333,"_246":334},{"_20":39,"_111":328},{"_20":43,"_111":328},{"_234":336,"_111":337,"_306":338,"_312":343,"_316":346},3,"Sampling",[339,341],{"_236":248,"_111":340,"_20":51},"Simple Sampling",{"_236":277,"_111":342,"_20":59},"Advanced Sampling Prompt",[344,345],{"_236":248,"_111":340,"_20":47},{"_236":277,"_111":342,"_20":55},[347,350],{"_236":248,"_111":340,"_20":47,"_233":348,"_246":349},{"_20":47,"_111":340},{"_20":51,"_111":340},{"_236":277,"_111":342,"_20":55,"_233":351,"_246":352},{"_20":55,"_111":342},{"_20":59,"_111":342},{"_234":237,"_111":354,"_306":355,"_312":360,"_316":363},"Long Running Tasks",[356,358],{"_236":248,"_111":357,"_20":67},"Progress Updates",{"_236":277,"_111":359,"_20":75},"Cancellation",[361,362],{"_236":248,"_111":357,"_20":63},{"_236":277,"_111":359,"_20":71},[364,367],{"_236":248,"_111":357,"_20":63,"_233":365,"_246":366},{"_20":63,"_111":357},{"_20":67,"_111":357},{"_236":277,"_111":359,"_20":71,"_233":368,"_246":369},{"_20":71,"_111":359},{"_20":75,"_111":359},{"_234":247,"_111":371,"_306":372,"_312":379,"_316":383},"Changes",[373,375,377],{"_236":248,"_111":374,"_20":83},"List Changed",{"_236":277,"_111":376,"_20":91},"Resource Template List Changed",{"_236":336,"_111":378,"_20":99},"Subscriptions",[380,381,382],{"_236":248,"_111":374,"_20":79},{"_236":277,"_111":376,"_20":87},{"_236":336,"_111":378,"_20":95},[384,387,390],{"_236":248,"_111":374,"_20":79,"_233":385,"_246":386},{"_20":79,"_111":374},{"_20":83,"_111":374},{"_236":277,"_111":376,"_20":87,"_233":388,"_246":389},{"_20":87,"_111":376},{"_20":91,"_111":376},{"_236":336,"_111":378,"_20":95,"_233":391,"_246":392},{"_20":95,"_111":378},{"_20":99,"_111":378},"playground",{"_395":-5,"_234":-2,"_236":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_399":400,"_165":112,"_154":401,"_500":501,"_502":503,"_504":505,"_509":510,"_515":516},"articleId","workshop-advanced-mcp-features-5-finished",{"_22":402,"_234":247,"_403":404,"_111":371,"_405":406,"_407":408,"_409":410,"_411":412,"_316":413,"_312":474,"_306":487},"/myapp/workshop-content/exercises/05.changes","dirName","05.changes","instructionsCode","var Component=(()=>{var m=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var t in e)l(n,t,{get:e[t],enumerable:!0})},i=(n,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of b(e))!y.call(n,s)&&s!==t&&l(n,s,{get:()=>e[s],enumerable:!(r=p(e,s))||r.enumerable});return n};var u=(n,e,t)=>(t=n!=null?m(x(n)):{},i(e||!n||!n.__esModule?l(t,\"default\",{value:n,enumerable:!0}):t,n)),k=n=>i(l({},\"__esModule\",{value:!0}),n);var d=g((z,o)=>{o.exports=_jsx_runtime});var v={};f(v,{default:()=>h,frontmatter:()=>w});var a=u(d()),w=void 0;function c(n){let e={a:\"a\",code:\"code\",div:\"div\",h1:\"h1\",h2:\"h2\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",span:\"span\",strong:\"strong\",ul:\"ul\",...n.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h1,{children:\"Changes\"}),`\n`,(0,a.jsx)(e.p,{children:\"In a web application, the buttons, links, and data that you see change based on the context. Whether the user is currently logged in, whether there is any data available, what role the user has, etc. MCP servers are no different. The information and tools they provide can change at any time.\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"MCP provides a robust system for \",(0,a.jsx)(e.strong,{children:\"notifying clients about changes\"}),\" so that UIs and agents can stay in sync with the server's current capabilities and data.\"]}),`\n`,(0,a.jsx)(e.p,{children:\"This exercise will teach you how to implement and respond to change notifications in MCP, including:\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.strong,{children:\"list_changed notifications\"}),\" for tools, prompts, and resources\"]}),`\n`,(0,a.jsx)(e.li,{children:\"Special handling for resource template list changes\"}),`\n`,(0,a.jsx)(e.li,{children:\"Resource update notifications and subscriptions\"}),`\n`,(0,a.jsx)(e.li,{children:\"Recommended practices for keeping clients and users up-to-date\"}),`\n`]}),`\n`,(0,a.jsx)(\"callout-info\",{children:(0,a.jsx)(e.p,{children:`Change notifications are essential for building responsive, real-time AI apps.\nThey let clients update menus, toolbars, and resource lists automatically.`})}),`\n`,(0,a.jsx)(e.hr,{}),`\n`,(0,a.jsx)(e.h2,{children:\"1. List Change (Tools, Prompts, and Resources)\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"Whenever the set of available tools, prompts, or resources changes, the server should send a \",(0,a.jsx)(e.code,{children:\"list_changed\"}),\" notification. This tells the client to refresh its list and fetch the latest definitions.\"]}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.strong,{children:\"Tools:\"}),\" If a tool is added, removed, or updated, send a \",(0,a.jsx)(e.code,{children:\"notifications/tools/list_changed\"}),\" request.\"]}),`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.strong,{children:\"Prompts:\"}),\" If a prompt is enabled, disabled, or updated, send a \",(0,a.jsx)(e.code,{children:\"notifications/prompts/list_changed\"}),\" request.\"]}),`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.strong,{children:\"Resources:\"}),\" If a static resource or resource template is registered, unregistered, or its metadata changes, send a \",(0,a.jsx)(e.code,{children:\"notifications/resources/list_changed\"}),\" request.\"]}),`\n`]}),`\n`,(0,a.jsx)(\"callout-success\",{children:(0,a.jsxs)(e.p,{children:[\"Clients that support \",(0,a.jsx)(e.code,{children:\"list_changed\"}),` can provide a seamless, always-up-to-date\nexperience for users, no manual refresh required!`]})}),`\n`,(0,a.jsx)(e.h4,{children:\"Example: Enabling/Disabling a Tool in Mission Control\"}),`\n`,(0,a.jsxs)(e.p,{children:['Suppose your space station operations console has a \"Dock Module\" tool that should only be available when a docking port is free. When a new port becomes available, enable the tool and send a ',(0,a.jsx)(e.code,{children:\"tools/list_changed\"}),\" notification. If all ports are occupied, disable the tool and notify again.\"]}),`\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:\"// Pseudocode\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"freeDockingPorts\"}),\".length \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\">\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"!\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"dockModuleTool\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"enabled\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"dockModuleTool\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"enable\"}),\"()\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"} \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"else\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"freeDockingPorts\"}),\".length \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"dockModuleTool\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"enabled\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"dockModuleTool\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"disable\"}),\"()\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[\"The TypeScript SDK automatically sends \",(0,a.jsx)(e.code,{children:\"list_changed\"}),\" notifications when tools are enabled or disabled. To avoid over-sending notifications, you should check whether the tool is already enabled or disabled before enabling or disabling it.\"]}),`\n`,(0,a.jsx)(e.h4,{children:\"Example: Resource List Change Notification\"}),`\n`,(0,a.jsx)(e.p,{children:\"When new experiment logs become available in the space station's research database:\"}),`\n`,(0,a.jsx)(e.pre,{\"data-filename\":\"server-notification.json\",\"data-nocopy\":\"\",\"data-line-numbers\":\"true\",\"data-lang\":\"json\",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:[\"{\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"jsonrpc\"}),'\"',\": \",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"2.0\"}),'\"',\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"method\"}),'\"',\": \",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"notifications/resources/list_changed\"}),'\"',`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:\"This tells the client that the available resources have changed, prompting it to refresh its resource list and discover new experiment logs.\"}),`\n`,(0,a.jsx)(e.h2,{children:\"2. Resource List Change (Templates and Expansions)\"}),`\n`,(0,a.jsx)(e.p,{children:`Resources are special because there's a difference between what the\nResourceTemplate \"expands\" into and whether that resource template is available\nin the first place:`}),`\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(--base0E)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"ingredientsResource\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"agent\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"server\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"registerResource\"}),\"(\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"ingredient\"}),\"'\",\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"new\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"ResourceTemplate\"}),\"(\",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"sandwich://ingredients/{id}\"}),\"'\",\", {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"4\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"list\"}),\": \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"async\"}),\" () \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"5\",children:[\"\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// what this returns can change as a result of database changes etc.\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"6\",children:[\"\t\t},\",`\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{\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\ttitle: \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Ingredient\"}),\"'\",\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\tdescription: \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"A single sandwich ingredient by ID\"}),\"'\",\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t},\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"async\"}),\" (\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"uri\"}),\", { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"id\"}),\" }) \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// ...\"}),`\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-highlight\":\"true\",\"data-line-number\":\"17\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// this can also change as a result of user's access\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"18\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"ingredientsResource\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"enable\"}),\"() \",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// or disable()\"}),`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[\"Resources in MCP can be either static (a single file, a database record) or dynamic via \",(0,a.jsx)(e.strong,{children:\"resource templates\"}),\" (e.g., a directory of files, a database table, or even a set of modules on a space station \\u{1F680}). Resource templates allow the server to expose a pattern or collection of resources that can change over time.\"]}),`\n`,(0,a.jsxs)(e.p,{children:[\"A \",(0,a.jsx)(e.code,{children:\"notifications/resources/list_changed\"}),\" notification (like the one in the example above) is sent when:\"]}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:\"A new resource template is enabled/disabled\"}),`\n`,(0,a.jsx)(e.li,{children:\"The set of expansions for a template changes (e.g., a new module docks, a new experiment log appears, or a file is added to a directory)\"}),`\n`,(0,a.jsx)(e.li,{children:\"The metadata for a resource or template changes (e.g., the title of a module changes)\"}),`\n`]}),`\n`,(0,a.jsx)(e.h2,{children:\"3. Resource Subscriptions (Updates to Specific URIs)\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"While \",(0,a.jsx)(e.code,{children:\"list_changed\"}),\" tells clients about changes in what resources are available, \",(0,a.jsx)(e.strong,{children:\"resource subscriptions\"}),\" are about changes to the content of a specific resource URI. Clients can subscribe to updates for a particular resource (e.g., a specific module or experiment log) and receive a \",(0,a.jsx)(e.code,{children:\"notifications/resources/updated\"}),\" notification when its content changes.\"]}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsxs)(e.li,{children:[\"Clients subscribe to resource URIs using the \",(0,a.jsx)(e.code,{children:\"subscribe\"}),\" capability\"]}),`\n`,(0,a.jsx)(e.li,{children:\"The server tracks subscriptions and notifies only interested clients\"}),`\n`]}),`\n`,(0,a.jsx)(e.h4,{children:\"Example: Subscribing to Module Status Updates\"}),`\n`,(0,a.jsx)(e.p,{children:\"A client wants to stay updated on a specific space station module:\"}),`\n`,(0,a.jsx)(e.pre,{\"data-filename\":\"client-request.json\",\"data-nocopy\":\"\",\"data-line-numbers\":\"true\",\"data-lang\":\"json\",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:[\"{\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"jsonrpc\"}),'\"',\": \",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"2.0\"}),'\"',\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"id\"}),'\"',\": \",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"1\"}),\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"method\"}),'\"',\": \",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"resources/subscribe\"}),'\"',\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"params\"}),'\"',\": { \",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"uri\"}),'\"',\": \",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"spacestation://modules/habitat-alpha\"}),'\"',\" }\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:\"When the module's status changes (e.g., a new experiment starts, or the module is undocked), the server sends:\"}),`\n`,(0,a.jsx)(e.pre,{\"data-filename\":\"server-notification-request.json\",\"data-nocopy\":\"\",\"data-line-numbers\":\"true\",\"data-lang\":\"json\",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:[\"{\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"jsonrpc\"}),'\"',\": \",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"2.0\"}),'\"',\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"method\"}),'\"',\": \",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"notifications/resources/updated\"}),'\"',\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"params\"}),'\"',\": {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"uri\"}),'\"',\": \",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"spacestation://modules/habitat-alpha\"}),'\"',\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"title\"}),'\"',\": \",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Habitat Alpha Module\"}),'\"',`\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:[\"}\",`\n`]})]})}),`\n`,(0,a.jsx)(\"callout-muted\",{children:(0,a.jsxs)(e.p,{children:[`Subscriptions are for updates to the content of a specific resource URI, not\nfor changes in the set of available resources. Use `,(0,a.jsx)(e.code,{children:\"list_changed\"}),` for the\nlatter.`]})}),`\n`,(0,a.jsx)(e.hr,{}),`\n`,(0,a.jsx)(e.h2,{children:\"Sequence Diagram\"}),`\n`,(0,a.jsx)(e.p,{children:\"This all might work a little bit like this:\"}),`\n`,(0,a.jsx)(e.div,{className:\"mermaid not-prose\",dangerouslySetInnerHTML:{__html:''}}),`\n`,(0,a.jsx)(e.h2,{children:\"References\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsxs)(e.li,{children:[\"\\u{1F4DC} \",(0,a.jsx)(e.a,{href:\"https://modelcontextprotocol.io/specification/2025-06-18/server/resources\",children:\"Server Spec: Resources\"})]}),`\n`,(0,a.jsxs)(e.li,{children:[\"\\u{1F4DC} \",(0,a.jsx)(e.a,{href:\"https://modelcontextprotocol.io/specification/2025-06-18/server/tools\",children:\"Server Spec: Tools\"})]}),`\n`,(0,a.jsxs)(e.li,{children:[\"\\u{1F4DC} \",(0,a.jsx)(e.a,{href:\"https://modelcontextprotocol.io/specification/2025-06-18/server/prompts\",children:\"Server Spec: Prompts\"})]}),`\n`]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(c,{...n})}):c(n)}return k(v);})();\n;return Component;","finishedCode","var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var p=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),l=(n,e)=>{for(var o in e)s(n,o,{get:e[o],enumerable:!0})},a=(n,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of _(e))!j.call(n,r)&&r!==o&&s(n,r,{get:()=>e[r],enumerable:!(c=u(e,r))||c.enumerable});return n};var w=(n,e,o)=>(o=n!=null?d(f(n)):{},a(e||!n||!n.__esModule?s(o,\"default\",{value:n,enumerable:!0}):o,n)),C=n=>a(s({},\"__esModule\",{value:!0}),n);var m=p((y,i)=>{i.exports=_jsx_runtime});var g={};l(g,{default:()=>x,frontmatter:()=>M});var t=w(m()),M=void 0;function h(n){let e={h1:\"h1\",p:\"p\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{children:\"Changes\"}),`\n`,(0,t.jsx)(e.p,{children:\"Great job on this exercise. You now know how to make dynamic MCP servers.\"})]})}function x(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(h,{...n})}):h(n)}return C(g);})();\n;return Component;","instructionsEpicVideoEmbeds",[],"finishedEpicVideoEmbeds",[],[414,440,457],{"_236":248,"_233":415,"_246":431},{"_20":79,"_111":374,"_403":416,"_22":80,"_24":81,"_405":417,"_418":419,"_420":421,"_424":425,"_428":429,"_234":247,"_236":248,"_9":233,"_430":83},"01.problem.list-changed","var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),f=(a,e)=>{for(var s in e)r(a,s,{get:e[s],enumerable:!0})},t=(a,e,s,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of m(e))!y.call(a,l)&&l!==s&&r(a,l,{get:()=>e[l],enumerable:!(o=b(e,l))||o.enumerable});return a};var k=(a,e,s)=>(s=a!=null?p(u(a)):{},t(e||!a||!a.__esModule?r(s,\"default\",{value:a,enumerable:!0}):s,a)),g=a=>t(r({},\"__esModule\",{value:!0}),a);var i=v((E,c)=>{c.exports=_jsx_runtime});var w={};f(w,{default:()=>h,frontmatter:()=>N});var n=k(i()),N=void 0;function d(a){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...a.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"List Changed\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} When people use the Epic Me journal app, they expect the interface to always reflect what's possible right now. If a new journaling prompt becomes available, or a feature is temporarily disabled, users want the UI to update instantly. No confusion, no stale buttons, just a smooth, up-to-date experience.\"}),`\n`,(0,n.jsx)(e.p,{children:\"That's why it's so important for our MCP server to notify the client whenever the set of available prompts, tools, or resources changes. This allows the client app to feel alive and responsive, and ensures users always see the right options for their current context, whether they're a first-time journaler or a seasoned reflection pro.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Let's look at an example of how this is done: imagine a smart vending machine that offers snacks based on the time of day. In the morning, it might offer coffee and bagels; in the afternoon, chips and soda. When the available snacks change, the server should notify the client so the snack menu updates automatically.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here's how you might enable list change notifications for prompts using the MCP SDK:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"ts\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"McpServer\"}),\" } \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"@modelcontextprotocol/sdk/server/mcp.js\"}),\"'\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"server\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"new\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"McpServer\"}),\"(\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t{\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\tname: \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"SnackBot\"}),\"'\",\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\tversion: \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"1.0.0\"}),\"'\",\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t},\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t{\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\tcapabilities: {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\t\tprompts: { listChanged: \",(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"true\"}),\" },\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// ...other capabilities\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t\t},\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"\t},\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\")\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// When the snack list changes, enable or disable prompts as needed\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"updateSnackPrompts\"}),\"() {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"isMorning\"}),\"()) {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"!\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"coffeePrompt\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"enabled\"}),\") \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"coffeePrompt\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"enable\"}),\"()\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"chipsPrompt\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"enabled\"}),\") \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"chipsPrompt\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"disable\"}),\"()\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",children:[\"\t} \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"else\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"!\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"chipsPrompt\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"enabled\"}),\") \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"chipsPrompt\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"enable\"}),\"()\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"coffeePrompt\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"enabled\"}),\") \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"coffeePrompt\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"disable\"}),\"()\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",children:[\"\t}\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsx)(\"callout-success\",{children:(0,n.jsxs)(e.p,{children:[\"The MCP SDK automatically sends \",(0,n.jsx)(e.code,{children:\"list_changed\"}),` notifications when you enable\nor disable prompts, so the client always knows when to refresh its list.`]})}),`\n`,(0,n.jsx)(e.p,{children:`This approach means users never see a \"Make Coffee\" button at 3pm, or a \"Get Chips\" option before breakfast. The UI stays in sync with what's actually available, making the experience feel smart and effortless.`}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F4DC} For more details, see the \",(0,n.jsx)(e.a,{href:\"https://modelcontextprotocol.io/specification/2025-06-18/server/prompts\",children:\"Server Spec: Prompts\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The MCP Inspector supports list change notifications, but \",(0,n.jsx)(e.a,{href:\"https://github.com/modelcontextprotocol/inspector/issues/592\",children:\"does not currently automatically refresh the UI when lists change\"}),\". So you'll want to rely on the tests for this one.\"]})]})}function h(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}return g(w);})();\n;return Component;","epicVideoEmbeds",[],"test",{"_9":422,"_422":423},"script","vitest","dev",{"_9":422,"_426":427,"_159":160},"portNumber",6041,"stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/advanced-mcp-features/tree/main/exercises/05.changes/01.problem.list-changed?view=editor&hidedevtools=1&terminalHeight=0&hideNavigation=1&title=List+Changed+%28problem%29","solutionName",{"_20":83,"_111":374,"_403":432,"_22":84,"_24":85,"_405":433,"_418":434,"_420":435,"_424":436,"_428":438,"_234":247,"_236":248,"_9":246,"_439":-5},"01.solution.list-changed","var Component=(()=>{var l=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),y=(n,e)=>{for(var o in e)i(n,o,{get:e[o],enumerable:!0})},a=(n,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!x.call(n,r)&&r!==o&&i(n,r,{get:()=>e[r],enumerable:!(s=u(e,r))||s.enumerable});return n};var w=(n,e,o)=>(o=n!=null?l(f(n)):{},a(e||!n||!n.__esModule?i(o,\"default\",{value:n,enumerable:!0}):o,n)),b=n=>a(i({},\"__esModule\",{value:!0}),n);var p=g((L,c)=>{c.exports=_jsx_runtime});var _={};y(_,{default:()=>h,frontmatter:()=>j});var t=w(p()),j=void 0;function d(n){let e={code:\"code\",h1:\"h1\",p:\"p\",...n.components},{NextDiffLink:o}=e;return o||k(\"NextDiffLink\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{children:\"List Changed\"}),`\n`,(0,t.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Fantastic progress! Our app now supports real-time updates for journaling\nprompts, thanks to the new `,(0,t.jsx)(e.code,{children:\"list_changed\"}),` notification capability. Whenever a\nprompt is enabled or disabled (like when a new journaling feature becomes\navailable or an old one is retired), the client is instantly notified and\ncan refresh its list. This means users always see the most relevant options,\nwith no confusion or stale choices lingering in the interface.`]}),`\n`,(0,t.jsx)(e.p,{children:\"Let's keep building on this momentum to make the experience even better!\"}),`\n`,(0,t.jsxs)(e.p,{children:[`\\u{1F9DD}\\u200D\\u2640\\uFE0F I'm applying the same pattern we used for prompts to resources and tools.\nIf you want extra practice, try it yourself\\u2014it's the same approach! Or\njust `,(0,t.jsx)(o,{children:\"check out my changes\"}),` if you'd rather skip\nahead.`]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(d,{...n})}):d(n)}function k(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return b(_);})();\n;return Component;",[],{"_9":422,"_422":423},{"_9":422,"_426":437,"_159":160},7041,"https://stackblitz.com/github/epicweb-dev/advanced-mcp-features/tree/main/exercises/05.changes/01.solution.list-changed?view=editor&hidedevtools=1&terminalHeight=0&hideNavigation=1&title=List+Changed+%28solution%29","problemName",{"_236":277,"_233":441,"_246":449},{"_20":87,"_111":376,"_403":442,"_22":88,"_24":89,"_405":443,"_418":444,"_420":445,"_424":446,"_428":448,"_234":247,"_236":277,"_9":233,"_430":91},"02.problem.resources-list-changed","var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),g=(a,e)=>{for(var s in e)l(a,s,{get:e[s],enumerable:!0})},o=(a,e,s,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!y.call(a,r)&&r!==s&&l(a,r,{get:()=>e[r],enumerable:!(t=u(e,r))||t.enumerable});return a};var f=(a,e,s)=>(s=a!=null?p(b(a)):{},o(e||!a||!a.__esModule?l(s,\"default\",{value:a,enumerable:!0}):s,a)),k=a=>o(l({},\"__esModule\",{value:!0}),a);var i=v((j,c)=>{c.exports=_jsx_runtime});var N={};g(N,{default:()=>h,frontmatter:()=>w});var n=f(i()),w=void 0;function d(a){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...a.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Resource Template List Changed\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} When people use our EpicMe journaling app, they expect the list of available resources (like journal entries, tags, or even videos) to always reflect what's actually possible right now. Imagine a user just added a new video reflection or created a fresh tag for their latest entry. They want to see those options appear instantly, without needing to refresh or wonder if something is out of sync.\"}),`\n`,(0,n.jsx)(e.p,{children:\"That's why it's so important for our MCP server to notify the client whenever the set of available resources changes, especially when those resources are managed by templates that can expand or contract as the underlying data changes. This keeps the UI feeling alive and responsive, so users always see the right options for their current context, whether they're a first-time journaler or a seasoned reflection pro.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Let's look at an example of how this is done:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"ts\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"McpServer\"}),\" } \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"@modelcontextprotocol/sdk/server/mcp.js\"}),\"'\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"server\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"new\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"McpServer\"}),\"(\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t{ name: \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"DuckCollector\"}),\"'\",\", version: \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"1.0.0\"}),\"'\",\" },\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t{\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\tcapabilities: {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\tresources: { listChanged: \",(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"true\"}),\" },\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// ...other capabilities\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\t},\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t},\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\")\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// Whenever the ducky or tag list changes, notify the client\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"updateResourceTemplates\"}),\"() {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// ...logic to check for changes...\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"16\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"server\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"sendResourceListChanged\"}),\"()\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsx)(\"callout-success\",{children:(0,n.jsxs)(e.p,{children:[`The MCP SDK makes it easy to keep resource lists in sync. Just call\n`,(0,n.jsx)(e.code,{children:\"sendResourceListChanged()\"}),` whenever your templates expand (items are added),\ncontract (items are removed), or change metadata.`]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"To make this work in our app, you'll want to subscribe to changes in your database and any other dynamic sources (like video uploads). When something changes, call \",(0,n.jsx)(e.code,{children:\"sendResourceListChanged()\"}),\" so the client can refresh its resource lists and show users the latest and greatest.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F4DC} For more details, see the \",(0,n.jsx)(e.a,{href:\"https://modelcontextprotocol.io/specification/2025-06-18/server/resources\",children:\"Server Spec: Resources\"}),\".\"]}),`\n`,(0,n.jsx)(e.p,{children:\"The goal is to make resource management feel effortless and immediate for users, so they can focus on their journaling adventures\\u2014not on refreshing the page.\"})]})}function h(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}return k(N);})();\n;return Component;",[],{"_9":422,"_422":423},{"_9":422,"_426":447,"_159":160},6042,"https://stackblitz.com/github/epicweb-dev/advanced-mcp-features/tree/main/exercises/05.changes/02.problem.resources-list-changed?view=editor&hidedevtools=1&terminalHeight=0&hideNavigation=1&title=Resource+Template+List+Changed+%28problem%29",{"_20":91,"_111":376,"_403":450,"_22":92,"_24":93,"_405":451,"_418":452,"_420":453,"_424":454,"_428":456,"_234":247,"_236":277,"_9":246,"_439":-5},"02.solution.resources-list-changed","var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},i=(t,e,r,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of f(e))!g.call(t,s)&&s!==r&&o(t,s,{get:()=>e[s],enumerable:!(a=p(e,s))||a.enumerable});return t};var _=(t,e,r)=>(r=t!=null?u(m(t)):{},i(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),j=t=>i(o({},\"__esModule\",{value:!0}),t);var d=w((C,c)=>{c.exports=_jsx_runtime});var y={};x(y,{default:()=>h,frontmatter:()=>k});var n=_(d()),k=void 0;function l(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Resource Template List Changed\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} Outstanding work! Our app now keeps the list of available resources\\u2014like journal entries, tags, and videos\\u2014perfectly in sync with what's actually possible for the user, thanks to the new \",(0,n.jsx)(e.code,{children:\"list_changed\"}),\" notification for resource templates. Now, whenever a user adds a new video reflection, creates a fresh tag, or updates their journal, the UI updates instantly.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Let's keep going!\"})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}return j(y);})();\n;return Component;",[],{"_9":422,"_422":423},{"_9":422,"_426":455,"_159":160},7042,"https://stackblitz.com/github/epicweb-dev/advanced-mcp-features/tree/main/exercises/05.changes/02.solution.resources-list-changed?view=editor&hidedevtools=1&terminalHeight=0&hideNavigation=1&title=Resource+Template+List+Changed+%28solution%29",{"_236":336,"_233":458,"_246":466},{"_20":95,"_111":378,"_403":459,"_22":96,"_24":97,"_405":460,"_418":461,"_420":462,"_424":463,"_428":465,"_234":247,"_236":336,"_9":233,"_430":99},"03.problem.subscriptions","var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var a in e)l(n,a,{get:e[a],enumerable:!0})},o=(n,e,a,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!y.call(n,r)&&r!==a&&l(n,r,{get:()=>e[r],enumerable:!(c=b(e,r))||c.enumerable});return n};var k=(n,e,a)=>(a=n!=null?p(m(n)):{},o(e||!n||!n.__esModule?l(a,\"default\",{value:n,enumerable:!0}):a,n)),N=n=>o(l({},\"__esModule\",{value:!0}),n);var i=v((w,t)=>{t.exports=_jsx_runtime});var S={};f(S,{default:()=>h,frontmatter:()=>g});var s=k(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,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.h1,{children:\"Subscriptions\"}),`\n`,(0,s.jsx)(e.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} When people use our EpicMe journaling MCP, they want the LLM they're using to always have the latest version of their jounraling data. Exposing subscriptions for resources (like a particular entry, tag, or video) allows clients to be notified of changes to specific resources the LLM is using in its context or the client may be using for other purposes.\"}),`\n`,(0,s.jsxs)(e.p,{children:[\"To make this possible, our MCP server needs to support \",(0,s.jsx)(e.strong,{children:\"resource subscriptions\"}),\". This means clients can subscribe to updates for specific resources, and the server will notify them when those resources change.\"]}),`\n`,(0,s.jsxs)(e.p,{children:[\"The key to enabling this with the MCP SDK is the \",(0,s.jsx)(e.code,{children:\"setRequestHandler\"}),\" method. This lets the server listen for subscription requests from clients and track which URIs they're interested in. When something changes, the server can send a notification to just those clients.\"]}),`\n`,(0,s.jsx)(e.p,{children:\"Here's an example:\"}),`\n`,(0,s.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"ts\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,s.jsxs)(e.code,{children:[(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,s.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" {\",`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"SubscribeRequestSchema\"}),\",\",`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"UnsubscribeRequestSchema\"}),\",\",`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"} \",(0,s.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,s.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"@modelcontextprotocol/sdk/types.js\"}),\"'\",`\n`]}),(0,s.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:`\n`}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[(0,s.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"petSubscriptions\"}),\" \",(0,s.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,s.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"new\"}),\" \",(0,s.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Set\"}),\"<\",(0,s.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"string\"}),\">()\",`\n`]}),(0,s.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:`\n`}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[(0,s.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// NOTE: the server.server is how the MCP SDK exposes the underlying server\"}),`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[(0,s.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// instance for more advanced APIs like this one.\"}),`\n`]}),(0,s.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:`\n`}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[(0,s.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// Allow clients to subscribe to updates for a specific pet\"}),`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"server\"}),\".\",(0,s.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"server\"}),\".\",(0,s.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setRequestHandler\"}),\"(\",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"SubscribeRequestSchema\"}),\", \",(0,s.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"async\"}),\" ({ \",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"params\"}),\" }) \",(0,s.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"\t\",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"petSubscriptions\"}),\".\",(0,s.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"add\"}),\"(\",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"params\"}),\".\",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"uri\"}),\")\",`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"\t\",(0,s.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" {} \",(0,s.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// no specific response data is needed\"}),`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"})\",`\n`]}),(0,s.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:`\n`}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[(0,s.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// Allow clients to unsubscribe from updates\"}),`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",children:[(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"server\"}),\".\",(0,s.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"server\"}),\".\",(0,s.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setRequestHandler\"}),\"(\",`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:[\"\t\",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"UnsubscribeRequestSchema\"}),\",\",`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",children:[\"\t\",(0,s.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"async\"}),\" ({ \",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"params\"}),\" }) \",(0,s.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",children:[\"\t\t\",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"petSubscriptions\"}),\".\",(0,s.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"delete\"}),\"(\",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"params\"}),\".\",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"uri\"}),\")\",`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",children:[\"\t\t\",(0,s.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" {} \",(0,s.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// no specific response data is needed\"}),`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",children:[\"\t},\",`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",children:[\")\",`\n`]}),(0,s.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",children:`\n`}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",children:[(0,s.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// When a pet's status changes, notify subscribed clients\"}),`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",children:[(0,s.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,s.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"onPetStatusChange\"}),\"(\",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"petId\"}),(0,s.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,s.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"string\"}),\", \",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"newStatus\"}),(0,s.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,s.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"string\"}),\") {\",`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",children:[\"\t\",(0,s.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"uri\"}),\" \",(0,s.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",\"`\",(0,s.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"pethotel://pets/\"}),\"${\",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"petId\"}),\"}`\",`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",children:[\"\t\",(0,s.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"petSubscriptions\"}),\".\",(0,s.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"has\"}),\"(\",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"uri\"}),\")) {\",`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",children:[\"\t\t\",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"server\"}),\".\",(0,s.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"server\"}),\".\",(0,s.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"notification\"}),\"({\",`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",children:[\"\t\t\tmethod: \",\"'\",(0,s.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"notifications/resources/updated\"}),\"'\",\",\",`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",children:[\"\t\t\tparams: { \",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"uri\"}),\", title: \",\"`\",(0,s.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Pet \"}),\"${\",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"petId\"}),\"}\",(0,s.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\" status updated to \"}),\"${\",(0,s.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"newStatus\"}),\"}`\",\" },\",`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",children:[\"\t\t})\",`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",children:[\"\t}\",`\n`]}),(0,s.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",children:[\"}\",`\n`]})]})}),`\n`,(0,s.jsx)(e.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} In our journaling MCP, you'll want to use a similar pattern to let clients subscribe to updates for entries, tags, and videos. When any of these resources change, notify the right clients so their UI stays perfectly in sync.\"}),`\n`,(0,s.jsxs)(e.p,{children:[\"\\u{1F4DC} For more details on \",(0,s.jsx)(e.code,{children:\"setRequestHandler\"}),\" and subscriptions, see the \",(0,s.jsx)(e.a,{href:\"https://modelcontextprotocol.io/specification/2025-06-18/server/resources\",children:\"official MCP Server Spec: Resources\"}),\".\"]}),`\n`,(0,s.jsx)(e.p,{children:\"The goal is to make real-time updates feel effortless and automatic for users, so they can focus on their journaling\\u2014not on hitting the refresh button.\"}),`\n`,(0,s.jsxs)(e.p,{children:[\"The MCP Inspector supports subscriptions, but \",(0,s.jsx)(e.a,{href:\"https://github.com/modelcontextprotocol/inspector/issues/596\",children:\"does not currently automatically refresh the UI when a resource changes\"}),\". So you'll want to rely on the tests for this one.\"]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,s.jsx)(e,{...n,children:(0,s.jsx)(d,{...n})}):d(n)}return N(S);})();\n;return Component;",[],{"_9":422,"_422":423},{"_9":422,"_426":464,"_159":160},6043,"https://stackblitz.com/github/epicweb-dev/advanced-mcp-features/tree/main/exercises/05.changes/03.problem.subscriptions?view=editor&hidedevtools=1&terminalHeight=0&hideNavigation=1&title=Subscriptions+%28problem%29",{"_20":99,"_111":378,"_403":467,"_22":100,"_24":101,"_405":468,"_418":469,"_420":470,"_424":471,"_428":473,"_234":247,"_236":336,"_9":246,"_439":-5},"03.solution.subscriptions","var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),w=(n,e)=>{for(var r in e)a(n,r,{get:e[r],enumerable:!0})},s=(n,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!f.call(n,o)&&o!==r&&a(n,o,{get:()=>e[o],enumerable:!(i=d(e,o))||i.enumerable});return n};var x=(n,e,r)=>(r=n!=null?p(g(n)):{},s(e||!n||!n.__esModule?a(r,\"default\",{value:n,enumerable:!0}):r,n)),j=n=>s(a({},\"__esModule\",{value:!0}),n);var h=y((k,c)=>{c.exports=_jsx_runtime});var b={};w(b,{default:()=>l,frontmatter:()=>v});var t=x(h()),v=void 0;function u(n){let e={code:\"code\",h1:\"h1\",p:\"p\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{children:\"Subscriptions\"}),`\n`,(0,t.jsx)(e.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Way to go! We've just unlocked real-time updates for our users by enabling resource subscriptions. Now, whenever someone is working with a specific journal entry, tag, or video, the app can instantly notify them of any changes\\u2014no more stale data or manual refreshes. This means users always have the most up-to-date information at their fingertips, making their journaling experience seamless and trustworthy.\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"By supporting the \",(0,t.jsx)(e.code,{children:\"subscribe\"}),\" capability, we've ensured that our app feels alive and responsive, keeping users in sync with their most important content. This is a huge win for anyone who relies on timely, accurate updates\\u2014whether they're reflecting on their latest entry, organizing tags, or reviewing a video.\"]}),`\n`,(0,t.jsx)(e.p,{children:\"What a fantastic way to wrap up our journey through change notifications and real-time collaboration!\"})]})}function l(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(u,{...n})}):u(n)}return j(b);})();\n;return Component;",[],{"_9":422,"_422":423},{"_9":422,"_426":472,"_159":160},7043,"https://stackblitz.com/github/epicweb-dev/advanced-mcp-features/tree/main/exercises/05.changes/03.solution.subscriptions?view=editor&hidedevtools=1&terminalHeight=0&hideNavigation=1&title=Subscriptions+%28solution%29",[475,479,483],{"_20":79,"_111":374,"_403":416,"_22":80,"_24":81,"_405":417,"_418":476,"_420":477,"_424":478,"_428":429,"_234":247,"_236":248,"_9":233,"_430":83},[],{"_9":422,"_422":423},{"_9":422,"_426":427,"_159":160},{"_20":87,"_111":376,"_403":442,"_22":88,"_24":89,"_405":443,"_418":480,"_420":481,"_424":482,"_428":448,"_234":247,"_236":277,"_9":233,"_430":91},[],{"_9":422,"_422":423},{"_9":422,"_426":447,"_159":160},{"_20":95,"_111":378,"_403":459,"_22":96,"_24":97,"_405":460,"_418":484,"_420":485,"_424":486,"_428":465,"_234":247,"_236":336,"_9":233,"_430":99},[],{"_9":422,"_422":423},{"_9":422,"_426":464,"_159":160},[488,492,496],{"_20":83,"_111":374,"_403":432,"_22":84,"_24":85,"_405":433,"_418":489,"_420":490,"_424":491,"_428":438,"_234":247,"_236":248,"_9":246,"_439":-5},[],{"_9":422,"_422":423},{"_9":422,"_426":437,"_159":160},{"_20":91,"_111":376,"_403":450,"_22":92,"_24":93,"_405":451,"_418":493,"_420":494,"_424":495,"_428":456,"_234":247,"_236":277,"_9":246,"_439":-5},[],{"_9":422,"_422":423},{"_9":422,"_426":455,"_159":160},{"_20":99,"_111":378,"_403":467,"_22":100,"_24":101,"_405":468,"_418":497,"_420":498,"_424":499,"_428":473,"_234":247,"_236":336,"_9":246,"_439":-5},[],{"_9":422,"_422":423},{"_9":422,"_426":472,"_159":160},"exerciseFormEmbedUrl","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234=Advanced%20MCP%20Features%20%F0%9F%90%A1&entry.428900931=Changes","epicVideoInfosPromise",["P",503],"exerciseFinished",{"_506":507,"_24":508},"file","/myapp/workshop-content/exercises/05.changes/FINISHED.mdx","exercises/05.changes/FINISHED.mdx","prevStepLink",{"_511":512,"_513":514},"to","/exercise/05/03/solution","aria-label","Subscriptions (solution)","nextStepLink",{"_511":517,"_513":518},"/finished","Finished! 🎉","actionData","errors"]

05. Changes/Elaboration