21st MCP

21st.dev's own MCP server, formerly called Magic MCP. It connects your agent to 21st.dev's community library of React and Tailwind (shadcn-compatible) components, themes and templates, so it can find a piece that fits, fetch its code and write it into your project instead of building UI from scratch. With 21st AI turned on, it can also draft new UI from a prompt. What you can do with it - Search the library for components, themes and templates in plain words, such as "pricing table" or "animated hero" - Fetch a component's full code and add it to your project - Find UI inspiration, and brand logos as ready-to-paste JSX or TSX - Keep bookmarks and bookmark lists, and work with your team's library - Draft UI variants from a prompt with 21st AI - Check your usage and whether 21st AI is on for your account How it connects 21st.dev hosts it at https://21st.dev/api/mcp (streamable HTTP). Most agents send a free 21st.dev API key in the x-api-key header (Authorization: Bearer works too); make one at 21st.dev/settings/api-keys. Claude Desktop and Lovable sign in with OAuth instead, with no key to paste. Keys from the old Magic console were reset, so make a fresh one. Plans - Free: search is unlimited, and you can retrieve component code twice a day across the web, MCP and the CLI - Builder, from $6 a month billed yearly: unlimited installs over MCP and the CLI - Builder + AI, from $15 a month billed yearly: adds AI credits for 21st AI Good to know The tools your agent sees depend on your account: the generate tools only appear when 21st AI is enabled. Configs that still use the @21st-dev/magic package keep working, because it now forwards every call to this server. 21st.dev also offers a CLI (npx @21st-dev/cli) and a Claude Code plugin that bundle this server with its UI skills.