Magic MCP (21st MCP): UI Components for AI Agents

What is Magic MCP?

Magic MCP is 21st.dev's MCP server for UI. The repository describes it as like v0 but inside your editor: search 10,000+ React and Tailwind components, generate new UI with AI, and publish your own.

The project has moved. Magic MCP is now the 21st MCP, installed through the 21st CLI. The @21st-dev/magic package stays as a small stdio proxy that forwards to the same server, so older configs keep working.

What changes in your agent's output

• The agent starts from catalog components and inspiration instead of writing every card, hero or pricing block from scratch.
• Component code arrives through get_component, so the agent adapts real source to your project.
• With AI access enabled, generate and iterate_generation create UI and refine it from a prompt.
• Without AI access, search and get_component still work, and your own coding agent adapts the code.

What the current server exposes

The README says the server now exposes much more than the old four tools: catalog search across components, themes and templates, paid code retrieval, bookmarks, team libraries, UI generation with variants and profile management. Connect and list tools to see what your account has.

Who Magic MCP is for

Best for

• React and Tailwind projects that want ready components as a starting point.
• Rapid prototyping, where finding a close match is faster than a blank prompt.
• Teams that publish their own components and want an agent to find them in a shared library.

Not for

• Reading a design file. Use the Figma MCP server when the design lives in Figma.
• Projects with a fixed shadcn setup who want registry-exact installs. The shadcn MCP server fits that better.
• Anyone who needs the old Magic keys. The README says old keys were reset, and new ones come from 21st.dev.

Use it with UiChemy

Magic MCP produces React and Tailwind code. If you want a WordPress site, UiChemy builds there: Composer writes real HTML, CSS and JS inside Elementor or Gutenberg, and AI to WordPress imports an existing build. Click Get Started on uichemy.com.

Connect Magic MCP (21st MCP): UI Components for AI Agents to your AI client

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

1. Get an API key

   Create a key on the 21st MCP page. The README says old Magic keys no longer work, and that a free key is available.

2. Run the CLI

   Run npx @21st-dev/cli@latest init --client cursor. The README lists cursor, claude, vscode, windsurf and codex as client values.

3. Or add it by hand

   It is a plain HTTP MCP server. Add the config above to your client and put your key in the x-api-key header.

4. Keep an old config

   npx -y @21st-dev/magic@latest API_KEY="..." still works as a stdio proxy that forwards to the 21st MCP server.

5. Use the plugin route

   The repo is also a plugin marketplace. In Claude Code run claude plugin marketplace add 21st-dev/magic-mcp, then install 21st from /plugin, and set API_KEY_21ST.

Client configuration

{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": { "x-api-key": "YOUR_21ST_API_KEY" }
    }
  }
}

Endpoints and ports

What you can do with it

• 10,000+ component catalogThe repository description says you can search more than 10,000 React and Tailwind components from the editor.
• One server, new and old namesThe 21st MCP still accepts the legacy Magic tool names and translates them, so older prompts keep working.
• AI generation when enabledUI generation with variants is listed only when AI access is on. Builder component access does not enable it.
• Publish and shareThe project lets you publish your own components, and the server lists bookmarks and team libraries.
• Plugin packagingThe repo ships as a plugin with an MCP server and a UI skill, packaged for several agent CLIs.
• Compatibility proxyExisting @21st-dev/magic entries run through a stdio proxy to the same server.

Tools it exposes

Frequently asked questions