magic-mcp MCP Server
21st-dev/magic-mcp
[](https://agentrank-ai.com/tool/21st-dev--magic-mcp/?utm_source=badge&utm_medium=readme&utm_campaign=agentrank_badge) It's like v0, but in your Cursor / Claude Code / Windsurf: search 10,000+ React/Tailwind components, generate new UI with AI, and publish your own — right from your editor. Magic MCP is now the 21st MCP; this package keeps old configs working. Setup: 21st.dev/mcp
claude mcp add agentrank -- npx -y agentrank-mcp-server Overview
21st-dev/magic-mcp is a TypeScript tool licensed under ISC. It's like v0, but in your Cursor / Claude Code / Windsurf: search 10,000+ React/Tailwind components, generate new UI with AI, and publish your own — right from your editor. Magic MCP is now the 21st MCP; this package keeps old configs working. Setup: 21st.dev/mcp Topics: 21st, claude, cursor, mcp, model-context-protocol, react, tailwindcss, ui-components.
Ranked #2774 out of 24846 indexed tools.
Has 6,000 GitHub stars.
Used by 14 other projects.
Ecosystem
Score Breakdown
6,000 stars → well-known project
Last commit 1mo ago → moderate activity
45/51 issues closed → responsive maintainer
7 contributors → small team
14 dependents → few downstream users
Weights: Freshness 20% · Issue Health 20% · Dependents 22% · Stars 10% · Contributors 8% · How we score →
How to Improve
Badge all embed codes →
[](https://agentrank-ai.com/tool/21st-dev--magic-mcp/?utm_source=badge&utm_medium=readme&utm_campaign=agentrank_badge) <a href="https://agentrank-ai.com/tool/21st-dev--magic-mcp/?utm_source=badge&utm_medium=readme&utm_campaign=agentrank_badge"><img src="https://agentrank-ai.com/api/v1/badge/21st-dev--magic-mcp" alt="AgentRank"></a> Matched Queries
From the README
# Magic MCP → 21st MCP
> **Magic MCP is now the 21st MCP.** The Magic MCP server (`@21st-dev/magic`) has been replaced by the unified **21st MCP**, installed via the **21st CLI** — setup at [21st.dev/mcp](https://21st.dev/mcp). This package remains published as a thin compatibility proxy so old configs keep working.
## Install the 21st MCP (recommended)
```bash
npx @21st-dev/cli@latest init --client cursor # or: claude | vscode | windsurf | codex
```
Or add it manually — it is a plain HTTP MCP server:
```json
{
"mcpServers": {
"21st": {
"url": "https://21st.dev/api/mcp",
"headers": { "x-api-key": "YOUR_21ST_API_KEY" }
}
}
}
```
Get an API key at [21st.dev/mcp](https://21st.dev/mcp).
> **Old Magic API keys were reset.** Keys issued by the old Magic console no longer work anywhere. Generate a fresh key at [21st.dev/mcp](https://21st.dev/mcp).
## What this package does now (v0.2.0+)
`npx -y @21st-dev/magic@latest API_KEY="..."` still works: since v0.2.0 Read full README on GitHub → Get the weekly AgentRank digest
Top movers, new tools, ecosystem insights — straight to your inbox.