@21st-dev/magic
It's like v0, but in your Cursor / Claude Code / Windsurf: search 10,000+ React/
21st.dev Magic hands a library of 10,000+ React/UI components to your AI coding agent. While building an interface you can have the AI search for a fitting component and generate the code — similar to v0, but happening inside your Cursor / Claude Code / Windsurf rather than in a separate product.
For frontend work this removes the find-on-a-component-site, copy, adapt loop — the AI drops the component straight into the file you're writing.
What it does for you
Lets your AI generate polished UI components — describe the interface you want and get usable React component code.
Capabilities
- Generate UI components from a description
- Draw on ready-made component libraries
Once installed, try asking your AI
Say this directly in Claude / Cursor or any client with this server connected
- ›“Build me a pricing card component with a search box”
Why use it
Good for: developers using AI for frontend work who assemble UI components often and want to stay in their editor.
Before connecting: it talks to 21st.dev's component service and needs an API key. Maintenance signals and client compatibility are below; this server has an external-service dependency, so mind the key's scope.
Before you connect
Config example (to connect)
{
"mcpServers": {
"21st": {
"url": "https://21st.dev/api/mcp",
"headers": { "x-api-key": "YOUR_21ST_API_KEY" }
}
}
}Works with these clients
- Claude Desktopnpx
- Claude Codenpx
- Cursornpx
- VS Codenpx
- Windsurfnpx
Derived from the registry manifest (package type and transport) — we have not installed it ourselves. Check the official README before relying on it.
Install / Connect
claude mcp add magic -- npx -y @21st-dev/magicFollow the official README; env and args vary per server.
🛠️ Maintenance weight 30% · 61 pts
📊 Adoption weight 25% · 62 pts
✅ Usability weight 20% · 55 pts
❤️ Health & community weight 25% · 50 pts
Sources: GitHub API · npm registry · updated 2026-08-19
90-day trend
⭐ stars +0%
📦 weekly downloads +0%
Frequently Asked Questions
Does it draw the components itself?
It searches a component library for matches and generates the integration code — it doesn't paint pixels from scratch. The library's quality sets the ceiling on results.
Which editors are supported?
It targets Cursor, Claude Code and Windsurf and other MCP-capable editors. See the compatibility section below.
Similar / alternative servers
How to choose among these
Search servers all give web access; they differ between semantic retrieval and cited Q&A.
- Semantic web search + content (research / competitors)→Pick Exa — semantic search plus retrieval
- Distilled Q&A-style answers, fact-checking→Pick Tavily / Perplexity — AI-optimized answers
- Privacy-focused, general web/news search→Pick Brave Search
ai.tradesearcher/mcp-server
Search TradeSearcher strategies and backtests from Claude Code, Cursor, Codex, a
io.github.hampsterx/claude-mcp-bridge
Wraps Claude Code CLI as MCP tools: query, search, structured, ping, listSession
io.github.constripacity/claude-replay
Session checkpoint & recovery for Claude Code: resume, search, tag, and export r
io.github.phuongddx/codeintel
Local-first SCIP code navigation and Zoekt search over your own indexed reposito
One email a week, 5 minutes to see what happened in the MCP ecosystem
New servers, breakout trends, abandonment alerts — tracked automatically, curated by hand, sent to your inbox.
One email a week · unsubscribe anytime · no data selling