企业官网建设流程全解析

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 个即拿即用的脚手架：

它们都内置了 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组合式 API（<script setup>）：ref定义响应式状态，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 App

mcp-app.ts 不依赖任何框架：document.getElementById拿元素、addEventListener绑事件、改textContent更新界面。

• 步骤最直白：创建App实例 → 注册回调 →connect()
• 零依赖、零学习成本，产物最小，排查问题最简单
• 缺点：复杂界面（表单联动、列表渲染）要手写 DOM 逻辑，维护成本高

适合：一次性小工具、想彻底吃透 SDK 的人。

一张表看懂 6 套模板的核心差异

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"] } } }

本地开发调试有两条路：

1. 进入对应模板目录执行npm install && npm run dev，用 basic-host（参考宿主实现，npm start 后打开 http://localhost:8080）测试你的 App
2. 一键跑全部示例：使用 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