# 21st-dev/Magic-MCP [Health: Active]

**Category:** 💻 Developer Tools  
**Repository:** https://github.com/21st-dev/magic-mcp  
**GitHub Stars:** 5851  
**Views:** 16  
**Installs:** 1  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/21st-dev-magic-mcp

## Description
Create crafted UI components inspired by the best 21st.dev design engineers.

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

```json
"mcpServers": {
  "magic-mcp": {
    "command": "npx",
    "args": ["-y","@21st-dev/cli@latest"],
    "env": {
      "TWENTY_FIRST_API_KEY": "",
      "API_KEY_21ST": ""
    }
  }
}
```

**Requires environment variables:** `TWENTY_FIRST_API_KEY`, `API_KEY_21ST` — the values above are empty placeholders; fill in real credentials before running (see the repository for what each one is for).

## Documentation

## 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.

_Full upstream README: https://allmcps.com/mcp/21st-dev-magic-mcp/readme_