MCP App选哪个框架模板React、Vue、Svelte、Preact、Solid与原生JS深度对比【免费下载链接】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正在为MCP Apps构建交互界面的新手常常面临同一个选择难题ext-apps 官方仓库提供了 6 套「MCP App 框架模板」——React、Vue、Svelte、Preact、Solid 和原生 JS。它们打包了完全相同的应用只是写法不同。本文将带你快速看清 6 套 MCP App 模板的差异帮你 30 秒选对 React、Vue、Svelte、Preact、Solid 与原生 JS 模板。MCP App 模板解决什么问题普通 MCP 工具只能返回文本或结构化数据。当你的工具需要图表、表单、仪表盘或设计画布时就需要 MCP Apps 协议MCP 服务器把 UI 声明为ui://资源宿主Claude、ChatGPT、VS Code 等在沙箱 iframe 中内联渲染实现双向通信。真正写界面时你总得选一个前端技术栈。官方在 examples/ 目录下把同一个「Get Time」演示应用用 6 种框架各实现了一遍相当于给你准备了 6 个即拿即用的脚手架模板目录框架npm 包名basic-server-react/Reactmodelcontextprotocol/server-basic-reactbasic-server-vue/Vue 3modelcontextprotocol/server-basic-vuebasic-server-svelte/Svelte 5modelcontextprotocol/server-basic-sveltebasic-server-preact/Preactmodelcontextprotocol/server-basic-preactbasic-server-solid/SolidJSmodelcontextprotocol/server-basic-solidbasic-server-vanillajs/原生 JSmodelcontextprotocol/server-basic-vanillajs它们都内置了 MCP App 的四大通信能力callServerTool调用服务端工具、sendMessage向对话发消息、sendLog写日志、openLink打开链接并统一用 Vite vite-plugin-singlefile把界面打包成单个 HTML 文件作为一条 MCP 资源直接下发——这是 构建体系 的关键设计。逐个拆解6 套 MCP App 框架模板1️⃣ React 模板官方亲儿子开发路径最短React 是 6 套模板中唯一获得官方 React Hooks支持的SDK 的modelcontextprotocol/ext-apps/react子包提供了useApp()hook它自动完成「创建 App 实例 → 注册事件处理器 → connect 连接宿主」三步。状态管理直接用useState/useEffect宿主主题、字体变化通过onhostcontextchanged回调同步生态最全组件库、图表库Recharts、ECharts随便用源码参考mcp-app.tsx适合React 技术栈团队、希望接入最丰富生态的人。2️⃣ Vue 3 模板组合式 API 单文件组件App.vue 使用 Vue 3组合式 APIscript setupref定义响应式状态watchEffect监听宿主上下文变化并自动应用主题与字体。模板、逻辑、样式写在同一个.vue单文件组件里结构清晰没有官方 hook直接使用框架无关的new App()类 connect()连接宿主样式用了style scoped天然避免污染宿主适合Vue 技术栈团队。3️⃣ Svelte 模板Svelte 5 新语法几乎零样板代码App.svelte 用的是 Svelte 5 的Runes 语法$state声明状态、$effect响应宿主上下文变化直接赋值即可更新界面没有setXxx函数、没有依赖数组。编译时框架运行时开销极小打包产物很小bind:value双向绑定输入框代码最简洁同样基于App类连接宿主适合熟悉 Svelte 5、追求轻量产物的开发者。4️⃣ Preact 模板React API 的迷你替身mcp-app.tsx 的代码读起来和 React 模板几乎一样useState、useEffect、JSX但底层是 Preact——体积只有 React 的几分之一。没有官方 hook手动用useEffect里new App()connect()现有 React 代码可低成本迁移preact/compat适合想要 React 开发体验、又对包体积敏感的场景5️⃣ Solid 模板细粒度响应式性能怪兽mcp-app.tsx 使用 SolidJS 的createSignal/createEffect/Show。没有虚拟 DOM只在数据真正变化的地方重新执行——高频更新实时图表、监控面板下性能优势明显。JSX 语法看着像 React响应式原理完全不同基于App类连接宿主适合构建数据密集型 MCP App如 系统监控示例的团队。6️⃣ 原生 JS 模板零框架最纯粹的 MCP Appmcp-app.ts 不依赖任何框架document.getElementById拿元素、addEventListener绑事件、改textContent更新界面。步骤最直白创建App实例 → 注册回调 →connect()零依赖、零学习成本产物最小排查问题最简单缺点复杂界面表单联动、列表渲染要手写 DOM 逻辑维护成本高适合一次性小工具、想彻底吃透 SDK 的人。一张表看懂 6 套模板的核心差异维度ReactVueSveltePreactSolid原生 JSSDK 接入方式官方useApp()hookApp类App类App类App类App类响应式机制Hooks VDOMref watchEffectRunes编译时Hooks 迷你 VDOM细粒度信号手动 DOM打包体积较大中等小很小很小最小生态丰富度⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐无学习成本低会 React 即可中中低会 React 即可中高极低最佳场景通用首选Vue 团队轻量简洁小体积 React 手感高性能实时 UI极简工具30 秒决策指南团队主力是 React→ 直接选basic-server-react唯一有官方 hook 的模板Vue 团队→basic-server-vue实时图表 / 监控类 App→basic-server-solid或basic-server-vanillajs极致包体积→basic-server-vanillajs Preact ≈ Svelte ≈ Solid第一次接触 MCP Apps→basic-server-vanillajs代码最透明或basic-server-react资料最多别忘了选模板只是开始。最快的上手方式其实是让 AI 编码代理干——仓库内置了 4 个 Agent Skills如 create-mcp-app从零脚手架和 add-app-to-server给现有 MCP 服务器加 UI装好后一句话就能生成项目。快速运行与本地调试所有 Node.js 模板都已发布到 npm在你的 MCP 客户端配置中即可直接跑stdio 方式无需 clone 仓库{ mcpServers: { basic-react: { command: npx, args: [-y, modelcontextprotocol/server-basic-react, --stdio] } } }本地开发调试有两条路进入对应模板目录执行npm install npm run dev用 basic-host参考宿主实现npm start 后打开 http://localhost:8080测试你的 App一键跑全部示例使用 run-all.ts 批量启动 examples 下的所有服务器快速对比效果更多细节参见 快速开始文档 与 协议规范。小结6 套模板能力对等、产物一致选择的关键只有一个——你的团队最熟哪套技术栈。拿不准就选 React 模板它的官方 hook 支持最完善想最小化产物就选原生 JS。【免费下载链接】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 App选哪个框架模板？React、Vue、Svelte、Preact、Solid与原生JS深度对比
MCP App选哪个框架模板React、Vue、Svelte、Preact、Solid与原生JS深度对比【免费下载链接】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正在为MCP Apps构建交互界面的新手常常面临同一个选择难题ext-apps 官方仓库提供了 6 套「MCP App 框架模板」——React、Vue、Svelte、Preact、Solid 和原生 JS。它们打包了完全相同的应用只是写法不同。本文将带你快速看清 6 套 MCP App 模板的差异帮你 30 秒选对 React、Vue、Svelte、Preact、Solid 与原生 JS 模板。MCP App 模板解决什么问题普通 MCP 工具只能返回文本或结构化数据。当你的工具需要图表、表单、仪表盘或设计画布时就需要 MCP Apps 协议MCP 服务器把 UI 声明为ui://资源宿主Claude、ChatGPT、VS Code 等在沙箱 iframe 中内联渲染实现双向通信。真正写界面时你总得选一个前端技术栈。官方在 examples/ 目录下把同一个「Get Time」演示应用用 6 种框架各实现了一遍相当于给你准备了 6 个即拿即用的脚手架模板目录框架npm 包名basic-server-react/Reactmodelcontextprotocol/server-basic-reactbasic-server-vue/Vue 3modelcontextprotocol/server-basic-vuebasic-server-svelte/Svelte 5modelcontextprotocol/server-basic-sveltebasic-server-preact/Preactmodelcontextprotocol/server-basic-preactbasic-server-solid/SolidJSmodelcontextprotocol/server-basic-solidbasic-server-vanillajs/原生 JSmodelcontextprotocol/server-basic-vanillajs它们都内置了 MCP App 的四大通信能力callServerTool调用服务端工具、sendMessage向对话发消息、sendLog写日志、openLink打开链接并统一用 Vite vite-plugin-singlefile把界面打包成单个 HTML 文件作为一条 MCP 资源直接下发——这是 构建体系 的关键设计。逐个拆解6 套 MCP App 框架模板1️⃣ React 模板官方亲儿子开发路径最短React 是 6 套模板中唯一获得官方 React Hooks支持的SDK 的modelcontextprotocol/ext-apps/react子包提供了useApp()hook它自动完成「创建 App 实例 → 注册事件处理器 → connect 连接宿主」三步。状态管理直接用useState/useEffect宿主主题、字体变化通过onhostcontextchanged回调同步生态最全组件库、图表库Recharts、ECharts随便用源码参考mcp-app.tsx适合React 技术栈团队、希望接入最丰富生态的人。2️⃣ Vue 3 模板组合式 API 单文件组件App.vue 使用 Vue 3组合式 APIscript setupref定义响应式状态watchEffect监听宿主上下文变化并自动应用主题与字体。模板、逻辑、样式写在同一个.vue单文件组件里结构清晰没有官方 hook直接使用框架无关的new App()类 connect()连接宿主样式用了style scoped天然避免污染宿主适合Vue 技术栈团队。3️⃣ Svelte 模板Svelte 5 新语法几乎零样板代码App.svelte 用的是 Svelte 5 的Runes 语法$state声明状态、$effect响应宿主上下文变化直接赋值即可更新界面没有setXxx函数、没有依赖数组。编译时框架运行时开销极小打包产物很小bind:value双向绑定输入框代码最简洁同样基于App类连接宿主适合熟悉 Svelte 5、追求轻量产物的开发者。4️⃣ Preact 模板React API 的迷你替身mcp-app.tsx 的代码读起来和 React 模板几乎一样useState、useEffect、JSX但底层是 Preact——体积只有 React 的几分之一。没有官方 hook手动用useEffect里new App()connect()现有 React 代码可低成本迁移preact/compat适合想要 React 开发体验、又对包体积敏感的场景5️⃣ Solid 模板细粒度响应式性能怪兽mcp-app.tsx 使用 SolidJS 的createSignal/createEffect/Show。没有虚拟 DOM只在数据真正变化的地方重新执行——高频更新实时图表、监控面板下性能优势明显。JSX 语法看着像 React响应式原理完全不同基于App类连接宿主适合构建数据密集型 MCP App如 系统监控示例的团队。6️⃣ 原生 JS 模板零框架最纯粹的 MCP Appmcp-app.ts 不依赖任何框架document.getElementById拿元素、addEventListener绑事件、改textContent更新界面。步骤最直白创建App实例 → 注册回调 →connect()零依赖、零学习成本产物最小排查问题最简单缺点复杂界面表单联动、列表渲染要手写 DOM 逻辑维护成本高适合一次性小工具、想彻底吃透 SDK 的人。一张表看懂 6 套模板的核心差异维度ReactVueSveltePreactSolid原生 JSSDK 接入方式官方useApp()hookApp类App类App类App类App类响应式机制Hooks VDOMref watchEffectRunes编译时Hooks 迷你 VDOM细粒度信号手动 DOM打包体积较大中等小很小很小最小生态丰富度⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐无学习成本低会 React 即可中中低会 React 即可中高极低最佳场景通用首选Vue 团队轻量简洁小体积 React 手感高性能实时 UI极简工具30 秒决策指南团队主力是 React→ 直接选basic-server-react唯一有官方 hook 的模板Vue 团队→basic-server-vue实时图表 / 监控类 App→basic-server-solid或basic-server-vanillajs极致包体积→basic-server-vanillajs Preact ≈ Svelte ≈ Solid第一次接触 MCP Apps→basic-server-vanillajs代码最透明或basic-server-react资料最多别忘了选模板只是开始。最快的上手方式其实是让 AI 编码代理干——仓库内置了 4 个 Agent Skills如 create-mcp-app从零脚手架和 add-app-to-server给现有 MCP 服务器加 UI装好后一句话就能生成项目。快速运行与本地调试所有 Node.js 模板都已发布到 npm在你的 MCP 客户端配置中即可直接跑stdio 方式无需 clone 仓库{ mcpServers: { basic-react: { command: npx, args: [-y, modelcontextprotocol/server-basic-react, --stdio] } } }本地开发调试有两条路进入对应模板目录执行npm install npm run dev用 basic-host参考宿主实现npm start 后打开 http://localhost:8080测试你的 App一键跑全部示例使用 run-all.ts 批量启动 examples 下的所有服务器快速对比效果更多细节参见 快速开始文档 与 协议规范。小结6 套模板能力对等、产物一致选择的关键只有一个——你的团队最熟哪套技术栈。拿不准就选 React 模板它的官方 hook 支持最完善想最小化产物就选原生 JS。【免费下载链接】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），仅供参考