用途
该技能用于为已有的 Web 应用添加 MCP App 支持，使其能在同一份代码基础上，既作为独立 Web 应用使用，也能作为 MCP App 在 Claude Desktop 等支持 MCP 的主机中内联渲染。
主要能力
- 保持原有 Web 应用不变，仅新增一层轻量初始化逻辑，用于检测应用运行在 MCP 主机内还是作为普通网页，并从对应来源获取参数。
- 新增 MCP 服务器，将应用的打包 HTML 作为资源包装并提供，同时注册用于展示该应用的工具。
- 两种模式共享渲染逻辑，只有数据来源不同。
- 提供主机样式集成能力，包括主题、CSS 变量与字体，并建议使用带回退值的 CSS 变量，使独立模式同样显示正常。
- 可选增强能力：仅应用可调用的辅助工具、流式部分输入预览、全屏模式、以及为非 UI 主机提供的文本回退。
使用方式
技能流程分为以下步骤：
- 分析现有 Web 应用：调查数据来源、外部依赖、构建系统、用户交互与运行环境检测方式，并向用户确认方案。
- 调查 CSP 要求：构建应用并检索 HTML、CSS、JS 中引用的所有来源，整理为 resourceDomains、connectDomains、frameDomains 三类，并标注其属于通用、仅开发还是仅生产环境。
- 搭建 MCP 服务器：安装依赖、创建 server.ts，注册工具与资源，并添加构建脚本。
- 调整构建流水线：使用 vite-plugin-singlefile 将 MCP App 构建为单一 HTML 文件，独立 Web 应用构建保持不变；新增 HTML 入口点；采用两阶段构建（Vite 打包 UI，服务器单独编译）。
- 在现有逻辑旁添加 MCP App 初始化：通过运行环境检测（如 origin 判断、null origin、查询参数）选择参数来源。文件提供了 URL 参数、API 调用、localStorage/sessionStorage 等混合模式的示例代码，以及完整的混合示例。
- 添加主机样式集成（仅 MCP 模式）：Vanilla JS 使用辅助函数，React 使用 hooks；CSS 中使用 var() 并配合回退值。
依赖安装命令：
npm install @modelcontextprotocol/ext-apps @modelcontextprotocol/client@^2.0.0 @modelcontextprotocol/server@^2.0.0 zod@^4.2.0
npm install -D tsx vite vite-plugin-singlefile
获取参考代码：
git clone --branch "v$(npm view @modelcontextprotocol/ext-apps version)" --depth 1 https://github.com/modelcontextprotocol/ext-apps.git /tmp/mcp-ext-apps
适用场景
- 希望将已有 Web 应用接入支持 MCP 的主机（如 Claude Desktop），并以内联方式渲染。
- 希望一份代码同时支持独立网页与 MCP App 两种运行形态。
- 需要参考 SDK API（App 类、注册工具与资源、样式辅助函数、React hooks）及多框架模板（vanilla JS、React、Vue、Svelte、Preact、Solid）进行适配。
限制
- MCP Apps HTML 运行在无同源服务器的沙箱 iframe 中，所有外部来源必须在 CSP 中声明，缺失来源会静默失败。
- 沙箱 iframe 中不可用 localStorage / sessionStorage，需改由 structuredContent 或服务器端状态传递。
- 需使用 npm install 让包管理器解析版本；ext-apps 2.x 需要拆分后的基础 MCP SDK 包（@modelcontextprotocol/core 会传递引入）。不应添加旧版 @modelcontextprotocol/sdk v1 包，也不应替换为未发布的本地包。
- 各步骤均未提供具体的收费或价格信息。