Claude MarketplacesSubmit

Magic

21st-dev/magic-mcp

Magic MCP is an AI-driven tool that enables developers to generate UI components through natural language descriptions, integrating with popular IDEs including Cursor, Windsurf, VSCode, and VSCode with Cline. The server provides tools for creating modern, customizable components from a pre-built library inspired by 21st.dev, along with real-time preview, TypeScript support, and SVGL integration for professional brand assets. It solves the problem of rapid UI development by automating component creation based on conversational prompts, allowing developers to build polished interfaces without manual coding.

GitHub stars: 4.9K
tools: 7
last updated: Feb 20, 2026

Tools

7 tools

Public tool metadata for what this MCP can expose to an agent.

generateHosted UI generation (available when AI access is enabled); replaces the legacy 21st_magic_component_builder and 21st_magic_component_refiner tools.

Hosted UI generation (available when AI access is enabled); replaces the legacy 21st_magic_component_builder and 21st_magic_component_refiner tools.

No parameter schema in public metadata yet.

get_inspirationReplaces the legacy 21st_magic_component_inspiration tool.

Replaces the legacy 21st_magic_component_inspiration tool.

No parameter schema in public metadata yet.

search_logoReplaces the legacy logo_search tool; takes one query per call.

Replaces the legacy logo_search tool; takes one query per call.

No parameter schema in public metadata yet.

searchSearches the 21st catalog for components.

Searches the 21st catalog for components.

No parameter schema in public metadata yet.

get_componentRetrieves a component found via search, to adapt its code with your own coding agent.

Retrieves a component found via search, to adapt its code with your own coding agent.

No parameter schema in public metadata yet.

iterate_generationHosted generation iteration (available when AI access is enabled).

Hosted generation iteration (available when AI access is enabled).

No parameter schema in public metadata yet.

get_usageReports usage and whether AI generation is enabled for the account via aiGenerationEnabled.

Reports usage and whether AI generation is enabled for the account via aiGenerationEnabled.

No parameter schema in public metadata yet.

Sponsors

Promote your product hereReach 125k+ visitors monthly Promote your product hereReach 125k+ visitors monthly

Agent CaffeineSponsoredClose your lid, come back to finished work

SnugSponsoredThe clipboard manager for the AI era Promote your product hereReach 125k+ visitors monthly

WaxSponsoredBlock anything with supervision, without erasing your iPhone Promote your product hereReach 125k+ visitors monthly

knobsSponsoredSee your site on any phone, any day, in any language

Readme

Magic MCP → 21st MCP

Magic MCP is now the 21st MCP. The Magic MCP server (@21st-dev/magic) has been replaced by the unified 21st MCP, installed via the 21st CLI — setup at 21st.dev/mcp. This package remains published as a thin compatibility proxy so old configs keep working.

Install the 21st MCP (recommended)

npx @21st-dev/cli@latest init --client cursor   # or: claude | vscode | windsurf | codex

Or add it manually — it is a plain HTTP MCP server:

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

Get an API key at 21st.dev/mcp.

Old Magic API keys were reset. Keys issued by the old Magic console no longer work anywhere. Generate a fresh key at 21st.dev/mcp.

What this package does now (v0.2.0+)

View the full README on GitHub

Details

Repository: github.com/21st-dev/magic-mcp