21st MCP (Magic MCP)
21st.dev MCP server and plugin: search ready React/Tailwind components and logos and generate UI from your agent
Install
npx @21st-dev/cli@latest init --client cursorReplace cursor with claude, vscode, windsurf or codex.
This is third-party code. Review the repository files before installing.
What it does
The server connects the agent to the 21st.dev catalog of shadcn-compatible components. The agent can search components, themes and templates, fetch code, find brand logos as SVG and pull inspiration examples. With AI access enabled on the account, it can generate new UI from a prompt with variants. The repository is also packaged as a plugin with a 21st-ui skill that tells the agent when and how to use these tools. The old @21st-dev/magic package now just forwards requests to the new server so existing configs keep working.
Who it is for. For React and Tailwind frontend developers who want to assemble UI from ready components through an agent.
Good fit when
- You need a ready block: pricing table, hero, navbar, form
- You need a brand logo as an SVG component
- You want several screen variants generated from a prompt
Not a fit when
- The project does not use React and Tailwind
- You cannot connect external services with a key
Example request
Find a three-tier pricing table component on 21st and add it to the /pricing pageLimitations
Requires a 21st.dev key; old Magic keys were reset. UI generation works only with AI access enabled, and some component code is paid. Access from Russia without VPN is unverified.
How to disable. Remove the 21st server from your MCP config or uninstall the 21st plugin via /plugin.
MCP
- Transport
- http, stdio
- Authentication
- API key
| Environment variables | |
|---|---|
| API_KEY_21ST required, secret | 21st.dev API key for the plugin and proxy |
Security check
- Sends requests to an external service with a key
- Inserts third-party component code into the project
README in short
The README says Magic MCP was replaced by the unified 21st MCP and shows setup via the 21st CLI or a manual HTTP config with a key header. It explains that @21st-dev/magic became a proxy and maps old tool names to new ones. It covers plugin install in Claude Code, Codex, Cursor and Grok Build with the API_KEY_21ST variable. ISC licensed.
FAQ
Why did old Magic MCP stop working?
The Magic backend was replaced by 21st MCP and old keys were reset. Get a new key and the old config works again through the proxy.
Do old tool names still work?
Yes, the server translates them, but the new names are preferred.
Related
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys