[{"data":1,"prerenderedAt":505},["ShallowReactive",2],{"navigation_docs":3,"-apps-overview":282,"-apps-overview-surround":500},[4,40,70,99,122,156,189,253],{"title":5,"path":6,"stem":7,"children":8,"page":39},"入门指南","\u002Fgetting-started","1.getting-started",[9,14,19,24,29,34],{"title":10,"path":11,"stem":12,"icon":13},"简介","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-book-open",{"title":15,"path":16,"stem":17,"icon":18},"安装","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":20,"path":21,"stem":22,"icon":23},"配置","\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},"工具","\u002Ftools","2.tools",[45,50,55,60,65],{"title":46,"path":47,"stem":48,"icon":49},"概览","\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},"注释与输入示例","\u002Ftools\u002Fannotations","2.tools\u002F2.annotations","i-lucide-badge-info",{"title":61,"path":62,"stem":63,"icon":64},"错误与缓存","\u002Ftools\u002Ferrors-caching","2.tools\u002F3.errors-caching","i-lucide-shield",{"title":66,"path":67,"stem":68,"icon":69},"分组、文件与动态注册","\u002Ftools\u002Fgroups-organization","2.tools\u002F4.groups-organization","i-lucide-tags",{"title":71,"path":72,"stem":73,"children":74,"page":39},"资源","\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},"静态资源与结构","\u002Fresources\u002Fstatic-and-structure","3.resources\u002F1.static-and-structure","i-lucide-file-stack",{"title":85,"path":86,"stem":87,"icon":88},"模板与处理程序","\u002Fresources\u002Ftemplates-and-handlers","3.resources\u002F2.templates-and-handlers","i-lucide-git-branch",{"title":90,"path":91,"stem":92,"icon":93},"元数据、内容与错误","\u002Fresources\u002Fcontent-metadata-errors","3.resources\u002F3.content-metadata-errors","i-lucide-layers",{"title":95,"path":96,"stem":97,"icon":98},"分组与组织","\u002Fresources\u002Forganization","3.resources\u002F4.organization","i-lucide-folder-tree",{"title":100,"path":101,"stem":102,"children":103,"page":39},"提示词","\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},"编写与结构","\u002Fprompts\u002Fauthoring","4.prompts\u002F1.authoring","i-lucide-pen-line",{"title":114,"path":115,"stem":116,"icon":93},"输入、处理器与消息","\u002Fprompts\u002Finput-handler-messages","4.prompts\u002F2.input-handler-messages",{"title":118,"path":119,"stem":120,"icon":121},"模式与高级用法","\u002Fprompts\u002Fpatterns-advanced","4.prompts\u002F3.patterns-advanced","i-lucide-line-chart",{"title":123,"path":124,"stem":125,"children":126,"page":39},"处理器","\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},"默认与自定义处理器","\u002Fhandlers\u002Fdefault-and-custom","5.handlers\u002F1.default-and-custom","i-lucide-toggle-left",{"title":137,"path":138,"stem":139,"icon":140},"结构与选项","\u002Fhandlers\u002Fstructure-and-options","5.handlers\u002F2.structure-and-options","i-lucide-sliders-horizontal",{"title":142,"path":143,"stem":144,"icon":145},"示例与路由","\u002Fhandlers\u002Fexamples-routing","5.handlers\u002F3.examples-routing","i-lucide-route",{"title":147,"path":148,"stem":149,"icon":150},"分享与实践","\u002Fhandlers\u002Fsharing-practices","5.handlers\u002F4.sharing-practices","i-lucide-share-2",{"title":152,"path":153,"stem":154,"icon":155},"多处理器组织","\u002Fhandlers\u002Forganization","5.handlers\u002F5.organization","i-lucide-network",{"title":157,"path":158,"stem":159,"children":160,"page":39},"应用","\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},"编写与 defineMcpApp","\u002Fapps\u002Fauthoring","6.apps\u002F1.authoring","i-lucide-code-2",{"title":171,"path":172,"stem":173,"icon":174},"useMcpApp() 桥接","\u002Fapps\u002Fuse-mcp-app","6.apps\u002F2.use-mcp-app","i-lucide-message-circle",{"title":176,"path":177,"stem":178,"icon":64},"CSP 与构建流水线","\u002Fapps\u002Fcsp-and-wiring","6.apps\u002F3.csp-and-wiring",{"title":180,"path":181,"stem":182,"icon":183},"测试与发布","\u002Fapps\u002Ftesting-publishing","6.apps\u002F4.testing-publishing","i-lucide-rocket",{"title":185,"path":186,"stem":187,"icon":188},"模式与限制","\u002Fapps\u002Fpatterns-reference","6.apps\u002F5.patterns-reference","i-lucide-book-marked",{"title":190,"path":191,"stem":192,"children":193,"page":39},"进阶主题","\u002Fadvanced","7.advanced",[194,199,204,209,214,218,223,228,233,238,243,248],{"title":195,"path":196,"stem":197,"icon":198},"自定义路径","\u002Fadvanced\u002Fcustom-paths","7.advanced\u002F1.custom-paths","i-lucide-folder",{"title":200,"path":201,"stem":202,"icon":203},"日志","\u002Fadvanced\u002Flogging","7.advanced\u002F10.logging","i-lucide-scroll-text",{"title":205,"path":206,"stem":207,"icon":208},"MCP Apps 内部机制","\u002Fadvanced\u002Fmcp-apps-internals","7.advanced\u002F11.mcp-apps-internals","i-lucide-cog",{"title":210,"path":211,"stem":212,"icon":213},"列出定义","\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 评估","\u002Fadvanced\u002Fevals","7.advanced\u002F5.evals","i-lucide-flask-conical",{"title":234,"path":235,"stem":236,"icon":237},"会话","\u002Fadvanced\u002Fsessions","7.advanced\u002F6.sessions","i-lucide-database",{"title":239,"path":240,"stem":241,"icon":242},"动态定义","\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},"启发式询问","\u002Fadvanced\u002Felicitation","7.advanced\u002F9.elicitation","i-lucide-message-square-quote",{"title":254,"path":255,"stem":256,"children":257,"page":39},"示例","\u002Fexamples","8.examples",[258,263,268,273,278],{"title":259,"path":260,"stem":261,"icon":262},"身份验证","\u002Fexamples\u002Fauthentication","8.examples\u002F1.authentication","i-lucide-shield-check",{"title":264,"path":265,"stem":266,"icon":267},"API 集成","\u002Fexamples\u002Fapi-integration","8.examples\u002F2.api-integration","i-lucide-globe",{"title":269,"path":270,"stem":271,"icon":272},"常见模式","\u002Fexamples\u002Fcommon-patterns","8.examples\u002F3.common-patterns","i-lucide-lightbulb",{"title":274,"path":275,"stem":276,"icon":277},"文件操作","\u002Fexamples\u002Ffile-operations","8.examples\u002F4.file-operations","i-lucide-file",{"title":279,"path":280,"stem":281,"icon":107},"提示词示例","\u002Fexamples\u002Fprompt-examples","8.examples\u002F5.prompt-examples",{"id":283,"title":157,"body":284,"description":483,"extension":484,"links":485,"meta":494,"navigation":495,"path":162,"seo":496,"stem":163,"__hash__":499},"docs\u002F6.apps\u002F0.overview.md",{"type":285,"value":286,"toc":478},"minimark",[287,292,301,329,335,369,439,442,468],[288,289,291],"h2",{"id":290},"什么是-mcp-应用","什么是 MCP 应用？",[293,294,295,296,300],"p",{},"MCP 应用是由 MCP 工具返回的 ",[297,298,299],"strong",{},"交互式 HTML 小部件","，并由兼容的主机以内联方式渲染。你的工具不会流式返回文本，而是提供一个用户可以阅读、滚动、筛选和点击的小型 UI——通过一个带类型的消息桥接与服务器重新连接。",[293,302,303,304,311,312,316,317,320,321,324,325,328],{},"它们遵循 ",[305,306,310],"a",{"href":307,"rel":308},"https:\u002F\u002Fmodelcontextprotocol.io",[309],"nofollow","MCP UI 提案（SEP-1865）","：工具返回一个由 ",[313,314,315],"code",{},"ui:\u002F\u002F"," 引用的 ",[313,318,319],{},"text\u002Fhtml;profile=mcp-app"," 资源，主机将其加载到一个沙箱化的 ",[313,322,323],{},"iframe"," 中，然后 iframe 通过 ",[313,326,327],{},"postMessage"," 进行回传通信。",[293,330,331,334],{},[313,332,333],{},"@nuxtjs\u002Fmcp-toolkit"," 让这种编写体验就像在写一个普通的 Nuxt 页面：",[336,337,338,350,360,366],"ul",{},[339,340,341,342,345,346,349],"li",{},"每个应用在 ",[313,343,344],{},"app\u002Fmcp\u002F"," 中对应一个 ",[297,347,348],{},"Vue SFC","。",[339,351,352,355,356,359],{},[313,353,354],{},"\u003Cscript setup>"," 中的 ",[313,357,358],{},"defineMcpApp"," 宏声明工具、schema 和服务器处理程序。",[339,361,362,365],{},[313,363,364],{},"useMcpApp()"," 可组合函数为你提供响应式数据、主机上下文，以及到主机的类型化桥接。",[339,367,368],{},"该工具包会在构建时将 SFC 打包为一个自包含的 HTML 文件，并通过你的 MCP 端点提供它。",[370,371,374,377,432],"prompt",{":actions":372,"description":373,"icon":164},"[\"copy\",\"cursor\",\"windsurf\"]","搭建一个新的 MCP 应用（Vue SFC）",[293,375,376],{},"使用 @nuxtjs\u002Fmcp-toolkit 在我的 Nuxt 应用中创建一个新的 MCP 应用。",[336,378,379,382,391,394,397,404,407,410,413,416,419,429],{},[339,380,381],{},"在 app\u002Fmcp\u002F 中创建一个 Vue SFC（例如 app\u002Fmcp\u002Fcolor-picker.vue）",[339,383,384,385],{},"在 ",[386,387,390],"script",{"setup":388,"lang":389},"","ts"," 中使用 defineMcpApp({ description, inputSchema, handler })",[339,392,393],{},"inputSchema 使用 Zod；handler 在服务端运行并返回 { structuredContent }",[339,395,396],{},"handler 可以通过 $fetch 调用任何 Nuxt API 路由——将繁重的数据处理保留在服务端",[339,398,399,400],{},"在模板中，调用 useMcpApp",[401,402,403],"t-payload",{},"() 以获取 { data, loading, hostContext, sendPrompt, callTool, openLink }",[339,405,406],{},"首次渲染时，data 会从 structuredContent 中进行 hydrate——无需额外请求",[339,408,409],{},"使用 sendPrompt(text) 将后续内容推送到聊天中，从而触发另一个工具\u002F应用",[339,411,412],{},"使用 callTool(name, params) 重新调用一个 MCP 工具并在原位刷新数据",[339,414,415],{},"使用 openLink(url) 请求主机在 iframe 外打开一个 URL",[339,417,418],{},"如果你要加载图片或调用外部 API，请使用 csp: { resourceDomains, connectDomains } 添加 CSP 白名单",[339,420,421,422],{},"要将应用路由到专用处理程序，可以将 SFC 放在 app\u002Fmcp\u002F",[423,424,425,426],"handler",{},"\u002F 下，或者在 defineMcpApp 上设置 attachTo: '",[423,427,428],{},"'（字符串字面量）。group 和 tags 也接受字面量。",[339,430,431],{},"让布局保持流动式（不要固定高度）；主机通常会以可变宽度以内联方式渲染 iframe",[293,433,434,435],{},"文档：",[305,436,437],{"href":437,"rel":438},"https:\u002F\u002Fmcp-toolkit.nuxt.dev\u002Fapps\u002Foverview",[309],[288,440,441],{"id":441},"进一步了解",[443,444,445,451,464],"card-group",{},[446,447,450],"card",{"color":448,"icon":208,"title":449,"to":206},"neutral","MCP 应用内部机制","构建流水线、主机桥接协议、安全模型以及高级组合模式。",[446,452,455,456,459,460,463],{"color":448,"icon":155,"title":453,"to":454},"多处理程序组织","\u002Fapps\u002Fauthoring#routing-apps-to-a-specific-handler","通过子文件夹或 ",[313,457,458],{},"attachTo"," 将应用路由到专用的 MCP 端点（例如 ",[313,461,462],{},"\u002Fmcp\u002Ffinder","）。",[446,465,467],{"color":448,"icon":262,"title":466,"to":260},"验证客户端","使用与工具相同的模式，隐藏匿名调用者对应用的访问。",[293,469,470,471,473,474,477],{},"本节其余部分假定你已经熟悉 ",[305,472,41],{"href":47},"（Zod、处理程序），并且已经阅读了 ",[305,475,476],{"href":31},"连接","，了解开发和生产环境中的 MCP URL。",{"title":388,"searchDepth":479,"depth":479,"links":480},2,[481,482],{"id":290,"depth":479,"text":291},{"id":441,"depth":479,"text":441},"构建交互式 UI 小部件，让 AI 主机与聊天内容并排渲染——以 Vue SFC 编写，作为 MCP UI 资源提供。","md",[486,489,491,493],{"label":487,"icon":169,"to":167,"color":448,"variant":488},"编写","subtle",{"label":490,"icon":174,"to":172,"color":448,"variant":488},"useMcpApp 桥接",{"label":492,"icon":64,"to":177,"color":448,"variant":488},"CSP 与管线",{"label":180,"icon":183,"to":181,"color":448,"variant":488},{},{"title":46,"icon":164},{"title":497,"description":498},"MCP 应用","将 MCP UI 应用编写为 Vue 单文件组件。自动打包，从真实的 Nuxt 端点提供，并在兼容 MCP 应用的主机内渲染。","H5MQShYwUO6tcxhLWk7Kt8yypxOzWikglwFEla9Xk3I",[501,503],{"title":152,"path":153,"stem":154,"description":502,"icon":155,"children":-1},"通过文件夹约定自动将自动发现的定义归属到多个 MCP 处理器，并为交叉切分场景提供一个基于函数的逃生口。",{"title":166,"path":167,"stem":168,"description":504,"icon":169,"children":-1},"SFC 位置、快速开始、defineMcpApp 宏、服务器处理器，以及共享类型。",1778659574535]