[{"data":1,"prerenderedAt":1395},["ShallowReactive",2],{"navigation_docs":3,"-apps-use-mcp-app":282,"-apps-use-mcp-app-surround":1390},[4,40,70,99,122,156,189,253],{"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},"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,151],{"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,"icon":155},"Multi-handler organization","\u002Fhandlers\u002Forganization","5.handlers\u002F5.organization","i-lucide-network",{"title":157,"path":158,"stem":159,"children":160,"page":39},"Apps","\u002Fapps","6.apps",[161,165,170,175,179,184],{"title":46,"path":162,"stem":163,"icon":164},"\u002Fapps\u002Foverview","6.apps\u002F0.overview","i-lucide-app-window",{"title":166,"path":167,"stem":168,"icon":169},"Authoring & defineMcpApp","\u002Fapps\u002Fauthoring","6.apps\u002F1.authoring","i-lucide-code-2",{"title":171,"path":172,"stem":173,"icon":174},"useMcpApp() bridge","\u002Fapps\u002Fuse-mcp-app","6.apps\u002F2.use-mcp-app","i-lucide-message-circle",{"title":176,"path":177,"stem":178,"icon":64},"CSP & build pipeline","\u002Fapps\u002Fcsp-and-wiring","6.apps\u002F3.csp-and-wiring",{"title":180,"path":181,"stem":182,"icon":183},"Testing & publishing","\u002Fapps\u002Ftesting-publishing","6.apps\u002F4.testing-publishing","i-lucide-rocket",{"title":185,"path":186,"stem":187,"icon":188},"Patterns & limits","\u002Fapps\u002Fpatterns-reference","6.apps\u002F5.patterns-reference","i-lucide-book-marked",{"title":190,"path":191,"stem":192,"children":193,"page":39},"Advanced Topics","\u002Fadvanced","7.advanced",[194,199,204,209,214,218,223,228,233,238,243,248],{"title":195,"path":196,"stem":197,"icon":198},"Custom Paths","\u002Fadvanced\u002Fcustom-paths","7.advanced\u002F1.custom-paths","i-lucide-folder",{"title":200,"path":201,"stem":202,"icon":203},"Logging","\u002Fadvanced\u002Flogging","7.advanced\u002F10.logging","i-lucide-scroll-text",{"title":205,"path":206,"stem":207,"icon":208},"MCP Apps Internals","\u002Fadvanced\u002Fmcp-apps-internals","7.advanced\u002F11.mcp-apps-internals","i-lucide-cog",{"title":210,"path":211,"stem":212,"icon":213},"Listing Definitions","\u002Fadvanced\u002Flisting-definitions","7.advanced\u002F12.listing-definitions","i-lucide-list",{"title":215,"path":216,"stem":217,"icon":64},"Middleware","\u002Fadvanced\u002Fmiddleware","7.advanced\u002F2.middleware",{"title":219,"path":220,"stem":221,"icon":222},"TypeScript","\u002Fadvanced\u002Ftypescript","7.advanced\u002F3.typescript","i-lucide-type",{"title":224,"path":225,"stem":226,"icon":227},"Hooks","\u002Fadvanced\u002Fhooks","7.advanced\u002F4.hooks","i-lucide-webhook",{"title":229,"path":230,"stem":231,"icon":232},"MCP Evals","\u002Fadvanced\u002Fevals","7.advanced\u002F5.evals","i-lucide-flask-conical",{"title":234,"path":235,"stem":236,"icon":237},"Sessions","\u002Fadvanced\u002Fsessions","7.advanced\u002F6.sessions","i-lucide-database",{"title":239,"path":240,"stem":241,"icon":242},"Dynamic Definitions","\u002Fadvanced\u002Fdynamic-definitions","7.advanced\u002F7.dynamic-definitions","i-lucide-toggle-right",{"title":244,"path":245,"stem":246,"icon":247},"Code Mode","\u002Fadvanced\u002Fcode-mode","7.advanced\u002F8.code-mode","i-lucide-code",{"title":249,"path":250,"stem":251,"icon":252},"Elicitation","\u002Fadvanced\u002Felicitation","7.advanced\u002F9.elicitation","i-lucide-message-square-quote",{"title":254,"path":255,"stem":256,"children":257,"page":39},"Examples","\u002Fexamples","8.examples",[258,263,268,273,278],{"title":259,"path":260,"stem":261,"icon":262},"Authentication","\u002Fexamples\u002Fauthentication","8.examples\u002F1.authentication","i-lucide-shield-check",{"title":264,"path":265,"stem":266,"icon":267},"API Integration","\u002Fexamples\u002Fapi-integration","8.examples\u002F2.api-integration","i-lucide-globe",{"title":269,"path":270,"stem":271,"icon":272},"Common Patterns","\u002Fexamples\u002Fcommon-patterns","8.examples\u002F3.common-patterns","i-lucide-lightbulb",{"title":274,"path":275,"stem":276,"icon":277},"File Operations","\u002Fexamples\u002Ffile-operations","8.examples\u002F4.file-operations","i-lucide-file",{"title":279,"path":280,"stem":281,"icon":107},"Prompt Examples","\u002Fexamples\u002Fprompt-examples","8.examples\u002F5.prompt-examples",{"id":283,"title":171,"body":284,"description":1381,"extension":1382,"links":1383,"meta":1384,"navigation":1385,"path":172,"seo":1386,"stem":173,"__hash__":1389},"docs\u002F6.apps\u002F2.use-mcp-app.md",{"type":285,"value":286,"toc":1369},"minimark",[287,295,304,443,446,457,489,597,603,614,793,1001,1012,1019,1022,1107,1114,1123,1130,1136,1267,1270,1276,1283,1354,1365],[288,289,291],"h2",{"id":290},"usemcpapp",[292,293,294],"code",{},"useMcpApp()",[296,297,298,299,303],"p",{},"The single client-side composable, ",[300,301,302],"strong",{},"auto-imported into every MCP App SFC",". It returns everything the iframe needs to talk to the host:",[305,306,311],"pre",{"className":307,"code":308,"language":309,"meta":310,"style":310},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const {\n  data,         \u002F\u002F Ref\u003CT | null>          — hydrated from structuredContent, refreshed by callTool\n  loading,      \u002F\u002F Ref\u003Cboolean>           — true until first payload arrives\n  error,        \u002F\u002F Ref\u003CError | null>      — bridge \u002F transport \u002F payload errors\n  pending,      \u002F\u002F Ref\u003Cboolean>           — true while a callTool() is in flight\n  hostContext,  \u002F\u002F Ref\u003CHostContext | null> — theme, displayMode, locale, …\n  callTool,     \u002F\u002F (name, params?) => Promise\u003CT | null> — re-invoke any MCP tool\n  sendPrompt,   \u002F\u002F (prompt: string) => void              — push a message into the chat\n  openLink,     \u002F\u002F (url: string) => void                 — ask the host to open a URL\n} = useMcpApp\u003CMyPayload>()\n","ts","",[292,312,313,326,340,351,362,373,384,395,406,417],{"__ignoreMap":310},[314,315,318,322],"span",{"class":316,"line":317},"line",1,[314,319,321],{"class":320},"spNyl","const",[314,323,325],{"class":324},"sMK4o"," {\n",[314,327,329,333,336],{"class":316,"line":328},2,[314,330,332],{"class":331},"sTEyZ","  data",[314,334,335],{"class":324},",",[314,337,339],{"class":338},"sHwdD","         \u002F\u002F Ref\u003CT | null>          — hydrated from structuredContent, refreshed by callTool\n",[314,341,343,346,348],{"class":316,"line":342},3,[314,344,345],{"class":331},"  loading",[314,347,335],{"class":324},[314,349,350],{"class":338},"      \u002F\u002F Ref\u003Cboolean>           — true until first payload arrives\n",[314,352,354,357,359],{"class":316,"line":353},4,[314,355,356],{"class":331},"  error",[314,358,335],{"class":324},[314,360,361],{"class":338},"        \u002F\u002F Ref\u003CError | null>      — bridge \u002F transport \u002F payload errors\n",[314,363,365,368,370],{"class":316,"line":364},5,[314,366,367],{"class":331},"  pending",[314,369,335],{"class":324},[314,371,372],{"class":338},"      \u002F\u002F Ref\u003Cboolean>           — true while a callTool() is in flight\n",[314,374,376,379,381],{"class":316,"line":375},6,[314,377,378],{"class":331},"  hostContext",[314,380,335],{"class":324},[314,382,383],{"class":338},"  \u002F\u002F Ref\u003CHostContext | null> — theme, displayMode, locale, …\n",[314,385,387,390,392],{"class":316,"line":386},7,[314,388,389],{"class":331},"  callTool",[314,391,335],{"class":324},[314,393,394],{"class":338},"     \u002F\u002F (name, params?) => Promise\u003CT | null> — re-invoke any MCP tool\n",[314,396,398,401,403],{"class":316,"line":397},8,[314,399,400],{"class":331},"  sendPrompt",[314,402,335],{"class":324},[314,404,405],{"class":338},"   \u002F\u002F (prompt: string) => void              — push a message into the chat\n",[314,407,409,412,414],{"class":316,"line":408},9,[314,410,411],{"class":331},"  openLink",[314,413,335],{"class":324},[314,415,416],{"class":338},"     \u002F\u002F (url: string) => void                 — ask the host to open a URL\n",[314,418,420,423,426,430,433,437,440],{"class":316,"line":419},10,[314,421,422],{"class":324},"}",[314,424,425],{"class":324}," =",[314,427,429],{"class":428},"s2Zo4"," useMcpApp",[314,431,432],{"class":324},"\u003C",[314,434,436],{"class":435},"sBMFI","MyPayload",[314,438,439],{"class":324},">",[314,441,442],{"class":331},"()\n",[296,444,445],{},"Pass your payload type as the generic to get full inference downstream.",[447,448,450,453,454],"h3",{"id":449},"data-loading",[292,451,452],{},"data"," & ",[292,455,456],{},"loading",[296,458,459,461,462,465,466,469,470,472,473,476,477,480,481,484,485,488],{},[292,460,452],{}," is ",[300,463,464],{},"already populated on first render"," when the handler returns ",[292,467,468],{},"structuredContent",". ",[292,471,456],{}," starts as ",[292,474,475],{},"true"," and becomes ",[292,478,479],{},"false"," after the first payload arrives. Use ",[292,482,483],{},"pending"," for in-flight ",[292,486,487],{},"callTool()"," refreshes:",[305,490,494],{"className":491,"code":492,"language":493,"meta":310,"style":310},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Csection v-if=\"loading\" class=\"skeleton\" \u002F>\n  \u003Csection v-else-if=\"data\" class=\"content\">\n    {{ data.swatches.length }} swatches from {{ data.base }}\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n","vue",[292,495,496,507,544,574,579,588],{"__ignoreMap":310},[314,497,498,500,504],{"class":316,"line":317},[314,499,432],{"class":324},[314,501,503],{"class":502},"swJcz","template",[314,505,506],{"class":324},">\n",[314,508,509,512,515,518,521,524,527,529,532,534,536,539,541],{"class":316,"line":328},[314,510,511],{"class":324},"  \u003C",[314,513,514],{"class":502},"section",[314,516,517],{"class":320}," v-if",[314,519,520],{"class":324},"=",[314,522,523],{"class":324},"\"",[314,525,456],{"class":526},"sfazB",[314,528,523],{"class":324},[314,530,531],{"class":320}," class",[314,533,520],{"class":324},[314,535,523],{"class":324},[314,537,538],{"class":526},"skeleton",[314,540,523],{"class":324},[314,542,543],{"class":324}," \u002F>\n",[314,545,546,548,550,553,555,557,559,561,563,565,567,570,572],{"class":316,"line":342},[314,547,511],{"class":324},[314,549,514],{"class":502},[314,551,552],{"class":320}," v-else-if",[314,554,520],{"class":324},[314,556,523],{"class":324},[314,558,452],{"class":526},[314,560,523],{"class":324},[314,562,531],{"class":320},[314,564,520],{"class":324},[314,566,523],{"class":324},[314,568,569],{"class":526},"content",[314,571,523],{"class":324},[314,573,506],{"class":324},[314,575,576],{"class":316,"line":353},[314,577,578],{"class":331},"    {{ data.swatches.length }} swatches from {{ data.base }}\n",[314,580,581,584,586],{"class":316,"line":364},[314,582,583],{"class":324},"  \u003C\u002F",[314,585,514],{"class":502},[314,587,506],{"class":324},[314,589,590,593,595],{"class":316,"line":375},[314,591,592],{"class":324},"\u003C\u002F",[314,594,503],{"class":502},[314,596,506],{"class":324},[447,598,600],{"id":599},"hostcontext",[292,601,602],{},"hostContext",[296,604,605,606,609,610,613],{},"The host hands the iframe a context object during the ",[292,607,608],{},"ui\u002Finitialize"," handshake. Use it to ",[300,611,612],{},"adapt to dark mode, fullscreen, or a fixed iframe size",":",[305,615,617],{"className":307,"code":616,"language":309,"meta":310,"style":310},"interface HostContext {\n  theme?: 'light' | 'dark'\n  displayMode?: 'inline' | 'fullscreen' | 'pip'\n  containerDimensions?: { width?: number, height?: number, maxWidth?: number, maxHeight?: number }\n  locale?: string\n  timeZone?: string\n  platform?: 'web' | 'desktop' | 'mobile'\n}\n",[292,618,619,629,657,689,737,747,756,788],{"__ignoreMap":310},[314,620,621,624,627],{"class":316,"line":317},[314,622,623],{"class":320},"interface",[314,625,626],{"class":435}," HostContext",[314,628,325],{"class":324},[314,630,631,634,637,640,643,646,649,651,654],{"class":316,"line":328},[314,632,633],{"class":502},"  theme",[314,635,636],{"class":324},"?:",[314,638,639],{"class":324}," '",[314,641,642],{"class":526},"light",[314,644,645],{"class":324},"'",[314,647,648],{"class":324}," |",[314,650,639],{"class":324},[314,652,653],{"class":526},"dark",[314,655,656],{"class":324},"'\n",[314,658,659,662,664,666,669,671,673,675,678,680,682,684,687],{"class":316,"line":342},[314,660,661],{"class":502},"  displayMode",[314,663,636],{"class":324},[314,665,639],{"class":324},[314,667,668],{"class":526},"inline",[314,670,645],{"class":324},[314,672,648],{"class":324},[314,674,639],{"class":324},[314,676,677],{"class":526},"fullscreen",[314,679,645],{"class":324},[314,681,648],{"class":324},[314,683,639],{"class":324},[314,685,686],{"class":526},"pip",[314,688,656],{"class":324},[314,690,691,694,696,699,702,704,707,709,712,714,716,718,721,723,725,727,730,732,734],{"class":316,"line":353},[314,692,693],{"class":502},"  containerDimensions",[314,695,636],{"class":324},[314,697,698],{"class":324}," {",[314,700,701],{"class":502}," width",[314,703,636],{"class":324},[314,705,706],{"class":435}," number",[314,708,335],{"class":324},[314,710,711],{"class":502}," height",[314,713,636],{"class":324},[314,715,706],{"class":435},[314,717,335],{"class":324},[314,719,720],{"class":502}," maxWidth",[314,722,636],{"class":324},[314,724,706],{"class":435},[314,726,335],{"class":324},[314,728,729],{"class":502}," maxHeight",[314,731,636],{"class":324},[314,733,706],{"class":435},[314,735,736],{"class":324}," }\n",[314,738,739,742,744],{"class":316,"line":364},[314,740,741],{"class":502},"  locale",[314,743,636],{"class":324},[314,745,746],{"class":435}," string\n",[314,748,749,752,754],{"class":316,"line":375},[314,750,751],{"class":502},"  timeZone",[314,753,636],{"class":324},[314,755,746],{"class":435},[314,757,758,761,763,765,768,770,772,774,777,779,781,783,786],{"class":316,"line":386},[314,759,760],{"class":502},"  platform",[314,762,636],{"class":324},[314,764,639],{"class":324},[314,766,767],{"class":526},"web",[314,769,645],{"class":324},[314,771,648],{"class":324},[314,773,639],{"class":324},[314,775,776],{"class":526},"desktop",[314,778,645],{"class":324},[314,780,648],{"class":324},[314,782,639],{"class":324},[314,784,785],{"class":526},"mobile",[314,787,656],{"class":324},[314,789,790],{"class":316,"line":397},[314,791,792],{"class":324},"}\n",[305,794,796],{"className":491,"code":795,"language":493,"meta":310,"style":310},"\u003Cscript setup lang=\"ts\">\nconst { hostContext } = useMcpApp()\nconst isDark = computed(() => hostContext.value?.theme === 'dark')\nconst isFullscreen = computed(() => hostContext.value?.displayMode === 'fullscreen')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cmain :data-theme=\"isDark ? 'dark' : 'light'\" :data-mode=\"isFullscreen ? 'fullscreen' : 'inline'\">\n    …\n  \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n",[292,797,798,821,838,886,924,932,938,946,979,984,992],{"__ignoreMap":310},[314,799,800,802,805,808,811,813,815,817,819],{"class":316,"line":317},[314,801,432],{"class":324},[314,803,804],{"class":502},"script",[314,806,807],{"class":320}," setup",[314,809,810],{"class":320}," lang",[314,812,520],{"class":324},[314,814,523],{"class":324},[314,816,309],{"class":526},[314,818,523],{"class":324},[314,820,506],{"class":324},[314,822,823,825,827,830,832,834,836],{"class":316,"line":328},[314,824,321],{"class":320},[314,826,698],{"class":324},[314,828,829],{"class":331}," hostContext ",[314,831,422],{"class":324},[314,833,425],{"class":324},[314,835,429],{"class":428},[314,837,442],{"class":331},[314,839,840,842,845,847,850,853,856,859,862,865,868,871,874,877,879,881,883],{"class":316,"line":342},[314,841,321],{"class":320},[314,843,844],{"class":331}," isDark ",[314,846,520],{"class":324},[314,848,849],{"class":428}," computed",[314,851,852],{"class":331},"(",[314,854,855],{"class":324},"()",[314,857,858],{"class":320}," =>",[314,860,861],{"class":331}," hostContext",[314,863,864],{"class":324},".",[314,866,867],{"class":331},"value",[314,869,870],{"class":324},"?.",[314,872,873],{"class":331},"theme ",[314,875,876],{"class":324},"===",[314,878,639],{"class":324},[314,880,653],{"class":526},[314,882,645],{"class":324},[314,884,885],{"class":331},")\n",[314,887,888,890,893,895,897,899,901,903,905,907,909,911,914,916,918,920,922],{"class":316,"line":353},[314,889,321],{"class":320},[314,891,892],{"class":331}," isFullscreen ",[314,894,520],{"class":324},[314,896,849],{"class":428},[314,898,852],{"class":331},[314,900,855],{"class":324},[314,902,858],{"class":320},[314,904,861],{"class":331},[314,906,864],{"class":324},[314,908,867],{"class":331},[314,910,870],{"class":324},[314,912,913],{"class":331},"displayMode ",[314,915,876],{"class":324},[314,917,639],{"class":324},[314,919,677],{"class":526},[314,921,645],{"class":324},[314,923,885],{"class":331},[314,925,926,928,930],{"class":316,"line":364},[314,927,592],{"class":324},[314,929,804],{"class":502},[314,931,506],{"class":324},[314,933,934],{"class":316,"line":375},[314,935,937],{"emptyLinePlaceholder":936},true,"\n",[314,939,940,942,944],{"class":316,"line":386},[314,941,432],{"class":324},[314,943,503],{"class":502},[314,945,506],{"class":324},[314,947,948,950,953,956,958,960,963,965,968,970,972,975,977],{"class":316,"line":397},[314,949,511],{"class":324},[314,951,952],{"class":502},"main",[314,954,955],{"class":320}," :data-theme",[314,957,520],{"class":324},[314,959,523],{"class":324},[314,961,962],{"class":526},"isDark ? 'dark' : 'light'",[314,964,523],{"class":324},[314,966,967],{"class":320}," :data-mode",[314,969,520],{"class":324},[314,971,523],{"class":324},[314,973,974],{"class":526},"isFullscreen ? 'fullscreen' : 'inline'",[314,976,523],{"class":324},[314,978,506],{"class":324},[314,980,981],{"class":316,"line":408},[314,982,983],{"class":331},"    …\n",[314,985,986,988,990],{"class":316,"line":419},[314,987,583],{"class":324},[314,989,952],{"class":502},[314,991,506],{"class":324},[314,993,995,997,999],{"class":316,"line":994},11,[314,996,592],{"class":324},[314,998,503],{"class":502},[314,1000,506],{"class":324},[1002,1003,1006,461,1008,1011],"callout",{"color":1004,"icon":1005},"info","i-lucide-info",[292,1007,602],{},[292,1009,1010],{},"null"," on the very first paint and populates after the handshake (typically \u003C50 ms). Always use a fallback in your template.",[447,1013,1015,1018],{"id":1014},"sendpromptprompt-follow-ups",[292,1016,1017],{},"sendPrompt(prompt)"," — Follow-Ups",[296,1020,1021],{},"Push a message into the chat as if the user had typed it. The LLM then routes it like any other request — including invoking another MCP App:",[305,1023,1025],{"className":491,"code":1024,"language":493,"meta":310,"style":310},"\u003Cbutton @click=\"sendPrompt(`Use ${swatch.name} (${swatch.hex}) as the brand colour.`)\">\n  Use this colour\n\u003C\u002Fbutton>\n",[292,1026,1027,1094,1099],{"__ignoreMap":310},[314,1028,1029,1031,1034,1037,1040,1042,1044,1047,1049,1052,1055,1058,1061,1063,1066,1068,1071,1073,1075,1077,1080,1082,1085,1087,1090,1092],{"class":316,"line":317},[314,1030,432],{"class":324},[314,1032,1033],{"class":502},"button",[314,1035,1036],{"class":324}," @",[314,1038,1039],{"class":320},"click",[314,1041,520],{"class":324},[314,1043,523],{"class":324},[314,1045,1046],{"class":428},"sendPrompt",[314,1048,852],{"class":331},[314,1050,1051],{"class":324},"`",[314,1053,1054],{"class":526},"Use ",[314,1056,1057],{"class":324},"${",[314,1059,1060],{"class":331},"swatch",[314,1062,864],{"class":324},[314,1064,1065],{"class":331},"name",[314,1067,422],{"class":324},[314,1069,1070],{"class":526}," (",[314,1072,1057],{"class":324},[314,1074,1060],{"class":331},[314,1076,864],{"class":324},[314,1078,1079],{"class":331},"hex",[314,1081,422],{"class":324},[314,1083,1084],{"class":526},") as the brand colour.",[314,1086,1051],{"class":324},[314,1088,1089],{"class":331},")",[314,1091,523],{"class":324},[314,1093,506],{"class":324},[314,1095,1096],{"class":316,"line":328},[314,1097,1098],{"class":331},"  Use this colour\n",[314,1100,1101,1103,1105],{"class":316,"line":342},[314,1102,592],{"class":324},[314,1104,1033],{"class":502},[314,1106,506],{"class":324},[296,1108,1109,1110,1113],{},"The host receives the prompt as if the user had typed it. The LLM may reply, call another tool, or open a different MCP App in response — ",[300,1111,1112],{},"app-to-app workflows"," fall out of this primitive.",[1002,1115,1118,1119,1122],{"color":1116,"icon":1117},"warning","i-lucide-triangle-alert","Follow-ups are best-effort. Hosts that implement ",[292,1120,1121],{},"ui\u002Fmessage"," forward the prompt cleanly. ChatGPT acknowledges the request but doesn't always re-render the next tool inline (an upstream limitation).",[447,1124,1126,1129],{"id":1125},"calltoolname-params-in-place-refresh",[292,1127,1128],{},"callTool(name, params)"," — In-Place Refresh",[296,1131,1132,1133,1135],{},"Re-invoke any MCP tool from the iframe. The result replaces ",[292,1134,452],{}," automatically:",[305,1137,1139],{"className":491,"code":1138,"language":493,"meta":310,"style":310},"\u003Cscript setup lang=\"ts\">\nconst { data, pending, callTool } = useMcpApp\u003CPalettePayload>()\n\nasync function refresh(base: string) {\n  await callTool('color-picker', { base })\n}\n\u003C\u002Fscript>\n",[292,1140,1141,1161,1195,1199,1225,1255,1259],{"__ignoreMap":310},[314,1142,1143,1145,1147,1149,1151,1153,1155,1157,1159],{"class":316,"line":317},[314,1144,432],{"class":324},[314,1146,804],{"class":502},[314,1148,807],{"class":320},[314,1150,810],{"class":320},[314,1152,520],{"class":324},[314,1154,523],{"class":324},[314,1156,309],{"class":526},[314,1158,523],{"class":324},[314,1160,506],{"class":324},[314,1162,1163,1165,1167,1170,1172,1175,1177,1180,1182,1184,1186,1188,1191,1193],{"class":316,"line":328},[314,1164,321],{"class":320},[314,1166,698],{"class":324},[314,1168,1169],{"class":331}," data",[314,1171,335],{"class":324},[314,1173,1174],{"class":331}," pending",[314,1176,335],{"class":324},[314,1178,1179],{"class":331}," callTool ",[314,1181,422],{"class":324},[314,1183,425],{"class":324},[314,1185,429],{"class":428},[314,1187,432],{"class":324},[314,1189,1190],{"class":435},"PalettePayload",[314,1192,439],{"class":324},[314,1194,442],{"class":331},[314,1196,1197],{"class":316,"line":342},[314,1198,937],{"emptyLinePlaceholder":936},[314,1200,1201,1204,1207,1210,1212,1216,1218,1221,1223],{"class":316,"line":353},[314,1202,1203],{"class":320},"async",[314,1205,1206],{"class":320}," function",[314,1208,1209],{"class":428}," refresh",[314,1211,852],{"class":324},[314,1213,1215],{"class":1214},"sHdIc","base",[314,1217,613],{"class":324},[314,1219,1220],{"class":435}," string",[314,1222,1089],{"class":324},[314,1224,325],{"class":324},[314,1226,1227,1231,1234,1236,1238,1241,1243,1245,1247,1250,1253],{"class":316,"line":364},[314,1228,1230],{"class":1229},"s7zQu","  await",[314,1232,1233],{"class":428}," callTool",[314,1235,852],{"class":502},[314,1237,645],{"class":324},[314,1239,1240],{"class":526},"color-picker",[314,1242,645],{"class":324},[314,1244,335],{"class":324},[314,1246,698],{"class":324},[314,1248,1249],{"class":331}," base",[314,1251,1252],{"class":324}," }",[314,1254,885],{"class":502},[314,1256,1257],{"class":316,"line":375},[314,1258,792],{"class":324},[314,1260,1261,1263,1265],{"class":316,"line":386},[314,1262,592],{"class":324},[314,1264,804],{"class":502},[314,1266,506],{"class":324},[296,1268,1269],{},"Use this for filters, pagination, refresh buttons — anything that changes the query without a full chat round-trip.",[447,1271,1273],{"id":1272},"openlinkurl",[292,1274,1275],{},"openLink(url)",[296,1277,1278,1279,1282],{},"Sandbox iframes can't open windows. ",[292,1280,1281],{},"openLink"," asks the host to do it for you (e.g. open a booking confirmation in a new browser tab):",[305,1284,1286],{"className":491,"code":1285,"language":493,"meta":310,"style":310},"\u003Cbutton @click=\"openLink(`https:\u002F\u002Fexample.com\u002Fcolors\u002F${swatch.hex.slice(1)}`)\">\n  View on the web\n\u003C\u002Fbutton>\n",[292,1287,1288,1341,1346],{"__ignoreMap":310},[314,1289,1290,1292,1294,1296,1298,1300,1302,1304,1306,1308,1311,1313,1315,1317,1319,1321,1324,1326,1330,1332,1335,1337,1339],{"class":316,"line":317},[314,1291,432],{"class":324},[314,1293,1033],{"class":502},[314,1295,1036],{"class":324},[314,1297,1039],{"class":320},[314,1299,520],{"class":324},[314,1301,523],{"class":324},[314,1303,1281],{"class":428},[314,1305,852],{"class":331},[314,1307,1051],{"class":324},[314,1309,1310],{"class":526},"https:\u002F\u002Fexample.com\u002Fcolors\u002F",[314,1312,1057],{"class":324},[314,1314,1060],{"class":331},[314,1316,864],{"class":324},[314,1318,1079],{"class":331},[314,1320,864],{"class":324},[314,1322,1323],{"class":428},"slice",[314,1325,852],{"class":331},[314,1327,1329],{"class":1328},"sbssI","1",[314,1331,1089],{"class":331},[314,1333,1334],{"class":324},"}`",[314,1336,1089],{"class":331},[314,1338,523],{"class":324},[314,1340,506],{"class":324},[314,1342,1343],{"class":316,"line":328},[314,1344,1345],{"class":331},"  View on the web\n",[314,1347,1348,1350,1352],{"class":316,"line":342},[314,1349,592],{"class":324},[314,1351,1033],{"class":502},[314,1353,506],{"class":324},[1002,1355,1356,1357,1360,1361,1364],{"color":1004,"icon":1005},"Add the target host to ",[292,1358,1359],{},"csp.connectDomains"," if you also need to ",[292,1362,1363],{},"fetch()"," it from the iframe.",[1366,1367,1368],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":310,"searchDepth":328,"depth":328,"links":1370},[1371],{"id":290,"depth":328,"text":294,"children":1372},[1373,1375,1376,1378,1380],{"id":449,"depth":342,"text":1374},"data & loading",{"id":599,"depth":342,"text":602},{"id":1014,"depth":342,"text":1377},"sendPrompt(prompt) — Follow-Ups",{"id":1125,"depth":342,"text":1379},"callTool(name, params) — In-Place Refresh",{"id":1272,"depth":342,"text":1275},"data, hostContext, sendPrompt, callTool, and openLink from inside the iframe.","md",null,{},{"icon":174},{"title":1387,"description":1388},"MCP Apps — useMcpApp","Client bridge for MCP App iframes — loading state, host context, and host actions.","Hp5Q6M5-oiw_ueUIBwtuKzOSUv1r8GoCt65JUM-S2sU",[1391,1393],{"title":166,"path":167,"stem":168,"description":1392,"icon":169,"children":-1},"SFC location, quick start, the defineMcpApp macro, server handler, and shared types.",{"title":176,"path":177,"stem":178,"description":1394,"icon":64,"children":-1},"Content Security Policy, allow-listed domains, and how HTML bundles are produced.",1777888634612]