21st MCP (formerly Magic) 🔌 MCP server Freemium

What it does

Magic by 21st.dev started as an MCP server that generated polished React UI components from a prompt in your editor. It has since been replaced by the unified 21st MCP, which you install with the 21st CLI. The old @21st-dev/magic npm package is still published, but only as a small compatibility proxy that forwards requests to the new server, so old configs keep working. The 21st MCP connects your coding agent to the 21st.dev catalogue of community UI components, themes and templates. The agent can search for a component, pull its code into your project, find logos, and, with AI access, generate new UI. The repository is ISC licensed.

Tools it gives your agent

• search: searches the 21st catalogue of components, themes and templates
• get_component: returns a component's code, which is a paid retrieval
• get_inspiration: finds design references
• search_logo: finds brand and UI logos as SVG
• generate and iterate_generation: hosted UI generation, listed only when AI access is enabled

Works with

It is a plain HTTP MCP server at https://21st.dev/api/mcp, authenticated with an x-api-key header. The CLI sets it up for Cursor, Claude Code, VS Code, Windsurf and Codex. There are also plugins for Claude Code, Codex, Cursor and Grok Build.

How to connect

npx @21st-dev/cli@latest init --client claude

Or as a Claude Code plugin, with your key set in API_KEY_21ST:

claude plugin marketplace add 21st-dev/magic-mcp

Then run /plugin install 21st.

Cost and limits

You get a free API key at 21st.dev. At the time of writing (September 2026), the free Hobby plan covers catalogue browsing, search and logo search, plus a few free copies a day. Builder costs from $6 a month billed yearly and adds unlimited MCP component retrieval, but no AI credits. Builder + AI costs from $15 a month billed yearly and includes monthly AI generation credits.

Safety notes

API keys from the old Magic console were reset and no longer work, so generate a new one. Keep it in an environment variable, not in a committed config file. Components come from community authors, so review the code, dependencies and licences before shipping them.