[{"data":1,"prerenderedAt":865},["ShallowReactive",2],{"navigation_docs":3,"-apps-patterns-reference":272,"-apps-patterns-reference-surround":860},[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":180,"body":274,"description":851,"extension":852,"links":853,"meta":854,"navigation":855,"path":181,"seo":856,"stem":182,"__hash__":859},"docs\u002F6.apps\u002F5.patterns-reference.md",{"type":275,"value":276,"toc":840},"minimark",[277,282,291,305,412,416,419,486,490,497,563,566,570,577,581,588,631,634,682,692,696,828,836],[278,279,281],"h2",{"id":280},"patterns","Patterns",[283,284,286,287],"h3",{"id":285},"skeletons-during-calltool","Skeletons during ",[288,289,290],"code",{},"callTool",[292,293,294,297,298,301,302,304],"p",{},[288,295,296],{},"pending"," flips to ",[288,299,300],{},"true"," only during in-flight ",[288,303,290],{}," calls — perfect for partial UI updates without losing the previous data:",[306,307,312],"pre",{"className":308,"code":309,"language":310,"meta":311,"style":311},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cbutton :disabled=\"pending\" @click=\"callTool('color-picker', { base: nextBase })\">\n  {{ pending ? 'Mixing…' : 'Try this colour' }}\n\u003C\u002Fbutton>\n","vue","",[288,313,314,396,402],{"__ignoreMap":311},[315,316,319,323,327,330,334,337,340,343,345,348,351,353,355,358,361,364,368,370,373,376,379,382,385,388,391,393],"span",{"class":317,"line":318},"line",1,[315,320,322],{"class":321},"sMK4o","\u003C",[315,324,326],{"class":325},"swJcz","button",[315,328,329],{"class":321}," :",[315,331,333],{"class":332},"spNyl","disabled",[315,335,336],{"class":321},"=",[315,338,339],{"class":321},"\"",[315,341,296],{"class":342},"sTEyZ",[315,344,339],{"class":321},[315,346,347],{"class":321}," @",[315,349,350],{"class":332},"click",[315,352,336],{"class":321},[315,354,339],{"class":321},[315,356,290],{"class":357},"s2Zo4",[315,359,360],{"class":342},"(",[315,362,363],{"class":321},"'",[315,365,367],{"class":366},"sfazB","color-picker",[315,369,363],{"class":321},[315,371,372],{"class":321},",",[315,374,375],{"class":321}," {",[315,377,378],{"class":325}," base",[315,380,381],{"class":321},":",[315,383,384],{"class":342}," nextBase ",[315,386,387],{"class":321},"}",[315,389,390],{"class":342},")",[315,392,339],{"class":321},[315,394,395],{"class":321},">\n",[315,397,399],{"class":317,"line":398},2,[315,400,401],{"class":342},"  {{ pending ? 'Mixing…' : 'Try this colour' }}\n",[315,403,405,408,410],{"class":317,"line":404},3,[315,406,407],{"class":321},"\u003C\u002F",[315,409,326],{"class":325},[315,411,395],{"class":321},[283,413,415],{"id":414},"adapting-to-fullscreen-vs-inline","Adapting to fullscreen vs inline",[292,417,418],{},"Hosts can mount your app inline (small) or expand it fullscreen. Switch layout primitives:",[306,420,422],{"className":308,"code":421,"language":310,"meta":311,"style":311},"\u003Csection :class=\"['rail', isFullscreen && 'rail-grid']\">\n  \u003C!-- horizontal scroll inline, CSS grid in fullscreen -->\n\u003C\u002Fsection>\n",[288,423,424,473,478],{"__ignoreMap":311},[315,425,426,428,431,433,436,438,440,443,445,448,450,452,455,458,461,464,466,469,471],{"class":317,"line":318},[315,427,322],{"class":321},[315,429,430],{"class":325},"section",[315,432,329],{"class":321},[315,434,435],{"class":332},"class",[315,437,336],{"class":321},[315,439,339],{"class":321},[315,441,442],{"class":342},"[",[315,444,363],{"class":321},[315,446,447],{"class":366},"rail",[315,449,363],{"class":321},[315,451,372],{"class":321},[315,453,454],{"class":342}," isFullscreen ",[315,456,457],{"class":321},"&&",[315,459,460],{"class":321}," '",[315,462,463],{"class":366},"rail-grid",[315,465,363],{"class":321},[315,467,468],{"class":342},"]",[315,470,339],{"class":321},[315,472,395],{"class":321},[315,474,475],{"class":317,"line":398},[315,476,477],{"class":342},"  \u003C!-- horizontal scroll inline, CSS grid in fullscreen -->\n",[315,479,480,482,484],{"class":317,"line":404},[315,481,407],{"class":321},[315,483,430],{"class":325},[315,485,395],{"class":321},[283,487,489],{"id":488},"app-to-app-workflows","App-to-app workflows",[292,491,492,493,496],{},"Use ",[288,494,495],{},"sendPrompt"," from app A and let the LLM dispatch to app B. The user perceives a smooth transition; the LLM stays in the loop and can carry parameters through:",[306,498,500],{"className":308,"code":499,"language":310,"meta":311,"style":311},"\u003Cbutton @click=\"sendPrompt(`Generate a typography scale for ${swatch.hex}.`)\">\n  Pair with type\n\u003C\u002Fbutton>\n",[288,501,502,550,555],{"__ignoreMap":311},[315,503,504,506,508,510,512,514,516,518,520,523,526,529,532,535,538,540,542,544,546,548],{"class":317,"line":318},[315,505,322],{"class":321},[315,507,326],{"class":325},[315,509,347],{"class":321},[315,511,350],{"class":332},[315,513,336],{"class":321},[315,515,339],{"class":321},[315,517,495],{"class":357},[315,519,360],{"class":342},[315,521,522],{"class":321},"`",[315,524,525],{"class":366},"Generate a typography scale for ",[315,527,528],{"class":321},"${",[315,530,531],{"class":342},"swatch",[315,533,534],{"class":321},".",[315,536,537],{"class":342},"hex",[315,539,387],{"class":321},[315,541,534],{"class":366},[315,543,522],{"class":321},[315,545,390],{"class":342},[315,547,339],{"class":321},[315,549,395],{"class":321},[315,551,552],{"class":317,"line":398},[315,553,554],{"class":342},"  Pair with type\n",[315,556,557,559,561],{"class":317,"line":404},[315,558,407],{"class":321},[315,560,326],{"class":325},[315,562,395],{"class":321},[292,564,565],{},"The LLM picks the right tool from the prompt — keep names predictable.",[283,567,569],{"id":568},"co-locating-css","Co-locating CSS",[292,571,572,573,534],{},"Use scoped styles or any CSS-in-JS solution that emits inline styles. The bundler inlines all styles into the HTML; ",[574,575,576],"strong",{},"no external CSS request fires from the iframe",[278,578,580],{"id":579},"what-you-cannot-do-yet","What You Cannot Do (Yet)",[292,582,583,584,587],{},"MCP Apps run inside an isolated ",[288,585,586],{},"iframe"," with no access to your Nuxt runtime context. That means:",[589,590,591,599,619,625],"ul",{},[592,593,594,595,598],"li",{},"❌ ",[574,596,597],{},"Nuxt UI \u002F Nuxt Image \u002F NuxtLink"," — they need the parent Nuxt app's runtime.",[592,600,594,601,604,605,608,609,608,612,608,615,618],{},[574,602,603],{},"Auto-imported Nuxt composables"," (",[288,606,607],{},"useFetch",", ",[288,610,611],{},"useState",[288,613,614],{},"useRoute",[288,616,617],{},"useNuxtApp",", …).",[592,620,594,621,624],{},[574,622,623],{},"Pinia stores or app-level plugins"," — different module graph.",[592,626,594,627,630],{},[574,628,629],{},"Cookies, headers, session from the parent page"," — sandboxed origin.",[292,632,633],{},"What you can use:",[589,635,636,651,658,668,679],{},[592,637,638,639,608,642,608,645,608,648,618],{},"✅ Vue 3 + Composition API (auto-imported: ",[288,640,641],{},"ref",[288,643,644],{},"computed",[288,646,647],{},"watch",[288,649,650],{},"onMounted",[592,652,653,654,657],{},"✅ ",[288,655,656],{},"useMcpApp()"," — the only toolkit composable in the iframe.",[592,659,653,660,663,664,667],{},[288,661,662],{},"$fetch"," inside ",[288,665,666],{},"handler"," (server side) — call any Nuxt API.",[592,669,670,671,674,675,678],{},"✅ Co-located ",[288,672,673],{},".ts","\u002F",[288,676,677],{},".css"," helpers next to the SFC (the bundler inlines them).",[592,680,681],{},"✅ Headless UI libraries (Reka UI, Headless UI Vue, Floating UI) — they're framework-agnostic.",[683,684,687,688,691],"callout",{"color":685,"icon":686},"info","i-lucide-info","Need rich components? Build a small co-located design system in your apps directory, such as ",[288,689,690],{},"app\u002Fmcp\u002F_components\u002F"," — it gets bundled into every app that imports it. Or pull in a headless library that doesn't depend on the host runtime.",[278,693,695],{"id":694},"reference","Reference",[697,698,699,715],"table",{},[700,701,702],"thead",{},[703,704,705,709,712],"tr",{},[706,707,708],"th",{},"API",[706,710,711],{},"Where",[706,713,714],{},"Purpose",[716,717,718,734,765,780,804],"tbody",{},[703,719,720,726,731],{},[721,722,723],"td",{},[288,724,725],{},"defineMcpApp()",[721,727,728],{},[288,729,730],{},"\u003Cscript setup>",[721,732,733],{},"Declare the tool, schema, handler, CSP. Stripped from the browser bundle.",[703,735,736,741,744],{},[721,737,738],{},[288,739,740],{},"useMcpApp\u003CT>()",[721,742,743],{},"SFC body",[721,745,746,747,750,751,750,754,757,758,608,760,608,762,534],{},"Reactive ",[288,748,749],{},"data"," \u002F ",[288,752,753],{},"loading",[288,755,756],{},"hostContext"," + ",[288,759,290],{},[288,761,495],{},[288,763,764],{},"openLink",[703,766,767,772,777],{},[721,768,769],{},[288,770,771],{},"csp.resourceDomains",[721,773,774],{},[288,775,776],{},"defineMcpApp",[721,778,779],{},"Allow-list image \u002F font \u002F style origins.",[703,781,782,787,791],{},[721,783,784],{},[288,785,786],{},"csp.connectDomains",[721,788,789],{},[288,790,776],{},[721,792,793,794,750,797,750,800,803],{},"Allow-list ",[288,795,796],{},"fetch",[288,798,799],{},"XHR",[288,801,802],{},"WebSocket"," origins.",[703,805,806,811,815],{},[721,807,808],{},[288,809,810],{},"_meta",[721,812,813],{},[288,814,776],{},[721,816,817,818,820,821,824,825,534],{},"Extra ",[288,819,810],{}," fields surfaced to the host alongside ",[288,822,823],{},"ui.resourceUri"," and ",[288,826,827],{},"ui.csp",[292,829,830,831,824,834,534],{},"Looking for the underlying tool \u002F resource APIs? See ",[832,833,41],"a",{"href":47},[832,835,71],{"href":76},[837,838,839],"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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":311,"searchDepth":398,"depth":398,"links":841},[842,849,850],{"id":280,"depth":398,"text":281,"children":843},[844,846,847,848],{"id":285,"depth":404,"text":845},"Skeletons during callTool",{"id":414,"depth":404,"text":415},{"id":488,"depth":404,"text":489},{"id":568,"depth":404,"text":569},{"id":579,"depth":398,"text":580},{"id":694,"depth":398,"text":695},"UI patterns, unsupported Nuxt features in the iframe, and API reference.","md",null,{},{"icon":183},{"title":857,"description":858},"MCP Apps — Patterns & reference","Layout patterns, iframe limitations, and defineMcpApp \u002F useMcpApp reference.","SXlcZ3j9In6zjHl-iSCkqHTp5dBVsa_I84tgs5DzRDQ",[861,863],{"title":175,"path":176,"stem":177,"description":862,"icon":178,"children":-1},"Test MCP Apps locally, pick a compatible host, and ship HTTPS endpoints for ChatGPT, Claude, and IDE clients.",{"title":190,"path":191,"stem":192,"description":864,"icon":193,"children":-1},"Customize where the module looks for MCP definitions.",1777306544602]