magic-mcp
活跃·★ 6.3k·MIT·更新于 2026-09-09
21st.dev 的 Magic 是一个 MCP 工具，在你的 IDE 里根据自然语言描述创建界面组件。你在智能体对话中输入 `/ui` 并描述需求，例如一个现代的响应式导航栏，IDE 会提示你使用 Magic，它会参考 21st.dev 组件库构建组件并加入你的项目，之后仍然可以完全自定义。README 列出的功能有 TypeScript 支持、实时预览、SVGL 品牌素材和标志集成，以及对 Cursor、Windsurf、VS Code 和带 Cline 的 VS Code 的多 IDE 支持。
设置需要 Node.js 和在 21st.dev Magic 控制台生成的 API 密钥。推荐的安装方式是一条命令行（用你的密钥运行 `npx @21st-dev/cli@latest install`），适用于 Cursor、Windsurf、Cline 或 Claude；你也可以手动编辑 MCP 配置文件，或使用 VS Code 的一键安装按钮。组件增强功能（为现有组件加入动画和高级特性）被标注为即将推出。仓库采用 MIT 许可证。
#人工智能#UI生成#IDE集成#开发者工具#前端开发
01
功能特性
01AI驱动的UI生成：通过自然语言描述创建UI组件
02多IDE支持：支持Cursor、Windsurf、VSCode、VSCode + Cline集成
03现代组件库：访问大量预构建、可定制的组件
04实时预览：在创建时即时查看您的组件
05TypeScript支持：提供全面的TypeScript支持以实现类型安全开发
02
为什么选择它
+在 Cursor、Windsurf、VS Code 或 Cline 里，用简短的 `/ui` 描述直接生成组件。
+输出是加入你项目里的 TypeScript 可自定义代码，并带实时预览。
+一条命令行即可安装，也可以手动配置，或使用 VS Code 的一键按钮。
+SVGL 集成让你可以使用品牌标志和素材。
03
权衡点
!需要 21st.dev Magic 控制台的 API 密钥，所以生成要经过他们的服务，并可能受套餐限制（README 有关于用完生成次数的 FAQ）。
!对现有组件的增强功能仍然标注为即将推出。
!组件参考 21st.dev 组件库，风格会跟随该库，上线前仍需检查。
04
维护状况检查
活跃检查日期: 2026-10-24
- 最近提交
- 2026-09-09
- 近 90 天提交数
- 6
- 近 90 天发布数
- 1
- 最新发布
- v0.2.3 (2026-09-09)
- 未关闭 issue
- 8
- 近期 issue 至少有一条评论的比例
- 21/30
近 12 周每周提交数
最早的一周在左边，最近 4 周为橙色。数据来源：GitHub 提交统计。
状态规则：GitHub 上已归档 = 已归档；最近提交在 90 天内 = 活跃；91 到 365 天 = 放缓；更久 = 停滞。所有数字来自所示日期的 GitHub API。
讨论最多的未关闭 issue
- #87 skeisan website0 条评论 · 2026-10-23
- #85 Added 1-click config generator and setup guide for magic-mcp on MCP ServerList0 条评论 · 2026-10-18
- #84 Listed on AgentHub — badge for your README0 条评论 · 2026-10-04
- #82 Claude Code plugin: .mcp.json has "url" but no "type", so the 21st MCP server is skipped0 条评论 · 2026-09-16
- #81 Claim / update your listing on MCPX (mcpx.digital)0 条评论 · 2026-09-13
issue 标题引自 GitHub。请打开链接确认该问题是否仍适用于你使用的版本。
05
兼容性
Cursor
支持
已通过文档验证
Windsurf
支持
已通过文档验证
VS Code
支持
已通过文档验证
Cline
测试版支持
已通过文档验证
Claude
支持
已通过文档验证
06
快速开始
1
$ npx @21st-dev/cli@latest install <client> --api-key <key>
07
使用场景
↳在AI助手的聊天中通过自然语言描述快速生成UI组件。
↳即时构建受21st.dev库启发的精美UI组件。
↳将新生成的、可定制的组件无缝集成到您的项目中。
08
同类工具
⚡热门对决:
评论
登录后发表评论
暂无评论，来发表第一条吧