MCP Apps 官方插件实测：让 Claude Code 给 MCP 工具配一张可交互卡片，分账单 40 秒搭好，11 月 8 日实测版

MCP 官方仓库 modelcontextprotocol/ext-apps 里的 mcp-apps 插件（0.1.0，Apache 2.0，约 3000 星）给 Claude Code 加了 4 个技能（create-mcp-app、add-app-to-server、convert-web-app、migrate-oai-app），让它会搭“工具 + 交互卡片”的 MCP App：工具返回数据，卡片在对话里直接交互，不再只有纯文本。AI Parabellum 11 月 8 日实测（Claude Code v2.1.318，commit 19256f5），一句话让 Claude 做了分账单工具 split_bill：滑杆调小费、人均金额实时变，约 40 秒搭好；工具返回“Total 99.71, 24.93 each”（84.5 美元、18% 小费、4 人，验算无误），卡片资源以 text/html;profile=mcp-app 送出、约 235KB。

用法：/plugin marketplace add modelcontextprotocol/ext-apps 再 /plugin install mcp-apps@modelcontextprotocol-ext-apps 装插件（想先试试也可在沙盒里用 –plugin-dir 加载，不装进正式环境）；打 /mcp-apps: 看 4 个技能，照着一句提示词让 Claude 建；已有 MCP 服务器用 add-app-to-server 加卡片，已有网页用 convert-web-app 改造。卡片支持 React、Vue、Svelte、Preact、Solid 和原生 JS，实测用的是原生 JS。想先搞清 Claude Code 里 MCP 怎么配，可以看站内这篇MCP 配置文件到底在哪；想系统了解 Claude Code 插件怎么挑，再看官方 Setup 插件实测。

两点提醒：实测没能在真实宿主（Claude Desktop 等）里打开卡片看效果，只验证了工具、结果与卡片资源都对，分享前先在自己的宿主里实测一次；记得给工具留文字 fallback（不支持卡片的宿主仍能看到数字），先注册处理器再 app.connect()，卡片联网请求要配 CSP；服务器默认绑 0.0.0.0，长期跑请改 localhost。适合写 MCP 服务器、想给工具加交互界面的人；只用 Claude Code 写普通代码可以跳过。

来源：AI Parabellum，原文：https://aiparabellum.com/build-mcp-app-with-claude-code-mcp-apps-plugin/