活跃

@21st-dev/magic

It's like v0, but in your Cursor / Claude Code / Windsurf: search 10,000+ React/

21st.dev Magic 把一个上万量级的 React/UI 组件库接给 AI 编码助手。你在写界面时，可以让 AI 直接搜出合适的组件并生成代码，定位类似 v0，但发生在你的 Cursor / Claude Code / Windsurf 里，不用切到另一个产品。

对做前端的人来说，省掉的是「去组件站找 → 复制 → 改适配」这段，AI 直接把组件落到你正在写的文件里。

GitHub ↗npm ↗

TrustScore

✅ 暂未检测到明确停更信号；用于生产前仍需完成安全与兼容性验证

它能帮你做什么

让 AI 直接生成漂亮的 UI 组件——描述你想要的界面，它给出可用的 React 组件代码。

能力

按描述生成 UI 组件
参考现成组件库

装好后，试试这样问 AI

在 Claude / Cursor 等接了这个 server 的客户端里直接说

›“帮我做一个带搜索框的定价卡片组件”

为什么用它

适合：用 AI 辅助前端开发、经常要拼 UI 组件、希望不离开编辑器的开发者。

接入前注意：它连的是 21st.dev 的组件服务，需要对应的 API key。本页下方有维护信号和客户端兼容性；这类 server 有外部服务依赖，注意 key 的权限范围。

接入前先知道

🔑 需要 API key / tokenNode.js

配置示例（接入用）

{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": { "x-api-key": "YOUR_21ST_API_KEY" }
    }
  }
}

能接哪些客户端

Claude Desktopnpx
Claude Codenpx
Cursornpx
VS Codenpx
Windsurfnpx

依据 registry manifest 的包类型和 transport 推导，我们尚未实际安装验证。接入前请以官方 README 为准。

安装 / 接入

claude mcp add magic -- npx -y @21st-dev/magic

以官方 README 为准；env 与参数各 server 不同。

🛠️ 维护活跃度权重 30% · 61分

📝

最近提交19 天前

📈

90 天提交数4

💬

近期 issue 获回复比例81%

🗃️

仓库状态正常

📊 采用度权重 25% · 62分

⭐

GitHub stars5.7k（90天 +0%）

📦

npm 周下载20.2k（+0%）

🚀

月均发版0.5 次

✅ 可用性权重 20% · 55分

📋

官方 registry未收录

▶️

可运行入口可解析（npx/远程）

🔍

可审计性有开源仓库可审计

❤️ 健康度 & 社区权重 25% · 50分

🐛

open issues1

🔀

open PRs—

⚖️

License未声明

👥

贡献者 / fork5 / 437

数据来源：GitHub API · npm registry · 更新于 2026-08-19

近 90 天趋势

⭐ stars +0%

📦 周下载 +0%

常见问题

生成的组件是它自己画的吗？

它从一个组件库里搜索匹配项并生成接入代码，不是凭空画像素。库的质量决定了结果质量。

支持哪些编辑器？

主打 Cursor、Claude Code、Windsurf 等支持 MCP 的编辑器。下方兼容性区块有详情。

相似 / 替代 server

ai.tradesearcher/mcp-server

Search TradeSearcher strategies and backtests from Claude Code, Cursor, Codex, a

活跃21 天前更新

io.github.hampsterx/claude-mcp-bridge

Wraps Claude Code CLI as MCP tools: query, search, structured, ping, listSession

活跃⭐ 615 天前更新

io.github.constripacity/claude-replay

Session checkpoint & recovery for Claude Code: resume, search, tag, and export r

活跃⭐ 19 天前更新

io.github.phuongddx/codeintel

Local-first SCIP code navigation and Zoekt search over your own indexed reposito

活跃12 天前更新

每周一封，5 分钟看完 MCP 生态发生了什么

新增 server、爆火趋势、弃坑预警——引擎自动追踪，人工筛选后发到你邮箱。

每周一封 · 随时退订 · 不卖数据