MCP Apps 项目配置终极指南tsconfig、vite.config 与 package.json 全解析【免费下载链接】ext-appsOfficial repo for spec SDK of MCP Apps protocol - standard for UIs embedded AI chatbots, served by MCP servers项目地址: https://gitcode.com/GitHub_Trending/ex/ext-apps对于想开发 AI 聊天界面插件的新手来说MCP Apps 是官方推出的 MCP Apps 协议规范与 SDK 仓库它让 MCP 服务器能在 Claude Desktop 等对话客户端中直接渲染交互式 UI。而要让项目跑起来最关键的三个配置文件是package.json、tsconfig.json和vite.config.ts。本文带你用 5 分钟看懂这套配置的每一项设计意图快速搭建并运行你的第一个 MCP App。package.jsonSDK 的多入口与脚本体系根目录的 package.json 是整个仓库的“总开关”几个新手最容易忽略的细节配置项值作用typemodule全仓库使用 ES Modules服务器代码可用import.meta.dirnameengines.node20要求 Node 20低版本会启动失败workspacesexamples/*每个示例都是一个子包npm install一次装齐所有依赖多入口导出exports字段把 SDK 拆成了 5 个入口——.核心 App 类、./react、./server、./app-bridge、./schema.json。写服务器端代码时引入modelcontextprotocol/ext-apps/server即可这正是 examples/quickstart/server.ts 的用法。核心脚本新手只需记住这 3 个npm run examples:dev—— 开发模式同时启动所有示例服务器start是它的别名npm run build—— 生成 schema、同步示例代码片段再用 Bun 打包 SDK 本体npm run test:e2e—— 用 Playwright 对全部示例做端到端截图回归测试依赖版本约定根package.json的peerDependencies声明了 SDK 与宿主项目的协作关系modelcontextprotocol/sdk ^1.29.0是必选 peer 依赖react为可选 peer 依赖peerDependenciesMeta中optional: true意味着非 React 用户Vue、Svelte、原生 JS 示例不会被迫安装 React。tsconfig.json双配置分离前后端每个示例项目都有两份tsconfig这是 MCP Apps 项目最有辨识度的配置模式前端配置tsconfig.json以 examples/quickstart/tsconfig.json 为例noEmit: true—— 前端代码只检查不输出真正打包交给 VitemoduleResolution: bundler—— 适配 Vite 的包管理解析方式允许allowImportingTsExtensionsstrictnoUnusedLocalsnoUnusedParameters—— 严格模式加防呆检查保证 UI 代码质量根目录的 tsconfig.json 则面向 SDK 本体emitDeclarationOnly: true让 tsc 只产出类型声明文件到dist/JS 产物交给 Bun 处理。服务器配置tsconfig.server.jsonexamples/quickstart/tsconfig.server.json 服务于server.ts和main.tsmodule: NodeNextmoduleResolution: NodeNext—— 服务器运行在 Node 环境必须用 Node 的模块解析规则emitDeclarationOnly: trueoutDir: ./dist—— 为服务器代码生成类型声明target: ES2022—— 与前端ESNext区分锁定 Node 实际支持的语法级别 一句话总结前端用bundler解析交给 Vite后端用NodeNext解析交给 Node——两份配置各司其职互不干扰。vite.config.ts为什么 UI 要打成单个 HTMLMCP Apps 的 UI 是通过 MCP 资源resource以文本形式发给宿主、再嵌入 iframe 渲染的所以它必须是一个自包含的单文件 HTML。这正是 examples/quickstart/vite.config.ts 的设计核心plugins: [viteSingleFile()], rollupOptions: { input: INPUT }, // INPUT 由环境变量指定如 mcp-app.html outDir: dist,vite-plugin-singlefile把 JS、CSS 全部内联进一个 HTML产出dist/mcp-app.html服务器直接读文件返回即可见 server.ts 中fs.readFile的用法INPUT环境变量入口不在配置里写死而是通过cross-env INPUTmcp-app.html注入同一个 vite 配置可复用于多个入口页lazy-auth-server 就有两个 HTML 入口开发体验NODE_ENVdevelopment时开启 inline sourcemap 便于调试发布时自动压缩 CSS 和 JSReact 用户在此基础上只需多加一个react()插件对比 examples/basic-server-react/vite.config.ts 即可一目了然。一键配置build 与 start 脚本的分工examples/quickstart/package.json 的 scripts 是整套配置的“总装配线”build: tsc --noEmit \ tsc -p tsconfig.server.json \ cross-env INPUTmcp-app.html vite build start: concurrently --raw \ cross-env NODE_ENVdevelopment INPUTmcp-app.html vite build --watch \ tsx watch main.ts执行顺序非常讲究tsc --noEmit用前端 tsconfig 做全量类型检查不产出文件tsc -p tsconfig.server.json为服务器代码生成声明文件vite build把 UI 打包成单文件 HTMLstart则用concurrently同时跑两个进程Vite 的--watch增量构建 tsx watch热重启服务器改完代码即时生效。配置检查清单跑不起来先查这 4 处症状优先检查启动报INPUT environment variable is not set忘了加cross-env INPUTxxx.html类型检查报错但能运行noUnusedLocals/strict生效清理未使用变量服务器导入找不到模块检查tsconfig.server.json是否为NodeNextimport 是否带扩展名e2e 测试连接失败参考 playwright.config.ts测试会先执行npm run examples:start拉起http://localhost:8080下一步从 Quickstart 到你的 MCP App配置理解到位后建议按这个路径学习均为仓库内置示例可直接npm start运行快速上手docs/quickstart.md 手把手教你搭建获取服务器时间应用完整代码在 examples/quickstart/原生 JS 进阶examples/basic-server-vanillajs/ 演示主题、生命周期等宿主通信能力框架版本React / Vue / Svelte / Preact / Solid 五种实现分别在 examples/basic-server-react/ 等目录协议规范specification/draft/apps.mdx 是协议草案原文specification/2026-01-26/apps.mdx 为已发布版本掌握package.json的多入口与脚本、双tsconfig的前后端分离、vite.config.ts的单文件打包这三块你就能独立修改并扩展 examples/ 下任何一个 MCP Apps 示例开始构建自己的交互式 AI 界面了。【免费下载链接】ext-appsOfficial repo for spec SDK of MCP Apps protocol - standard for UIs embedded AI chatbots, served by MCP servers项目地址: https://gitcode.com/GitHub_Trending/ex/ext-apps创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 MCP Apps 项目配置终极指南：tsconfig、vite.config 与 package.json 全解析
MCP Apps 项目配置终极指南tsconfig、vite.config 与 package.json 全解析【免费下载链接】ext-appsOfficial repo for spec SDK of MCP Apps protocol - standard for UIs embedded AI chatbots, served by MCP servers项目地址: https://gitcode.com/GitHub_Trending/ex/ext-apps对于想开发 AI 聊天界面插件的新手来说MCP Apps 是官方推出的 MCP Apps 协议规范与 SDK 仓库它让 MCP 服务器能在 Claude Desktop 等对话客户端中直接渲染交互式 UI。而要让项目跑起来最关键的三个配置文件是package.json、tsconfig.json和vite.config.ts。本文带你用 5 分钟看懂这套配置的每一项设计意图快速搭建并运行你的第一个 MCP App。package.jsonSDK 的多入口与脚本体系根目录的 package.json 是整个仓库的“总开关”几个新手最容易忽略的细节配置项值作用typemodule全仓库使用 ES Modules服务器代码可用import.meta.dirnameengines.node20要求 Node 20低版本会启动失败workspacesexamples/*每个示例都是一个子包npm install一次装齐所有依赖多入口导出exports字段把 SDK 拆成了 5 个入口——.核心 App 类、./react、./server、./app-bridge、./schema.json。写服务器端代码时引入modelcontextprotocol/ext-apps/server即可这正是 examples/quickstart/server.ts 的用法。核心脚本新手只需记住这 3 个npm run examples:dev—— 开发模式同时启动所有示例服务器start是它的别名npm run build—— 生成 schema、同步示例代码片段再用 Bun 打包 SDK 本体npm run test:e2e—— 用 Playwright 对全部示例做端到端截图回归测试依赖版本约定根package.json的peerDependencies声明了 SDK 与宿主项目的协作关系modelcontextprotocol/sdk ^1.29.0是必选 peer 依赖react为可选 peer 依赖peerDependenciesMeta中optional: true意味着非 React 用户Vue、Svelte、原生 JS 示例不会被迫安装 React。tsconfig.json双配置分离前后端每个示例项目都有两份tsconfig这是 MCP Apps 项目最有辨识度的配置模式前端配置tsconfig.json以 examples/quickstart/tsconfig.json 为例noEmit: true—— 前端代码只检查不输出真正打包交给 VitemoduleResolution: bundler—— 适配 Vite 的包管理解析方式允许allowImportingTsExtensionsstrictnoUnusedLocalsnoUnusedParameters—— 严格模式加防呆检查保证 UI 代码质量根目录的 tsconfig.json 则面向 SDK 本体emitDeclarationOnly: true让 tsc 只产出类型声明文件到dist/JS 产物交给 Bun 处理。服务器配置tsconfig.server.jsonexamples/quickstart/tsconfig.server.json 服务于server.ts和main.tsmodule: NodeNextmoduleResolution: NodeNext—— 服务器运行在 Node 环境必须用 Node 的模块解析规则emitDeclarationOnly: trueoutDir: ./dist—— 为服务器代码生成类型声明target: ES2022—— 与前端ESNext区分锁定 Node 实际支持的语法级别 一句话总结前端用bundler解析交给 Vite后端用NodeNext解析交给 Node——两份配置各司其职互不干扰。vite.config.ts为什么 UI 要打成单个 HTMLMCP Apps 的 UI 是通过 MCP 资源resource以文本形式发给宿主、再嵌入 iframe 渲染的所以它必须是一个自包含的单文件 HTML。这正是 examples/quickstart/vite.config.ts 的设计核心plugins: [viteSingleFile()], rollupOptions: { input: INPUT }, // INPUT 由环境变量指定如 mcp-app.html outDir: dist,vite-plugin-singlefile把 JS、CSS 全部内联进一个 HTML产出dist/mcp-app.html服务器直接读文件返回即可见 server.ts 中fs.readFile的用法INPUT环境变量入口不在配置里写死而是通过cross-env INPUTmcp-app.html注入同一个 vite 配置可复用于多个入口页lazy-auth-server 就有两个 HTML 入口开发体验NODE_ENVdevelopment时开启 inline sourcemap 便于调试发布时自动压缩 CSS 和 JSReact 用户在此基础上只需多加一个react()插件对比 examples/basic-server-react/vite.config.ts 即可一目了然。一键配置build 与 start 脚本的分工examples/quickstart/package.json 的 scripts 是整套配置的“总装配线”build: tsc --noEmit \ tsc -p tsconfig.server.json \ cross-env INPUTmcp-app.html vite build start: concurrently --raw \ cross-env NODE_ENVdevelopment INPUTmcp-app.html vite build --watch \ tsx watch main.ts执行顺序非常讲究tsc --noEmit用前端 tsconfig 做全量类型检查不产出文件tsc -p tsconfig.server.json为服务器代码生成声明文件vite build把 UI 打包成单文件 HTMLstart则用concurrently同时跑两个进程Vite 的--watch增量构建 tsx watch热重启服务器改完代码即时生效。配置检查清单跑不起来先查这 4 处症状优先检查启动报INPUT environment variable is not set忘了加cross-env INPUTxxx.html类型检查报错但能运行noUnusedLocals/strict生效清理未使用变量服务器导入找不到模块检查tsconfig.server.json是否为NodeNextimport 是否带扩展名e2e 测试连接失败参考 playwright.config.ts测试会先执行npm run examples:start拉起http://localhost:8080下一步从 Quickstart 到你的 MCP App配置理解到位后建议按这个路径学习均为仓库内置示例可直接npm start运行快速上手docs/quickstart.md 手把手教你搭建获取服务器时间应用完整代码在 examples/quickstart/原生 JS 进阶examples/basic-server-vanillajs/ 演示主题、生命周期等宿主通信能力框架版本React / Vue / Svelte / Preact / Solid 五种实现分别在 examples/basic-server-react/ 等目录协议规范specification/draft/apps.mdx 是协议草案原文specification/2026-01-26/apps.mdx 为已发布版本掌握package.json的多入口与脚本、双tsconfig的前后端分离、vite.config.ts的单文件打包这三块你就能独立修改并扩展 examples/ 下任何一个 MCP Apps 示例开始构建自己的交互式 AI 界面了。【免费下载链接】ext-appsOfficial repo for spec SDK of MCP Apps protocol - standard for UIs embedded AI chatbots, served by MCP servers项目地址: https://gitcode.com/GitHub_Trending/ex/ext-apps创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考