[{"data":1,"prerenderedAt":768},["ShallowReactive",2],{"navigation_docs":3,"-apps-csp-and-wiring":272,"-apps-csp-and-wiring-surround":763},[4,40,70,99,122,151,184,243],{"title":5,"path":6,"stem":7,"children":8,"page":39},"Getting Started","\u002Fgetting-started","1.getting-started",[9,14,19,24,29,34],{"title":10,"path":11,"stem":12,"icon":13},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-book-open",{"title":15,"path":16,"stem":17,"icon":18},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":20,"path":21,"stem":22,"icon":23},"Configuration","\u002Fgetting-started\u002Fconfiguration","1.getting-started\u002F3.configuration","i-lucide-settings",{"title":25,"path":26,"stem":27,"icon":28},"MCP Inspector","\u002Fgetting-started\u002Finspector","1.getting-started\u002F4.inspector","i-lucide-circuit-board",{"title":30,"path":31,"stem":32,"icon":33},"Connection","\u002Fgetting-started\u002Fconnection","1.getting-started\u002F5.connection","i-lucide-plug",{"title":35,"path":36,"stem":37,"icon":38},"Agent Skills","\u002Fgetting-started\u002Fagent-skills","1.getting-started\u002F6.agent-skills","i-lucide-sparkles",false,{"title":41,"path":42,"stem":43,"children":44,"page":39},"Tools","\u002Ftools","2.tools",[45,50,55,60,65],{"title":46,"path":47,"stem":48,"icon":49},"Overview","\u002Ftools\u002Foverview","2.tools\u002F0.overview","i-lucide-wrench",{"title":51,"path":52,"stem":53,"icon":54},"Schema, handler & returns","\u002Ftools\u002Fschema-handler","2.tools\u002F1.schema-handler","i-lucide-braces",{"title":56,"path":57,"stem":58,"icon":59},"Annotations & input examples","\u002Ftools\u002Fannotations","2.tools\u002F2.annotations","i-lucide-badge-info",{"title":61,"path":62,"stem":63,"icon":64},"Errors & caching","\u002Ftools\u002Ferrors-caching","2.tools\u002F3.errors-caching","i-lucide-shield",{"title":66,"path":67,"stem":68,"icon":69},"Groups, files & dynamic registration","\u002Ftools\u002Fgroups-organization","2.tools\u002F4.groups-organization","i-lucide-tags",{"title":71,"path":72,"stem":73,"children":74,"page":39},"Resources","\u002Fresources","3.resources",[75,79,84,89,94],{"title":46,"path":76,"stem":77,"icon":78},"\u002Fresources\u002Foverview","3.resources\u002F0.overview","i-lucide-package",{"title":80,"path":81,"stem":82,"icon":83},"Static resources & structure","\u002Fresources\u002Fstatic-and-structure","3.resources\u002F1.static-and-structure","i-lucide-file-stack",{"title":85,"path":86,"stem":87,"icon":88},"Templates & handlers","\u002Fresources\u002Ftemplates-and-handlers","3.resources\u002F2.templates-and-handlers","i-lucide-git-branch",{"title":90,"path":91,"stem":92,"icon":93},"Metadata, content & errors","\u002Fresources\u002Fcontent-metadata-errors","3.resources\u002F3.content-metadata-errors","i-lucide-layers",{"title":95,"path":96,"stem":97,"icon":98},"Groups & organization","\u002Fresources\u002Forganization","3.resources\u002F4.organization","i-lucide-folder-tree",{"title":100,"path":101,"stem":102,"children":103,"page":39},"Prompts","\u002Fprompts","4.prompts",[104,108,113,117],{"title":46,"path":105,"stem":106,"icon":107},"\u002Fprompts\u002Foverview","4.prompts\u002F0.overview","i-lucide-message-square",{"title":109,"path":110,"stem":111,"icon":112},"Authoring & structure","\u002Fprompts\u002Fauthoring","4.prompts\u002F1.authoring","i-lucide-pen-line",{"title":114,"path":115,"stem":116,"icon":93},"Input, handler & messages","\u002Fprompts\u002Finput-handler-messages","4.prompts\u002F2.input-handler-messages",{"title":118,"path":119,"stem":120,"icon":121},"Patterns & advanced","\u002Fprompts\u002Fpatterns-advanced","4.prompts\u002F3.patterns-advanced","i-lucide-line-chart",{"title":123,"path":124,"stem":125,"children":126,"page":39},"Handlers","\u002Fhandlers","5.handlers",[127,131,136,141,146],{"title":46,"path":128,"stem":129,"icon":130},"\u002Fhandlers\u002Foverview","5.handlers\u002F0.overview","i-lucide-server",{"title":132,"path":133,"stem":134,"icon":135},"Default & custom handlers","\u002Fhandlers\u002Fdefault-and-custom","5.handlers\u002F1.default-and-custom","i-lucide-toggle-left",{"title":137,"path":138,"stem":139,"icon":140},"Structure & options","\u002Fhandlers\u002Fstructure-and-options","5.handlers\u002F2.structure-and-options","i-lucide-sliders-horizontal",{"title":142,"path":143,"stem":144,"icon":145},"Examples & routing","\u002Fhandlers\u002Fexamples-routing","5.handlers\u002F3.examples-routing","i-lucide-route",{"title":147,"path":148,"stem":149,"icon":150},"Sharing & practices","\u002Fhandlers\u002Fsharing-practices","5.handlers\u002F4.sharing-practices","i-lucide-share-2",{"title":152,"path":153,"stem":154,"children":155,"page":39},"Apps","\u002Fapps","6.apps",[156,160,165,170,174,179],{"title":46,"path":157,"stem":158,"icon":159},"\u002Fapps\u002Foverview","6.apps\u002F0.overview","i-lucide-app-window",{"title":161,"path":162,"stem":163,"icon":164},"Authoring & defineMcpApp","\u002Fapps\u002Fauthoring","6.apps\u002F1.authoring","i-lucide-code-2",{"title":166,"path":167,"stem":168,"icon":169},"useMcpApp() bridge","\u002Fapps\u002Fuse-mcp-app","6.apps\u002F2.use-mcp-app","i-lucide-message-circle",{"title":171,"path":172,"stem":173,"icon":64},"CSP & build pipeline","\u002Fapps\u002Fcsp-and-wiring","6.apps\u002F3.csp-and-wiring",{"title":175,"path":176,"stem":177,"icon":178},"Testing & publishing","\u002Fapps\u002Ftesting-publishing","6.apps\u002F4.testing-publishing","i-lucide-rocket",{"title":180,"path":181,"stem":182,"icon":183},"Patterns & limits","\u002Fapps\u002Fpatterns-reference","6.apps\u002F5.patterns-reference","i-lucide-book-marked",{"title":185,"path":186,"stem":187,"children":188,"page":39},"Advanced Topics","\u002Fadvanced","7.advanced",[189,194,199,204,208,213,218,223,228,233,238],{"title":190,"path":191,"stem":192,"icon":193},"Custom Paths","\u002Fadvanced\u002Fcustom-paths","7.advanced\u002F1.custom-paths","i-lucide-folder",{"title":195,"path":196,"stem":197,"icon":198},"Logging","\u002Fadvanced\u002Flogging","7.advanced\u002F10.logging","i-lucide-scroll-text",{"title":200,"path":201,"stem":202,"icon":203},"MCP Apps Internals","\u002Fadvanced\u002Fmcp-apps-internals","7.advanced\u002F11.mcp-apps-internals","i-lucide-cog",{"title":205,"path":206,"stem":207,"icon":64},"Middleware","\u002Fadvanced\u002Fmiddleware","7.advanced\u002F2.middleware",{"title":209,"path":210,"stem":211,"icon":212},"TypeScript","\u002Fadvanced\u002Ftypescript","7.advanced\u002F3.typescript","i-lucide-type",{"title":214,"path":215,"stem":216,"icon":217},"Hooks","\u002Fadvanced\u002Fhooks","7.advanced\u002F4.hooks","i-lucide-webhook",{"title":219,"path":220,"stem":221,"icon":222},"MCP Evals","\u002Fadvanced\u002Fevals","7.advanced\u002F5.evals","i-lucide-flask-conical",{"title":224,"path":225,"stem":226,"icon":227},"Sessions","\u002Fadvanced\u002Fsessions","7.advanced\u002F6.sessions","i-lucide-database",{"title":229,"path":230,"stem":231,"icon":232},"Dynamic Definitions","\u002Fadvanced\u002Fdynamic-definitions","7.advanced\u002F7.dynamic-definitions","i-lucide-toggle-right",{"title":234,"path":235,"stem":236,"icon":237},"Code Mode","\u002Fadvanced\u002Fcode-mode","7.advanced\u002F8.code-mode","i-lucide-code",{"title":239,"path":240,"stem":241,"icon":242},"Elicitation","\u002Fadvanced\u002Felicitation","7.advanced\u002F9.elicitation","i-lucide-message-square-quote",{"title":244,"path":245,"stem":246,"children":247,"page":39},"Examples","\u002Fexamples","8.examples",[248,253,258,263,268],{"title":249,"path":250,"stem":251,"icon":252},"Authentication","\u002Fexamples\u002Fauthentication","8.examples\u002F1.authentication","i-lucide-shield-check",{"title":254,"path":255,"stem":256,"icon":257},"API Integration","\u002Fexamples\u002Fapi-integration","8.examples\u002F2.api-integration","i-lucide-globe",{"title":259,"path":260,"stem":261,"icon":262},"Common Patterns","\u002Fexamples\u002Fcommon-patterns","8.examples\u002F3.common-patterns","i-lucide-lightbulb",{"title":264,"path":265,"stem":266,"icon":267},"File Operations","\u002Fexamples\u002Ffile-operations","8.examples\u002F4.file-operations","i-lucide-file",{"title":269,"path":270,"stem":271,"icon":107},"Prompt Examples","\u002Fexamples\u002Fprompt-examples","8.examples\u002F5.prompt-examples",{"id":273,"title":171,"body":274,"description":754,"extension":755,"links":756,"meta":757,"navigation":758,"path":172,"seo":759,"stem":173,"__hash__":762},"docs\u002F6.apps\u002F3.csp-and-wiring.md",{"type":275,"value":276,"toc":750},"minimark",[277,282,291,309,312,554,565,574,636,647,651,662,692,695,737,746],[278,279,281],"h2",{"id":280},"csp-resource-allow-lists","CSP & Resource Allow-Lists",[283,284,285,286,290],"p",{},"The toolkit injects a ",[287,288,289],"strong",{},"conservative Content Security Policy"," into every app HTML. By default the iframe can:",[292,293,294,298,301],"ul",{},[295,296,297],"li",{},"Run only its own inline script.",[295,299,300],{},"Render images and styles only from the same response.",[295,302,303,304,308],{},"Talk over ",[305,306,307],"code",{},"postMessage"," to its parent host.",[283,310,311],{},"If your UI needs external assets or APIs, allow them explicitly:",[313,314,320],"pre",{"className":315,"code":316,"filename":317,"language":318,"meta":319,"style":319},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\ndefineMcpApp({\n  description: 'Pick a colour and preview a palette.',\n  csp: {\n    resourceDomains: ['https:\u002F\u002Fimages.unsplash.com'],\n    connectDomains: ['https:\u002F\u002Fapi.example.com'],\n  },\n  handler: async ({ base }) => ({ structuredContent: await $fetch('\u002Fapi\u002Fpalette', { query: { base } }) }),\n})\n\u003C\u002Fscript>\n","app\u002Fmcp\u002Fcolor-picker.vue","vue","",[305,321,322,357,371,392,403,426,447,453,536,544],{"__ignoreMap":319},[323,324,327,331,335,339,342,345,348,352,354],"span",{"class":325,"line":326},"line",1,[323,328,330],{"class":329},"sMK4o","\u003C",[323,332,334],{"class":333},"swJcz","script",[323,336,338],{"class":337},"spNyl"," setup",[323,340,341],{"class":337}," lang",[323,343,344],{"class":329},"=",[323,346,347],{"class":329},"\"",[323,349,351],{"class":350},"sfazB","ts",[323,353,347],{"class":329},[323,355,356],{"class":329},">\n",[323,358,360,364,368],{"class":325,"line":359},2,[323,361,363],{"class":362},"s2Zo4","defineMcpApp",[323,365,367],{"class":366},"sTEyZ","(",[323,369,370],{"class":329},"{\n",[323,372,374,377,380,383,386,389],{"class":325,"line":373},3,[323,375,376],{"class":333},"  description",[323,378,379],{"class":329},":",[323,381,382],{"class":329}," '",[323,384,385],{"class":350},"Pick a colour and preview a palette.",[323,387,388],{"class":329},"'",[323,390,391],{"class":329},",\n",[323,393,395,398,400],{"class":325,"line":394},4,[323,396,397],{"class":333},"  csp",[323,399,379],{"class":329},[323,401,402],{"class":329}," {\n",[323,404,406,409,411,414,416,419,421,424],{"class":325,"line":405},5,[323,407,408],{"class":333},"    resourceDomains",[323,410,379],{"class":329},[323,412,413],{"class":366}," [",[323,415,388],{"class":329},[323,417,418],{"class":350},"https:\u002F\u002Fimages.unsplash.com",[323,420,388],{"class":329},[323,422,423],{"class":366},"]",[323,425,391],{"class":329},[323,427,429,432,434,436,438,441,443,445],{"class":325,"line":428},6,[323,430,431],{"class":333},"    connectDomains",[323,433,379],{"class":329},[323,435,413],{"class":366},[323,437,388],{"class":329},[323,439,440],{"class":350},"https:\u002F\u002Fapi.example.com",[323,442,388],{"class":329},[323,444,423],{"class":366},[323,446,391],{"class":329},[323,448,450],{"class":325,"line":449},7,[323,451,452],{"class":329},"  },\n",[323,454,456,459,461,464,467,471,474,477,480,483,486,488,492,495,497,499,502,504,507,510,513,515,517,520,523,526,529,531,534],{"class":325,"line":455},8,[323,457,458],{"class":362},"  handler",[323,460,379],{"class":329},[323,462,463],{"class":337}," async",[323,465,466],{"class":329}," ({",[323,468,470],{"class":469},"sHdIc"," base",[323,472,473],{"class":329}," })",[323,475,476],{"class":337}," =>",[323,478,479],{"class":366}," (",[323,481,482],{"class":329},"{",[323,484,485],{"class":333}," structuredContent",[323,487,379],{"class":329},[323,489,491],{"class":490},"s7zQu"," await",[323,493,494],{"class":362}," $fetch",[323,496,367],{"class":366},[323,498,388],{"class":329},[323,500,501],{"class":350},"\u002Fapi\u002Fpalette",[323,503,388],{"class":329},[323,505,506],{"class":329},",",[323,508,509],{"class":329}," {",[323,511,512],{"class":333}," query",[323,514,379],{"class":329},[323,516,509],{"class":329},[323,518,519],{"class":366}," base ",[323,521,522],{"class":329},"}",[323,524,525],{"class":329}," }",[323,527,528],{"class":366},") ",[323,530,522],{"class":329},[323,532,533],{"class":366},")",[323,535,391],{"class":329},[323,537,539,541],{"class":325,"line":538},9,[323,540,522],{"class":329},[323,542,543],{"class":366},")\n",[323,545,547,550,552],{"class":325,"line":546},10,[323,548,549],{"class":329},"\u003C\u002F",[323,551,334],{"class":333},[323,553,356],{"class":329},[283,555,556,557,560,561,564],{},"The CSP is mirrored into ",[305,558,559],{},"_meta.ui.csp"," (and ",[305,562,563],{},"openai\u002FwidgetCSP"," for ChatGPT) so hosts that enforce CSP at the iframe level pick up the same rules.",[566,567,569,570,573],"callout",{"color":568,"icon":64},"warning","Pass ",[305,571,572],{},"csp: false"," only as a last resort — and only if you fully control the assets the iframe loads. The default policy is what makes apps safe to render across hosts.",[575,576,577,590],"table",{},[578,579,580],"thead",{},[581,582,583,587],"tr",{},[584,585,586],"th",{},"Field",[584,588,589],{},"What it allows",[591,592,593,614],"tbody",{},[581,594,595,601],{},[596,597,598],"td",{},[305,599,600],{},"resourceDomains",[596,602,603,606,607,606,610,613],{},[305,604,605],{},"\u003Cimg>",", ",[305,608,609],{},"\u003Cstyle>",[305,611,612],{},"\u003Clink>",", fonts loaded from these origins",[581,615,616,621],{},[596,617,618],{},[305,619,620],{},"connectDomains",[596,622,623,606,626,606,629,606,632,635],{},[305,624,625],{},"fetch()",[305,627,628],{},"XHR",[305,630,631],{},"WebSocket",[305,633,634],{},"EventSource"," to these origins",[283,637,638,639,642,643,646],{},"Origins should use ",[305,640,641],{},"http(s):\u002F\u002F"," or ",[305,644,645],{},"ws(s):\u002F\u002F",". The toolkit rejects empty values, unsupported URL schemes, whitespace, quotes, and semicolons before the app response is served.",[278,648,650],{"id":649},"how-its-wired","How It's Wired",[283,652,653,654,657,658,661],{},"Behind the scenes, each ",[305,655,656],{},".vue"," file under the configured apps directory becomes ",[287,659,660],{},"three artifacts"," at build time:",[663,664,665,672,686],"ol",{},[295,666,667,668,671],{},"A ",[287,669,670],{},"tool definition"," registered on your MCP handler (input schema, description, server handler).",[295,673,667,674,677,678,681,682,685],{},[287,675,676],{},"UI resource"," at ",[305,679,680],{},"ui:\u002F\u002Fmcp-app\u002F\u003Cname>"," returning ",[305,683,684],{},"text\u002Fhtml;profile=mcp-app",".",[295,687,667,688,691],{},[287,689,690],{},"single-file HTML bundle"," of the Vue SFC (Vue runtime, your code, scoped CSS, assets) inlined into the resource response.",[283,693,694],{},"When the LLM calls the tool:",[663,696,697,707,713,724],{},[295,698,699,700,703,704,685],{},"Your ",[305,701,702],{},"handler"," runs on the server and produces ",[305,705,706],{},"structuredContent",[295,708,709,710,685],{},"The toolkit injects that data into the bundled HTML as ",[305,711,712],{},"\u003Cscript type=\"application\u002Fjson\" id=\"__mcp_app_data__\">…\u003C\u002Fscript>",[295,714,715,716,719,720,723],{},"The host returns the resource to the user; its iframe boots and ",[305,717,718],{},"useMcpApp()"," reads the inline data into ",[305,721,722],{},"data"," synchronously.",[295,725,726,727,606,730,606,733,736],{},"From there, the iframe and the host exchange messages over a JSON-RPC bridge for ",[305,728,729],{},"callTool",[305,731,732],{},"sendPrompt",[305,734,735],{},"openLink",", and theme\u002Fsize updates.",[566,738,741,742,745],{"color":739,"icon":740},"primary","i-lucide-zap","Everything ships in ",[287,743,744],{},"one HTML response",". No extra HTTP request from the iframe, no waterfall, no flicker.",[747,748,749],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":319,"searchDepth":359,"depth":359,"links":751},[752,753],{"id":280,"depth":359,"text":281},{"id":649,"depth":359,"text":650},"Content Security Policy, allow-listed domains, and how HTML bundles are produced.","md",null,{},{"icon":64},{"title":760,"description":761},"MCP Apps — CSP & wiring","iframe CSP, external assets, and the build pipeline for MCP UI resources.","MwH9uAcFyCGJauuZqpXoURyvbJKcNGBSF-v-00hjJQM",[764,766],{"title":166,"path":167,"stem":168,"description":765,"icon":169,"children":-1},"data, hostContext, sendPrompt, callTool, and openLink from inside the iframe.",{"title":175,"path":176,"stem":177,"description":767,"icon":178,"children":-1},"Test MCP Apps locally, pick a compatible host, and ship HTTPS endpoints for ChatGPT, Claude, and IDE clients.",1777306544460]