SuperAPI AI 工具集

convert-web-app

智能体与模型

查看项目

更新于 10-16 07:15

技能介绍

用途:把已有 Web 应用改造成混合 MCP App,无需复制代码库,独立网页与 MCP 内嵌两种形态共用同一套渲染逻辑,仅数据来源不同。独立模式由浏览器读取 URL 参数或 API;MCP 模式由主机调用工具、服务端返回结果、主机在 iframe 中渲染应用,应用读取 MCP 生命周期数据。

主要能力:环境探测(区分宿主与普通页面);数据源映射(URL 参数→ontoolinput/ontoolresult、REST→callServerTool 或 CSP、props→ontoolinput、localStorage→structuredContent);CSP 域声明(resourceDomains、connectDomains、frameDomains);注册工具与 HTML 资源;单文件构建;宿主样式与主题集成(applyDocumentTheme、applyHostStyleVariables、applyHostFonts、useHostStyles);可选增强如 app-only 辅助工具、流式部分输入 ontoolinputpartial、全屏模式与纯文本回退。

使用方式:git clone --branch "v$(npm view @modelcontextprotocol/ext-apps version)" --depth 1 https://github.com/modelcontextprotocol/ext-apps.git /tmp/mcp-ext-apps 获取参考代码与 JSDoc;安装依赖 npm install @modelcontextprotocol/ext-apps @modelcontextprotocol/sdk zod 与 npm install -D tsx vite vite-plugin-singlefile;按步骤分析现有应用、排查 CSP 来源、创建 server.ts 注册工具与资源、配置 Vite 单文件构建与独立 HTML 入口、在现有逻辑旁添加 MCP 初始化与环境探测。

适用场景:已有 Web 应用希望同时支持独立访问与 MCP 主机内嵌展示。

限制:MCP 模式运行于沙箱 iframe,无同源服务器,localStorage/sessionStorage 不可用,缺失的 CSP 来源会静默失败,必须使用 vite-plugin-singlefile 内联资源,所有处理器必须在 connect() 之前注册;具体收费、价格与平台支持资料暂未提供。