Migration

Magic MCP is now 21st MCP. Old Magic keys were reset; generate a fresh key before reconnecting.

Source-checked migration guide · July 27, 2026

21st MCP

Formerly Magic MCP — install, migrate, and use it safely

21st.dev has consolidated Magic into a unified MCP for finding, installing, generating, publishing, and managing UI components. The old package now acts as a compatibility proxy, not the preferred setup path.

Current: 21st MCPLegacy compatibleHTTP + CLI

Official product ↗npm migration notice ↗Historical repository ↗

Direct answer

Is 21st MCP the right setup now?

Use the current product when you want one MCP surface for component discovery and delivery. Keep the legacy package only as a temporary compatibility bridge.

Recommended

Migrate

Install the current 21st MCP through the latest CLI or connect directly to the HTTP endpoint. Create a fresh API key and treat @21st-dev/magic as a legacy proxy, not the canonical product.

Strong fit

You want search, install, generate, publish, and management in one MCP workflow.

Limited fit

You only need a static component library and do not want an authenticated MCP connection.

Avoid the legacy default

You are starting fresh but still plan to copy an old Magic command or reuse an old key.

Free

Component installs

2 per day

21st AI

Uses credits

Authentication

Fresh key

Migration map

What changed from Magic MCP to 21st MCP

Preserve the old name for search discovery while making the current identity, installation, transport, credential, and capability boundaries unambiguous.

FieldLegacy MagicCurrent 21st MCP

Identity

Legacy

Magic MCP

Current

21st MCP; “Magic” remains only as the former name.

Setup

Legacy

Legacy package or old install command

Current

npx @21st-dev/cli@latest init --client <client>

Transport

Legacy

Local stdio-only package entry

Current

Direct HTTP MCP endpoint: https://21st.dev/api/mcp

API key

Legacy

Existing Magic key

Current

Generate a fresh 21st.dev key; old Magic keys were reset.

Capability

Legacy

Generation-focused Magic tools

Current

Search, install, generate, publish, manage, and more.

Editorial boundary

Preserve “Magic MCP” as the migration and search alias, never as the current product name.

Install

Choose one current setup path

Use the CLI first. Use HTTP for explicit manual or CI configuration. Keep the old package only when an existing client still depends on it.

Recommended

Initialize by client

The current CLI configures the selected client and connects it to 21st MCP.

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

Also supports claude, vscode, windsurf, and codex in the current migration notice.

Manual / CI

Connect to the HTTP MCP

Use the direct endpoint and pass a fresh API key through the x-api-key header.

url: https://21st.dev/api/mcp
x-api-key: <FRESH_KEY>

Useful for explicit configuration, automation, and generic MCP clients.

Legacy

Compatibility proxy only

@21st-dev/magic remains available as a thin stdio bridge for existing setups.

Do not reuse an old key.
Migrate when the client allows it.

Do not choose the legacy package as the default path for a new setup.

Capabilities + boundaries

What the unified MCP adds — and what it does not prove

A successful connection proves transport and authentication. It does not prove component quality, production suitability, licensing, or safe execution in your project.

Unified workflow

One surface, five workflow stages

Find components, themes, templates, and SVG logos.

Install

Bring selected component code and dependencies into a project.

Generate

Use 21st AI for deliberate UI variants where appropriate.

Publish

Turn reviewed work into reusable components and templates.

Manage

Maintain bookmarks, team libraries, profile data, and published work.

Safe rollout

Connect narrowly, verify, then expand

Create a fresh key

Treat every pre-migration Magic key as invalid.

Choose one client

Start with one editor or agent rather than changing every environment.

Test search first

Confirm low-risk discovery before installing or generating code.

Review imported output

Inspect dependencies, licenses, accessibility, and project fit.

Rotate and remove

Revoke unused credentials and remove the legacy bridge when stable.

Current limits

Search is free. Component installs are limited to 2 per day. 21st AI uses credits. These are current product limits, not editorial estimates.

Migration FAQ

21st MCP questions, answered directly

Is Magic MCP now called 21st MCP?

Yes. The current npm migration notice says Magic MCP has been replaced by the unified 21st MCP. Keep “Magic MCP” as a discovery and migration alias, but use 21st MCP as the current product name.

How should I install 21st MCP now?

For a new setup, use the latest 21st CLI with its init --client flow, or connect a compatible MCP client directly to https://21st.dev/api/mcp. Check the current 21st MCP setup page for the exact client-specific instructions.

Do old Magic MCP API keys still work?

No. The official migration notice says old Magic API keys were reset. Generate a fresh key through the current 21st MCP setup flow before reconnecting.

Does the @21st-dev/magic package still work?

It remains published as a thin compatibility proxy for existing configurations. It forwards MCP messages to the current 21st MCP server, but it is not the recommended starting point for a new installation.

What can 21st MCP do?

The current product materials describe a unified workflow for component and template search, installation, AI generation, publishing, bookmarks, team libraries, and profile management. Available tools and limits can change, so verify them against the current product documentation.

What do the free limits cover?

The current official MCP documentation says search is free, free access includes two component installs per day, and 21st AI uses credits. Paid plans can change those limits.

Primary-source ledger

Checked against the current product and migration notice

Last checked July 27, 2026. The historical repository is retained as context, not treated as the canonical current setup guide.

Current product

21st MCP setup and API keys

21st.dev/mcp

Migration notice

@21st-dev/magic on npm

CLI, endpoint, key reset

Historical context

Magic MCP GitHub repository

Legacy identity and implementation history

Agent Skills Hub

Evidence-first profiles · visible source dates · migration aliases preserved

About Methodology Submit a Skill