21st MCP (Magic MCP)
21st.dev MCP server and plugin: search ready React/Tailwind components and logos and generate UI from your agent
- 6,295 ★ on the repository
- Last commit
- ISC
Extended access
Why this level
- Sends requests to an external service with a key
- Inserts third-party component code into the project
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/21st-mcp-magic-mcpDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Sends requests to an external service with a key
- Inserts third-party component code into the project
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 pageMCP
- Transport
- http, stdio
- Authentication
- API key
Environment variables
API_KEY_21STrequired, secret- 21st.dev API key for the plugin and proxy
Limitations
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.
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.
Discussion
No questions or reviews yet.
Related
MCP serversShadcn UI MCP Server
Shadcn UI v4 MCP Server
An MCP server that gives the agent shadcn/ui component source, demos and blocks for React, Svelte, Vue and React Native
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
An MCP server and skill for interfaces: 31 design systems for shadcn/ui, UI and UX principles and accessibility review for agent-written code
An MCP server and plugin to build UI with the agent: curated design systems, UI prompts and layout variations
Connects an agent to a running Next.js 16+ dev server: errors, routes, logs and docs for your installed version
Inspo
inspo
An MCP server with a reference of real working sites an agent studies for design before writing an interface. Take techniques and do not copy pages
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.