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