Magic MCP

What 21st-dev/Magic-MCP MCP server does

21st-dev/Magic-MCP MCP server connects MCP-compatible agents to the unified 21st MCP service. Its primary use is working with UI resources from 21st.dev: agents can search component, theme, and template catalogs, retrieve eligible code, generate interfaces, and request design inspiration. The current backend also includes features for bookmarks, team libraries, profile management, and generated variants.

The repository is no longer the standalone Magic backend. The published @21st-dev/magic package remains available as a compatibility layer for older client configurations, while new installations are directed toward the 21st CLI and hosted 21st MCP endpoint.

How it works

The package runs locally over stdio and forwards MCP messages to https://21st.dev/api/mcp. It therefore acts as a bridge between an MCP client and the hosted 21st service rather than implementing the catalog or generation backend itself. Existing configurations using @21st-dev/magic can continue to work after supplying a current API key.

The hosted service accepts the legacy Magic tool names and maps them to current names. For example, the old component builder maps to generate, inspiration maps to get_inspiration, and logo_search maps to search_logo. The service has more tools than the legacy set; clients can call tools/list to inspect the current tool surface.

21st-dev/Magic-MCP MCP server accepts credentials through several historical command-line forms, including a positional API_KEY, and through TWENTY_FIRST_API_KEY or API_KEY_21ST. The plugin configuration specifically expects API_KEY_21ST.

Setup and configuration

The recommended path is the 21st CLI, initialized for a supported client such as Cursor, Claude, or Windsurf. The repository also documents a direct HTTP configuration using the https://21st.dev/api/mcp URL and an x-api-key header. Obtain a fresh key from the 21st MCP setup page; keys from the old Magic console were reset and no longer work.

For legacy setups, run the published compatibility package with npx -y @21st-dev/magic@latest and provide the API key through one of its accepted forms or an environment variable. The package requires network access to the hosted MCP endpoint. Plugin users can install the 21st plugin for Cursor, Grok Bot, Grok Build, or Claude Code according to the repository instructions, then configure API_KEY_21ST.

Tools and capabilities

Depending on the current hosted toolset, agents can use 21st.dev for:

• Searching components, themes, and templates
• Generating UI and requesting variants
• Finding design inspiration
• Retrieving paid code where permitted by the service
• Searching for logos
• Managing bookmarks and team libraries
• Managing profile information

Tool names and availability may change because the compatibility package forwards requests to the unified service. Use MCP tool discovery rather than assuming that only the four historical Magic tools are available.

Limitations and notes

21st-dev/Magic-MCP MCP server is a proxy, so its behavior depends on the hosted 21st MCP and a valid current API key. The old Magic API keys are invalid. The README recommends migrating to the unified 21st CLI rather than starting a new integration around the compatibility package.

The package does not preserve the old /ui or /21 protocol triggers. Agents should use natural-language requests for searching or generation. The repository material does not specify service pricing, rate limits, supported programming frameworks, or the exact eligibility rules for paid code retrieval.