[{"data":1,"prerenderedAt":519},["ShallowReactive",2],{"navigation_docs":3,"-apps-overview":287,"-apps-overview-surround":514},[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":157,"body":289,"description":497,"extension":498,"links":499,"meta":508,"navigation":509,"path":162,"seo":510,"stem":163,"__hash__":513},"docs\u002F6.apps\u002F0.overview.md",{"type":290,"value":291,"toc":492},"minimark",[292,297,306,334,340,374,455,459,483],[293,294,296],"h2",{"id":295},"what-are-mcp-apps","What are MCP Apps?",[298,299,300,301,305],"p",{},"MCP Apps are ",[302,303,304],"strong",{},"interactive HTML widgets"," returned by an MCP tool and rendered inline by compatible hosts. Instead of streaming back text, your tool ships a small UI that the user can read, scroll, filter, and click — connected back to your server through a typed message bridge.",[298,307,308,309,316,317,321,322,325,326,329,330,333],{},"They follow the ",[310,311,315],"a",{"href":312,"rel":313},"https:\u002F\u002Fmodelcontextprotocol.io",[314],"nofollow","MCP UI proposal (SEP-1865)",": a tool returns a ",[318,319,320],"code",{},"text\u002Fhtml;profile=mcp-app"," resource referenced by ",[318,323,324],{},"ui:\u002F\u002F",", the host loads it inside a sandboxed ",[318,327,328],{},"iframe",", and the iframe talks back over ",[318,331,332],{},"postMessage",".",[298,335,336,339],{},[318,337,338],{},"@nuxtjs\u002Fmcp-toolkit"," makes that authoring experience feel like writing a regular Nuxt page:",[341,342,343,354,365,371],"ul",{},[344,345,346,347,350,351,333],"li",{},"One ",[302,348,349],{},"Vue SFC"," per app in ",[318,352,353],{},"app\u002Fmcp\u002F",[344,355,356,357,360,361,364],{},"A ",[318,358,359],{},"defineMcpApp"," macro inside ",[318,362,363],{},"\u003Cscript setup>"," declares the tool, schema, and server handler.",[344,366,356,367,370],{},[318,368,369],{},"useMcpApp()"," composable gives you reactive data, host context, and a typed bridge to the host.",[344,372,373],{},"The toolkit bundles the SFC into a single self-contained HTML file at build time and serves it from your MCP endpoint.",[375,376,379,382,448],"prompt",{":actions":377,"description":378,"icon":164},"[\"copy\",\"cursor\",\"windsurf\"]","Scaffold a new MCP App (Vue SFC)",[298,380,381],{},"Create a new MCP App in my Nuxt app using @nuxtjs\u002Fmcp-toolkit.",[341,383,384,387,395,398,401,408,411,414,417,420,423,445],{},[344,385,386],{},"Create a Vue SFC in app\u002Fmcp\u002F (e.g. app\u002Fmcp\u002Fcolor-picker.vue)",[344,388,389,390],{},"Use defineMcpApp({ description, inputSchema, handler }) inside ",[391,392],"script",{"setup":393,"lang":394},"","ts",[344,396,397],{},"inputSchema uses Zod; handler runs server-side and returns { structuredContent }",[344,399,400],{},"handler can call any Nuxt API route via $fetch — keep heavy data work on the server",[344,402,403,404],{},"In the template, call useMcpApp",[405,406,407],"t-payload",{},"() to get { data, loading, hostContext, sendPrompt, callTool, openLink }",[344,409,410],{},"data is hydrated from structuredContent on first render — no extra request",[344,412,413],{},"Use sendPrompt(text) to push a follow-up into the chat that triggers another tool\u002Fapp",[344,415,416],{},"Use callTool(name, params) to re-invoke an MCP tool and refresh data in place",[344,418,419],{},"Use openLink(url) to ask the host to open a URL outside the iframe",[344,421,422],{},"Add CSP allow-lists with csp: { resourceDomains, connectDomains } if you load images or call external APIs",[344,424,425,426,429,430,433,434,436,437,440,441,444],{},"To route the app to a dedicated handler, either drop the SFC under ",[318,427,428],{},"app\u002Fmcp\u002F\u003Chandler>\u002F"," or set ",[318,431,432],{},"attachTo: '\u003Chandler>'"," (string literal) on ",[318,435,359],{},". ",[318,438,439],{},"group"," and ",[318,442,443],{},"tags"," are also accepted as literals.",[344,446,447],{},"Make the layout fluid (no fixed heights); hosts often render the iframe inline at variable widths",[298,449,450,451],{},"Docs: ",[310,452,453],{"href":453,"rel":454},"https:\u002F\u002Fmcp-toolkit.nuxt.dev\u002Fapps\u002Foverview",[314],[293,456,458],{"id":457},"going-further","Going further",[460,461,462,468,479],"card-group",{},[463,464,467],"card",{"color":465,"icon":208,"title":466,"to":206},"neutral","MCP Apps internals","Build pipeline, host bridge protocol, security model, and advanced composition patterns.",[463,469,471,472,475,476,333],{"color":465,"icon":155,"title":152,"to":470},"\u002Fapps\u002Fauthoring#routing-apps-to-a-specific-handler","Route apps to dedicated MCP endpoints (e.g. ",[318,473,474],{},"\u002Fmcp\u002Ffinder",") via sub-folders or ",[318,477,478],{},"attachTo",[463,480,482],{"color":465,"icon":267,"title":481,"to":265},"Authenticate clients","Hide apps from anonymous callers with the same patterns as tools.",[298,484,485,486,488,489,491],{},"The rest of this section assumes you are comfortable with ",[310,487,41],{"href":47}," (Zod, handlers) and have read ",[310,490,30],{"href":31}," for MCP URLs in dev and production.",{"title":393,"searchDepth":493,"depth":493,"links":494},2,[495,496],{"id":295,"depth":493,"text":296},{"id":457,"depth":493,"text":458},"Build interactive UI widgets that AI hosts render alongside chat — written as Vue SFCs, served as MCP UI resources.","md",[500,503,505,507],{"label":501,"icon":169,"to":167,"color":465,"variant":502},"Authoring","subtle",{"label":504,"icon":174,"to":172,"color":465,"variant":502},"useMcpApp bridge",{"label":506,"icon":64,"to":177,"color":465,"variant":502},"CSP & pipeline",{"label":180,"icon":183,"to":181,"color":465,"variant":502},{},{"title":46,"icon":164},{"title":511,"description":512},"MCP Apps","Author MCP UI Apps as Vue Single-File Components. Auto-bundled, served from a real Nuxt endpoint, and rendered inside MCP Apps-compatible hosts.","FlSWQ550UEqwi-XqbRANnd70N6lN6N6DaMFzGroDzqo",[515,517],{"title":152,"path":153,"stem":154,"description":516,"icon":155,"children":-1},"Auto-attribute auto-discovered definitions to multiple MCP handlers via folder convention, with a function-based escape hatch for cross-cutting cases.",{"title":166,"path":167,"stem":168,"description":518,"icon":169,"children":-1},"SFC location, quick start, the defineMcpApp macro, server handler, and shared types.",1787670838613]