Log inSubmit server
Magic MCP logo

Magic MCP

by 21st-dev

Generates and searches UI components through the 21st MCP, with legacy Magic compatibility and API-key authentication.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Magic MCP

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "21st-dev-magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/cli@latest"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "YOUR_VALUE_HERE",
        "API_KEY_21ST": "YOUR_VALUE_HERE"
      }
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Values are written into the snippet above so you can paste it as is. They never leave your browser.

We couldn’t confirm it starts correctly

We ran the install command but it didn't respond within our test window — this can mean a slow first-time install rather than a real problem.

npx -y @21st-dev/cli@latest

No response to initialize.

This is an experimental automated check and can have false negatives — missing environment variables, a slow cold install, etc. It doesn’t necessarily mean something’s wrong. Last checked 1mo ago.

Overview

21st-dev/Magic-MCP MCP server provides agent access to 21st.dev for searching UI resources and generating components. The current package is a stdio compatibility proxy that forwards MCP messages to the hosted 21st MCP over HTTP. It supports legacy configurations while exposing newer capabilities such as catalog search, UI generation, themes, templates, bookmarks, and team libraries. Reach for it when an agent needs 21st.dev resources or generated interface code inside a supported MCP client.

Use cases

  • Search 21st.dev components for an interface
  • Generate UI components with design variants
  • Find themes, templates, or logo assets
  • Retrieve eligible component code
  • Browse shared team libraries and bookmarks

Key features

  • UI component generation
  • Component, theme, and template search
  • Design inspiration lookup
  • Generated UI variants
  • Legacy Magic tool-name compatibility
  • Hosted MCP forwarding over stdio

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked Today

Recent health check succeeded.

96/96 checks healthy over the last 34d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 7d ago via OSV.dev · @21st-dev/cli@latest (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars6.3kStargazers on the source repository.
npm downloads7.3kPackage downloads in the last 30 days.
Last commit1mo agoMost recent push to the default branch.
Install checkInconclusiveDidn't respond in our test window — often a slow first install.
Directory activity1 installsConfig copies, upvotes, and views on AllMCPs.

How Magic MCP works

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.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Magic MCP

For the compatibility package, run `npx -y @21st-dev/magic@latest` and provide a current API key. The README recommends initializing the unified 21st MCP with the 21st CLI instead.

Use a fresh key from 21st.dev/mcp. The package accepts historical command-line forms and the `TWENTY_FIRST_API_KEY` or `API_KEY_21ST` environment variables. Old Magic console keys no longer work.

Yes.

The current service supports catalog search, UI generation, inspiration, logo search, code retrieval, bookmarks, team libraries, profile management, and more. Call `tools/list` to inspect the available tools.

Related MCP servers

All in Architecture & Design All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewMagic MCP AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/21st-dev-magic-mcp?style=directory)](https://allmcps.com/mcp/21st-dev-magic-mcp)
HTML Embed
<a href="https://allmcps.com/mcp/21st-dev-magic-mcp"><img src="https://allmcps.com/api/badge/21st-dev-magic-mcp?style=directory" alt="Magic MCP on AllMCPs" /></a>