[{"data":1,"prerenderedAt":779},["ShallowReactive",2],{"navigation_docs":3,"-apps-csp-and-wiring":282,"-apps-csp-and-wiring-surround":774},[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":176,"body":284,"description":765,"extension":766,"links":767,"meta":768,"navigation":769,"path":177,"seo":770,"stem":178,"__hash__":773},"docs\u002F6.apps\u002F3.csp-and-wiring.md",{"type":285,"value":286,"toc":761},"minimark",[287,292,301,319,322,564,575,584,647,658,661,672,703,706,748,757],[288,289,291],"h2",{"id":290},"csp-与资源允许列表","CSP 与资源允许列表",[293,294,295,296,300],"p",{},"该工具包会向每个应用的 HTML 注入一个 ",[297,298,299],"strong",{},"保守的内容安全策略","。默认情况下，iframe 可以：",[302,303,304,308,311],"ul",{},[305,306,307],"li",{},"只运行其自身的内联脚本。",[305,309,310],{},"仅从同一响应中渲染图片和样式。",[305,312,313,314,318],{},"通过 ",[315,316,317],"code",{},"postMessage"," 与其父宿主通信。",[293,320,321],{},"如果你的 UI 需要外部资源或 API，请显式允许它们：",[323,324,330],"pre",{"className":325,"code":326,"filename":327,"language":328,"meta":329,"style":329},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\ndefineMcpApp({\n  description: '选择一种颜色并预览调色板。',\n  csp: {\n    resourceDomains: ['https:\u002F\u002Fimages.unsplash.com'],\n    connectDomains: ['https:\u002F\u002Fapi.example.com'],\n  },\n  handler: async ({ base }) => ({ structuredContent: await $fetch('\u002Fapi\u002Fpalette', { query: { base } }) }),\n})\n\u003C\u002Fscript>\n","app\u002Fmcp\u002Fcolor-picker.vue","vue","",[315,331,332,367,381,402,413,436,457,463,546,554],{"__ignoreMap":329},[333,334,337,341,345,349,352,355,358,362,364],"span",{"class":335,"line":336},"line",1,[333,338,340],{"class":339},"sMK4o","\u003C",[333,342,344],{"class":343},"swJcz","script",[333,346,348],{"class":347},"spNyl"," setup",[333,350,351],{"class":347}," lang",[333,353,354],{"class":339},"=",[333,356,357],{"class":339},"\"",[333,359,361],{"class":360},"sfazB","ts",[333,363,357],{"class":339},[333,365,366],{"class":339},">\n",[333,368,370,374,378],{"class":335,"line":369},2,[333,371,373],{"class":372},"s2Zo4","defineMcpApp",[333,375,377],{"class":376},"sTEyZ","(",[333,379,380],{"class":339},"{\n",[333,382,384,387,390,393,396,399],{"class":335,"line":383},3,[333,385,386],{"class":343},"  description",[333,388,389],{"class":339},":",[333,391,392],{"class":339}," '",[333,394,395],{"class":360},"选择一种颜色并预览调色板。",[333,397,398],{"class":339},"'",[333,400,401],{"class":339},",\n",[333,403,405,408,410],{"class":335,"line":404},4,[333,406,407],{"class":343},"  csp",[333,409,389],{"class":339},[333,411,412],{"class":339}," {\n",[333,414,416,419,421,424,426,429,431,434],{"class":335,"line":415},5,[333,417,418],{"class":343},"    resourceDomains",[333,420,389],{"class":339},[333,422,423],{"class":376}," [",[333,425,398],{"class":339},[333,427,428],{"class":360},"https:\u002F\u002Fimages.unsplash.com",[333,430,398],{"class":339},[333,432,433],{"class":376},"]",[333,435,401],{"class":339},[333,437,439,442,444,446,448,451,453,455],{"class":335,"line":438},6,[333,440,441],{"class":343},"    connectDomains",[333,443,389],{"class":339},[333,445,423],{"class":376},[333,447,398],{"class":339},[333,449,450],{"class":360},"https:\u002F\u002Fapi.example.com",[333,452,398],{"class":339},[333,454,433],{"class":376},[333,456,401],{"class":339},[333,458,460],{"class":335,"line":459},7,[333,461,462],{"class":339},"  },\n",[333,464,466,469,471,474,477,481,484,487,490,493,496,498,502,505,507,509,512,514,517,520,523,525,527,530,533,536,539,541,544],{"class":335,"line":465},8,[333,467,468],{"class":372},"  handler",[333,470,389],{"class":339},[333,472,473],{"class":347}," async",[333,475,476],{"class":339}," ({",[333,478,480],{"class":479},"sHdIc"," base",[333,482,483],{"class":339}," })",[333,485,486],{"class":347}," =>",[333,488,489],{"class":376}," (",[333,491,492],{"class":339},"{",[333,494,495],{"class":343}," structuredContent",[333,497,389],{"class":339},[333,499,501],{"class":500},"s7zQu"," await",[333,503,504],{"class":372}," $fetch",[333,506,377],{"class":376},[333,508,398],{"class":339},[333,510,511],{"class":360},"\u002Fapi\u002Fpalette",[333,513,398],{"class":339},[333,515,516],{"class":339},",",[333,518,519],{"class":339}," {",[333,521,522],{"class":343}," query",[333,524,389],{"class":339},[333,526,519],{"class":339},[333,528,529],{"class":376}," base ",[333,531,532],{"class":339},"}",[333,534,535],{"class":339}," }",[333,537,538],{"class":376},") ",[333,540,532],{"class":339},[333,542,543],{"class":376},")",[333,545,401],{"class":339},[333,547,549,551],{"class":335,"line":548},9,[333,550,532],{"class":339},[333,552,553],{"class":376},")\n",[333,555,557,560,562],{"class":335,"line":556},10,[333,558,559],{"class":339},"\u003C\u002F",[333,561,344],{"class":343},[333,563,366],{"class":339},[293,565,566,567,570,571,574],{},"CSP 会镜像到 ",[315,568,569],{},"_meta.ui.csp","（以及 ChatGPT 的 ",[315,572,573],{},"openai\u002FwidgetCSP","），因此在 iframe 级别强制执行 CSP 的宿主也会采用相同规则。",[576,577,579,580,583],"callout",{"color":578,"icon":64},"warning","仅在万不得已时才传入 ",[315,581,582],{},"csp: false"," —— 并且仅当你完全控制 iframe 加载的资源时才这样做。默认策略正是让应用能够在不同宿主之间安全渲染的关键。",[585,586,587,600],"table",{},[588,589,590],"thead",{},[591,592,593,597],"tr",{},[594,595,596],"th",{},"字段",[594,598,599],{},"它允许什么",[601,602,603,625],"tbody",{},[591,604,605,611],{},[606,607,608],"td",{},[315,609,610],{},"resourceDomains",[606,612,613,614,617,618,617,621,624],{},"来自这些源的 ",[315,615,616],{},"\u003Cimg>","、",[315,619,620],{},"\u003Cstyle>",[315,622,623],{},"\u003Clink>","、字体",[591,626,627,632],{},[606,628,629],{},[315,630,631],{},"connectDomains",[606,633,634,635,617,638,617,641,617,644],{},"到这些源的 ",[315,636,637],{},"fetch()",[315,639,640],{},"XHR",[315,642,643],{},"WebSocket",[315,645,646],{},"EventSource",[293,648,649,650,653,654,657],{},"来源应使用 ",[315,651,652],{},"http(s):\u002F\u002F"," 或 ",[315,655,656],{},"ws(s):\u002F\u002F","。在应用响应被提供之前，该工具包会拒绝空值、不受支持的 URL 协议、空白、引号和分号。",[288,659,660],{"id":660},"它是如何连接的",[293,662,663,664,667,668,671],{},"在幕后，配置好的 apps 目录下的每个 ",[315,665,666],{},".vue"," 文件在构建时都会变成 ",[297,669,670],{},"三种产物","：",[673,674,675,682,697],"ol",{},[305,676,677,678,681],{},"在你的 MCP 处理器上注册的一个 ",[297,679,680],{},"工具定义","（输入 schema、描述、服务器处理函数）。",[305,683,684,685,688,689,692,693,696],{},"一个位于 ",[315,686,687],{},"ui:\u002F\u002Fmcp-app\u002F\u003Cname>"," 的 ",[297,690,691],{},"UI 资源","，返回 ",[315,694,695],{},"text\u002Fhtml;profile=mcp-app","。",[305,698,699,700,696],{},"一个将 Vue SFC（Vue runtime、你的代码、作用域 CSS、资源）内联进资源响应中的 ",[297,701,702],{},"单文件 HTML bundle",[293,704,705],{},"当 LLM 调用该工具时：",[673,707,708,718,724,735],{},[305,709,710,711,714,715,696],{},"你的 ",[315,712,713],{},"handler"," 在服务器上运行并生成 ",[315,716,717],{},"structuredContent",[305,719,720,721,696],{},"工具包将这些数据注入到打包后的 HTML 中，形式为 ",[315,722,723],{},"\u003Cscript type=\"application\u002Fjson\" id=\"__mcp_app_data__\">…\u003C\u002Fscript>",[305,725,726,727,730,731,734],{},"宿主将该资源返回给用户；其 iframe 启动，并且 ",[315,728,729],{},"useMcpApp()"," 会同步将内联数据读取到 ",[315,732,733],{},"data"," 中。",[305,736,737,738,617,741,617,744,747],{},"从那里开始，iframe 和宿主通过 JSON-RPC 桥交换 ",[315,739,740],{},"callTool",[315,742,743],{},"sendPrompt",[315,745,746],{},"openLink"," 以及主题\u002F尺寸更新等消息。",[576,749,752,753,756],{"color":750,"icon":751},"primary","i-lucide-zap","一切都在 ",[297,754,755],{},"一个 HTML 响应"," 中交付。iframe 不需要额外的 HTTP 请求，没有瀑布流，没有闪烁。",[758,759,760],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html .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);}",{"title":329,"searchDepth":369,"depth":369,"links":762},[763,764],{"id":290,"depth":369,"text":291},{"id":660,"depth":369,"text":660},"内容安全策略、允许列表域名，以及 HTML bundle 的生成方式。","md",null,{},{"icon":64},{"title":771,"description":772},"MCP Apps — CSP 与绑定","iframe CSP、外部资源，以及 MCP UI 资源的构建流水线。","1n2MeVHsPmPmOrc7IMsKPzk5YJm7UVTP7SGRpp0RqBg",[775,777],{"title":171,"path":172,"stem":173,"description":776,"icon":174,"children":-1},"来自 iframe 内部的 data、hostContext、sendPrompt、callTool 和 openLink。",{"title":180,"path":181,"stem":182,"description":778,"icon":183,"children":-1},"在本地测试 MCP Apps，选择兼容的宿主，并为 ChatGPT、Claude 和 IDE 客户端部署 HTTPS 端点。",1778659578956]