21st.dev's Magic MCP is "v0 inside your editor" — describe a UI component and it generates production-ready React + Tailwind code, with access to a large library of polished components. It's one of the fastest-rising MCP servers of 2026. Here's the setup.
Step 1 — get an API key
Sign in at the 21st.dev Magic Console and generate an API key. The MCP is free to try with usage limits; heavier use needs a plan.
Step 2 — install
The CLI configures your client automatically:
npx @21st-dev/cli@latest install claude --api-key YOUR_KEY
Swap claude for cursor, windsurf or cline. Prefer manual config? Add it yourself:
{
"mcpServers": {
"magic": {
"command": "npx",
"args": ["-y", "@21st-dev/magic@latest"],
"env": { "API_KEY": "YOUR_KEY" }
}
}
}
Restart the client; see MCP config file location.
Step 3 — use it
In your editor's chat, type /ui (or just ask) — e.g. "/ui a pricing table with three tiers and a monthly/annual toggle." Magic returns component code you can drop in, plus it can pull matching components from the 21st.dev library.
Common problems
unauthorized/ quota — wrong API key or you hit the free limit; check the Console.- No tools in client — Node 18+ for
npx; see Cursor MCP not working. - Component doesn't match — be specific about framework, layout and states in the prompt.
Going further
Magic pairs with the Figma and Mobbin servers for a design-to-code loop, and a filesystem server to write the files. Browse the developer tools category or curated loadouts.