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