MCP Apps传输方式怎么选stdio与Streamable HTTP实战对比【免费下载链接】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-appsMCP Apps 是 MCPModel Context Protocol生态中让服务器在聊天客户端里渲染交互式界面的官方规范与 SDK而要让界面跑起来第一步就是选对传输方式stdio 还是 Streamable HTTP选错了你的 MCP App 可能根本连不上宿主。本文用最少的代码帮你一次性看懂两种传输的原理、适用场景与配置方法。先搞懂MCP Apps 的两种传输通道MCP Apps 的核心模式是「工具 UI 资源」服务器注册一个工具并通过_meta.ui.resourceUri把它和一个ui://开头的 UI 资源绑定起来。宿主Host调用工具后取回 HTML 放进沙箱 iframe 渲染——你可以把它理解成嵌在对话里的小应用。而工具调用、资源读取这些 JSON-RPC 消息靠什么在客户端和服务器之间流动这就是传输层要解决的问题。MCP Apps 沿用了 MCP 核心规范的两条主流通道传输方式通道典型场景stdio客户端直接拉起进程走标准输入/输出本地客户端Claude Desktop、VS Code 等Streamable HTTP服务器监听 HTTP 端口走/mcp端点浏览器宿主、远程部署、多客户端共享stdio 传输本地客户端的零配置首选stdio 的意思是标准输入输出standard input/output。客户端不监听任何端口而是直接启动你的服务器进程把 JSON-RPC 消息像打字一样写进进程的 stdin再从 stdout 读取回复。什么时候选 stdio✅ 客户端和服务器跑在同一台机器本地桌面/IDE 场景✅ 不想配置端口、防火墙、CORS✅ 用户只需粘贴一段配置就能用官方示例的每个 Node.js 服务器都内置了 stdio 模式加一个--stdio参数即可切换。比如 React 版的入口 main.ts 里检测到--stdio就用StdioServerTransport连接否则默认走 HTTP。客户端配置非常简单以 basic-vanillajs 为例参考 README{ mcpServers: { basic-vanillajs: { command: npx, args: [-y, --silent, modelcontextprotocol/server-basic-vanillajs, --stdio] } } }粘贴进 Claude Desktop、VS Code 等支持 MCP 的客户端保存即生效——这就是 stdio 的魅力一条命令开箱即用。Streamable HTTP 传输远程与浏览器环境的答案当宿主是网页或服务器要部署到云端给多人用时客户端无法替你spawn进程只能通过网络通信。这时就用 Streamable HTTP 传输服务器监听一个端口所有 MCP 消息发到/mcp端点。什么时候选 Streamable HTTP✅ 宿主是浏览器网页或跨设备/跨网络访问✅ 一个服务器实例要同时服务多个客户端✅ 需要 OAuth、域名、反向代理等生产级部署能力仓库里的示例默认就是 HTTP 模式启动后你会看到MCP server listening on http://localhost:3001/mcp有两个实现细节值得新手注意无状态模式参考实现 main.ts 中通过sessionIdGenerator: undefined让每个请求创建独立会话服务器无需保存状态天然适合负载均衡与横向扩展。Python 同样支持qr-server 用 FastMCP 的stateless_httpTrue一行开启监听http://localhost:3108/mcp——传输选择和你的技术栈无关。宿主侧怎么连参考宿主 basic-host 默认连接http://localhost:3001/mcp也可以用环境变量指向任意远程地址SERVERS[http://localhost:1234/mcp, http://localhost:5678/mcp] npm run start一张表看懂stdio vs Streamable HTTP 全面对比维度stdioStreamable HTTP通信通道进程 stdin/stdoutHTTP/mcp端点部署位置与客户端同机本地或远程服务器配置复杂度极低命令参数中端口、CORS、鉴权并发多客户端一客户端一进程单实例服务多客户端浏览器宿主支持❌✅典型代表Claude Desktop、VS CodeWeb 宿主、云端部署切换方式本仓库示例启动时加--stdio默认模式关键认知传输方式只影响消息怎么送不影响你的 App 逻辑。同一份createServer()代码加不加--stdio参数就切换了两种模式——写一次两种传输通吃。实战选型清单4 步做出决策 宿主在哪里跑桌面/IDE 本地客户端 → stdio浏览器或远程 → Streamable HTTP谁启动服务器客户端能启动进程 → stdio服务器要常驻 → HTTP要服务多少人个人自用 → stdio 最省心团队共享 → HTTP 更合理能否两种都给推荐直接复用示例的双模式入口像 main.ts 一样让--stdio参数决定走哪条路一份代码覆盖所有场景动手跑起来10 分钟体验两种传输仓库是只读的参考资源克隆下来即可本地运行git clone https://gitcode.com/GitHub_Trending/ex/ext-apps cd ext-apps npm install npm start随后打开http://localhost:8080/用仓库自带的 basic-host 即可逐个调用示例 App下拉选择工具、点击 Call Tool界面就渲染在沙箱里了。想深入了解协议细节传输、沙箱、能力协商完整规范在 specification/2026-01-26/apps.mdx从零搭建步骤见 docs/quickstart.md。总结本地客户端Claude Desktop / VS Code→ stdio零端口、零网络配置粘贴 JSON 即完成接入浏览器宿主 / 远程部署 / 多用户共享 → Streamable HTTP监听/mcp端点无状态模式易于扩展最佳实践参考官方示例的双模式入口一份服务器代码同时支持两种传输把选择权交给使用者传输选型只是 MCP Apps 开发的第一块拼图选对之后你的交互界面就能在任意合规的聊天客户端中跑起来了。【免费下载链接】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），仅供参考