21st-dev/magic-mcp

npx @21st-dev/cli@latest init --client cursor   # or: claude | vscode | windsurf | codex (recommended)
Manual HTTP config: { mcpServers: { 21st: { url: "https://21st.dev/api/mcp", headers: { "x-api-key": "YOUR_21ST_API_KEY" } } } }
Legacy fallback: npx -y @21st-dev/magic@latest API_KEY="..." (stdio proxy)

Usage

• •Generate a fresh API key at 21st.dev/mcp (old Magic keys no longer work anywhere)
• •Existing mcp.json entries referencing @21st-dev/magic keep working through the proxy but now speak to the 21st server
• •Connect and call tools/list to see the full toolset; legacy Magic tool names are translated (21st_magic_component_builder → generate, etc.)

Key features

• ✓Catalog search across components/themes/templates, UI generation with variants, paid code retrieval, bookmarks, team libraries, profile management
• ✓generate / get_inspiration / search_logo tools; legacy Magic tool names auto-translated so old agents keep working
• ✓API key accepted in all historical forms: positional, --API_KEY=..., /API_KEY:..., -API_KEY, or TWENTY_FIRST_API_KEY / API_KEY_21ST env vars

Best for

AI coding agents (Cursor, Claude Code, VS Code, Windsurf, Codex) that need to search and generate production-quality UI components.

Caveats

• ⚠Magic server is deprecated/superseded by the unified 21st MCP — this package is only a compatibility proxy
• ⚠Old Magic API keys were reset for security; you must generate a fresh key at 21st.dev/mcp
• ⚠HTTP server requires an API key; paid capabilities (paid code retrieval) exist