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