21st.dev Magic MCP Server
21st.dev Magic 把一个上万量级的 React/UI 组件库接给 AI 编码助手。你在写界面时，可以让 AI 直接搜出合适的组件并生成代码，定位类似 v0，但发生在你的 Cursor / Claude Code / Windsurf 里，不用切到另一个产品。
对做前端的人来说，省掉的是「去组件站找 → 复制 → 改适配」这段，AI 直接把组件落到你正在写的文件里。
它能帮你做什么
让 AI 直接生成漂亮的 UI 组件——描述你想要的界面，它给出可用的 React 组件代码。
能力
- 按描述生成 UI 组件
- 参考现成组件库
装好后，试试这样问 AI
在 Claude / Cursor 等接了这个 server 的客户端里直接说
- ›“帮我做一个带搜索框的定价卡片组件”
安装 / 接入
claude mcp add magic -- npx -y @21st-dev/magic以官方 README 为准；env 与参数各 server 不同。
能接哪些客户端
- Claude Desktopnpx
- Claude Codenpx
- Cursornpx
- VS Codenpx
- Windsurfnpx
依据 registry manifest 的包类型和 transport 推导，我们尚未实际安装验证。接入前请以官方 README 为准。
为什么用它
适合：用 AI 辅助前端开发、经常要拼 UI 组件、希望不离开编辑器的开发者。
接入前注意：它连的是 21st.dev 的组件服务，需要对应的 API key。本页下方有维护信号和客户端兼容性；这类 server 有外部服务依赖，注意 key 的权限范围。
相似 / 替代 server
ai.tradesearcher/mcp-server
Search TradeSearcher strategies and backtests from Claude Code, Cursor, Codex, a
io.github.chrischall/groupon-mcp
Groupon deals for Claude — search and browse local, goods, and travel deals
io.github.ouestcharlie/ouestcharlie-woof
An MCP server and app to search and browse your photos while preserving your pri
io.github.chrischall/gogcli-mcp-drive
Google Drive via gogcli for Claude — search, upload, download, permissions
常见问题
生成的组件是它自己画的吗？
它从一个组件库里搜索匹配项并生成接入代码，不是凭空画像素。库的质量决定了结果质量。
支持哪些编辑器？
主打 Cursor、Claude Code、Windsurf 等支持 MCP 的编辑器。下方兼容性区块有详情。